<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center">
            <a href="{{ route('transfers.index') }}" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 me-4">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                {{ __('New Transfer') }}
            </h2>
        </div>
    </x-slot>

    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
            <form action="{{ route('transfers.store') }}" method="POST">
                @csrf

                <div class="space-y-6">
                    <!-- From Account -->
                    <div>
                        <x-input-label for="from_account_id" :value="__('From Account')" />
                        <select id="from_account_id" name="from_account_id"
                                class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                required>
                            <option value="">Select source account...</option>
                            @foreach($accounts ?? [] as $account)
                                <option value="{{ $account->id }}"
                                        data-balance="{{ $account->current_balance }}"
                                        data-currency="{{ $account->currency?->code }}"
                                        {{ old('from_account_id') == $account->id ? 'selected' : '' }}>
                                    {{ $account->name }} ({{ $account->currency?->code }} {{ number_format($account->current_balance, 0, ',', '.') }})
                                </option>
                            @endforeach
                        </select>
                        <x-input-error class="mt-2" :messages="$errors->get('from_account_id')" />
                    </div>

                    <!-- To Account -->
                    <div>
                        <x-input-label for="to_account_id" :value="__('To Account')" />
                        <select id="to_account_id" name="to_account_id"
                                class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                required>
                            <option value="">Select destination account...</option>
                            @foreach($accounts ?? [] as $account)
                                <option value="{{ $account->id }}"
                                        data-currency="{{ $account->currency?->code }}"
                                        {{ old('to_account_id') == $account->id ? 'selected' : '' }}>
                                    {{ $account->name }} ({{ $account->currency?->code }})
                                </option>
                            @endforeach
                        </select>
                        <x-input-error class="mt-2" :messages="$errors->get('to_account_id')" />
                    </div>

                    <!-- Amount -->
                    <div>
                        <x-input-label for="amount" :value="__('Amount')" />
                        <div class="mt-1 relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">Rp</span>
                            <input type="number" name="amount" id="amount" step="0.01" min="0"
                                   class="pl-10 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                   value="{{ old('amount') }}" required placeholder="0">
                        </div>
                        <x-input-error class="mt-2" :messages="$errors->get('amount')" />
                    </div>

                    <!-- Exchange Rate (for different currencies) -->
                    <div id="exchange_rate_section" class="hidden">
                        <x-input-label for="exchange_rate" :value="__('Exchange Rate')" />
                        <div class="mt-1 flex items-center space-x-2">
                            <span class="text-gray-500">1</span>
                            <span id="from_currency" class="font-medium">IDR</span>
                            <span class="text-gray-500">=</span>
                            <input type="number" name="exchange_rate" id="exchange_rate" step="0.000001"
                                   class="w-32 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                   value="{{ old('exchange_rate', 1) }}">
                            <span id="to_currency" class="font-medium">IDR</span>
                        </div>
                    </div>

                    <!-- Fee -->
                    <div>
                        <x-input-label for="fee" :value="__('Transfer Fee (optional)')" />
                        <div class="mt-1 relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">Rp</span>
                            <input type="number" name="fee" id="fee" step="0.01" min="0"
                                   class="pl-10 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                   value="{{ old('fee', 0) }}" placeholder="0">
                        </div>
                    </div>

                    <!-- Transfer Date & Time -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <x-input-label for="date" :value="__('Tanggal')" />
                            <x-text-input id="date" name="date" type="date" class="mt-1 block w-full"
                                          :value="old('date', now()->format('Y-m-d'))" required />
                            <x-input-error class="mt-2" :messages="$errors->get('date')" />
                        </div>
                        <div>
                            <x-input-label for="time" :value="__('Waktu')" />
                            <x-text-input id="time" name="time" type="time" step="1" class="mt-1 block w-full"
                                          :value="old('time', now()->format('H:i:s'))" />
                            <p class="mt-1 text-xs text-gray-400">Format: Jam:Menit:Detik</p>
                            <x-input-error class="mt-2" :messages="$errors->get('time')" />
                        </div>
                    </div>

                    <!-- Description -->
                    <div>
                        <x-input-label for="description" :value="__('Description (optional)')" />
                        <x-text-input id="description" name="description" type="text" class="mt-1 block w-full"
                                      :value="old('description')" placeholder="e.g., Monthly savings" />
                    </div>
                </div>

                <div class="mt-8 flex items-center justify-end space-x-4">
                    <a href="{{ route('transfers.index') }}" class="text-gray-600 dark:text-gray-400">Cancel</a>
                    <x-primary-button>
                        <i class="fas fa-exchange-alt me-2"></i>Transfer
                    </x-primary-button>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
    <script>
        const fromAccount = document.getElementById('from_account_id');
        const toAccount = document.getElementById('to_account_id');
        const exchangeSection = document.getElementById('exchange_rate_section');

        function checkCurrencies() {
            const fromOption = fromAccount.selectedOptions[0];
            const toOption = toAccount.selectedOptions[0];

            if (fromOption && toOption) {
                const fromCurrency = fromOption.dataset.currency;
                const toCurrency = toOption.dataset.currency;

                if (fromCurrency && toCurrency && fromCurrency !== toCurrency) {
                    exchangeSection.classList.remove('hidden');
                    document.getElementById('from_currency').textContent = fromCurrency;
                    document.getElementById('to_currency').textContent = toCurrency;
                } else {
                    exchangeSection.classList.add('hidden');
                }
            }
        }

        fromAccount.addEventListener('change', checkCurrencies);
        toAccount.addEventListener('change', checkCurrencies);
    </script>
    @endpush
</x-app-layout>
