@php
    $kpis = [
        ['label' => 'Total Outstanding', 'value' => '$13,640', 'sub' => '9 open',        'icon' => 'document-currency-dollar', 'accent' => true],
        ['label' => 'Overdue',           'value' => '$3,210',  'sub' => '2 invoices',    'icon' => 'exclamation-triangle',     'accent' => false],
        ['label' => 'Paid · MTD',        'value' => '$34,650', 'sub' => 'June 2026',     'icon' => 'check-circle',             'accent' => false],
        ['label' => 'Drafts',            'value' => '4',       'sub' => 'not yet sent',  'icon' => 'document-text',            'accent' => false],
    ];

    $tabs = ['All' => 24, 'Draft' => 4, 'Sent' => 9, 'Overdue' => 2, 'Paid' => 9];

    $rows = [
        ['no' => 'INV-2026-0188', 'client' => 'Zimplats Holdings', 'issued' => '2026-06-12', 'due' => '2026-06-26', 'amount' => '$4,200.00', 'balance' => '$0.00',     'status' => 'PAID',    'badge' => 'emerald'],
        ['no' => 'INV-2026-0187', 'client' => 'Econet Wireless',   'issued' => '2026-06-11', 'due' => '2026-06-25', 'amount' => '$1,850.00', 'balance' => '$925.00',   'status' => 'PARTIAL', 'badge' => 'amber'],
        ['no' => 'INV-2026-0186', 'client' => 'Delta Beverages',   'issued' => '2026-06-10', 'due' => '2026-06-24', 'amount' => '$2,640.00', 'balance' => '$2,640.00', 'status' => 'SENT',    'badge' => 'sky'],
        ['no' => 'INV-2026-0185', 'client' => 'Nyaradzo Group',    'issued' => '2026-05-14', 'due' => '2026-05-28', 'amount' => '$980.00',   'balance' => '$980.00',   'status' => 'OVERDUE', 'badge' => 'rose'],
        ['no' => 'INV-2026-0184', 'client' => 'CBZ Holdings',      'issued' => '2026-06-08', 'due' => '2026-06-22', 'amount' => '$5,120.00', 'balance' => '$0.00',     'status' => 'PAID',    'badge' => 'emerald'],
        ['no' => 'INV-2026-0183', 'client' => 'OK Zimbabwe',       'issued' => '2026-06-07', 'due' => '2026-06-21', 'amount' => '$1,430.00', 'balance' => '$1,430.00', 'status' => 'SENT',    'badge' => 'sky'],
        ['no' => 'INV-2026-0182', 'client' => 'Simbisa Brands',    'issued' => '2026-06-05', 'due' => '2026-06-19', 'amount' => '$760.00',   'balance' => '$760.00',   'status' => 'DRAFT',   'badge' => 'slate'],
    ];

    $badges = [
        'emerald' => 'bg-emerald-50 text-emerald-700 ring-emerald-600/20',
        'amber'   => 'bg-amber-50 text-amber-700 ring-amber-600/20',
        'sky'     => 'bg-sky-50 text-sky-700 ring-sky-600/20',
        'rose'    => 'bg-rose-50 text-rose-700 ring-rose-600/20',
        'slate'   => 'bg-slate-100 text-slate-600 ring-slate-500/20',
    ];
@endphp

