@extends('layout.main')

@section('content')
<div class="container grid px-6 mx-auto">
    <h4 class="mb-4 mt-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
        {{ isset($capitalRecord->id) ? 'Edit Capital Record' : 'Add New Capital Record' }}
    </h4>
    <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <form
            action="{{ isset($capitalRecord->id) ? route('financial-statements.capital-records.update', $capitalRecord) : route('financial-statements.capital-records.store') }}"
            method="POST">
            @csrf
            @if (isset($capitalRecord->id))
                @method('PUT')
            @endif

            <div class="grid gap-6 mb-6 md:grid-cols-2">
                <!-- Transaction Type -->
                <label for="type" class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">*Transaction Type</span>
                    <select id="type" name="type"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('type') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                        <option value="">Select Transaction Type</option>
                        <option value="capital_injection" @selected(old('type', $capitalRecord?->type) == 'capital_injection')>
                            Capital Injection
                        </option>
                        <option value="withdrawal" @selected(old('type', $capitalRecord?->type) == 'withdrawal')>
                            Capital Withdrawal
                        </option>
                    </select>
                    <x-form.error field='type' />
                </label>

                <!-- Amount -->
                <x-form.input type="number" label="Amount" name="amount"
                    value="{{ old('amount', $capitalRecord?->amount) }}" placeholder="0.00" step="0.01" min="0"
                    required />

                <!-- Date -->
                <x-form.input type="date" label="Transaction Date" name="date"
                    value="{{ old('date', $capitalRecord?->date?->format('Y-m-d')) }}" required />

                <!-- Description -->
                <div class="md:col-span-2">
                    <x-form.textarea name="description" label="Description"
                        value="{{ old('description', $capitalRecord?->description) }}"
                        placeholder="Enter transaction description or notes" rows="3" />
                </div>
            </div>

            <!-- Transaction Type Info -->
            <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900 rounded-lg border border-blue-200 dark:border-blue-700">
                <h5 class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">Transaction Types:</h5>
                <div class="grid gap-2 md:grid-cols-2 text-sm">
                    <div class="flex items-start">
                        <i class="fa fa-plus-circle text-green-600 dark:text-green-400 mr-2 mt-1"></i>
                        <div>
                            <span class="font-medium text-green-700 dark:text-green-300">Capital Injection:</span>
                            <span class="text-blue-700 dark:text-blue-300"> Owner adds money to the business</span>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <i class="fa fa-minus-circle text-red-600 dark:text-red-400 mr-2 mt-1"></i>
                        <div>
                            <span class="font-medium text-red-700 dark:text-red-300">Capital Withdrawal:</span>
                            <span class="text-blue-700 dark:text-blue-300"> Owner takes money from the business</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-end mt-6 gap-4">
                <x-link route="{{ route('financial-statements.capital-records.index') }}" class="bg-red-600" isButton>
                    {{ __('Cancel') }}
                </x-link>
                <x-button label="Save Capital Record" type="submit" />
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const typeSelect = document.getElementById('type');
            const amountInput = document.querySelector('input[name="amount"]');

            // Update placeholder and styling based on type selection
            typeSelect.addEventListener('change', function () {
                if (this.value === 'capital_injection') {
                    amountInput.placeholder = 'Enter injection amount';
                    amountInput.parentElement.querySelector('label span').innerHTML = '*Injection Amount';
                } else if (this.value === 'withdrawal') {
                    amountInput.placeholder = 'Enter withdrawal amount';
                    amountInput.parentElement.querySelector('label span').innerHTML = '*Withdrawal Amount';
                } else {
                    amountInput.placeholder = '0.00';
                    amountInput.parentElement.querySelector('label span').innerHTML = '*Amount';
                }
            });

            // Set initial state if editing
            if (typeSelect.value) {
                typeSelect.dispatchEvent(new Event('change'));
            }
        });
    </script>
@endpush