@extends('layouts.aura-main')

@section('main-content')
<div class="pb-20" x-data="paymentsDashboard()">
    
    <div class="mb-6 flex justify-between items-end">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Bill Payments</h1>
            <p class="text-[11px] font-bold uppercase tracking-widest text-emerald-600 italic">Disbursements & Debt Settlement</p>
        </div>
        <div>
            <span class="text-[10px] font-black uppercase tracking-widest text-slate-400 bg-slate-100 px-3 py-1 rounded-full">
                Total Outstanding: K{{ number_format($bills->sum('outstanding_balance'), 2) }}
            </span>
        </div>
    </div>

    <div class="bg-white p-4 border border-slate-200 rounded-sm mb-6 flex justify-between items-center gap-4 shadow-sm">
        <form x-ref="filterForm" action="{{ route('suppliers.billpayments.index') }}" method="GET" class="flex items-center gap-3 flex-1">
            <input type="text" name="search" value="{{ request('search') }}" 
                   @input="debounceSubmit()"
                   placeholder="Search Bill # or Vendor..." 
                   class="border border-slate-300 rounded-sm px-3 py-2 text-xs w-72 outline-none focus:border-emerald-500 shadow-inner font-medium">
            
            <select name="status" @change="submitForm()" class="border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-emerald-500 bg-slate-50 font-bold uppercase text-slate-600 cursor-pointer">
                <option value="">Active Payables</option>
                <option value="unpaid" {{ request('status') == 'unpaid' ? 'selected' : '' }}>Unpaid / Partial</option>
                <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Fully Settled</option>
            </select>
        </form>

        <div class="flex gap-2">
            <button class="bg-slate-800 text-white px-4 py-2 rounded-sm text-[9px] font-black uppercase tracking-widest shadow-sm hover:bg-slate-900 transition">
                Payment History
            </button>
        </div>
    </div>

    <div class="bg-white border border-slate-300 rounded-sm overflow-hidden shadow-sm">
        <table class="w-full text-left border-collapse">
            <thead class="bg-slate-50 border-b border-slate-300 text-[10px] font-black text-slate-500 uppercase tracking-widest">
                <tr>
                    <th class="px-4 py-3 border-r">Due Date</th>
                    <th class="px-4 py-3 border-r">Bill Ref</th>
                    <th class="px-4 py-3 border-r">Vendor</th>
                    <th class="px-4 py-3 border-r text-right">Bill Total</th>
                    <th class="px-4 py-3 border-r text-right">Paid To Date</th>
                    <th class="px-4 py-3 border-r text-right">Balance Due</th>
                    <th class="px-4 py-3 text-right">Action</th>
                </tr>
            </thead>
            <tbody class="text-xs font-medium">
                @forelse($bills as $bill)
                <tr class="border-b border-slate-200 hover:bg-slate-50/50 transition group">
                    <td class="px-4 py-3 border-r font-bold {{ $bill->due_date->isPast() && $bill->outstanding_balance > 0 ? 'text-rose-600' : 'text-slate-500' }}">
                        {{ $bill->due_date->format('d M, Y') }}
                        @if($bill->due_date->isPast() && $bill->outstanding_balance > 0)
                            <span class="block text-[8px] uppercase font-black tracking-tighter">Overdue</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 border-r font-mono text-indigo-600 font-bold uppercase tracking-tighter">
                        {{ $bill->bill_no }}
                    </td>
                    <td class="px-4 py-3 border-r font-bold text-slate-800">{{ $bill->supplier->name ?? 'Unknown' }}</td>
                    <td class="px-4 py-3 border-r text-right font-mono text-slate-400">
                        K{{ number_format($bill->total_amount, 2) }}
                    </td>
                    <td class="px-4 py-3 border-r text-right font-mono text-emerald-600">
                        K{{ number_format($bill->total_paid, 2) }}
                    </td>
                    <td class="px-4 py-3 border-r text-right font-mono font-black text-slate-900 bg-slate-50/30">
                        K{{ number_format($bill->outstanding_balance, 2) }}
                    </td>
                    <td class="px-4 py-3 text-right">
                        @if($bill->outstanding_balance > 0)
                            <a href="{{ route('suppliers.billpayments.pay', $bill->id) }}" class="bg-emerald-600 text-white px-4 py-2 rounded-sm text-[9px] font-black uppercase tracking-widest hover:bg-emerald-700 shadow-md transition inline-block">
                                Pay Now
                            </a>
                        @else
                            <div class="flex items-center justify-end gap-2 text-emerald-500">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                                <span class="text-[9px] font-black uppercase italic">Settled</span>
                            </div>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="p-20 text-center opacity-30 font-black uppercase tracking-widest text-xs text-slate-400">No bills requiring payment</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6 flex justify-between items-center bg-white p-4 border border-slate-300 rounded-sm shadow-sm">
        <div class="text-[10px] font-black uppercase tracking-widest text-slate-400">
            Showing {{ $bills->firstItem() ?? 0 }} - {{ $bills->lastItem() ?? 0 }} of {{ $bills->total() }} Records
        </div>

        <div class="flex items-center gap-2">
            @if ($bills->onFirstPage())
                <span class="px-3 py-1.5 rounded-sm bg-slate-50 text-slate-300 text-[10px] font-black uppercase tracking-widest border border-slate-200 cursor-not-allowed">Previous</span>
            @else
                <a href="{{ $bills->appends(request()->query())->previousPageUrl() }}" class="px-3 py-1.5 rounded-sm bg-white text-slate-700 text-[10px] font-black uppercase tracking-widest border border-slate-300 hover:bg-slate-50 transition">Previous</a>
            @endif

            <div class="px-4 py-1.5 text-[10px] font-mono font-black text-emerald-600 bg-emerald-50 border border-emerald-100 rounded-sm">
                PAGE {{ $bills->currentPage() }}
            </div>

            @if ($bills->hasMorePages())
                <a href="{{ $bills->appends(request()->query())->nextPageUrl() }}" class="px-3 py-1.5 rounded-sm bg-white text-slate-700 text-[10px] font-black uppercase tracking-widest border border-slate-300 hover:bg-slate-50 transition">Next</a>
            @else
                <span class="px-3 py-1.5 rounded-sm bg-slate-50 text-slate-300 text-[10px] font-black uppercase tracking-widest border border-slate-200 cursor-not-allowed">Next</span>
            @endif
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function paymentsDashboard() {
        return {
            timeout: null,
            submitForm() { this.$refs.filterForm.submit(); },
            debounceSubmit() {
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => { this.submitForm(); }, 700);
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true
        });

        @if(session('success'))
            Toast.fire({ icon: 'success', title: "{{ session('success') }}" });
        @endif

        @if(session('error'))
            Swal.fire({ title: 'Error', text: "{{ session('error') }}", icon: 'error', confirmButtonColor: '#e11d48' });
        @endif
    });
</script>

<style>
    /* Clean pagination arrows */
    .zedbank-pagination nav svg { width: 1.5rem; display: inline; }
</style>
@endsection