{{--
    Dashboard KPI grid — SaaS-style light cards.
    Inline hex colors ensure text/icons stay visible if Tailwind build or view cache is stale.
--}}
@php
    $kpiCards = [
        ['label' => 'Total Invoices', 'value' => number_format($totalInvoices), 'icon' => 'receipt_long', 'trend' => $invoiceGrowth, 'sub' => 'All time', 'railHex' => '#2563eb', 'iconBgHex' => '#eff6ff', 'iconBorderHex' => '#bfdbfe', 'iconHex' => '#1d4ed8'],
        ['label' => 'Paid Invoices', 'value' => number_format($paidInvoicesCount), 'icon' => 'check_circle', 'trend' => null, 'sub' => 'Fully paid', 'railHex' => '#059669', 'iconBgHex' => '#ecfdf5', 'iconBorderHex' => '#a7f3d0', 'iconHex' => '#047857'],
        ['label' => 'Pending', 'value' => number_format($pendingInvoicesCount), 'icon' => 'hourglass_top', 'trend' => null, 'sub' => 'Awaiting payment', 'railHex' => '#d97706', 'iconBgHex' => '#fffbeb', 'iconBorderHex' => '#fde68a', 'iconHex' => '#b45309'],
        ['label' => 'Overdue', 'value' => number_format($overdueInvoicesCount), 'icon' => 'warning', 'trend' => null, 'sub' => 'Past due date', 'railHex' => '#e11d48', 'iconBgHex' => '#fff1f2', 'iconBorderHex' => '#fecdd3', 'iconHex' => '#be123c'],
        ['label' => 'Total Revenue', 'value' => \App\Models\Currency::formatAmount($totalRevenue, null), 'icon' => 'payments', 'trend' => $revenueGrowth, 'sub' => 'Paid invoices', 'railHex' => '#7c3aed', 'iconBgHex' => '#f5f3ff', 'iconBorderHex' => '#ddd6fe', 'iconHex' => '#6d28d9'],
        ['label' => 'Outstanding', 'value' => \App\Models\Currency::formatAmount($outstanding, null), 'icon' => 'account_balance_wallet', 'trend' => $outstandingGrowth, 'sub' => 'Open balances', 'railHex' => '#0284c7', 'iconBgHex' => '#f0f9ff', 'iconBorderHex' => '#bae6fd', 'iconHex' => '#0369a1'],
        ['label' => 'Customers', 'value' => number_format($totalCustomers), 'icon' => 'groups', 'trend' => $clientsGrowth, 'sub' => 'Total clients', 'railHex' => '#c026d3', 'iconBgHex' => '#fdf4ff', 'iconBorderHex' => '#f0abfc', 'iconHex' => '#a21caf'],
        ['label' => 'This Month Income', 'value' => \App\Models\Currency::formatAmount($monthIncome, null), 'icon' => 'trending_up', 'trend' => null, 'sub' => now()->format('F Y'), 'railHex' => '#4f46e5', 'iconBgHex' => '#eef2ff', 'iconBorderHex' => '#c7d2fe', 'iconHex' => '#4338ca'],
    ];
@endphp

<div
    class="admin-dashboard-kpi-grid grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4"
    style="--kpi-surface: #ffffff; --kpi-border: #e2e8f0; --kpi-title: #475569; --kpi-value: #020617; --kpi-hint: #64748b;"
>
    @foreach ($kpiCards as $card)
        <article
            class="admin-dashboard-kpi-card relative flex min-h-[180px] flex-col overflow-hidden rounded-2xl border bg-white p-5 shadow-sm transition-all duration-200 hover:shadow-md"
            style="border-color: var(--kpi-border); background-color: var(--kpi-surface); color: var(--kpi-value); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);"
        >
            <span
                class="pointer-events-none absolute left-0 top-4 bottom-4 w-1 rounded-r-full"
                style="background-color: {{ $card['railHex'] }};"
                aria-hidden="true"
            ></span>

            <div class="relative flex flex-1 flex-col pl-3.5">
                <div class="flex items-start justify-between gap-3">
                    <div
                        class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl shadow-sm"
                        style="background-color: {{ $card['iconBgHex'] }}; border: 1px solid {{ $card['iconBorderHex'] }};"
                    >
                        <span
                            class="material-symbols-outlined text-[24px] leading-none"
                            style="color: {{ $card['iconHex'] }}; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;"
                            aria-hidden="true"
                        >{{ $card['icon'] }}</span>
                    </div>
                    @if ($card['trend'] !== null)
                        @php $trendUp = $card['trend'] >= 0; @endphp
                        <span
                            class="inline-flex shrink-0 items-center gap-0.5 rounded-full border px-2 py-1 text-xs font-bold tabular-nums"
                            style="{{ $trendUp
                                ? 'background-color:#ecfdf5;border-color:#6ee7b7;color:#065f46;'
                                : 'background-color:#fff1f2;border-color:#fda4af;color:#9f1239;' }}"
                        >
                            <span
                                class="material-symbols-outlined text-[16px] leading-none"
                                style="color: {{ $trendUp ? '#047857' : '#be123c' }};"
                                aria-hidden="true"
                            >{{ $trendUp ? 'trending_up' : 'trending_down' }}</span>
                            {{ $trendUp ? '+' : '' }}{{ $card['trend'] }}%
                        </span>
                    @endif
                </div>

                <div class="mt-4 flex flex-1 flex-col gap-2">
                    <h3
                        class="kpi-metric-label text-[11px] font-semibold uppercase leading-tight tracking-wider"
                        style="color: var(--kpi-title); margin: 0;"
                    >
                        {{ $card['label'] }}
                    </h3>
                    <p
                        class="kpi-metric-value text-2xl font-extrabold leading-tight tracking-tight tabular-nums sm:text-[1.7rem]"
                        style="color: var(--kpi-value); margin: 0;"
                    >
                        {{ $card['value'] }}
                    </p>
                    <p
                        class="kpi-metric-hint mt-auto border-t pt-2.5 text-xs font-semibold leading-snug"
                        style="border-color: var(--kpi-border); color: var(--kpi-hint); margin: 0;"
                    >
                        {{ $card['sub'] }}
                    </p>
                </div>
            </div>
        </article>
    @endforeach
</div>