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

@section('content')
    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Food & drink orders</h1>
            <p class="text-sm text-slate-500">{{ $counts['open'] }} open · {{ $counts['today'] }} today · {{ $counts['unpaid'] }} unpaid</p>
        </div>
        <a href="{{ route('epelcon.orders.pos') }}" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ New order (POS)</a>
    </div>

    <div class="mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Open orders</p><p class="mt-1 text-2xl font-extrabold text-amber-600">{{ $counts['open'] }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Orders today</p><p class="mt-1 text-2xl font-extrabold text-slate-900">{{ $counts['today'] }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Unpaid</p><p class="mt-1 text-2xl font-extrabold text-rose-600">{{ $counts['unpaid'] }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Paid today</p><p class="mt-1 text-2xl font-extrabold text-emerald-600">@money($counts['revenue_today'])</p></div>
    </div>

    <div class="no-scrollbar mb-4 flex gap-2 overflow-x-auto">
        @foreach (['' => 'All', 'preparing' => 'Preparing', 'ready' => 'Ready', 'served' => 'Served', 'completed' => 'Completed', 'cancelled' => 'Cancelled'] as $value => $label)
            <a href="{{ route('epelcon.orders.index', array_filter(['status' => $value])) }}"
               class="shrink-0 rounded-full px-4 py-2 text-xs font-bold {{ request('status', '') === $value ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200' }}">{{ $label }}</a>
        @endforeach
    </div>

    <div class="space-y-3">
        @forelse ($orders as $order)
            @php $badge = ['pending'=>'amber','confirmed'=>'sky','preparing'=>'amber','ready'=>'violet','served'=>'emerald','completed'=>'emerald','cancelled'=>'rose'][$order->status] ?? 'slate'; @endphp
            <a href="{{ route('epelcon.orders.show', $order) }}" class="block rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200 transition hover:ring-indigo-300">
                <div class="flex flex-wrap items-center gap-3">
                    <span class="text-2xl">{{ $order->type === 'room_service' ? '🛎' : ($order->type === 'delivery' ? '🛵' : ($order->type === 'takeaway' ? '🥡' : '🍽')) }}</span>
                    <div class="min-w-0 flex-1">
                        <p class="font-bold text-slate-900">{{ $order->displayName() }} <span class="ml-1 font-mono text-xs font-semibold text-slate-400">{{ $order->code }}</span></p>
                        <p class="text-xs text-slate-500">{{ str_replace('_', ' ', $order->type) }}{{ $order->location ? ' · ' . $order->location : '' }} · {{ $order->items->count() }} item{{ $order->items->count() === 1 ? '' : 's' }} · {{ $order->placed_at?->format('j M, g:ia') }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-extrabold text-slate-900">@money($order->total)</p>
                        <p class="text-[11px] font-bold {{ $order->payment_status === 'paid' ? 'text-emerald-600' : 'text-rose-500' }}">{{ ucfirst($order->payment_status) }}</p>
                    </div>
                    <span class="rounded-full bg-{{ $badge }}-100 px-2.5 py-1 text-[10px] font-bold uppercase text-{{ $badge }}-700">{{ $order->status }}</span>
                </div>
            </a>
        @empty
            <div class="rounded-2xl bg-white p-10 text-center text-slate-400 shadow-sm ring-1 ring-slate-200">No orders found.</div>
        @endforelse
    </div>

    <div class="mt-5">{{ $orders->links() }}</div>
@endsection
