@extends('digitalmenu::layouts.public')

@section('title', ($shop->name ?? 'Shop') . ' - Browse Menu')

@section('header-right')
<button id="search-open" class="text-orange-600 hover:opacity-70 transition-opacity active:scale-95 duration-200">
    <span class="material-symbols-outlined text-2xl">search</span>
</button>
@endsection

@section('sub-header')
<!-- Search Overlay -->
<div id="search-overlay" class="fixed inset-0 z-50 flex flex-col bg-background hidden">
    <div class="flex items-center gap-3 px-4 h-16 border-b border-slate-100 bg-white shrink-0">
        <button id="search-close" class="text-slate-500 hover:opacity-70 active:scale-95 transition-all">
            <span class="material-symbols-outlined text-2xl">arrow_back</span>
        </button>
        <input id="search-input"
               type="text"
               placeholder="Search menu..."
               autocomplete="off"
               class="flex-1 bg-transparent outline-none text-slate-900 font-['Plus_Jakarta_Sans'] text-base placeholder-slate-400"/>
        <button id="search-clear" class="text-slate-400 hover:opacity-70 hidden">
            <span class="material-symbols-outlined text-xl">close</span>
        </button>
    </div>
    <div id="search-results" class="flex-1 overflow-y-auto px-4 py-4"></div>
</div>

<!-- Order Instructions Banner -->
<div class="bg-primary text-on-primary py-2 px-container-padding text-center">
    <div class="flex items-center justify-center gap-2">
        <span class="material-symbols-outlined text-lg">storefront</span>
        <p class="font-label-bold text-label-bold tracking-widest uppercase">Browse Menu • Order at Counter</p>
    </div>
</div>

@if($categories->count() > 0)
<!-- Sticky Category Tabs -->
<nav class="bg-surface sticky top-16 z-30 border-b border-surface-variant/50">
    <div id="category-nav" class="flex overflow-x-auto hide-scrollbar px-container-padding py-3 gap-3">
        @foreach($categories as $category)
            <a href="#category-{{ $category->id }}"
               data-nav-id="category-{{ $category->id }}"
               class="category-nav-link flex-shrink-0 px-4 py-1.5 bg-surface-container text-secondary rounded-full font-label-bold text-label-bold hover:bg-surface-container-high transition-all active:scale-[0.98] whitespace-nowrap">
                {{ $category->name }}
            </a>
        @endforeach
    </div>
</nav>
@endif
@endsection

