@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">Pay Bills</h1>

    {{-- Biller Categories --}}
    <div class="mb-8">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Categories</h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
            @foreach($categories ?? ['Electricity', 'Water', 'Internet', 'TV', 'Insurance', 'Government'] as $category)
            <button onclick="selectCategory('{{ Str::slug($category) }}')" class="category-btn flex flex-col items-center p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-[#0D6B58]/30 transition group" data-category="{{ Str::slug($category) }}">
                <div class="w-10 h-10 rounded-full bg-[#0D6B58]/10 flex items-center justify-center mb-2 group-hover:bg-[#0D6B58]/20 transition">
                    <svg class="w-5 h-5 text-[#0D6B58]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
                    </svg>
                </div>
                <span class="text-xs font-medium text-gray-700 text-center">{{ $category }}</span>
            </button>
            @endforeach
        </div>
    </div>

    {{-- Bill Payment Form --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6" id="payment-form-container">
                <h2 class="text-lg font-semibold text-gray-900 mb-4" id="selected-biller-name">Select a biller</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.bills.confirm') }}">
                    @csrf
                    @method('POST')

                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Customer Number / Meter Number</label>
                            <input type="text" name="customer_number" value="{{ old('customer_number') }}" placeholder="Enter customer/meter 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>
                            @error('customer_number')
                            <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </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>
                            @error('amount')
                            <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Pay From</label>
                            <select name="account_id" 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>
                                <option value="">Select account</option>
                                @foreach($accounts as $account)
                                <option value="{{ $account->id }}" {{ old('account_id') == $account->id ? 'selected' : '' }}>
                                    {{ ucfirst($account->type) }} (****{{ substr($account->account_number, -4) }}) - ${{ number_format($account->balance, 2) }}
                                </option>
                                @endforeach
                            </select>
                        </div>

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

        {{-- Payment History --}}
        <div class="lg:col-span-1">
            <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">Payment History</h2>
                </div>
                <div class="divide-y divide-gray-50 max-h-96 overflow-y-auto">
                    @forelse($billPayments ?? [] as $payment)
                    <div class="px-6 py-3">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-900">{{ $payment->biller_name }}</p>
                                <p class="text-xs text-gray-400">{{ $payment->created_at->format('M d, Y') }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-semibold text-gray-900">${{ number_format($payment->amount, 2) }}</p>
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                    @if($payment->status === 'successful') bg-emerald-100 text-emerald-700
                                    @elseif($payment->status === 'pending') bg-amber-100 text-amber-700
                                    @else bg-rose-100 text-rose-700 @endif">
                                    {{ ucfirst($payment->status) }}
                                </span>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="px-6 py-8 text-center">
                        <p class="text-sm text-gray-500">No payment history</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

</div>

<script>
function selectCategory(category) {
    document.querySelectorAll('.category-btn').forEach(btn => {
        btn.classList.remove('ring-2', 'ring-[#0D6B58]', 'bg-[#0D6B58]/5');
    });
    event.currentTarget.classList.add('ring-2', 'ring-[#0D6B58]', 'bg-[#0D6B58]/5');
    document.getElementById('selected-biller-name').textContent = category.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
}
</script>
@endsection