@extends('layouts.responsive')

@section('title', 'Bank Transfer')

@section('content')
<div class="space-y-6 pb-20">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">Bank Transfer</h1>
            <p class="text-gray-400 text-sm">Send money to any Nigerian bank account</p>
        </div>
        <a href="{{ route('transfer.p2p') }}" class="text-primary-400 hover:text-primary-300 text-sm">
            <i class="fas fa-arrow-left mr-1"></i> Back to P2P
        </a>
    </div>

    <!-- Bank Transfer Form -->
    <div class="bg-dark-800/50 border border-dark-600/50 rounded-xl p-6">
        <div class="flex items-center mb-6">
            <div class="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center mr-4">
                <i class="fas fa-university text-green-400 text-xl"></i>
            </div>
            <div>
                <h3 class="text-white font-semibold">Send to Bank Account</h3>
                <p class="text-gray-400 text-sm">Transfer to any Nigerian bank</p>
            </div>
        </div>

        <form method="POST" action="{{ route('transfer.bank') }}" class="space-y-4">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="bank_code" class="form-label">
                        Select Bank
                    </label>
                    <select id="bank_code" name="bank_code" 
                            class="form-input @error('bank_code') border-red-500 @enderror" 
                            required>
                        <option value="">Choose Bank</option>
                        <option value="044">Access Bank</option>
                        <option value="014">Afribank Nigeria Plc</option>
                        <option value="023">Citibank Nigeria</option>
                        <option value="063">Diamond Bank</option>
                        <option value="050">Ecobank Nigeria</option>
                        <option value="084">Enterprise Bank</option>
                        <option value="070">Fidelity Bank</option>
                        <option value="011">First Bank of Nigeria</option>
                        <option value="214">First City Monument Bank</option>
                        <option value="058">Guaranty Trust Bank</option>
                        <option value="030">Heritage Bank</option>
                        <option value="082">Keystone Bank</option>
                        <option value="076">Skye Bank</option>
                        <option value="221">Stanbic IBTC Bank</option>
                        <option value="068">Standard Chartered Bank</option>
                        <option value="232">Sterling Bank</option>
                        <option value="032">Union Bank of Nigeria</option>
                        <option value="033">United Bank For Africa</option>
                        <option value="215">Unity Bank</option>
                        <option value="035">Wema Bank</option>
                        <option value="057">Zenith Bank</option>
                    </select>
                    @error('bank_code')
                        <p class="mt-2 text-sm text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                        </p>
                    @enderror
                </div>

                <div>
                    <label for="account_number" class="form-label">
                        Account Number
                    </label>
                    <input id="account_number" type="text" name="account_number" 
                           value="{{ old('account_number') }}" 
                           class="form-input @error('account_number') border-red-500 @enderror" 
                           placeholder="1234567890"
                           maxlength="10" pattern="[0-9]{10}"
                           required>
                    @error('account_number')
                        <p class="mt-2 text-sm text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                        </p>
                    @enderror
                </div>
            </div>

            <div id="account-verification" class="hidden bg-blue-500/10 border border-blue-500/30 rounded-lg p-4">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-blue-400 mr-3"></i>
                    <div>
                        <p class="text-blue-300 font-medium" id="account-name">Account Name Will Appear Here</p>
                        <p class="text-blue-400 text-sm">Account verified successfully</p>
                    </div>
                </div>
            </div>

            <div>
                <label for="amount" class="form-label">
                    Amount (₦)
                </label>
                <input id="amount" type="number" name="amount" 
                       value="{{ old('amount') }}" 
                       class="form-input @error('amount') border-red-500 @enderror" 
                       placeholder="1000.00"
                       min="100" max="100000" step="0.01"
                       required>
                @error('amount')
                    <p class="mt-2 text-sm text-red-400 flex items-center">
                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                    </p>
                @enderror
                <p class="mt-1 text-sm text-gray-400">Min: ₦100, Max: ₦100,000</p>
            </div>

            <div>
                <label for="description" class="form-label">
                    Description (Optional)
                </label>
                <input id="description" type="text" name="description" 
                       value="{{ old('description') }}" 
                       class="form-input @error('description') border-red-500 @enderror" 
                       placeholder="What's this for?"
                       maxlength="255">
                @error('description')
                    <p class="mt-2 text-sm text-red-400 flex items-center">
                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                    </p>
                @enderror
            </div>

            <!-- Transaction Fee Notice -->
            <div class="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4">
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-yellow-400 text-lg mt-0.5 mr-3"></i>
                    <div>
                        <h4 class="text-yellow-400 font-semibold mb-1">Transaction Fee</h4>
                        <p class="text-yellow-300 text-sm">
                            Bank transfers have a fee of ₦10 per transaction. 
                            The fee will be deducted from your wallet balance.
                        </p>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-full py-4 text-base font-semibold">
                <i class="fas fa-university mr-2"></i>
                Send to Bank
            </button>
        </form>
    </div>

    <!-- Quick Amounts -->
    <div class="bg-dark-800/50 border border-dark-600/50 rounded-xl p-6">
        <h3 class="text-white font-semibold mb-4">Quick Amounts</h3>
        <div class="grid grid-cols-3 gap-3">
            <button onclick="setAmount(1000)" class="bg-dark-700/50 hover:bg-dark-600/50 border border-dark-600/50 rounded-lg py-3 px-4 text-white text-sm font-medium transition-colors">
                ₦1,000
            </button>
            <button onclick="setAmount(2000)" class="bg-dark-700/50 hover:bg-dark-600/50 border border-dark-600/50 rounded-lg py-3 px-4 text-white text-sm font-medium transition-colors">
                ₦2,000
            </button>
            <button onclick="setAmount(5000)" class="bg-dark-700/50 hover:bg-dark-600/50 border border-dark-600/50 rounded-lg py-3 px-4 text-white text-sm font-medium transition-colors">
                ₦5,000
            </button>
            <button onclick="setAmount(10000)" class="bg-dark-700/50 hover:bg-dark-600/50 border border-dark-600/50 rounded-lg py-3 px-4 text-white text-sm font-medium transition-colors">
                ₦10,000
            </button>
            <button onclick="setAmount(20000)" class="bg-dark-700/50 hover:bg-dark-600/50 border border-dark-600/50 rounded-lg py-3 px-4 text-white text-sm font-medium transition-colors">
                ₦20,000
            </button>
            <button onclick="setAmount(50000)" class="bg-dark-700/50 hover:bg-dark-600/50 border border-dark-600/50 rounded-lg py-3 px-4 text-white text-sm font-medium transition-colors">
                ₦50,000
            </button>
        </div>
    </div>

    <!-- Transfer Information -->
    <div class="bg-gray-500/10 border border-gray-500/30 rounded-xl p-4">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-gray-400 text-lg"></i>
            </div>
            <div class="ml-3">
                <h4 class="text-gray-400 font-semibold mb-2">Bank Transfer Information</h4>
                <ul class="text-gray-300 text-sm space-y-1">
                    <li>• Transfers typically complete within 2-5 minutes</li>
                    <li>• Account verification happens automatically</li>
                    <li>• Maximum transfer limit: ₦100,000 per transaction</li>
                    <li>• Daily transfer limit: ₦500,000</li>
                </ul>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function setAmount(amount) {
    document.getElementById('amount').value = amount;
}

