<x-layouts.app title="Dashboard">
    <div class="mb-6 flex items-center gap-2 rounded-lg border border-honey-500/30 bg-honey-50 px-4 py-2.5 text-sm text-honey-600">
        <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4 flex-shrink-0"><path d="M12 9v4m0 4h.01M10.3 3.9 2.5 17a2 2 0 0 0 1.7 3h15.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
        Sample numbers below - this dashboard isn't reading from live orders/inventory yet. That's the Customer Orders and Purchase &amp; Vendor modules, still to come.
    </div>

    {{-- Stat cards --}}
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <div class="rounded-xl border border-border bg-canvas-raised p-5">
            <p class="text-sm text-ink-muted">Today's orders</p>
            <p class="mt-1.5 font-display text-3xl font-semibold">27</p>
            <p class="mt-1 text-xs text-success-600">↑ 4 vs. yesterday</p>
        </div>
        <div class="rounded-xl border border-border bg-canvas-raised p-5">
            <p class="text-sm text-ink-muted">Awaiting verification</p>
            <p class="mt-1.5 font-display text-3xl font-semibold">5</p>
            <p class="mt-1 text-xs text-ink-muted">Prescriptions</p>
        </div>
        <div class="rounded-xl border border-border bg-canvas-raised p-5">
            <p class="text-sm text-ink-muted">Low stock</p>
            <p class="mt-1.5 font-display text-3xl font-semibold">12</p>
            <p class="mt-1 text-xs text-ink-muted">Products below reorder point</p>
        </div>
        <div class="rounded-xl border border-border bg-canvas-raised p-5">
            <p class="text-sm text-ink-muted">Near-expiry batches</p>
            <p class="mt-1.5 font-display text-3xl font-semibold text-honey-600">8</p>
            <p class="mt-1 text-xs text-ink-muted">Within 60 days</p>
        </div>
    </div>

    <div class="mt-8 grid gap-6 lg:grid-cols-5">
        {{-- Recent orders --}}
        <div class="lg:col-span-3 rounded-xl border border-border bg-canvas-raised">
            <div class="border-b border-border px-5 py-4">
                <h2 class="font-display font-semibold">Recent orders</h2>
            </div>
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-left text-xs uppercase tracking-wide text-ink-muted">
                        <th class="px-5 py-3 font-medium">Order</th>
                        <th class="px-5 py-3 font-medium">Customer</th>
                        <th class="px-5 py-3 font-medium">Status</th>
                        <th class="px-5 py-3 text-right font-medium">Amount</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border">
                    @php
                        // Complete, literal class strings - Tailwind's scanner reads file
                        // text, not PHP output, so bg-{{ $tone }}-50-style interpolation
                        // would silently produce unstyled badges.
                        $statusBadgeClasses = [
                            'honey' => 'bg-honey-50 text-honey-600',
                            'primary' => 'bg-primary-50 text-primary-600',
                            'success' => 'bg-success-50 text-success-600',
                            'muted' => 'bg-canvas text-ink-muted',
                        ];
                    @endphp
                    @foreach ([
                        ['id' => 'ORD-10482', 'customer' => 'A. Sharma', 'status' => 'Preparing', 'tone' => 'honey', 'amount' => '₹842'],
                        ['id' => 'ORD-10481', 'customer' => 'R. Iyer', 'status' => 'Out for delivery', 'tone' => 'primary', 'amount' => '₹1,205'],
                        ['id' => 'ORD-10480', 'customer' => 'M. Fernandes', 'status' => 'Delivered', 'tone' => 'success', 'amount' => '₹360'],
                        ['id' => 'ORD-10479', 'customer' => 'S. Khan', 'status' => 'Confirmed', 'tone' => 'muted', 'amount' => '₹2,140'],
                    ] as $order)
                        <tr>
                            <td class="px-5 py-3 font-code text-xs">{{ $order['id'] }}</td>
                            <td class="px-5 py-3">{{ $order['customer'] }}</td>
                            <td class="px-5 py-3">
                                <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-medium {{ $statusBadgeClasses[$order['tone']] }}">
                                    {{ $order['status'] }}
                                </span>
                            </td>
                            <td class="px-5 py-3 text-right font-code text-xs">{{ $order['amount'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Near-expiry batches: the freshness signature in its natural habitat --}}
        <div class="lg:col-span-2 rounded-xl border border-border bg-canvas-raised">
            <div class="border-b border-border px-5 py-4">
                <h2 class="font-display font-semibold">Batches to watch</h2>
            </div>
            <ul class="divide-y divide-border">
                @foreach ([
                    ['product' => 'Amoxicillin 500mg', 'batch' => 'AMX-2024-118', 'days' => 6, 'tone' => 'urgent'],
                    ['product' => 'Cetirizine 10mg', 'batch' => 'CTZ-2024-092', 'days' => 21, 'tone' => 'approaching'],
                    ['product' => 'Metformin 500mg', 'batch' => 'MET-2024-201', 'days' => 45, 'tone' => 'approaching'],
                    ['product' => 'Paracetamol 650mg', 'batch' => 'PCM-2024-310', 'days' => 118, 'tone' => 'ok'],
                ] as $batch)
                    <li class="freshness-{{ $batch['tone'] }} flex items-center justify-between border-l-4 px-5 py-3">
                        <div>
                            <p class="text-sm font-medium">{{ $batch['product'] }}</p>
                            <p class="font-code text-xs text-ink-muted">{{ $batch['batch'] }}</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="freshness-dot h-2 w-2 rounded-full"></span>
                            <span class="text-xs text-ink-muted">{{ $batch['days'] }}d left</span>
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</x-layouts.app>
