@extends('layouts.epelcon')
@section('title', $title)

@section('content')
    <div class="mb-5 flex items-center justify-between">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">{{ $station === 'kitchen' ? '👨‍🍳' : '🍸' }} {{ $title }}</h1>
            <p class="text-sm text-slate-500">{{ $orders->count() }} open ticket{{ $orders->count() === 1 ? '' : 's' }} · auto-refreshes every 30s</p>
        </div>
        <button onclick="location.reload()" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">↻ Refresh</button>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        @forelse ($orders as $order)
            @php
                $mins = (int) abs($order->placed_at?->diffInMinutes(now()) ?? 0);
                $stationItems = $order->items->whereNotIn('status', ['served', 'cancelled']);
                $needsAccept = ! $order->isAccepted() || $stationItems->contains('status', 'pending');
                $allReady = $stationItems->isNotEmpty() && $stationItems->every(fn ($i) => $i->status === 'ready');
                $eta = $order->etaMinutes();
            @endphp
            <div class="rounded-2xl bg-white shadow-sm ring-2 {{ $needsAccept ? 'ring-indigo-300' : ($allReady ? 'ring-emerald-300' : ($mins > 30 ? 'ring-rose-300' : ($mins > 15 ? 'ring-amber-300' : 'ring-slate-200'))) }}">
                <div class="flex items-center justify-between rounded-t-2xl {{ $needsAccept ? 'bg-indigo-50' : ($allReady ? 'bg-emerald-50' : ($mins > 30 ? 'bg-rose-50' : ($mins > 15 ? 'bg-amber-50' : 'bg-slate-50'))) }} px-4 py-3">
                    <div>
                        <p class="font-mono text-xs font-extrabold text-slate-700">{{ $order->code }}</p>
                        <p class="text-xs text-slate-500 capitalize">{{ str_replace('_', ' ', $order->type) }}{{ $order->location ? ' · ' . $order->location : '' }}</p>
                    </div>
                    <div class="text-right">
                        <span class="rounded-full px-2.5 py-1 text-xs font-extrabold {{ $mins > 30 ? 'bg-rose-600 text-white' : ($mins > 15 ? 'bg-amber-500 text-white' : 'bg-slate-200 text-slate-600') }}">{{ $mins }}m ago</span>
                        @if ($order->isAccepted() && ! $allReady && $eta !== null)
                            <p class="mt-1 text-[11px] font-bold text-indigo-600">Ready in ~{{ $eta }}m</p>
                        @endif
                    </div>
                </div>

                @if ($needsAccept)
                    <div class="border-b border-indigo-100 bg-indigo-50/50 px-4 py-3">
                        <form method="POST" action="{{ route('epelcon.orders.accept', $order) }}">@csrf
                            <input type="hidden" name="station" value="{{ $station }}">
                            <button class="w-full rounded-xl bg-indigo-600 py-2.5 text-sm font-extrabold text-white shadow hover:bg-indigo-700">✓ Accept & start — set ETA</button>
                        </form>
                        <p class="mt-1.5 text-center text-[11px] text-slate-500">Accepting tells the waiter/guest it's on and gives a ready time.</p>
                    </div>
                @endif

                <div class="space-y-2 p-4">
                    @foreach ($order->items as $item)
                        <div class="flex items-center justify-between gap-2">
                            <p class="text-sm font-bold text-slate-800 {{ $item->status === 'ready' ? 'line-through opacity-50' : '' }}">{{ $item->qty }}× {{ $item->name }}</p>
                            @if (in_array($item->status, ['pending', 'preparing']))
                                <form method="POST" action="{{ route('epelcon.orders.items.status', [$order, $item]) }}">@csrf
                                    <input type="hidden" name="status" value="{{ $item->status === 'pending' ? 'preparing' : 'ready' }}">
                                    <button class="rounded-lg px-2.5 py-1 text-[11px] font-bold {{ $item->status === 'pending' ? 'bg-sky-100 text-sky-700 hover:bg-sky-200' : 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200' }}">
                                        {{ $item->status === 'pending' ? 'Start' : 'Done' }}
                                    </button>
                                </form>
                            @else
                                <span class="text-[11px] font-bold uppercase text-emerald-600">✓ {{ $item->status }}</span>
                            @endif
                        </div>
                        @if ($item->notes)<p class="-mt-1 text-xs text-amber-600">↳ {{ $item->notes }}</p>@endif
                    @endforeach
                    @if ($order->notes)<p class="rounded-lg bg-amber-50 px-2.5 py-1.5 text-xs font-semibold text-amber-800">📝 {{ $order->notes }}</p>@endif
                    @if ($allReady)
                        <p class="rounded-lg bg-emerald-100 px-2.5 py-2 text-center text-xs font-extrabold uppercase text-emerald-700">🔔 Ready for pickup — {{ $order->payment_status === 'paid' ? 'paid ✓' : 'awaiting payment' }}</p>
                    @endif
                </div>
            </div>
        @empty
            <div class="col-span-full rounded-2xl bg-white p-14 text-center shadow-sm ring-1 ring-slate-200">
                <p class="text-4xl">{{ $station === 'kitchen' ? '🧑‍🍳' : '🍸' }}</p>
                <p class="mt-2 font-bold text-slate-600">All caught up!</p>
                <p class="text-sm text-slate-400">No open {{ $station }} tickets right now.</p>
            </div>
        @endforelse
    </div>
@endsection

@push('scripts')
<script>setTimeout(() => location.reload(), 30000);</script>
@endpush
