@extends('layouts.customer')

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

    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-8">Withdrawals</h1>

    @if(isset($dailyLimit))
    <div class="bg-[#0D6B58]/5 border border-[#0D6B58]/20 rounded-xl p-4 mb-6">
        <div class="flex items-center justify-between">
            <span class="text-sm text-gray-600">Daily Withdrawal Limit</span>
            <span class="text-sm font-semibold text-[#0D6B58]">${{ number_format($dailyLimit->remaining ?? 0, 2) }} remaining</span>
        </div>
        <div class="mt-2 w-full bg-gray-200 rounded-full h-2">
            <div class="bg-[#0D6B58] h-2 rounded-full" style="width: {{ $dailyLimit->percentage ?? 0 }}%"></div>
        </div>
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {{-- Withdrawal Form --}}
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Request Withdrawal</h2>

                @if($errors->any())
                <div class="bg-rose-50 border border-rose-200 rounded-lg p-3 mb-4">
                    @foreach($errors->all() as $error)
                    <p class="text-sm text-rose-700">{{ $error }}</p>
                    @endforeach
                </div>
                @endif

                <form method="POST" action="{{ route('customer.withdrawals.store') }}">
                    @csrf
                    @method('POST')

                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">From Account</label>
                            <select name="account_id" id="withdrawal-account" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required onchange="updateBalance(this)">
                                <option value="">Select account</option>
                                @foreach($accounts as $account)
                                <option value="{{ $account->id }}" data-balance="{{ $account->balance }}" {{ old('account_id', request('account_id')) == $account->id ? 'selected' : '' }}>
                                    {{ ucfirst($account->account_type) }} (****{{ substr($account->account_number, -4) }})
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm text-gray-500 mb-1">Available Balance</label>
                            <p class="text-lg font-bold text-gray-900" id="available-balance">$0.00</p>
                        </div>

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

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Destination Bank</label>
                            <input type="text" name="bank" value="{{ old('bank') }}" placeholder="Type destination bank (e.g. Access Bank)" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Account Number</label>
                            <input type="text" name="bank_account_number" value="{{ old('bank_account_number') }}" placeholder="Recipient account number" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                        </div>

                        <input type="hidden" name="destination" value="Bank Account">

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                            <input type="text" name="description" value="{{ old('description') }}" placeholder="Optional description" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Confirm PIN</label>
                            <input type="password" name="pin" maxlength="4" pattern="[0-9]{4}" placeholder="4-digit PIN" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                            @error('pin')
                            <p class="text-xs text-rose-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <button type="submit" class="w-full py-2.5 bg-[#0D6B58] text-white text-sm font-semibold rounded-lg hover:bg-[#0A5A49] transition">
                            Request Withdrawal
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Withdrawal History --}}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100">
                <div class="px-6 py-4 border-b border-gray-100">
                    <h2 class="text-lg font-semibold text-gray-900">Withdrawal History</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <th class="px-6 py-3">Date</th>
                                <th class="px-6 py-3">Amount</th>
                                <th class="px-6 py-3">Destination</th>
                                <th class="px-6 py-3">Bank</th>
                                <th class="px-6 py-3">Status</th>
                                <th class="px-6 py-3"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @forelse($withdrawals as $withdrawal)
                            <tr class="hover:bg-gray-50 transition">
                                <td class="px-6 py-4 text-sm text-gray-500">{{ $withdrawal->created_at->format('M d, Y') }}</td>
                                <td class="px-6 py-4 text-sm font-semibold text-gray-900">${{ number_format($withdrawal->amount, 2) }}</td>
                                <td class="px-6 py-4 text-sm text-gray-600 font-mono">{{ $withdrawal->account_number }}</td>
                                <td class="px-6 py-4 text-sm text-gray-600">{{ $withdrawal->bank }}</td>
                                <td class="px-6 py-4">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                        @if(in_array($withdrawal->status, ['approved', 'completed'])) bg-emerald-100 text-emerald-700
                                        @elseif($withdrawal->status === 'pending') bg-amber-100 text-amber-700
                                        @else bg-rose-100 text-rose-700 @endif">
                                        {{ ucfirst($withdrawal->status) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <a href="{{ route('customer.withdrawals.show', $withdrawal->id) }}" class="text-sm text-[#0D6B58] hover:underline">View</a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12 text-center">
                                    <p class="text-sm text-gray-500">No withdrawals yet</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($withdrawals->hasPages())
                <div class="px-6 py-4 border-t border-gray-100">
                    {{ $withdrawals->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>

</div>

<script>
function updateBalance(select) {
    const option = select.options[select.selectedIndex];
    const balance = option.getAttribute('data-balance') || '0.00';
    document.getElementById('available-balance').textContent = '$' + parseFloat(balance).toFixed(2);
}

document.addEventListener('DOMContentLoaded', function() {
    const select = document.getElementById('withdrawal-account');
    if (select) updateBalance(select);
});
</script>
@endsection