@section('content')
<main class="flex-1 px-container-padding pb-12">

    @forelse($categories as $category)
    @php $products = $productsByCategory->get($category->id, collect()); @endphp
    <section class="mt-section-margin" id="category-{{ $category->id }}">
        <div class="flex items-center justify-between mb-stack-gap">
            <h2 class="font-headline-md text-headline-md text-on-surface font-bold">{{ $category->name }}</h2>
            @if($products->count() > 0)
            <span class="text-body-sm text-secondary">{{ $products->count() }} {{ $products->count() === 1 ? 'item' : 'items' }}</span>
            @endif
        </div>

        @if($products->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 gap-grid-gutter">
            @foreach($products as $product)
            <a href="{{ route('digitalmenu.public.product', ['qr' => $shop->short_code, 'id' => $product->id]) }}"
               data-product-url="{{ route('digitalmenu.public.product', ['qr' => $shop->short_code, 'id' => $product->id]) }}"
               class="bg-surface-container-lowest rounded-xl p-4 flex gap-4 shadow-sm border border-zinc-50 transition-transform hover:shadow-md active:scale-[0.99]">
                <div class="w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-surface-container-low flex items-center justify-center">
                    <img alt="{{ $product->name }}"
                         class="w-full h-full object-cover"
                         src="{{ $product->picture_url }}"
                         onerror="this.src='{{ config('global.s3_path') . 'shop/' . $shop->logo }}'"/>
                </div>
                <div class="flex-1 flex flex-col justify-between min-w-0">
                    <div>
                        <h3 class="font-title-sm text-title-sm line-clamp-1">{{ $product->name }}</h3>
                        @if($product->is_new_arrived || $product->is_discount)
                        <div class="flex items-center gap-1.5 mt-1">
                            @if($product->is_new_arrived)
                                <span class="bg-primary text-on-primary px-2 py-0.5 rounded font-label-bold text-[10px] uppercase">New</span>
                            @endif
                            @if($product->is_discount)
                                <span class="bg-orange-100 text-orange-600 px-2 py-0.5 rounded font-label-bold text-[10px] uppercase">Promo</span>
                            @endif
                        </div>
                        @endif
                        @if(!empty($product->short_description))
                        <p class="text-body-sm text-secondary line-clamp-2 mt-1">{{ $product->short_description }}</p>
                        @endif
                    </div>
                    <div class="flex items-center justify-between mt-2">
                        @if($product->is_discount)
                            @php $discountPrice = $product->getDiscountPrice($product->unit_price); @endphp
                            @if($discountPrice !== false)
                                <div class="flex items-center gap-2">
                                    <span class="font-title-sm text-primary text-lg">{{ $currencySymbol }}{{ number_format($discountPrice, 2) }}</span>
                                    <span class="text-secondary line-through text-body-sm">{{ $currencySymbol }}{{ number_format($product->unit_price, 2) }}</span>
                                </div>
                            @else
                                <span class="font-title-sm text-primary text-lg">{{ $currencySymbol }}{{ number_format($product->unit_price, 2) }}</span>
                            @endif
                        @else
                            <span class="font-title-sm text-primary text-lg">{{ $currencySymbol }}{{ number_format($product->unit_price, 2) }}</span>
                        @endif
                    </div>
                </div>
            </a>
            @endforeach
        </div>
        @else
        <p class="text-on-surface-variant text-body-sm py-4">No items in this category.</p>
        @endif
    </section>
    @empty
    <div class="flex flex-col items-center justify-center py-24 text-center">
        <span class="material-symbols-outlined text-5xl text-on-surface-variant mb-4">restaurant_menu</span>
        <p class="text-on-surface-variant text-body-md">No menu items available at the moment.</p>
    </div>
    @endforelse

</main>
@endsection

@section('scripts')
<script>
(function () {
    const overlay  = document.getElementById('search-overlay');
    const input    = document.getElementById('search-input');
    const results  = document.getElementById('search-results');
    const clearBtn = document.getElementById('search-clear');

    document.getElementById('search-open').addEventListener('click', function () {
        overlay.classList.remove('hidden');
        input.focus();
        render('');
    });

    document.getElementById('search-close').addEventListener('click', close);
    overlay.addEventListener('click', function (e) { if (e.target === overlay) close(); });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });

    function close() {
        overlay.classList.add('hidden');
        input.value = '';
        clearBtn.classList.add('hidden');
    }

    input.addEventListener('input', function () {
        const q = input.value.trim();
        clearBtn.classList.toggle('hidden', q === '');
        render(q);
    });

    clearBtn.addEventListener('click', function () {
        input.value = '';
        clearBtn.classList.add('hidden');
        input.focus();
        render('');
    });

    const allProducts = [];
    document.querySelectorAll('section[id^="category-"]').forEach(function (section) {
        const catName = section.querySelector('h2') ? section.querySelector('h2').textContent.trim() : '';
        section.querySelectorAll('a[data-product-url]').forEach(function (card) {
            const img   = card.querySelector('img');
            const name  = card.querySelector('h3') ? card.querySelector('h3').textContent.trim() : '';
            const priceEl = card.querySelector('.text-primary');
            const price = priceEl ? priceEl.textContent.trim() : '';
            allProducts.push({
                name:     name,
                category: catName,
                price:    price,
                imgSrc:   img ? img.src : '',
                imgAlt:   img ? img.alt : '',
                anchor:   card.dataset.productUrl
            });
        });
    });

    function render(query) {
        const q = query.toLowerCase();
        const filtered = q === ''
            ? allProducts
            : allProducts.filter(function (p) {
                return p.name.toLowerCase().includes(q) || p.category.toLowerCase().includes(q);
            });

        if (filtered.length === 0) {
            results.innerHTML =
                '<div class="flex flex-col items-center justify-center py-24 text-center">' +
                    '<span class="material-symbols-outlined text-5xl text-on-surface-variant mb-4">search_off</span>' +
                    '<p class="text-on-surface-variant">No items found for <strong>&ldquo;' + escHtml(query) + '&rdquo;</strong></p>' +
                '</div>';
            return;
        }

        const header = q === ''
            ? '<p class="text-xs text-on-surface-variant font-semibold uppercase tracking-widest mb-4">All Items</p>'
            : '<p class="text-xs text-on-surface-variant font-semibold uppercase tracking-widest mb-4">' + filtered.length + ' result' + (filtered.length !== 1 ? 's' : '') + '</p>';

        const cards = filtered.map(function (p) {
            return '<a href="' + p.anchor + '"' +
                   '   class="flex items-center gap-4 py-3 border-b border-surface-variant/50 hover:bg-surface-container-low rounded-lg px-2 transition-colors">' +
                   '  <div class="w-14 h-14 rounded-lg overflow-hidden bg-surface-container-low shrink-0">' +
                   '    <img src="' + escAttr(p.imgSrc) + '" alt="' + escAttr(p.imgAlt) + '" class="w-full h-full object-cover"/>' +
                   '  </div>' +
                   '  <div class="flex-1 min-w-0">' +
                   '    <p class="text-on-surface font-semibold text-sm truncate">' + escHtml(p.name) + '</p>' +
                   '    <p class="text-on-surface-variant text-xs mt-0.5">' + escHtml(p.category) + '</p>' +
                   '  </div>' +
                   '  <p class="text-primary font-bold text-sm shrink-0">' + escHtml(p.price) + '</p>' +
                   '</a>';
        }).join('');

        results.innerHTML = header + cards;
    }

    function escHtml(str) {
        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
    function escAttr(str) { return escHtml(str); }
})();

// Active category highlight via IntersectionObserver
(function () {
    const links = document.querySelectorAll('.category-nav-link');
    const nav   = document.getElementById('category-nav');
    if (!nav || !links.length) return;

    function setActive(id) {
        links.forEach(function (link) {
            const isActive = link.dataset.navId === id;
            link.classList.toggle('bg-primary',          isActive);
            link.classList.toggle('text-on-primary',     isActive);
            link.classList.toggle('bg-surface-container', !isActive);
            link.classList.toggle('text-secondary',      !isActive);
        });
        const activeLink = nav.querySelector('[data-nav-id="' + id + '"]');
        if (activeLink) {
            activeLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
        }
    }

    const sections = document.querySelectorAll('section[id^="category-"]');
    const observer = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) setActive(entry.target.id);
        });
    }, { rootMargin: '-112px 0px -60% 0px', threshold: 0 });

    sections.forEach(function (s) { observer.observe(s); });
    if (sections.length) setActive(sections[0].id);
})();
</script>
@endsection