@extends('layouts.site')
@section('title', 'Catering Request Received')

@section('content')
    <section class="mx-auto max-w-lg px-4 py-20 text-center sm:px-6">
        <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-emerald-100 text-4xl">🍲</div>
        <h1 class="mt-6 font-serif text-3xl font-bold text-slate-900">Catering request received!</h1>
        <p class="mt-3 text-slate-600">Thank you! Our events team will confirm availability and finalise details with you shortly.</p>
        <p class="mt-4 font-mono text-2xl font-extrabold tracking-widest text-gold-600">{{ $order->code }}</p>

        <div class="mt-8 rounded-3xl bg-white p-6 text-left shadow-sm ring-1 ring-slate-200">
            @foreach ($order->items as $item)
                <div class="flex justify-between text-sm"><span class="font-semibold text-slate-700">{{ $item->name }}</span><span class="font-bold text-slate-900">@money($item->total)</span></div>
            @endforeach
            <div class="mt-3 flex justify-between border-t border-slate-100 pt-3 font-extrabold text-slate-900">
                <span>Estimated total</span><span>@money($order->total)</span>
            </div>
            <p class="mt-3 text-xs leading-relaxed text-slate-500">{{ $order->notes }}</p>
        </div>

        <div class="mt-8 flex flex-wrap justify-center gap-3">
            <a href="{{ route('pay.show', ['type' => 'order', 'code' => $order->code]) }}" class="rounded-xl bg-gradient-to-r from-gold-400 to-gold-600 px-6 py-3 text-sm font-extrabold text-slate-950 hover:brightness-110">💳 Pay a deposit online</a>
            <a href="{{ route('site.catering') }}" class="rounded-xl bg-slate-950 px-6 py-3 text-sm font-bold text-white">Order more</a>
        </div>
    </section>
@endsection
