@extends('layouts.site')
@section('title', 'My Orders')

@section('content')
<section class="mx-auto max-w-5xl px-4 py-10 sm:px-6">
    @include('account.partials.nav')

    <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
            <div class="rounded-3xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                <div class="flex flex-wrap items-center gap-3">
                    <span class="text-3xl">🍽</span>
                    <div class="min-w-0 flex-1">
                        <p class="font-mono text-sm font-bold text-slate-900">{{ $order->code }}</p>
                        <p class="text-xs text-slate-500">{{ $order->items->pluck('name')->take(3)->join(', ') }}{{ $order->items->count() > 3 ? '…' : '' }}</p>
                        <p class="text-xs text-slate-400">{{ $order->created_at->format('j M Y, g:ia') }} · {{ str_replace('_', ' ', $order->type) }}</p>
                    </div>
                    <p class="font-extrabold text-slate-900">@money($order->total)</p>
                    <span class="rounded-full bg-{{ $badge }}-100 px-2.5 py-1 text-[10px] font-bold uppercase text-{{ $badge }}-700">{{ $order->status }}</span>
                </div>
            </div>
        @empty
            <div class="rounded-3xl bg-white p-12 text-center ring-1 ring-slate-200">
                <p class="text-4xl">🥡</p>
                <p class="mt-3 font-bold text-slate-600">No orders yet</p>
                <a href="{{ route('site.order') }}" class="mt-4 inline-block rounded-xl bg-slate-950 px-6 py-3 text-sm font-bold text-white">Browse the menu</a>
            </div>
        @endforelse
    </div>
    <div class="mt-5">{{ $orders->links() }}</div>
</section>
@endsection
