<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 - Reporting, Franchise Settlement and Vendor modules aren't wired up to real data yet.
    </div>

    <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">Active franchises</p>
            <p class="mt-1.5 font-display text-3xl font-semibold">5</p>
        </div>
        <div class="rounded-xl border border-border bg-canvas-raised p-5">
            <p class="text-sm text-ink-muted">Network sales, today</p>
            <p class="mt-1.5 font-display text-3xl font-semibold">₹1.84L</p>
            <p class="mt-1 text-xs text-success-600">↑ 8% vs. yesterday</p>
        </div>
        <div class="rounded-xl border border-border bg-canvas-raised p-5">
            <p class="text-sm text-ink-muted">Pending settlements</p>
            <p class="mt-1.5 font-display text-3xl font-semibold">3</p>
        </div>
        <div class="rounded-xl border border-border bg-canvas-raised p-5">
            <p class="text-sm text-ink-muted">Vendor outstanding</p>
            <p class="mt-1.5 font-display text-3xl font-semibold text-honey-600">₹6.2L</p>
        </div>
    </div>

    <div class="mt-8 rounded-xl border border-border bg-canvas-raised">
        <div class="border-b border-border px-5 py-4">
            <h2 class="font-display font-semibold">Franchises</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">Franchise</th>
                    <th class="px-5 py-3 font-medium">City</th>
                    <th class="px-5 py-3 font-medium">Today's orders</th>
                    <th class="px-5 py-3 text-right font-medium">Today's sales</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-border">
                @foreach ([
                    ['name' => 'MedPlus Andheri', 'city' => 'Mumbai', 'orders' => 27, 'sales' => '₹42,300'],
                    ['name' => 'MedPlus Koramangala', 'city' => 'Bengaluru', 'orders' => 19, 'sales' => '₹31,150'],
                    ['name' => 'MedPlus Salt Lake', 'city' => 'Kolkata', 'orders' => 14, 'sales' => '₹22,800'],
                    ['name' => 'MedPlus Anna Nagar', 'city' => 'Chennai', 'orders' => 22, 'sales' => '₹38,900'],
                    ['name' => 'MedPlus Banjara Hills', 'city' => 'Hyderabad', 'orders' => 11, 'sales' => '₹18,650'],
                ] as $franchise)
                    <tr>
                        <td class="px-5 py-3 font-medium">{{ $franchise['name'] }}</td>
                        <td class="px-5 py-3 text-ink-muted">{{ $franchise['city'] }}</td>
                        <td class="px-5 py-3">{{ $franchise['orders'] }}</td>
                        <td class="px-5 py-3 text-right font-code text-xs">{{ $franchise['sales'] }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</x-layouts.app>
