{{-- POS Billing mockup --}}
<div class="p-5 font-mono text-xs h-full">
    <div class="grid grid-cols-5 gap-3 h-full">
        {{-- Item grid --}}
        <div class="col-span-3">
            <div class="text-graphite-400 mb-3">Table 4 — Dine-in</div>
            <div class="grid grid-cols-3 gap-2 mb-3">
                @foreach(['Masala Chai', 'Cold Coffee', 'Veg Sandwich', 'Club Sandwich', 'Pasta Alfredo', 'Choc Shake'] as $item)
                <button class="bg-graphite-800/60 hover:bg-emerald-900/40 border border-graphite-700 rounded-lg p-2.5 text-left transition-colors">
                    <div class="text-graphite-300 text-2xs leading-snug">{{ $item }}</div>
                    <div class="text-emerald-400 text-2xs mt-1">₹{{ rand(80, 350) }}</div>
                </button>
                @endforeach
            </div>
        </div>

        {{-- Bill sidebar --}}
        <div class="col-span-2 bg-graphite-800/50 rounded-lg p-3 flex flex-col">
            <div class="text-graphite-400 mb-3 text-2xs">Current Bill</div>
            <div class="space-y-2 flex-1">
                @foreach(['Masala Chai × 2' => '₹120', 'Veg Sandwich × 1' => '₹180', 'Cold Coffee × 1' => '₹160'] as $item => $price)
                <div class="flex justify-between text-2xs">
                    <span class="text-graphite-300">{{ $item }}</span>
                    <span class="text-graphite-200">{{ $price }}</span>
                </div>
                @endforeach
            </div>
            <div class="border-t border-graphite-700 mt-3 pt-3">
                <div class="flex justify-between text-2xs text-graphite-400 mb-1">
                    <span>Subtotal</span><span>₹460</span>
                </div>
                <div class="flex justify-between text-2xs text-graphite-400 mb-2">
                    <span>GST 5%</span><span>₹23</span>
                </div>
                <div class="flex justify-between font-bold text-sm">
                    <span class="text-white">Total</span>
                    <span class="text-amber-400">₹483</span>
                </div>
                <button class="mt-3 w-full bg-amber-500 text-graphite-900 font-bold py-2 rounded-lg text-2xs hover:bg-amber-400 transition-colors">
                    Collect Payment
                </button>
            </div>
        </div>
    </div>
</div>