@extends('layouts.app')

@section('title', 'MY MEAL - Menu Restoran & Café MY HUB')

@section('content')
<div x-data="{
    activeCategory: 'all',
    cart: [],
    showCartModal: false,
    tableId: '{{ old('table_id', $selectedTableId ?? '') }}',
    customerName: '{{ old('customer_name', auth()->user()?->name ?? '') }}',
    customerPhone: '{{ old('customer_phone', auth()->user()?->phone ?? '') }}',
    orderNotes: '{{ old('notes', '') }}',
    submitting: false,

    addToCart(item) {
        const existing = this.cart.find(c => c.id === item.id);
        if (existing) {
            existing.quantity++;
        } else {
            this.cart.push({
                id: item.id,
                name: item.name,
                price: parseFloat(item.price),
                image_url: item.image_url || '',
                quantity: 1,
                notes: ''
            });
        }
    },

    increaseQty(item) {
        item.quantity++;
    },

    decreaseQty(item) {
        if (item.quantity > 1) {
            item.quantity--;
        } else {
            this.cart = this.cart.filter(c => c.id !== item.id);
        }
    },

    removeItem(item) {
        this.cart = this.cart.filter(c => c.id !== item.id);
    },

    get totalItems() {
        return this.cart.reduce((sum, item) => sum + item.quantity, 0);
    },

    get totalPrice() {
        return this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    },

    formatRupiah(num) {
        return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(num);
    }
}" class="space-y-6 pb-28 sm:pb-16">

    <!-- Sub-header context & switch (from design.md line 241) -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pb-2 border-b border-outline-variant/60">
        <div class="flex items-center gap-1.5 bg-surface-container-high p-1 rounded-full w-fit">
            <a href="{{ route('services.index') }}" class="px-4 py-1.5 rounded-full font-semibold text-xs text-on-surface-variant hover:text-on-surface transition-colors flex items-center gap-1">
                <span class="material-symbols-outlined text-[16px]">local_car_wash</span>
                <span>MY Car</span>
            </a>
            <span class="px-4 py-1.5 rounded-full bg-secondary text-slate-950 font-bold text-xs shadow-sm flex items-center gap-1.5">
                <span class="material-symbols-outlined text-[16px]">restaurant</span>
                <span>MY Meal</span>
            </span>
        </div>

        <div class="flex items-center gap-2">
            <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-secondary/15 text-secondary text-xs font-bold border border-secondary/30">
                <span class="material-symbols-outlined text-[14px]">touch_app</span>
                <span>Self-Order</span>
            </span>
        </div>
    </div>

    <!-- Self-Order Announcement Card (from design.md line 256) -->
    <div class="bg-surface-container-lowest bg-cover bg-center rounded-2xl p-5 sm:p-6 shadow-[0_4px_24px_-2px_rgba(0,0,0,0.5)] border border-outline-variant/80 relative overflow-hidden flex flex-col sm:flex-row sm:items-center justify-between gap-4"
        style="background-image: linear-gradient(to right, rgba(11, 12, 14, 0.6) 0%, rgba(11, 12, 14, 0.5) 55%, rgba(11, 12, 14, 0.4) 100%), url('{{ asset('images/gallery/mymealjpeg.jpeg') }}');">

        <div class="max-w-xl relative z-10">
            <div class="flex items-center gap-1.5 mb-1.5">
                <span class="text-[10px] font-bold uppercase tracking-wider text-secondary">Dine-In &bull; Take-Away</span>
            </div>
            <h1 class="text-xl sm:text-2xl font-extrabold text-white tracking-tight">
                Menu Restoran &amp; Café MY HUB
            </h1>
            <p class="text-xs sm:text-sm text-slate-200 mt-1 leading-relaxed">
                Pesan langsung dari meja Anda. Makanan &amp; minuman akan diantar saat siap, dan pembayaran dapat dilakukan di kasir saat selesai.
            </p>
        </div>

        <div class="flex items-center gap-3 shrink-0 relative z-10">
            <button type="button"
                @click="showCartModal = true"
                class="inline-flex items-center gap-2 rounded-xl bg-surface-container-high/90 hover:bg-surface-container-highest text-on-surface px-4 py-2.5 text-xs font-bold border border-outline-variant shadow-md backdrop-blur-xs transition-all">
                <span class="material-symbols-outlined text-[18px] text-secondary">shopping_bag</span>
                <span>Keranjang (<span x-text="totalItems"></span>)</span>
            </button>
        </div>
    </div>

    <!-- Sticky Horizontal Scrollable Category Filter (from design.md line 270) -->
    <div class="sticky top-16 z-30 bg-surface/95 backdrop-blur-md py-2 border-b border-outline-variant/60 -mx-4 px-4 sm:mx-0 sm:px-0">
        <div class="flex items-center gap-2 overflow-x-auto no-scrollbar py-0.5">
            <button type="button"
                @click="activeCategory = 'all'"
                :class="activeCategory === 'all' ? 'bg-secondary text-slate-950 font-bold shadow-sm' : 'bg-surface-container-lowest text-on-surface-variant hover:text-on-surface border border-outline-variant/70'"
                class="shrink-0 px-4 py-2 rounded-full text-xs font-semibold transition-all">
                Semua Menu
            </button>

            @foreach ($categories as $cat)
                <button type="button"
                    @click="activeCategory = 'cat-{{ $cat->id }}'"
                    :class="activeCategory === 'cat-{{ $cat->id }}' ? 'bg-secondary text-slate-950 font-bold shadow-sm' : 'bg-surface-container-lowest text-on-surface-variant hover:text-on-surface border border-outline-variant/70'"
                    class="shrink-0 px-4 py-2 rounded-full text-xs font-semibold transition-all">
                    {{ $cat->name }}
                </button>
            @endforeach
        </div>
    </div>

    <!-- Error Alert if validation failed -->
    @if ($errors->any())
        <div class="rounded-2xl bg-red-950/60 border border-red-800 p-4 text-xs sm:text-sm text-red-200">
            <p class="font-bold mb-1">Gagal mengirim pesanan:</p>
            <ul class="list-disc list-inside space-y-1">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Menu Items Grid by Category -->
    <div class="space-y-8">
        @foreach ($categories as $cat)
            <div x-show="activeCategory === 'all' || activeCategory === 'cat-{{ $cat->id }}'" x-transition class="space-y-3.5">
                <div class="border-b border-outline-variant/70 pb-2 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-secondary"></span>
                        <h2 class="text-base sm:text-lg font-bold text-on-surface">
                            {{ $cat->name }}
                        </h2>
                    </div>
                    <span class="text-xs text-on-surface-variant font-medium">{{ $cat->menuItems->count() }} item</span>
                </div>

                @if ($cat->menuItems->isEmpty())
                    <p class="text-xs text-on-surface-variant italic py-2">Belum ada item tersedia dalam kategori ini.</p>
                @else
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach ($cat->menuItems as $item)
                            <div class="bg-surface-container-lowest border border-outline-variant/80 hover:border-secondary rounded-2xl p-4 flex flex-col justify-between shadow-[0_2px_12px_rgba(0,0,0,0.3)] hover:shadow-md transition-all group">
                                <div>
                                    <div class="relative w-full aspect-[4/3] sm:aspect-[16/10] md:aspect-[4/3] rounded-2xl overflow-hidden mb-3.5 bg-surface-variant border border-outline-variant/60 shadow-inner">
                                        <img src="{{ $item->image_url ?? 'https://lh3.googleusercontent.com/aida-public/AB6AXuDNxPQ69gnQpwgzkboOnDDqzipFqTuNZLF2JLw0E37n6yj_R2cQ85wl4jKt-krXlPFjNqPMyWtPco4ToFG3iq2o_v6gLHrR8DYsQ0w_mJQnV8mqF51SDczy7jHfWp-GC6_c4wtDAStccpoZnK-SOrNaM8iCXhiZ1hbjgX-8dh2ykhp9tqDX1fIUd34Bdnue9Tuy56AYjRu2kOhPaPtPMAMNJ7Acbx56hGhP0EJxVnXDnQDSuXMAizo' }}"
                                            alt="{{ $item->name }}"
                                            loading="lazy"
                                            class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-300">
                                        <span class="absolute bottom-2.5 left-2.5 px-2.5 py-0.5 rounded-full bg-surface-bright/90 backdrop-blur-sm text-[10px] font-bold text-secondary shadow-sm border border-secondary/30">
                                            Freshly Made
                                        </span>
                                    </div>

                                    <div class="flex items-start justify-between gap-2">
                                        <h3 class="text-sm sm:text-base font-bold text-on-surface group-hover:text-secondary transition-colors">
                                            {{ $item->name }}
                                        </h3>
                                        <span class="text-sm font-extrabold text-secondary whitespace-nowrap">
                                            Rp {{ number_format($item->price, 0, ',', '.') }}
                                        </span>
                                    </div>

                                    @if ($item->description)
                                        <p class="mt-1 text-xs text-on-surface-variant line-clamp-2 leading-relaxed">
                                            {{ $item->description }}
                                        </p>
                                    @endif
                                </div>

                                <div class="mt-3.5 pt-3 border-t border-outline-variant/60 flex items-center justify-between">
                                    <button type="button"
                                        @click="addToCart({ id: {{ $item->id }}, name: '{{ addslashes($item->name) }}', price: {{ $item->price }}, image_url: '{{ $item->image_url ? addslashes($item->image_url) : '' }}' })"
                                        class="inline-flex items-center gap-1 rounded-xl bg-gradient-to-r from-[#D9A72A] to-[#C59B27] hover:from-[#C59B27] hover:to-[#B48818] text-slate-950 px-3.5 py-1.5 text-xs font-bold shadow-sm shadow-[#C59B27]/25 transition-all active:scale-95">
                                        <span>+</span> Tambah
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    <!-- Sticky Mobile Bottom Bar (Thumb-Friendly Cart Summary from design.md line 305) -->
    <div x-show="totalItems > 0" x-transition
        class="fixed bottom-16 sm:bottom-0 inset-x-0 bg-surface-bright/95 backdrop-blur-xl border-t border-outline-variant/80 p-3.5 sm:p-4 z-40 shadow-[0_-4px_24px_rgba(0,0,0,0.5)]">
        <div class="max-w-4xl mx-auto flex items-center justify-between gap-3">
            <div>
                <span class="text-xs text-on-surface-variant font-medium block" x-text="`${totalItems} item di keranjang meja`"></span>
                <span class="text-base sm:text-lg font-black text-secondary" x-text="formatRupiah(totalPrice)"></span>
            </div>
            <button type="button"
                @click="showCartModal = true"
                class="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-[#D9A72A] to-[#C59B27] hover:from-[#C59B27] hover:to-[#B48818] text-slate-950 px-5 py-2.5 sm:py-3 text-xs sm:text-sm font-bold shadow-md shadow-[#C59B27]/30 transition-all active:scale-95">
                <span class="material-symbols-outlined text-[18px]">shopping_cart</span>
                <span>Lihat Keranjang &amp; Pesan →</span>
            </button>
        </div>
    </div>

    <!-- Slide-over / Modal Cart Checkout Drawer (Dark Luxury Theme) -->
    <div x-show="showCartModal" style="display: none;" class="relative z-50" role="dialog" aria-modal="true">
        <!-- Backdrop -->
        <div x-show="showCartModal"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            @click="showCartModal = false"
            class="fixed inset-0 bg-black/85 backdrop-blur-sm"></div>

        <div class="fixed inset-y-0 right-0 max-w-full flex pl-6 sm:pl-10">
            <div x-show="showCartModal"
                x-transition:enter="transform transition ease-in-out duration-300"
                x-transition:enter-start="translate-x-full"
                x-transition:enter-end="translate-x-0"
                x-transition:leave="transform transition ease-in-out duration-300"
                x-transition:leave-start="translate-x-0"
                x-transition:leave-end="translate-x-full"
                class="w-screen max-w-md bg-surface-container-lowest border-l border-outline-variant flex flex-col justify-between shadow-2xl">

                <!-- Drawer Header -->
                <div class="p-5 sm:p-6 border-b border-outline-variant/80 flex items-center justify-between bg-surface-container-high">
                    <div>
                        <h2 class="text-base sm:text-lg font-bold text-on-surface">Keranjang Pesanan</h2>
                        <p class="text-xs text-on-surface-variant" x-text="`${totalItems} item dipilih`"></p>
                    </div>
                    <button type="button" @click="showCartModal = false"
                        class="w-8 h-8 rounded-full bg-surface-container hover:bg-surface-container-highest flex items-center justify-center text-on-surface-variant hover:text-on-surface">
                        <span class="material-symbols-outlined text-[18px]">close</span>
                    </button>
                </div>

                <!-- Form & Items Container -->
                <form method="POST" action="{{ route('order.store') }}" @submit="submitting = true" class="flex-1 overflow-y-auto p-5 sm:p-6 space-y-5 bg-surface">
                    @csrf

                    <!-- 1. Nomor Meja -->
                    <div class="bg-surface-container-lowest p-4 rounded-xl border border-outline-variant/80 shadow-sm">
                        <label for="table_id" class="block text-xs font-bold uppercase tracking-wider text-on-surface mb-1.5">
                            1. Nomor Meja Anda *
                        </label>
                        <select id="table_id" name="table_id" x-model="tableId" required
                            class="block w-full rounded-xl bg-surface-container-low border border-outline-variant px-3.5 py-2.5 text-on-surface text-sm focus:border-secondary focus:outline-none">
                            <option value="" disabled>-- Pilih Meja Duduk Anda --</option>
                            @foreach ($tables as $t)
                                <option value="{{ $t->id }}">
                                    Meja {{ $t->table_number }} ({{ $t->area->label() }})
                                </option>
                            @endforeach
                        </select>
                        <p class="text-[11px] text-on-surface-variant mt-1.5 flex items-center gap-1">
                            <span class="material-symbols-outlined text-[14px] text-secondary">info</span>
                            <span>Lihat stiker nomor meja pada sudut meja tempat Anda duduk.</span>
                        </p>
                    </div>

                    <!-- 2. Data Pemesan -->
                    <div class="bg-surface-container-lowest p-4 rounded-xl border border-outline-variant/80 shadow-sm space-y-3">
                        <span class="block text-xs font-bold uppercase tracking-wider text-on-surface">
                            2. Data Pemesan
                        </span>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <label for="customer_name" class="block text-[11px] font-semibold text-on-surface-variant mb-1">
                                    Nama Pemesan *
                                </label>
                                <input id="customer_name" name="customer_name" type="text" x-model="customerName" required
                                    placeholder="Contoh: Rian"
                                    class="block w-full rounded-xl bg-surface-container-low border border-outline-variant px-3 py-2 text-on-surface text-sm focus:border-secondary focus:outline-none">
                            </div>
                            <div>
                                <label for="customer_phone" class="block text-[11px] font-semibold text-on-surface-variant mb-1">
                                    No. WhatsApp (Opsional)
                                </label>
                                <input id="customer_phone" name="customer_phone" type="tel" x-model="customerPhone"
                                    placeholder="0812xxxx"
                                    class="block w-full rounded-xl bg-surface-container-low border border-outline-variant px-3 py-2 text-on-surface text-sm focus:border-secondary focus:outline-none">
                            </div>
                        </div>
                    </div>

                    <!-- 3. Ringkasan Menu Dipilih -->
                    <div class="bg-surface-container-lowest p-4 rounded-xl border border-outline-variant/80 shadow-sm space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-xs font-bold uppercase tracking-wider text-on-surface">
                                3. Menu yang Dipesan (<span x-text="totalItems"></span>)
                            </span>
                            <span class="text-xs text-secondary font-bold" x-text="formatRupiah(totalPrice)"></span>
                        </div>

                        <template x-if="cart.length === 0">
                            <p class="text-xs text-on-surface-variant italic py-3 text-center">Keranjang masih kosong. Pilih menu di luar drawer.</p>
                        </template>

                        <div class="space-y-3">
                            <template x-for="(item, index) in cart" :key="item.id">
                                <div class="bg-surface-container-low border border-outline-variant/60 rounded-xl p-3 space-y-2.5">
                                    <!-- Hidden Inputs for Form Submission -->
                                    <input type="hidden" :name="`items[${index}][menu_item_id]`" :value="item.id">
                                    <input type="hidden" :name="`items[${index}][quantity]`" :value="item.quantity">
                                    <input type="hidden" :name="`items[${index}][notes]`" :value="item.notes">

                                    <div class="flex items-center justify-between gap-3">
                                        <div class="flex items-center gap-3 min-w-0 flex-1">
                                            <template x-if="item.image_url">
                                                <img :src="item.image_url" :alt="item.name" class="w-12 h-12 rounded-xl object-cover border border-outline-variant/80 shrink-0 shadow-2xs">
                                            </template>
                                            <template x-if="!item.image_url">
                                                <div class="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center text-secondary shrink-0 border border-outline-variant/80">
                                                    <span class="material-symbols-outlined text-[20px]">restaurant</span>
                                                </div>
                                            </template>
                                            <div class="min-w-0 flex-1">
                                                <span class="text-xs font-bold text-on-surface block truncate" x-text="item.name"></span>
                                                <span class="text-xs text-secondary font-semibold" x-text="formatRupiah(item.price)"></span>
                                            </div>
                                        </div>

                                        <!-- Quantity Stepper -->
                                        <div class="flex items-center gap-1.5 bg-surface-container-lowest border border-outline-variant rounded-lg p-0.5 shrink-0">
                                            <button type="button" @click="decreaseQty(item)"
                                                class="w-6 h-6 rounded flex items-center justify-center text-xs font-bold text-on-surface-variant hover:bg-surface-container hover:text-on-surface">
                                                -
                                            </button>
                                            <span class="text-xs font-bold text-on-surface px-1.5" x-text="item.quantity"></span>
                                            <button type="button" @click="increaseQty(item)"
                                                class="w-6 h-6 rounded flex items-center justify-center text-xs font-bold text-on-surface-variant hover:bg-surface-container hover:text-on-surface">
                                                +
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Item Notes -->
                                    <input type="text" x-model="item.notes"
                                        placeholder="cth: less sugar, es pisah, sambal dipisah..."
                                        class="w-full bg-surface-container-lowest border border-outline-variant/80 rounded-lg px-2.5 py-1.5 text-xs text-on-surface placeholder:text-on-surface-variant/50 focus:border-secondary focus:outline-none">
                                </div>
                            </template>
                        </div>
                    </div>

                    <!-- 4. Catatan Umum Pesanan -->
                    <div class="bg-surface-container-lowest p-4 rounded-xl border border-outline-variant/80 shadow-sm space-y-2">
                        <label for="notes" class="block text-xs font-bold uppercase tracking-wider text-on-surface">
                            4. Catatan Tambahan (Opsional)
                        </label>
                        <textarea id="notes" name="notes" rows="2" x-model="orderNotes"
                            placeholder="cth: tolong antar minum terlebih dahulu.."
                            class="block w-full rounded-xl bg-surface-container-low border border-outline-variant p-2.5 text-on-surface text-xs focus:border-secondary focus:outline-none"></textarea>
                    </div>

                    <!-- 5. Payment Notice Callout (design.md line 410) -->
                    <div class="p-3.5 bg-secondary-container/30 border border-secondary-container rounded-xl flex items-start gap-2.5">
                        <span class="text-[18px] select-none leading-none">💡</span>
                        <div class="text-xs text-on-secondary-container leading-relaxed">
                            <span class="font-bold block">Bayar di Kasir / Meja</span>
                            Tidak dipungut biaya online saat ini. Selesaikan pembayaran setelah selesai bersantap dengan uang tunai atau QRIS.
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit"
                        :disabled="cart.length === 0 || submitting"
                        class="w-full py-3.5 px-4 rounded-xl bg-gradient-to-r from-[#D9A72A] to-[#C59B27] hover:from-[#C59B27] hover:to-[#B48818] text-slate-950 font-bold text-sm shadow-md shadow-[#C59B27]/30 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all">
                        <span x-show="!submitting">Buat Pesanan (<span x-text="formatRupiah(totalPrice)"></span>)</span>
                        <span x-show="submitting" style="display: none;">Memproses Pesanan...</span>
                        <span class="material-symbols-outlined text-[18px]">send</span>
                    </button>
                </form>
            </div>
        </div>
    </div>

</div>
@endsection