@extends('layouts.kiosk')
@section('title', 'Order Here')

@section('content')
<div class="h-screen flex flex-col">

    {{-- Header --}}
    <header class="bg-white border-b border-orange-100 px-8 py-5 flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-2xl bg-orange-500 flex items-center justify-center text-white text-2xl">🍽️</div>
            <div>
                <p class="text-2xl font-bold text-gray-900">{{ \App\Models\Setting::get('restaurant_name', 'Restaurant') }}</p>
                <p class="text-sm text-gray-400">Tap any item to add it to your order</p>
            </div>
        </div>
        <div class="text-right">
            <p class="text-sm text-gray-400">Need help?</p>
            <p class="text-base font-medium text-orange-600">Ask our staff at the counter</p>
        </div>
    </header>

    <div class="flex-1 flex overflow-hidden">

        {{-- Left: categories + products --}}
        <div class="flex-1 flex flex-col overflow-hidden">

            {{-- Category tabs — big, thumb-friendly --}}
            <div class="flex gap-3 px-8 py-4 overflow-x-auto bg-orange-50 border-b border-orange-100" id="category-tabs">
                <button class="category-tab shrink-0 px-6 py-4 rounded-2xl text-lg font-semibold bg-orange-500 text-white" data-category="all">
                    🍽️ All Items
                </button>
                @foreach ($categories as $cat)
                    <button class="category-tab shrink-0 px-6 py-4 rounded-2xl text-lg font-semibold bg-white text-gray-700 border border-orange-100" data-category="{{ $cat->slug }}">
                        {{ $cat->icon }} {{ $cat->name }}
                    </button>
                @endforeach
            </div>

            {{-- Product grid --}}
            <div class="flex-1 overflow-y-auto p-8">
                <div class="grid grid-cols-2 md:grid-cols-3 gap-5" id="product-grid">
                    @foreach ($categories as $cat)
                        @foreach ($cat->products as $product)
                            <div class="product-card bg-white rounded-2xl border border-orange-100 p-4 flex flex-col {{ !$product->isOrderable() ? 'opacity-40' : '' }}"
                                 data-category="{{ $cat->slug }}" data-product-id="{{ $product->id }}">
                                <div class="h-28 rounded-xl bg-orange-50 flex items-center justify-center text-4xl mb-3">
                                    {{ $product->is_veg ? '🥗' : '🍗' }}
                                </div>
                                <div class="flex items-start justify-between gap-2">
                                    <p class="font-semibold text-gray-900 leading-tight">{{ $product->name }}</p>
                                    <span class="text-lg shrink-0">{{ $product->is_veg ? '🟢' : '🔴' }}</span>
                                </div>
                                <p class="text-orange-600 font-bold text-lg mt-1">₹{{ number_format($product->price, 0) }}</p>

                                @if (!$product->isOrderable())
                                    <p class="text-sm text-red-400 mt-2 font-medium">Currently unavailable</p>
                                @else
                                    <div class="mt-3 qty-control" data-product-id="{{ $product->id }}">
                                        <button class="w-full add-btn bg-orange-50 text-orange-600 font-semibold py-3 rounded-xl text-lg" onclick="addItem({{ $product->id }})">
                                            + Add
                                        </button>
                                        <div class="stepper hidden items-center justify-between bg-orange-500 rounded-xl">
                                            <button class="text-white text-2xl font-bold w-12 h-12" onclick="changeQty({{ $product->id }}, -1)">−</button>
                                            <span class="qty-display text-white font-bold text-lg">0</span>
                                            <button class="text-white text-2xl font-bold w-12 h-12" onclick="changeQty({{ $product->id }}, 1)">+</button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Right: live cart --}}
        <div class="w-96 bg-white border-l border-orange-100 flex flex-col shrink-0">
            <div class="px-6 py-5 border-b border-orange-100">
                <h2 class="text-xl font-bold text-gray-900">Your Order</h2>
            </div>
            <div class="flex-1 overflow-y-auto px-6 py-4" id="cart-items">
                <p class="text-gray-400 text-center mt-10" id="empty-cart-msg">Your cart is empty.<br>Tap items to add them here.</p>
            </div>
            <div class="px-6 py-5 border-t border-orange-100">
                <div class="flex justify-between text-lg font-bold text-gray-900 mb-4">
                    <span>Total</span>
                    <span id="cart-total">₹0</span>
                </div>
                <button id="checkout-btn" onclick="goToCheckout()" disabled
                        class="w-full bg-gray-200 text-gray-400 font-bold text-xl py-5 rounded-2xl transition">
                    Review Order
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    const kioskToken = @json($kiosk->device_token);
    const csrfToken = @json(csrf_token());
    let cart = @json($cart);

    function renderCart() {
        const container = document.getElementById('cart-items');
        const emptyMsg = document.getElementById('empty-cart-msg');
        const items = Object.entries(cart);

        container.querySelectorAll('.cart-line').forEach(el => el.remove());

        let total = 0;
        if (items.length === 0) {
            emptyMsg.style.display = 'block';
        } else {
            emptyMsg.style.display = 'none';
            items.forEach(([id, line]) => {
                total += line.price * line.qty;
                const div = document.createElement('div');
                div.className = 'cart-line flex justify-between items-center py-3 border-b border-orange-50';
                div.innerHTML = `
                    <div>
                        <p class="font-medium text-gray-800">${line.name}</p>
                        <p class="text-sm text-gray-400">₹${line.price} × ${line.qty}</p>
                    </div>
                    <p class="font-semibold">₹${(line.price * line.qty).toFixed(0)}</p>`;
                container.appendChild(div);
            });
        }

        document.getElementById('cart-total').innerText = '₹' + total.toFixed(0);
        const btn = document.getElementById('checkout-btn');
        if (items.length > 0) {
            btn.disabled = false;
            btn.className = 'w-full bg-orange-500 text-white font-bold text-xl py-5 rounded-2xl';
        } else {
            btn.disabled = true;
            btn.className = 'w-full bg-gray-200 text-gray-400 font-bold text-xl py-5 rounded-2xl';
        }

        // sync steppers on product cards
        document.querySelectorAll('.qty-control').forEach(el => {
            const pid = el.dataset.productId;
            const qty = cart[pid]?.qty || 0;
            const addBtn = el.querySelector('.add-btn');
            const stepper = el.querySelector('.stepper');
            const display = el.querySelector('.qty-display');
            if (qty > 0) {
                addBtn.classList.add('hidden');
                stepper.classList.remove('hidden');
                stepper.classList.add('flex');
                display.innerText = qty;
            } else {
                addBtn.classList.remove('hidden');
                stepper.classList.add('hidden');
                stepper.classList.remove('flex');
            }
        });
    }

    async function updateCart(productId, qty) {
        const res = await fetch(`/kiosk/${kioskToken}/cart`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ product_id: productId, qty }),
        });
        if (!res.ok) {
            const data = await res.json();
            alert(data.error || 'Something went wrong. Please try again.');
            return;
        }
        const data = await res.json();
        cart = data.cart;
        renderCart();
    }

    function addItem(productId) {
        const current = cart[productId]?.qty || 0;
        updateCart(productId, current + 1);
    }

    function changeQty(productId, delta) {
        const current = cart[productId]?.qty || 0;
        updateCart(productId, Math.max(0, current + delta));
    }

    function goToCheckout() {
        window.location.href = `/kiosk/${kioskToken}/checkout`;
    }

    // Category filtering
    document.querySelectorAll('.category-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            document.querySelectorAll('.category-tab').forEach(t => {
                t.classList.remove('bg-orange-500', 'text-white');
                t.classList.add('bg-white', 'text-gray-700', 'border', 'border-orange-100');
            });
            tab.classList.add('bg-orange-500', 'text-white');
            tab.classList.remove('bg-white', 'text-gray-700', 'border', 'border-orange-100');

            const cat = tab.dataset.category;
            document.querySelectorAll('.product-card').forEach(card => {
                card.style.display = (cat === 'all' || card.dataset.category === cat) ? '' : 'none';
            });
        });
    });

    renderCart();

    // Idle timeout: if left untouched for 90s with items in cart abandoned mid-browse,
    // gently reset so the next guest doesn't inherit someone else's order.
    let idleTimer;
    function resetIdleTimer() {
        clearTimeout(idleTimer);
        idleTimer = setTimeout(() => { window.location.href = `/kiosk/${kioskToken}`; }, 90000);
    }
    ['click', 'touchstart'].forEach(evt => document.addEventListener(evt, resetIdleTimer));
    resetIdleTimer();
</script>
@endsection