@extends('layouts.promoter')

@section('page-title', 'Request Withdrawal')

@section('content')
<div class="stat-card max-w-2xl">
    <h3 class="text-lg font-semibold mb-6">Request Withdrawal</h3>

    <div class="mb-6 p-4 bg-gray-50 rounded-lg">
        <div class="flex justify-between items-center">
            <p class="text-gray-500">Available Balance</p>
            <p class="text-2xl font-bold">${{ number_format(auth()->user()->promoterWallet?->balance ?? 0, 2) }}</p>
        </div>
        <p class="text-sm text-gray-400 mt-1">Minimum withdrawal: ${{ number_format(config('app.promoter_min_withdrawal', 10), 2) }}</p>
    </div>

    <form method="POST" action="{{ route('promoter.payouts.withdraw.store') }}">
        @csrf

        <div class="mb-4">
            <label for="amount" class="input-label">Amount</label>
            <input type="number" name="amount" id="amount" step="0.01" min="{{ config('app.promoter_min_withdrawal', 10) }}"
                class="input-field @error('amount') border-red-300 @enderror"
                placeholder="0.00" value="{{ old('amount') }}" required>
            @error('amount')
                <p class="input-error">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="payment_method" class="input-label">Payment Method</label>
            <select name="payment_method" id="payment_method" class="select-field" required>
                <option value="">Select method</option>
                <option value="bank_transfer" {{ old('payment_method') === 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                <option value="paypal" {{ old('payment_method') === 'paypal' ? 'selected' : '' }}>PayPal</option>
                <option value="paystack" {{ old('payment_method') === 'paystack' ? 'selected' : '' }}>Paystack</option>
                <option value="flutterwave" {{ old('payment_method') === 'flutterwave' ? 'selected' : '' }}>Flutterwave</option>
            </select>
            @error('payment_method')
                <p class="input-error">{{ $message }}</p>
            @enderror
        </div>

        <div id="payment-details" class="mb-4">
            <div id="bank-fields" class="hidden">
                <label class="input-label">Bank Details</label>
                <input type="text" name="payment_details[account_name]" placeholder="Account Name" class="input-field mb-2">
                <input type="text" name="payment_details[account_number]" placeholder="Account Number" class="input-field mb-2">
                <input type="text" name="payment_details[bank_name]" placeholder="Bank Name" class="input-field">
            </div>
            <div id="paypal-fields" class="hidden">
                <label for="paypal_email" class="input-label">PayPal Email</label>
                <input type="email" name="payment_details[email]" id="paypal_email" placeholder="your@email.com" class="input-field">
            </div>
        </div>

        <div class="mb-6">
            <label for="notes" class="input-label">Notes (Optional)</label>
            <textarea name="notes" id="notes" rows="3" class="input-field" placeholder="Any additional notes...">{{ old('notes') }}</textarea>
            @error('notes')
                <p class="input-error">{{ $message }}</p>
            @enderror
        </div>

        <div class="flex gap-3">
            <button type="submit" class="btn-primary">Submit Request</button>
            <a href="{{ route('promoter.payouts.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.getElementById('payment_method').addEventListener('change', function() {
    document.getElementById('bank-fields').classList.add('hidden');
    document.getElementById('paypal-fields').classList.add('hidden');

    switch(this.value) {
        case 'bank_transfer':
            document.getElementById('bank-fields').classList.remove('hidden');
            break;
        case 'paypal':
            document.getElementById('paypal-fields').classList.remove('hidden');
            break;
    }
});
</script>
@endpush
@endsection