<x-prototype.shell heading="Invoices" subheading="Manage billing, payments & reminders · Owner" primary-action="New Invoice" title="Invoices · BillPro Prototype">

    {{-- ===== KPI CARDS ===== --}}
    <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @foreach ($kpis as $kpi)
            <div class="relative overflow-hidden rounded-xl border border-slate-200 bg-white p-5 shadow-card {{ $kpi['accent'] ? 'kpi-accent' : '' }}">
                <div class="flex items-start justify-between">
                    <div class="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">{{ $kpi['label'] }}</div>
                    <div class="grid h-8 w-8 place-items-center rounded-md bg-brand-50 text-brand-600">
                        <x-icon :name="$kpi['icon']" class="h-4 w-4" />
                    </div>
                </div>
                <div class="mt-4 font-mono text-[28px] font-semibold tracking-tight text-slate-900 tabular-nums">{{ $kpi['value'] }}</div>
                <div class="mt-2 text-xs text-slate-400">{{ $kpi['sub'] }}</div>
            </div>
        @endforeach
    </section>

    {{-- ===== TABLE CARD ===== --}}
    <section class="mt-6 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-card">

        {{-- Toolbar: tabs + search --}}
        <div class="flex flex-col gap-4 border-b border-slate-200 p-4 md:flex-row md:items-center md:justify-between">
            <div class="flex flex-wrap items-center gap-1.5">
                @foreach ($tabs as $name => $count)
                    <button class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition {{ $loop->first ? 'bg-brand-600 text-white shadow-card' : 'text-slate-600 hover:bg-slate-100' }}">
                        {{ $name }}
                        <span class="rounded-full px-1.5 font-mono text-[10px] {{ $loop->first ? 'bg-white/20 text-white' : 'bg-slate-100 text-slate-500' }}">{{ $count }}</span>
                    </button>
                @endforeach
            </div>

            <div class="flex items-center gap-2">
                <div class="relative">
                    <x-icon name="magnifying-glass" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                    <input type="text" placeholder="Search by number or client…" class="w-full rounded-lg border border-slate-200 bg-white py-2 pl-9 pr-3 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-brand-600 focus:ring-2 focus:ring-brand-100 md:w-64" />
                </div>
                <button class="grid h-9 w-9 place-items-center rounded-lg border border-slate-200 bg-white text-slate-500 transition hover:bg-slate-50">
                    <x-icon name="funnel" class="h-4 w-4" />
                </button>
            </div>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            <table class="w-full min-w-[820px] text-sm">
                <thead>
                    <tr class="border-b border-slate-200 bg-slate-50/60 font-mono text-[10px] uppercase tracking-wider text-slate-400">
                        <th class="px-6 py-2.5 text-left font-medium">Invoice</th>
                        <th class="px-6 py-2.5 text-left font-medium">Client</th>
                        <th class="px-6 py-2.5 text-left font-medium">Issued</th>
                        <th class="px-6 py-2.5 text-left font-medium">Due</th>
                        <th class="px-6 py-2.5 text-right font-medium">Total</th>
                        <th class="px-6 py-2.5 text-right font-medium">Balance</th>
                        <th class="px-6 py-2.5 text-center font-medium">Status</th>
                        <th class="px-6 py-2.5 text-right font-medium"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach ($rows as $row)
                        <tr class="group transition hover:bg-slate-50/70">
                            <td class="px-6 py-3.5 font-mono text-xs font-medium text-slate-900">{{ $row['no'] }}</td>
                            <td class="px-6 py-3.5 text-slate-700">{{ $row['client'] }}</td>
                            <td class="px-6 py-3.5 font-mono text-xs text-slate-400 tabular-nums">{{ $row['issued'] }}</td>
                            <td class="px-6 py-3.5 font-mono text-xs text-slate-400 tabular-nums">{{ $row['due'] }}</td>
                            <td class="px-6 py-3.5 text-right font-mono font-medium text-slate-900 tabular-nums">{{ $row['amount'] }}</td>
                            <td class="px-6 py-3.5 text-right font-mono tabular-nums {{ $row['balance'] === '$0.00' ? 'text-slate-300' : 'text-slate-900' }}">{{ $row['balance'] }}</td>
                            <td class="px-6 py-3.5 text-center">
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px] font-semibold ring-1 ring-inset {{ $badges[$row['badge']] }}">{{ $row['status'] }}</span>
                            </td>
                            <td class="px-6 py-3.5 text-right">
                                <button class="grid h-7 w-7 place-items-center rounded-md text-slate-400 opacity-0 transition hover:bg-slate-100 hover:text-slate-600 group-hover:opacity-100">
                                    <x-icon name="ellipsis-horizontal" class="h-4 w-4" />
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Footer / pagination --}}
        <div class="flex items-center justify-between border-t border-slate-200 px-6 py-3 text-xs text-slate-400">
            <span class="font-mono">Showing 7 of 24</span>
            <div class="flex items-center gap-1">
                <button class="rounded-md border border-slate-200 px-2.5 py-1 font-medium text-slate-500 transition hover:bg-slate-50">Prev</button>
                <button class="rounded-md border border-brand-600 bg-brand-600 px-2.5 py-1 font-mono font-medium text-white">1</button>
                <button class="rounded-md border border-slate-200 px-2.5 py-1 font-mono font-medium text-slate-500 transition hover:bg-slate-50">2</button>
                <button class="rounded-md border border-slate-200 px-2.5 py-1 font-medium text-slate-500 transition hover:bg-slate-50">Next</button>
            </div>
        </div>
    </section>

</x-prototype.shell>