@extends('layouts.site')
@section('title', 'Order Food & Drinks')

@section('content')
<div x-data="shop()">
    <section class="bg-slate-950 py-12 text-center text-white">
        <p class="text-xs font-bold uppercase tracking-[0.3em] text-gold-400">Takeaway & Delivery</p>
        <h1 class="mt-2 font-serif text-4xl font-bold">Order food & drinks</h1>
        <p class="mx-auto mt-3 max-w-lg px-4 text-slate-300">Tap to build your basket — pay on pickup or delivery.</p>
        @if (request('table'))
            <div class="mt-4 inline-flex items-center gap-2 rounded-full bg-gold-500/15 px-5 py-2 text-sm font-bold text-gold-400 ring-1 ring-gold-500/40">📍 Ordering for {{ request('table') }}</div>
        @endif
    </section>

    <section class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-6">
        <div class="lg:col-span-2">
            <div class="no-scrollbar mb-4 flex gap-2 overflow-x-auto">
                <button @click="cat = null" :class="cat === null ? 'bg-slate-950 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200'" class="shrink-0 rounded-full px-4 py-2 text-xs font-bold">All</button>
                @foreach ($categories as $category)
                    <button @click="cat = {{ $category->id }}" :class="cat === {{ $category->id }} ? 'bg-slate-950 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200'" class="shrink-0 rounded-full px-4 py-2 text-xs font-bold">{{ $category->name }}</button>
                @endforeach
            </div>

            <div class="grid grid-cols-2 gap-3 pb-32 sm:grid-cols-3 lg:pb-0">
                <template x-for="item in filtered()" :key="item.id">
                    <div class="overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-slate-200">
                        <img x-show="item.image" :src="item.image ? '{{ url('/') }}/' + item.image : ''" class="h-24 w-full object-cover" loading="lazy">
                        <div class="p-4">
                            <span x-show="!item.image" class="text-3xl" x-text="item.type === 'drink' ? '🍹' : '🍽'"></span>
                            <p class="mt-1.5 text-sm font-bold leading-tight text-slate-900" x-text="item.name"></p>
                            <p class="mt-1 font-extrabold text-gold-600" x-text="fmt(item.price)"></p>
                            <button @click="add(item)" class="mt-2 w-full rounded-xl bg-slate-950 py-2 text-xs font-bold text-white transition active:scale-95 hover:bg-slate-800">Add +</button>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        {{-- Basket --}}
        <div class="fixed inset-x-0 bottom-0 z-30 lg:static">
            <button x-show="cart.length && !open" @click="open = true"
                    class="mx-4 mb-4 flex w-[calc(100%-2rem)] items-center justify-between rounded-2xl bg-gold-500 px-5 py-4 text-slate-950 shadow-2xl lg:hidden">
                <span class="text-sm font-extrabold" x-text="cart.reduce((s, l) => s + l.qty, 0) + ' items'"></span>
                <span class="text-sm font-extrabold" x-text="'Checkout · ' + fmt(total())"></span>
            </button>

            <div :class="open ? 'fixed inset-0 z-50 flex items-end lg:static lg:block' : 'hidden lg:block'">
                <div x-show="open" class="absolute inset-0 bg-slate-950/60 lg:hidden" @click="open = false"></div>
                <div class="relative max-h-[85vh] w-full overflow-y-auto rounded-t-3xl bg-white p-5 shadow-2xl lg:rounded-3xl lg:shadow-sm lg:ring-1 lg:ring-slate-200">
                    <div class="mb-3 flex items-center justify-between">
                        <h2 class="font-serif text-lg font-bold text-slate-900">Your basket</h2>
                        <button x-show="open" @click="open = false" class="text-slate-400 lg:hidden">✕</button>
                    </div>

                    <form method="POST" action="{{ route('site.order.submit') }}" class="space-y-3">
                        @csrf
                        <input type="hidden" name="items" :value="JSON.stringify(cart)">
                        <div class="space-y-2">
                            <template x-for="(line, i) in cart" :key="line.id">
                                <div class="flex items-center gap-2 rounded-xl bg-stone-50 p-2.5">
                                    <div class="min-w-0 flex-1">
                                        <p class="truncate text-sm font-bold text-slate-800" x-text="line.name"></p>
                                        <p class="text-xs text-slate-500" x-text="fmt(line.price)"></p>
                                    </div>
                                    <button type="button" @click="line.qty > 1 ? line.qty-- : cart.splice(i, 1)" class="h-7 w-7 rounded-lg bg-white font-bold ring-1 ring-slate-200">−</button>
                                    <span class="w-5 text-center text-sm font-extrabold" x-text="line.qty"></span>
                                    <button type="button" @click="line.qty++" class="h-7 w-7 rounded-lg bg-white font-bold ring-1 ring-slate-200">+</button>
                                </div>
                            </template>
                            <p x-show="!cart.length" class="rounded-xl bg-stone-50 py-6 text-center text-sm text-slate-400">Your basket is empty.</p>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Your name</span>
                                <input name="name" value="{{ old('name', auth()->user()->name ?? '') }}" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                            <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Phone</span>
                                <input name="phone" value="{{ old('phone', auth()->user()->phone ?? '') }}" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                            <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Fulfilment</span>
                                <select name="type" x-model="type" class="w-full rounded-xl border-slate-200 text-sm">
                                    @if (request('table'))<option value="dine_in">Serve to my table/room</option>@endif
                                    <option value="takeaway">Pickup</option><option value="delivery">Delivery</option>
                                </select></label>
                            @if (request('table'))
                                <input type="hidden" name="location" value="{{ request('table') }}">
                            @endif
                            <label x-show="type === 'delivery'" x-cloak class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Delivery address</span>
                                <input name="address" :required="type === 'delivery'" class="w-full rounded-xl border-slate-200 text-sm"></label>
                        </div>

                        <div class="flex justify-between border-t border-slate-100 pt-3 text-base font-extrabold text-slate-900">
                            <span>Total</span><span x-text="fmt(total())"></span>
                        </div>
                        <button :disabled="!cart.length" :class="cart.length ? 'bg-gradient-to-r from-gold-400 to-gold-600 text-slate-950 hover:brightness-110' : 'bg-slate-200 text-slate-400'"
                                class="w-full rounded-xl py-3.5 text-sm font-extrabold shadow-lg transition">Place order →</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@push('scripts')
<script>
function shop() {
    return {
        items: {{ Illuminate\Support\Js::from($items->map->only(['id', 'name', 'price', 'type', 'menu_category_id', 'image'])) }},
        cart: [], cat: null, open: false, type: '{{ request('table') ? 'dine_in' : 'takeaway' }}',
        filtered() { return this.items.filter(i => this.cat === null || i.menu_category_id === this.cat); },
        add(item) {
            const line = this.cart.find(l => l.id === item.id);
            line ? line.qty++ : this.cart.push({ id: item.id, name: item.name, price: parseFloat(item.price), qty: 1 });
        },
        total() { return this.cart.reduce((s, l) => s + l.price * l.qty, 0); },
        fmt(v) { return '{{ $CUR }}' + Number(v).toLocaleString(undefined, { maximumFractionDigits: 0 }); },
    };
}
</script>
@endpush
