@php
    $kpis = [
        ['label' => 'Revenue · MTD',    'value' => '$48,290', 'sub' => 'June 2026',        'delta' => '+12.4%', 'up' => true,  'icon' => 'banknotes',                 'accent' => true],
        ['label' => 'Outstanding',      'value' => '$13,640', 'sub' => '9 open invoices',  'delta' => '-4.1%',  'up' => false, 'icon' => 'document-currency-dollar',  'accent' => false],
        ['label' => 'Collected',        'value' => '$34,650', 'sub' => 'this month',       'delta' => '+8.7%',  'up' => true,  'icon' => 'check-circle',              'accent' => false],
        ['label' => 'Active Jobs',      'value' => '17',      'sub' => '4 due this week',  'delta' => '+3',     'up' => true,  'icon' => 'briefcase',                'accent' => false],
    ];

    $recent = [
        ['no' => 'INV-2026-0188', 'client' => 'Zimplats Holdings',   'amount' => '$4,200.00', 'status' => 'PAID',    'badge' => 'emerald', 'date' => '2026-06-12'],
        ['no' => 'INV-2026-0187', 'client' => 'Econet Wireless',     'amount' => '$1,850.00', 'status' => 'PARTIAL', 'badge' => 'amber',   'date' => '2026-06-11'],
        ['no' => 'INV-2026-0186', 'client' => 'Delta Beverages',     'amount' => '$2,640.00', 'status' => 'SENT',    'badge' => 'sky',     'date' => '2026-06-10'],
        ['no' => 'INV-2026-0185', 'client' => 'Nyaradzo Group',      'amount' => '$980.00',   'status' => 'OVERDUE', 'badge' => 'rose',    'date' => '2026-05-28'],
        ['no' => 'INV-2026-0184', 'client' => 'CBZ Holdings',        'amount' => '$5,120.00', 'status' => 'PAID',    'badge' => 'emerald', 'date' => '2026-06-08'],
    ];

    $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="Dashboard" subheading="Overview of your billing & operations · Owner" primary-action="New Invoice" title="Dashboard · 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 flex items-center gap-2 text-xs">
                    <span class="inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 font-semibold {{ $kpi['up'] ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' }}">
                        <x-icon :name="$kpi['up'] ? 'arrow-trending-up' : 'arrow-trending-down'" class="h-3 w-3" />
                        <span class="font-mono">{{ $kpi['delta'] }}</span>
                    </span>
                    <span class="text-slate-400">{{ $kpi['sub'] }}</span>
                </div>
            </div>
        @endforeach
    </section>

    {{-- ===== CHART + CASH ===== --}}
    <section class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
        {{-- Revenue trend (lightweight inline bar "chart") --}}
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-card lg:col-span-2">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-sm font-semibold tracking-tight text-slate-900">Revenue trend</h3>
                    <p class="mt-0.5 text-xs text-slate-400">Last 8 weeks · collected</p>
                </div>
                <span class="font-mono text-xs text-slate-400">USD</span>
            </div>
            <div class="mt-6 flex h-40 items-end gap-3">
                @foreach ([42, 55, 38, 61, 48, 72, 66, 84] as $i => $h)
                    <div class="group flex flex-1 flex-col items-center gap-2">
                        <div class="w-full rounded-t-md bg-brand-600/85 transition hover:bg-brand-600" style="height: {{ $h }}%"></div>
                        <span class="font-mono text-[10px] text-slate-400">W{{ $i + 1 }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Cash position --}}
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-card">
            <h3 class="text-sm font-semibold tracking-tight text-slate-900">Cash position</h3>
            <p class="mt-0.5 text-xs text-slate-400">Across treasury accounts</p>

            <div class="mt-5 space-y-4">
                @foreach ([
                    ['name' => 'USD · Main', 'amount' => '$22,410', 'pct' => 78, 'tone' => 'bg-brand-600'],
                    ['name' => 'ZWG · Operations', 'amount' => 'ZWG 184,200', 'pct' => 46, 'tone' => 'bg-sky-500'],
                    ['name' => 'Marketing Fund', 'amount' => '$2,180', 'pct' => 22, 'tone' => 'bg-amber-500'],
                ] as $acct)
                    <div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-slate-600">{{ $acct['name'] }}</span>
                            <span class="font-mono text-sm font-semibold text-slate-900 tabular-nums">{{ $acct['amount'] }}</span>
                        </div>
                        <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full {{ $acct['tone'] }}" style="width: {{ $acct['pct'] }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ===== RECENT INVOICES TABLE ===== --}}
    <section class="mt-6 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-card">
        <div class="flex items-center justify-between border-b border-slate-200 px-6 py-4">
            <div>
                <h3 class="text-sm font-semibold tracking-tight text-slate-900">Recent invoices</h3>
                <p class="mt-0.5 text-xs text-slate-400">Latest activity across all clients</p>
            </div>
            <a href="{{ route('prototype.invoices') }}" class="inline-flex items-center gap-1 text-xs font-semibold text-brand-600 hover:text-brand-700">
                View all <x-icon name="arrow-right" class="h-3.5 w-3.5" />
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full min-w-[640px] 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-right font-medium">Amount</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">Date</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach ($recent as $row)
                        <tr class="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-600">{{ $row['client'] }}</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-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 font-mono text-xs text-slate-400 tabular-nums">{{ $row['date'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>

</x-prototype.shell>