@extends('layouts.app')
@section('title', 'Kitchen Display')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Kitchen Display</h1>
            <p class="text-sm text-ink-muted">Live orders across all stations. Tap a card to advance its status.</p>
        </div>
        <div class="flex items-center gap-2 overflow-x-auto">
            <a href="{{ route('kitchen.display') }}" class="btn-sm {{ !$station ? 'btn-primary' : 'btn-secondary' }}">All stations</a>
            @foreach ($stations as $s)
                <a href="{{ route('kitchen.display', ['station' => $s]) }}" class="btn-sm {{ $station === $s ? 'btn-primary' : 'btn-secondary' }}">{{ ucfirst($s) }}</a>
            @endforeach
        </div>
    </div>

    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        @forelse ($items as $orderId => $orderItems)
            @php $order = $orderItems->first()->order; @endphp
            <div class="card card-pad space-y-3">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="font-display font-bold text-sm">{{ $order->order_number }}</p>
                        <p class="text-xs text-ink-muted">{{ $order->table->name ?? ucfirst($order->sale_type->value) }} · {{ $order->waiter->name ?? '—' }}</p>
                    </div>
                    <span class="text-xs text-ink-faint">{{ optional($orderItems->first()->fired_at)->diffForHumans() }}</span>
                </div>

                <div class="space-y-2">
                    @foreach ($orderItems as $item)
                        <div class="flex items-center justify-between gap-2 p-2.5 rounded-lg border border-border {{ $item->status === 'ready' ? 'bg-primary-50/50 border-primary-200' : '' }}">
                            <div>
                                <p class="text-sm font-medium">{{ $item->quantity }}× {{ $item->product->name }}</p>
                                @if ($item->special_instructions)
                                    <p class="text-xs text-accent-600 italic">{{ $item->special_instructions }}</p>
                                @endif
                            </div>
                            <div class="flex items-center gap-2 shrink-0">
                                <x-badge :color="\App\Enums\OrderStatus::from('sent_to_kitchen')->badgeColor()">{{ ucfirst($item->status) }}</x-badge>
                                @if ($item->status !== 'served')
                                    <form method="POST" action="{{ route('kitchen.items.advance', $item) }}">
                                        @csrf
                                        <button class="btn-ghost btn-sm !px-2"><i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @empty
            <div class="col-span-full card card-pad text-center py-16">
                <i data-lucide="chef-hat" class="w-8 h-8 mx-auto text-ink-faint mb-2"></i>
                <p class="text-sm text-ink-muted">No active kitchen orders. All caught up.</p>
            </div>
        @endforelse
    </div>
</div>
@endsection