@extends('layouts.customer')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <a href="{{ route('customer.dashboard') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-[#0D6B58] mb-6 transition">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Dashboard
    </a>

    <h1 class="text-2xl font-bold text-gray-900 mb-8">Transfer Money</h1>

    @if($errors->any())
    <div class="bg-rose-50 border border-rose-200 rounded-xl p-4 mb-6">
        <div class="flex">
            <svg class="w-5 h-5 text-rose-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div class="ml-3">
                @foreach($errors->all() as $error)
                <p class="text-sm text-rose-700">{{ $error }}</p>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sm:p-8">
        <form method="POST" action="{{ route('customer.transfer.preview') }}">
            @csrf
            @method('POST')

            {{-- Source Account --}}
            <div class="mb-6">
                <label for="source_account_id" class="block text-sm font-medium text-gray-700 mb-2">From Account</label>
                <select name="source_account_id" id="source_account_id" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58] text-sm" required>
                    <option value="">Select account</option>
                    @foreach($accounts as $account)
                    <option value="{{ $account->id }}" {{ old('source_account_id') == $account->id ? 'selected' : '' }}>
                        {{ ucfirst($account->type) }} (****{{ substr($account->account_number, -4) }}) - ${{ number_format($account->balance, 2) }}
                    </option>
                    @endforeach
                </select>
                @error('source_account_id')
                <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Transfer Type --}}
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-3">Transfer Type</label>
                <div class="flex space-x-4">
                    <label class="flex items-center cursor-pointer">
                        <input type="radio" name="transfer_type" value="internal" class="w-4 h-4 text-[#0D6B58] focus:ring-[#0D6B58]" {{ old('transfer_type', 'internal') === 'internal' ? 'checked' : '' }} onchange="toggleTransferType()">
                        <span class="ml-2 text-sm text-gray-700">Internal Transfer</span>
                    </label>
                    <label class="flex items-center cursor-pointer">
                        <input type="radio" name="transfer_type" value="external" class="w-4 h-4 text-[#0D6B58] focus:ring-[#0D6B58]" {{ old('transfer_type') === 'external' ? 'checked' : '' }} onchange="toggleTransferType()">
                        <span class="ml-2 text-sm text-gray-700">External Bank</span>
                    </label>
                </div>
            </div>

            {{-- Internal Transfer --}}
            <div id="internal-fields" class="mb-6">
                <label for="recipient_account" class="block text-sm font-medium text-gray-700 mb-2">Recipient Account Number</label>
                <div class="flex space-x-2">
                    <input type="text" name="recipient_account" id="recipient_account" value="{{ old('recipient_account') }}" placeholder="Enter account number" class="flex-1 px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58] text-sm" required oninput="validateAccount()">
                    <button type="button" onclick="validateAccount()" class="px-4 py-3 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition">Verify</button>
                </div>
                <div id="recipient-info" class="mt-2 hidden">
                    <div class="flex items-center text-sm text-emerald-600">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <span id="recipient-name"></span>
                    </div>
                </div>
                @error('recipient_account')
                <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- External Bank Transfer --}}
            <div id="external-fields" class="mb-6 hidden space-y-4">
                <div>
                    <label for="bank_name" class="block text-sm font-medium text-gray-700 mb-2">Bank Name</label>
                    <select name="bank_name" id="bank_name" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58] text-sm">
                        <option value="">Select bank</option>
                        @foreach($banks ?? [] as $bank)
                        <option value="{{ $bank }}" {{ old('bank_name') === $bank ? 'selected' : '' }}>{{ $bank }}</option>
                        @endforeach
                    </select>
                    @error('bank_name')
                    <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="external_account_number" class="block text-sm font-medium text-gray-700 mb-2">Account Number</label>
                    <input type="text" name="external_account_number" id="external_account_number" value="{{ old('external_account_number') }}" placeholder="Enter account number" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58] text-sm">
                    @error('external_account_number')
                    <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="recipient_name" class="block text-sm font-medium text-gray-700 mb-2">Recipient Name</label>
                    <input type="text" name="recipient_name" id="recipient_name" value="{{ old('recipient_name') }}" placeholder="Recipient name (auto-filled)" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58] text-sm">
                    @error('recipient_name')
                    <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            {{-- Amount --}}
            <div class="mb-6">
                <label for="amount" class="block text-sm font-medium text-gray-700 mb-2">Amount</label>
                <div class="relative">
                    <span class="absolute left-4 top-3 text-gray-500 text-sm font-medium">$</span>
                    <input type="number" name="amount" id="amount" value="{{ old('amount') }}" step="0.01" min="0.01" placeholder="0.00" class="w-full pl-8 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58] text-sm" required>
                </div>
                @error('amount')
                <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Description --}}
            <div class="mb-6">
                <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description / Reference</label>
                <textarea name="description" id="description" rows="3" placeholder="What is this transfer for?" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58] text-sm">{{ old('description') }}</textarea>
                @error('description')
                <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Fee Information --}}
            <div class="bg-gray-50 rounded-lg p-4 mb-6">
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-500">Transfer Fee</span>
                    <span class="font-medium text-gray-900">${{ number_format($transferFee ?? 0, 2) }}</span>
                </div>
                <div class="flex items-center justify-between text-sm mt-1">
                    <span class="text-gray-500">Total (Amount + Fee)</span>
                    <span class="font-semibold text-[#0D6B58]" id="totalAmount">$0.00</span>
                </div>
            </div>

            {{-- Beneficiaries --}}
            <div class="mb-6">
                <button type="button" onclick="document.getElementById('beneficiaries-modal').classList.remove('hidden')" class="text-sm text-[#0D6B58] hover:underline font-medium">
                    Select from Beneficiaries
                </button>
            </div>

            {{-- Submit --}}
            <button type="submit" class="w-full py-3 bg-[#0D6B58] text-white font-semibold rounded-lg hover:bg-[#0A5A49] transition">
                Preview Transfer
            </button>
        </form>
    </div>

    {{-- Beneficiaries Modal --}}
    <div id="beneficiaries-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="document.getElementById('beneficiaries-modal').classList.add('hidden')"></div>
            <div class="inline-block w-full max-w-md p-6 my-8 text-left align-bottom transition-all transform bg-white rounded-xl shadow-xl">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">Select Beneficiary</h3>
                    <button onclick="document.getElementById('beneficiaries-modal').classList.add('hidden')" class="p-1 rounded-lg hover:bg-gray-100">
                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
                <div class="space-y-2 max-h-60 overflow-y-auto">
                    @forelse($beneficiaries ?? [] as $beneficiary)
                    <button type="button" onclick="selectBeneficiary('{{ $beneficiary->account_number }}', '{{ $beneficiary->name }}')" class="w-full text-left p-3 rounded-lg border border-gray-100 hover:border-[#0D6B58]/30 hover:bg-[#0D6B58]/5 transition">
                        <p class="text-sm font-medium text-gray-900">{{ $beneficiary->name }}</p>
                        <p class="text-xs text-gray-500">{{ $beneficiary->bank_name }} &middot; {{ $beneficiary->account_number }}</p>
                    </button>
                    @empty
                    <p class="text-sm text-gray-500 text-center py-4">No saved beneficiaries</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

