<x-layouts.portal title="Dashboard" page-title="Operations Dashboard">

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="bg-white p-5 border border-zinc-200 rounded-sm shadow-sm">
        <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-1">Today's Sales</p>
        <div class="flex items-baseline space-x-2">
            <h3 class="text-2xl font-bold text-zinc-900">₹0.00</h3>
            <span class="text-[10px] text-zinc-400 font-medium">0 orders</span>
        </div>
    </div>
    <div class="bg-white p-5 border border-zinc-200 rounded-sm shadow-sm">
        <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-1">Active Tables</p>
        <div class="flex items-baseline space-x-2">
            <h3 class="text-2xl font-bold text-zinc-900">{{ $occupiedTables }}</h3>
            <span class="text-[10px] text-zinc-400 font-medium">of {{ $totalTables }} total</span>
        </div>
    </div>
    <div class="bg-white p-5 border border-zinc-200 rounded-sm shadow-sm">
        <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-1">Stock Alerts</p>
        <div class="flex items-baseline space-x-2">
            <h3 class="text-2xl font-bold text-green-500">None</h3>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white border border-zinc-200 rounded-sm shadow-sm overflow-hidden">
        <div class="p-4 border-b border-zinc-200 flex justify-between items-center bg-zinc-50">
            <h3 class="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Recent Orders</h3>
            <button class="text-[10px] font-bold text-amber-600 hover:underline uppercase tracking-tight">View All</button>
        </div>
        <div class="p-12 text-center opacity-40">
            <svg class="w-10 h-10 mx-auto mb-3 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
            <p class="text-xs font-medium text-zinc-500 italic">No orders recorded for this session.</p>
        </div>
    </div>
    
    <div class="bg-white border border-zinc-200 rounded-sm shadow-sm overflow-hidden text-zinc-900">
        <div class="p-4 border-b border-zinc-200 flex justify-between items-center bg-zinc-50">
            <h3 class="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Quick Actions</h3>
        </div>
        <div class="p-4 grid grid-cols-2 gap-3">
            <button class="p-4 border border-zinc-200 rounded-sm hover:border-amber-500/50 hover:bg-amber-50 transition-all text-left group">
                <p class="text-[10px] font-bold uppercase tracking-tighter text-zinc-900 group-hover:text-amber-600">New Order</p>
                <p class="text-[9px] text-zinc-500 mt-0.5">Open POS Terminal</p>
            </button>
            <button class="p-4 border border-zinc-200 rounded-sm hover:border-amber-500/50 hover:bg-amber-50 transition-all text-left group">
                <p class="text-[10px] font-bold uppercase tracking-tighter text-zinc-900 group-hover:text-amber-600">Add Item</p>
                <p class="text-[9px] text-zinc-500 mt-0.5">Update Menu</p>
            </button>
        </div>
    </div>
</div>
</x-layouts.portal>
