@extends('layouts.responsive')

@section('title', 'Send Money')

@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">Send Money</h1>
            <p class="text-gray-400 text-sm">Transfer money to other {{ setting('business.name', 'AbokiPay') }} users or any bank account</p>
        </div>
    </div>

    <!-- Transfer Options -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- P2P Transfer -->
        <div class="bg-dark-800/50 border border-dark-600/50 rounded-xl p-6">
            <div class="flex items-center mb-4">
                <div class="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-user-friends text-blue-400 text-xl"></i>
                </div>
                <div>
                    <h3 class="text-white font-semibold">{{ setting('business.name', 'AbokiPay') }} User</h3>
                    <p class="text-gray-400 text-sm">Send to phone number or email</p>
                </div>
            </div>
            <form method="POST" action="{{ route('transfer.p2p') }}" class="space-y-4">
                @csrf
                
                <div>
                    <label for="recipient_identifier" class="form-label">
                        Phone Number or Email
                    </label>
                    <input id="recipient_identifier" type="text" name="recipient_identifier" 
                           value="{{ old('recipient_identifier') }}" 
                           class="form-input @error('recipient_identifier') border-red-500 @enderror" 
                           placeholder="08012345678 or user@example.com"
                           required>
                    @error('recipient_identifier')
                        <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="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
                    
                    <!-- Quick Amount Buttons -->
                    <div class="mt-3">
                        <p class="text-sm text-gray-400 mb-2">Quick amounts:</p>
                        <div class="grid grid-cols-4 gap-2">
                            <button type="button" onclick="setAmount(1000)" class="px-3 py-2 text-sm bg-dark-700 text-gray-300 rounded-lg hover:bg-dark-600 transition-colors">₦1K</button>
                            <button type="button" onclick="setAmount(5000)" class="px-3 py-2 text-sm bg-dark-700 text-gray-300 rounded-lg hover:bg-dark-600 transition-colors">₦5K</button>
                            <button type="button" onclick="setAmount(10000)" class="px-3 py-2 text-sm bg-dark-700 text-gray-300 rounded-lg hover:bg-dark-600 transition-colors">₦10K</button>
                            <button type="button" onclick="setAmount(20000)" class="px-3 py-2 text-sm bg-dark-700 text-gray-300 rounded-lg hover:bg-dark-600 transition-colors">₦20K</button>
                        </div>
                    </div>
                    
                    <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>

                <div>
                    <label for="transaction_pin" class="form-label">
                        Transaction PIN <span class="text-red-500">*</span>
                    </label>
                    <input id="transaction_pin" type="password" name="transaction_pin" 
                           class="form-input @error('transaction_pin') border-red-500 @enderror" 
                           placeholder="Enter your 4-digit PIN"
                           maxlength="4" pattern="[0-9]{4}"
                           required>
                    @error('transaction_pin')
                        <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">Enter your 4-digit transaction PIN</p>
                </div>

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

        <!-- Bank Transfer -->
        <div class="bg-dark-800/50 border border-dark-600/50 rounded-xl p-6">
            <div class="flex items-center mb-4">
                <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">Bank Account</h3>
                    <p class="text-gray-400 text-sm">Send to any Nigerian bank</p>
                </div>
            </div>
            <a href="{{ route('transfer.bank') }}" class="btn btn-secondary w-full py-4 text-base font-semibold text-center block">
                <i class="fas fa-university mr-2"></i>
                Bank Transfer
            </a>
        </div>
    </div>

    <!-- Recent Recipients -->
    <div class="bg-dark-800/50 border border-dark-600/50 rounded-xl p-6">
        <h3 class="text-white font-semibold mb-4">Recent Recipients</h3>
        <div class="text-center py-8">
            <i class="fas fa-users text-gray-500 text-2xl mb-2"></i>
            <p class="text-gray-400 text-sm">No recent recipients yet</p>
            <p class="text-gray-500 text-xs">People you send money to will appear here</p>
        </div>
    </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 Limits -->
    <div class="bg-blue-500/10 border border-blue-500/30 rounded-xl p-4">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-400 text-lg"></i>
            </div>
            <div class="ml-3">
                <h4 class="text-blue-400 font-semibold mb-2">Transfer Limits</h4>
                <ul class="text-blue-300 text-sm space-y-1">
                    <li>• Daily limit: ₦500,000</li>
                    <li>• Single transaction: ₦100,000</li>
                    <li>• Minimum amount: ₦100</li>
                    <li>• Transfers between {{ setting('business.name', 'AbokiPay') }} users are free</li>
                </ul>
            </div>
        </div>
    </div>
</div>

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

// Restrict PIN input to numbers only
document.addEventListener('DOMContentLoaded', function() {
    const pinInput = document.getElementById('transaction_pin');
    if (pinInput) {
        pinInput.addEventListener('input', function(e) {
            this.value = this.value.replace(/[^0-9]/g, '');
            if (this.value.length > 4) {
                this.value = this.value.slice(0, 4);
            }
        });
    }
});
</script>
<script src="{{ asset('js/p2p.js') }}"></script>
@endpush
@endsection