@php
    $invoiceStatusStyles = [
        'draft' => 'bg-slate-100 text-slate-700 ring-slate-200/80',
        'sent' => 'bg-sky-50 text-sky-800 ring-sky-100',
        'viewed' => 'bg-violet-50 text-violet-800 ring-violet-100',
        'partial' => 'bg-amber-50 text-amber-800 ring-amber-100',
        'paid' => 'bg-emerald-50 text-emerald-800 ring-emerald-100',
        'overdue' => 'bg-rose-50 text-rose-800 ring-rose-100',
        'cancelled' => 'bg-slate-100 text-slate-500 ring-slate-200/80',
    ];
@endphp

<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
    {{-- Recent Invoices --}}
    <div class="min-w-0 overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm transition-shadow hover:shadow-md">
        <div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
            <div class="flex items-center gap-2">
                <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100 text-sky-600">
                    <span class="material-symbols-outlined text-[20px]">receipt_long</span>
                </span>
                <h3 class="text-base font-bold text-slate-900">Recent invoices</h3>
            </div>
            <a href="{{ route('admin.invoices.index') }}" class="text-sm font-semibold text-violet-600 hover:text-violet-700">View all →</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full min-w-[36rem] text-left text-sm">
                <thead>
                    <tr class="border-b border-slate-100 text-xs font-semibold uppercase tracking-wider text-slate-500">
                        <th class="min-w-[13rem] px-6 py-3">Invoice</th>
                        <th class="px-6 py-3">Customer</th>
                        <th class="px-6 py-3 text-right">Amount</th>
                        <th class="px-6 py-3">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse ($recentInvoices->items() as $invoice)
                        @php $st = $invoice->status ?? 'draft'; @endphp
                        <tr class="transition-colors hover:bg-slate-50/80">
                            <td class="min-w-[13rem] px-6 py-3.5 align-top">
                                <a href="{{ route('admin.invoices.show', $invoice) }}" class="font-semibold text-violet-600 hover:underline">{{ $invoice->invoice_number }}</a>
                                <p class="text-xs text-slate-400">Due {{ $invoice->due_date ? $invoice->due_date->format('M j, Y') : '—' }}</p>
                            </td>
                            <td class="px-6 py-3.5">
                                @php $cname = $invoice->customer->name ?? 'N/A'; $ci = strtoupper(\Illuminate\Support\Str::substr($cname, 0, 1)); @endphp
                                <div class="flex items-center gap-2">
                                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-100 to-indigo-100 text-xs font-bold text-violet-700">{{ $ci }}</span>
                                    <span class="font-medium text-slate-800">{{ $cname }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-3.5 text-right font-semibold tabular-nums text-slate-900">{{ \App\Models\Currency::formatAmount($invoice->total, $invoice->currency ?? null) }}</td>
                            <td class="px-6 py-3.5">
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 {{ $invoiceStatusStyles[$st] ?? $invoiceStatusStyles['draft'] }}">{{ ucfirst($st) }}</span>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="px-6 py-12 text-center text-slate-500">No invoices yet</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Recent Payments --}}
    <div class="min-w-0 overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm transition-shadow hover:shadow-md">
        <div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
            <div class="flex items-center gap-2">
                <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-violet-100 text-violet-600">
                    <span class="material-symbols-outlined text-[20px]">payments</span>
                </span>
                <h3 class="text-base font-bold text-slate-900">Recent payments</h3>
            </div>
            <a href="{{ route('admin.payments.index') }}" class="text-sm font-semibold text-violet-600 hover:text-violet-700">View all →</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full min-w-[32rem] text-left text-sm">
                <thead>
                    <tr class="border-b border-slate-100 text-xs font-semibold uppercase tracking-wider text-slate-500">
                        <th class="min-w-[14rem] px-6 py-3">Ref / Invoice</th>
                        <th class="px-6 py-3">Customer</th>
                        <th class="px-6 py-3">Method</th>
                        <th class="px-6 py-3 text-right">Amount</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse ($recentPayments as $payment)
                        @php
                            $pm = $payment->payment_method ?? 'other';
                            $methodClass = match ($pm) {
                                'cash' => 'bg-emerald-50 text-emerald-800 ring-emerald-100',
                                'bank_transfer' => 'bg-sky-50 text-sky-800 ring-sky-100',
                                'cheque' => 'bg-violet-50 text-violet-800 ring-violet-100',
                                'credit_card' => 'bg-indigo-50 text-indigo-800 ring-indigo-100',
                                default => 'bg-slate-50 text-slate-700 ring-slate-100',
                            };
                        @endphp
                        <tr class="transition-colors hover:bg-slate-50/80">
                            <td class="min-w-[14rem] px-6 py-3.5 align-top">
                                <span class="block font-mono text-xs font-semibold text-slate-800">{{ $payment->payment_number }}</span>
                                @if ($payment->invoice)
                                    <p class="text-xs text-slate-400">{{ $payment->invoice->invoice_number }}</p>
                                @endif
                            </td>
                            <td class="px-6 py-3.5 font-medium text-slate-800">{{ $payment->customer->name ?? '—' }}</td>
                            <td class="px-6 py-3.5">
                                <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium ring-1 {{ $methodClass }}">{{ ucfirst(str_replace('_', ' ', $pm)) }}</span>
                            </td>
                            <td class="px-6 py-3.5 text-right font-semibold tabular-nums">{{ \App\Models\Currency::formatAmount($payment->amount, $payment->currency ?? null) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="px-6 py-12 text-center text-slate-500">No payments recorded</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Recent Purchases --}}
    <div class="min-w-0 overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm transition-shadow hover:shadow-md">
        <div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
            <div class="flex items-center gap-2">
                <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600">
                    <span class="material-symbols-outlined text-[20px]">shopping_cart</span>
                </span>
                <h3 class="text-base font-bold text-slate-900">Recent purchases</h3>
            </div>
            <a href="{{ route('admin.purchases.index') }}" class="text-sm font-semibold text-violet-600 hover:text-violet-700">View all →</a>
        </div>
        <ul class="divide-y divide-slate-50 p-2">
            @forelse ($recentPurchases as $purchase)
                @php
                    $sname = $purchase->supplier->name ?? '—';
                    $ini = strtoupper(\Illuminate\Support\Str::substr($sname, 0, 1));
                @endphp
                <li>
                    <a href="{{ route('admin.purchases.show', $purchase) }}" class="flex items-center gap-3 rounded-xl px-4 py-3 transition-colors hover:bg-slate-50">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-100 to-teal-100 text-sm font-bold text-emerald-800">{{ $ini }}</span>
                        <div class="min-w-0 flex-1">
                            <p class="font-semibold text-slate-900">{{ $purchase->purchase_number }}</p>
                            <p class="truncate text-xs text-slate-500">{{ $sname }}</p>
                        </div>
                        <div class="shrink-0 text-right">
                            <p class="text-xs font-semibold tabular-nums text-slate-800">{{ \App\Models\Currency::formatAmount($purchase->total, null) }}</p>
                            <p class="text-xs text-slate-400">{{ $purchase->purchase_date ? $purchase->purchase_date->format('M j, Y') : '—' }}</p>
                        </div>
                    </a>
                </li>
            @empty
                <li class="py-10 text-center text-sm text-slate-500">No purchases yet</li>
            @endforelse
        </ul>
    </div>

    {{-- Recent Quotations --}}
    <div class="min-w-0 overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm transition-shadow hover:shadow-md">
        <div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
            <div class="flex items-center gap-2">
                <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100 text-amber-700">
                    <span class="material-symbols-outlined text-[20px]">request_quote</span>
                </span>
                <h3 class="text-base font-bold text-slate-900">Recent quotations</h3>
            </div>
            <a href="{{ route('admin.quotations.index') }}" class="text-sm font-semibold text-violet-600 hover:text-violet-700">View all →</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full min-w-[30rem] text-left text-sm">
                <thead>
                    <tr class="border-b border-slate-100 text-xs font-semibold uppercase tracking-wider text-slate-500">
                        <th class="min-w-[12rem] px-6 py-3">Quote #</th>
                        <th class="px-6 py-3">Customer</th>
                        <th class="px-6 py-3 text-right">Total</th>
                        <th class="px-6 py-3">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse ($recentQuotations as $quote)
                        @php $qs = $quote->status ?? 'draft'; @endphp
                        <tr class="transition-colors hover:bg-slate-50/80">
                            <td class="min-w-[12rem] px-6 py-3.5 align-top">
                                <a href="{{ route('admin.quotations.show', $quote) }}" class="font-semibold text-violet-600 hover:underline">{{ $quote->quotation_number }}</a>
                            </td>
                            <td class="px-6 py-3.5 text-slate-800">{{ $quote->customer->name ?? '—' }}</td>
                            <td class="px-6 py-3.5 text-right font-semibold tabular-nums">{{ \App\Models\Currency::formatAmount($quote->total, $quote->currency ?? null) }}</td>
                            <td class="px-6 py-3.5">
                                <span class="inline-flex rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-700 ring-1 ring-slate-200/80">{{ ucfirst($qs) }}</span>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="px-6 py-12 text-center text-slate-500">No quotations yet</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>