<x-layouts.app :title="'Pay Bills - ' . config('app.name')" activePage="bill-payments">
<div class="space-y-6">
    <div>
        <div class="flex items-center space-x-2 text-gray-600 mb-6 text-sm">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
            <a href="{{ route('dashboard') }}" class="hover:underline">Account Summary</a>
            <span>&rsaquo;</span>
            <span class="font-semibold underline">Pay Bills</span>
        </div>

        <h2 class="text-xl sm:text-2xl font-bold text-gray-800">Pay Bills</h2>
        <p class="text-sm text-gray-500 mt-1">Pay your utilities, insurance, rent, and more from your accounts.</p>
    </div>

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

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Bill Payment Form -->
        <div class="lg:col-span-2">
            <div class="bg-white border border-gray-300 rounded shadow-sm p-6">
                <h3 class="text-lg font-bold text-gray-800 mb-6">New Bill Payment</h3>
                <form method="POST" action="{{ route('bill-payments.store') }}" class="space-y-5">
                    @csrf

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">From Account</label>
                        <select name="from_account_id" required class="w-full border border-gray-300 rounded px-3 py-2.5 text-sm focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select account</option>
                            @foreach($accounts as $acc)
                                <option value="{{ $acc->id }}" {{ old('from_account_id') == $acc->id ? 'selected' : '' }}>
                                    {{ $acc->account_number }} - {{ ucfirst($acc->account_type->value) }} ({{ $acc->currency->symbol() }}{{ number_format($acc->balance, 2) }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Biller Category</label>
                        <select name="biller_category" required class="w-full border border-gray-300 rounded px-3 py-2.5 text-sm focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select category</option>
                            <option value="electricity" {{ old('biller_category') === 'electricity' ? 'selected' : '' }}>Electricity</option>
                            <option value="water" {{ old('biller_category') === 'water' ? 'selected' : '' }}>Water</option>
                            <option value="gas" {{ old('biller_category') === 'gas' ? 'selected' : '' }}>Gas</option>
                            <option value="internet" {{ old('biller_category') === 'internet' ? 'selected' : '' }}>Internet / ISP</option>
                            <option value="phone" {{ old('biller_category') === 'phone' ? 'selected' : '' }}>Phone / Mobile</option>
                            <option value="cable_tv" {{ old('biller_category') === 'cable_tv' ? 'selected' : '' }}>Cable / TV</option>
                            <option value="insurance" {{ old('biller_category') === 'insurance' ? 'selected' : '' }}>Insurance</option>
                            <option value="rent" {{ old('biller_category') === 'rent' ? 'selected' : '' }}>Rent / Mortgage</option>
                            <option value="credit_card" {{ old('biller_category') === 'credit_card' ? 'selected' : '' }}>Credit Card</option>
                            <option value="loan" {{ old('biller_category') === 'loan' ? 'selected' : '' }}>Loan Payment</option>
                            <option value="tax" {{ old('biller_category') === 'tax' ? 'selected' : '' }}>Tax</option>
                            <option value="education" {{ old('biller_category') === 'education' ? 'selected' : '' }}>Education / Tuition</option>
                            <option value="healthcare" {{ old('biller_category') === 'healthcare' ? 'selected' : '' }}>Healthcare</option>
                            <option value="subscription" {{ old('biller_category') === 'subscription' ? 'selected' : '' }}>Subscription</option>
                            <option value="other" {{ old('biller_category') === 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Biller Name</label>
                            <input type="text" name="biller_name" value="{{ old('biller_name') }}" required placeholder="e.g. Con Edison, AT&T"
                                   class="w-full border border-gray-300 rounded px-3 py-2.5 text-sm focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Account / Reference Number</label>
                            <input type="text" name="biller_account_number" value="{{ old('biller_account_number') }}" required placeholder="Biller account number"
                                   class="w-full border border-gray-300 rounded px-3 py-2.5 text-sm focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Amount</label>
                        <input type="number" name="amount" value="{{ old('amount') }}" step="0.01" min="0.01" required placeholder="0.00"
                               class="w-full border border-gray-300 rounded px-3 py-2.5 text-sm focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                        <p class="text-xs text-gray-400 mt-1">A 0.5% processing fee will be applied.</p>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Description <span class="text-gray-400 normal-case">(optional)</span></label>
                        <input type="text" name="description" value="{{ old('description') }}" placeholder="Payment note"
                               class="w-full border border-gray-300 rounded px-3 py-2.5 text-sm focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Password</label>
                        <input type="password" name="password" required placeholder="Enter your password to confirm"
                               class="w-full border border-gray-300 rounded px-3 py-2.5 text-sm focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <button type="submit" class="w-full bg-gray-800 text-white py-3 rounded text-sm font-semibold hover:bg-gray-700 transition-colors">
                        Pay Bill
                    </button>
                </form>
            </div>
        </div>

        <!-- Recent Payments Sidebar -->
        <div>
            <div class="bg-white border border-gray-300 rounded shadow-sm p-6">
                <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide mb-4">Recent Payments</h3>
                @if($recentPayments->count())
                    <div class="space-y-3">
                        @foreach($recentPayments as $payment)
                            <div class="border-b border-gray-100 pb-3 last:border-b-0 last:pb-0">
                                <div class="flex justify-between items-start">
                                    <div class="min-w-0">
                                        <p class="text-sm font-medium text-gray-800 truncate">{{ $payment->biller_name }}</p>
                                        <p class="text-xs text-gray-500">{{ ucfirst(str_replace('_', ' ', $payment->biller_category)) }}</p>
                                    </div>
                                    <div class="text-right shrink-0 ml-2">
                                        <p class="text-sm font-semibold text-gray-800">{{ $payment->account?->currency?->symbol() ?? '$' }}{{ number_format($payment->amount, 2) }}</p>
                                        <span class="text-[10px] font-bold uppercase
                                            {{ $payment->status->value === 'approved' ? 'text-green-600' : ($payment->status->value === 'pending' ? 'text-yellow-600' : 'text-red-600') }}
                                        ">{{ $payment->status->value }}</span>
                                    </div>
                                </div>
                                <p class="text-[10px] text-gray-400 mt-1">{{ $payment->created_at->format('M d, Y') }}</p>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-400">No recent bill payments.</p>
                @endif
            </div>
        </div>
    </div>

    <footer class="mt-12 text-gray-500 text-[11px] space-y-2 border-t border-gray-300 pt-6">
        <p class="font-bold text-gray-700 text-sm">Bill Payment Disclosures</p>
        <p>Bill payments are processed immediately. A 0.5% processing fee applies to all payments. {{ config('app.name') }}, N.A. Member FDIC.</p>
    </footer>
</div>
</x-layouts.app>