</div>

<script>
function toggleTransferType() {
    const type = document.querySelector('input[name="transfer_type"]:checked').value;
    document.getElementById('internal-fields').classList.toggle('hidden', type !== 'internal');
    document.getElementById('external-fields').classList.toggle('hidden', type !== 'external');
}

function selectBeneficiary(accountNumber, name) {
    document.getElementById('recipient_account').value = accountNumber;
    document.getElementById('recipient-info').classList.remove('hidden');
    document.getElementById('recipient-name').textContent = name;
    document.getElementById('beneficiaries-modal').classList.add('hidden');
}

function validateAccount() {
    const account = document.getElementById('recipient_account').value;
    if (account.length >= 10) {
        fetch('/api/validate-account/' + account)
            .then(r => r.json())
            .then(data => {
                if (data.valid) {
                    document.getElementById('recipient-info').classList.remove('hidden');
                    document.getElementById('recipient-name').textContent = data.name;
                }
            });
    }
}

document.getElementById('amount').addEventListener('input', function() {
    const amount = parseFloat(this.value) || 0;
    const fee = {{ $transferFee ?? 0 }};
    document.getElementById('totalAmount').textContent = '$' + (amount + fee).toFixed(2);
});

document.addEventListener('DOMContentLoaded', toggleTransferType);
</script>
@endsection