@extends('layouts.epelcon')
@section('title', 'Menu & Cuisine')

@section('content')
<div x-data="{ addItem: false, editItem: null, addCuisine: false, addCategory: false }">
    <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">Menu & cuisines</h1>
            <p class="text-sm text-slate-500">{{ $counts['food'] }} dishes · {{ $counts['drink'] }} drinks · {{ $counts['unavailable'] }} unavailable</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <button @click="addCuisine = true" 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">+ Cuisine</button>
            <button @click="addCategory = true" 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">+ Category</button>
            <button @click="addItem = true" 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">+ Menu item</button>
        </div>
    </div>

    {{-- Cuisines strip --}}
    <div class="no-scrollbar mb-4 flex gap-2 overflow-x-auto">
        @foreach ($cuisines as $cuisine)
            <span class="shrink-0 rounded-full bg-violet-100 px-3.5 py-1.5 text-xs font-bold text-violet-700">🍽 {{ $cuisine->name }}</span>
        @endforeach
    </div>

    {{-- Filters --}}
    <form method="GET" class="mb-5 flex flex-wrap gap-2">
        <input name="q" value="{{ request('q') }}" placeholder="Search menu…" class="w-full rounded-xl border-0 bg-white px-4 py-2.5 text-sm shadow-sm ring-1 ring-slate-200 sm:w-56">
        <select name="type" onchange="this.form.submit()" class="rounded-xl border-0 bg-white py-2.5 text-sm shadow-sm ring-1 ring-slate-200">
            <option value="">All types</option>
            <option value="food" @selected(request('type') === 'food')>Food</option>
            <option value="drink" @selected(request('type') === 'drink')>Drinks</option>
        </select>
        <select name="category" onchange="this.form.submit()" class="rounded-xl border-0 bg-white py-2.5 text-sm shadow-sm ring-1 ring-slate-200">
            <option value="">All categories</option>
            @foreach ($categories as $category)<option value="{{ $category->id }}" @selected(request('category') == $category->id)>{{ $category->name }}</option>@endforeach
        </select>
    </form>

    {{-- Items grid --}}
    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
        @forelse ($items as $item)
            <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200 {{ $item->available ? '' : 'opacity-60' }}">
                <div class="flex items-start justify-between gap-2">
                    @if ($item->image)
                        <img src="{{ asset($item->image) }}" alt="{{ $item->name }}" class="h-12 w-12 shrink-0 rounded-xl object-cover">
                    @endif
                    <div class="min-w-0 flex-1">
                        <p class="font-bold text-slate-900">{{ $item->name }} @if ($item->featured)<span title="Featured">⭐</span>@endif</p>
                        <p class="text-xs text-slate-500">{{ $item->category->name ?? '—' }}{{ $item->cuisine ? ' · ' . $item->cuisine->name : '' }}{{ $item->chef ? ' · ' . $item->chef->name : '' }}</p>
                    </div>
                    <p class="shrink-0 font-extrabold text-indigo-600">@money($item->price)</p>
                </div>
                <div class="mt-2 flex flex-wrap items-center gap-1">
                    <span class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase {{ $item->type === 'drink' ? 'bg-sky-100 text-sky-700' : 'bg-orange-100 text-orange-700' }}">{{ $item->type }} · {{ $item->station }}</span>
                    @if ($item->spice_level > 0)<span class="text-[10px]">{{ str_repeat('🌶', min(3, $item->spice_level)) }}</span>@endif
                    @foreach ($item->dietary_tags ?? [] as $tag)
                        <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-bold text-emerald-700">{{ str_replace('_', ' ', $tag) }}</span>
                    @endforeach
                </div>
                <div class="mt-3 flex gap-1.5">
                    <form method="POST" action="{{ route('epelcon.menu.items.toggle', $item) }}">@csrf
                        <button class="rounded-lg px-2.5 py-1.5 text-[11px] font-bold {{ $item->available ? 'bg-slate-100 text-slate-500 hover:bg-slate-200' : 'bg-emerald-100 text-emerald-700' }}">{{ $item->available ? 'Mark unavailable' : 'Mark available' }}</button>
                    </form>
                    <button @click='editItem = {{ json_encode($item->only(['id','name','menu_category_id','cuisine_id','chef_id','type','description','price','cost','dietary_tags','spice_level','prep_time_minutes','available'])) }}'
                            class="rounded-lg bg-indigo-50 px-2.5 py-1.5 text-[11px] font-bold text-indigo-600 hover:bg-indigo-100">Edit</button>
                    <form method="POST" action="{{ route('epelcon.menu.items.destroy', $item) }}" onsubmit="return confirm('Remove {{ $item->name }} from the menu?')">@csrf
                        <button class="rounded-lg bg-rose-50 px-2.5 py-1.5 text-[11px] font-bold text-rose-500 hover:bg-rose-100">✕</button>
                    </form>
                </div>
            </div>
        @empty
            <div class="col-span-full rounded-2xl bg-white p-10 text-center text-slate-400 shadow-sm ring-1 ring-slate-200">No menu items match your filters.</div>
        @endforelse
    </div>

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

    {{-- Item form modal (add + edit share the template) --}}
    <template x-for="mode in ['add', 'edit']" :key="mode">
        <div x-cloak x-show="(mode === 'add' && addItem) || (mode === 'edit' && editItem)" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="addItem = false; editItem = null"></div>
            <div x-transition class="relative max-h-[92vh] w-full max-w-2xl overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
                <h2 class="mb-4 text-lg font-extrabold" x-text="mode === 'add' ? 'New menu item' : 'Edit menu item'"></h2>
                <form method="POST" :action="mode === 'add' ? '{{ route('epelcon.menu.items.store') }}' : '{{ url('epelcon/menu/items') }}/' + editItem?.id + '/update'" enctype="multipart/form-data" class="grid grid-cols-2 gap-4">@csrf
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Photo</span>
                        <input type="file" name="image" accept="image/*" class="w-full rounded-xl border border-slate-200 p-2 text-sm file:mr-3 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-3 file:py-1.5 file:text-xs file:font-bold file:text-indigo-600"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span>
                        <input name="name" required :value="mode === 'edit' ? editItem?.name : ''" 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">Type</span>
                        <select name="type" class="w-full rounded-xl border-slate-200 text-sm" x-init="mode === 'edit' && editItem && ($el.value = editItem.type)">
                            <option value="food">Food (kitchen)</option><option value="drink">Drink (bar)</option>
                        </select></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Category</span>
                        <select name="menu_category_id" class="w-full rounded-xl border-slate-200 text-sm" x-init="mode === 'edit' && editItem && ($el.value = editItem.menu_category_id)">
                            <option value="">—</option>
                            @foreach ($categories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach
                        </select></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Cuisine</span>
                        <select name="cuisine_id" class="w-full rounded-xl border-slate-200 text-sm" x-init="mode === 'edit' && editItem && ($el.value = editItem.cuisine_id)">
                            <option value="">—</option>
                            @foreach ($cuisines as $cuisine)<option value="{{ $cuisine->id }}">{{ $cuisine->name }}</option>@endforeach
                        </select></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Chef</span>
                        <select name="chef_id" class="w-full rounded-xl border-slate-200 text-sm" x-init="mode === 'edit' && editItem && ($el.value = editItem.chef_id)">
                            <option value="">—</option>
                            @foreach ($chefs as $chef)<option value="{{ $chef->id }}">{{ $chef->name }}</option>@endforeach
                        </select></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Price ({{ $CUR }})</span>
                        <input type="number" step="0.01" name="price" required :value="mode === 'edit' ? editItem?.price : ''" 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">Cost ({{ $CUR }})</span>
                        <input type="number" step="0.01" name="cost" :value="mode === 'edit' ? editItem?.cost : ''" 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">Spice level (0–5)</span>
                        <input type="number" name="spice_level" min="0" max="5" :value="mode === 'edit' ? editItem?.spice_level : 0" 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">Prep time (min)</span>
                        <input type="number" name="prep_time_minutes" min="0" :value="mode === 'edit' ? editItem?.prep_time_minutes : 15" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <div class="col-span-2">
                        <span class="mb-1 block text-xs font-bold uppercase text-slate-500">Dietary tags</span>
                        <div class="flex flex-wrap gap-2">
                            @foreach ($dietaryTags as $tag)
                                <label class="flex items-center gap-1.5 rounded-full bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-600">
                                    <input type="checkbox" name="dietary_tags[]" value="{{ $tag }}" class="rounded text-indigo-600"
                                           :checked="mode === 'edit' && editItem?.dietary_tags?.includes('{{ $tag }}')"> {{ str_replace('_', ' ', $tag) }}
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Description</span>
                        <textarea name="description" rows="2" class="w-full rounded-xl border-slate-200 text-sm" x-init="mode === 'edit' && editItem && ($el.value = editItem.description ?? '')"></textarea></label>
                    <label class="col-span-2 flex items-center gap-2 text-sm font-semibold text-slate-600">
                        <input type="checkbox" name="available" value="1" class="rounded text-indigo-600" :checked="mode === 'add' || editItem?.available"> Available for ordering</label>
                    <div class="col-span-2 flex justify-end gap-2">
                        <button type="button" @click="addItem = false; editItem = null" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                        <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white" x-text="mode === 'add' ? 'Add item' : 'Save changes'"></button>
                    </div>
                </form>
            </div>
        </div>
    </template>

    {{-- Cuisine modal --}}
    <div x-cloak x-show="addCuisine" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="addCuisine = false"></div>
        <div x-show="addCuisine" x-transition class="relative w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">New cuisine</h2>
            <form method="POST" action="{{ route('epelcon.menu.cuisines.store') }}" class="space-y-4">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span><input name="name" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Description</span><textarea name="description" rows="2" class="w-full rounded-xl border-slate-200 text-sm"></textarea></label>
                <div class="flex justify-end gap-2"><button type="button" @click="addCuisine = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Add cuisine</button></div>
            </form>
        </div>
    </div>

    {{-- Category modal --}}
    <div x-cloak x-show="addCategory" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="addCategory = false"></div>
        <div x-show="addCategory" x-transition class="relative w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">New menu category</h2>
            <form method="POST" action="{{ route('epelcon.menu.categories.store') }}" class="space-y-4">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span><input name="name" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Type</span>
                    <select name="type" class="w-full rounded-xl border-slate-200 text-sm"><option value="food">Food</option><option value="drink">Drink</option></select></label>
                <div class="flex justify-end gap-2"><button type="button" @click="addCategory = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Add category</button></div>
            </form>
        </div>
    </div>
</div>
@endsection