// Account verification simulation
document.getElementById('account_number').addEventListener('blur', function() {
    const accountNumber = this.value;
    const bankCode = document.getElementById('bank_code').value;
    
    if (accountNumber.length === 10 && bankCode) {
        // Simulate account verification
        setTimeout(() => {
            const accountVerification = document.getElementById('account-verification');
            const accountName = document.getElementById('account-name');
            
            // Mock account name generation
            const mockNames = [
                'JOHN DOE SMITH',
                'MARY JOHNSON BROWN',
                'DAVID WILSON DAVIS',
                'SARAH MILLER GARCIA',
                'MICHAEL JONES MARTINEZ'
            ];
            
            const randomName = mockNames[Math.floor(Math.random() * mockNames.length)];
            // TODO: Replace this mock with a real bank account verification API call.
            // Configurable mock account data for development/testing
            const mockAccounts = {
                '1234567890': 'ADEBAYO OLUWASEUN',
                '0987654321': 'CHINEDU OKORIE',
                '1122334455': 'FATIMA BELLO',
                '5566778899': 'EMEKA NWANKWO'
            };
            
            const name = mockAccounts[accountNumber] || 'ACCOUNT NAME NOT FOUND';
            accountName.textContent = name;
            accountVerification.classList.remove('hidden');
        }, 1000);
    }
});

// Hide verification when account number changes
document.getElementById('account_number').addEventListener('input', function() {
    document.getElementById('account-verification').classList.add('hidden');
});

document.getElementById('bank_code').addEventListener('change', function() {
    document.getElementById('account-verification').classList.add('hidden');
});
</script>
@endpush
@endsection