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

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

@section('header-right')
<button id="search-open" class="text-slate-500 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">

    <!-- Search Bar -->
    <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 products..."
               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>

    <!-- Results -->
    <div id="search-results" class="flex-1 overflow-y-auto px-4 py-4"></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-6">
        @foreach($categories as $category)
            <a href="#category-{{ $category->id }}"
               data-nav-id="category-{{ $category->id }}"
               class="category-nav-link text-on-surface-variant hover:text-primary transition-colors font-label-bold text-label-bold whitespace-nowrap pb-1">
                {{ $category->name }}
            </a>
        @endforeach
    </div>
</nav>
@endif
@endsection

@section('content')
<!-- Main Content -->
<main class="flex-1 px-container-padding py-section-margin">

    @forelse($categories as $category)
    @php $products = $productsByCategory->get($category->id, collect()); @endphp
    <section class="mb-16" id="category-{{ $category->id }}">
        <h2 class="font-serif text-3xl font-bold italic mb-6 text-slate-900 border-b pb-2">
            {{ $category->name }}
        </h2>

        @if($products->count() > 0)
        <div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-4 md:gap-12">
            @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="group flex flex-col gap-4">
                <div class="relative bg-surface-container-low rounded-lg overflow-hidden aspect-[3/4]">
                    <img
                        alt="{{ $product->name }}"
                        class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-500"
                        src="{{ $product->picture_url }}"
                        onerror="this.src='{{ config('global.s3_path') . 'shop/' . $shop->logo }}'"
                    />
                    @if($product->is_new_arrived || $product->is_discount)
                        <div class="absolute top-2 left-2 flex gap-1">
                            @if($product->is_new_arrived)
                                <div class="bg-primary text-on-primary px-2 py-1 rounded-full font-label-bold text-label-bold uppercase text-[10px]">New</div>
                            @endif
                            @if($product->is_discount)
                                <div class="bg-orange-100 text-orange-600 px-2 py-1 rounded-full font-label-bold text-label-bold uppercase text-[10px]">Promo</div>
                            @endif
                        </div>
                    @endif
                </div>
                <div class="flex flex-col mt-2">
                    <h3 class="font-title-sm text-title-sm text-on-surface line-clamp-1">{{ $product->name }}</h3>
                    @if($product->is_discount)
                        <div class="flex gap-2 items-center mt-1">
                            <p class="font-body-sm text-body-sm text-primary font-medium">
                                {{ $currencySymbol }}{{ number_format($product->getDiscountPrice($product->unit_price), 2) }}
                            </p>
                            <p class="font-body-sm text-body-sm text-on-surface-variant line-through text-[12px]">
                                {{ $currencySymbol }}{{ number_format($product->unit_price, 2) }}
                            </p>
                        </div>
                    @else
                        <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">
                            {{ $currencySymbol }}{{ number_format($product->unit_price, 2) }}
                        </p>
                    @endif
                </div>
            </a>
            @endforeach
        </div>
        @else
        <p class="text-on-surface-variant text-body-sm">No products 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">inventory_2</span>
        <p class="text-on-surface-variant text-body-md">No products available at the moment.</p>
    </div>
    @endforelse

</main>
@endsection

@section('scripts')
<script>
// ── Search ────────────────────────────────────────────────────────────────────
(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('');
    });

    // Product index built from the DOM — no extra server round-trip needed
    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 price = card.querySelector('p')  ? card.querySelector('p').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 products 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 Products</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 str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
    function escAttr(str) { return escHtml(str); }
})();

// ── Active Category ────────────────────────────────────────────────────────────
(function () {
    const links = document.querySelectorAll('.category-nav-link');
    const nav   = document.getElementById('category-nav');

    function setActive(id) {
        links.forEach(function (link) {
            const isActive = link.dataset.navId === id;
            link.classList.toggle('text-primary',            isActive);
            link.classList.toggle('border-b-2',              isActive);
            link.classList.toggle('border-primary',          isActive);
            link.classList.toggle('text-on-surface-variant', !isActive);
        });

        // scroll active tab into view inside the nav bar
        const activeLink = nav.querySelector('[data-nav-id="' + id + '"]');
        if (activeLink) {
            activeLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
        }
    }

    // Use IntersectionObserver to detect which section is visible
    const sections  = document.querySelectorAll('section[id^="category-"]');
    const headerH   = 64 + 48; // top-bar (h-16) + nav bar (~py-3 + text)

    const observer = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                setActive(entry.target.id);
            }
        });
    }, {
        rootMargin: '-' + headerH + 'px 0px -60% 0px',
        threshold: 0
    });

    sections.forEach(function (s) { observer.observe(s); });

    // Activate first tab on load
    if (sections.length) setActive(sections[0].id);
})();
</script>
@endsection