@extends('layouts.bistro')

@push('styles')
<style>
    /* ---- Search ---- */
    .menu-search-wrap {
        max-width: 700px;
        margin: 0 auto 30px;
        position: relative;
    }
    .menu-search-icon {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #aaa;
        font-size: 16px;
        pointer-events: none;
    }
    .menu-search-input {
        width: 100%;
        padding: 15px 52px;
        border: 2px solid #e0d8cf;
        border-radius: 4px;
        font-size: 16px;
        outline: none;
        transition: border-color .25s;
        color: #333;
        background: #fff;
        box-sizing: border-box;
    }
    .menu-search-input:focus { border-color: #e25111; }
    .menu-search-input::placeholder { color: #bbb; }
    .menu-search-clear {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #bbb;
        font-size: 18px;
        cursor: pointer;
        padding: 4px 8px;
        line-height: 1;
    }
    .menu-search-clear:hover { color: #e25111; }

    /* ---- Pills ---- */
    .menu-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin-bottom: 40px;
    }
    .menu-pill {
        padding: 10px 24px;
        border-radius: 25px;
        border: 2px solid #e25111;
        background: transparent;
        color: #e25111;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .7px;
        cursor: pointer;
        transition: background .2s, color .2s;
        white-space: nowrap;
        font-family: inherit;
        line-height: 1.4;
    }
    .menu-pill:hover,
    .menu-pill.is-active { background: #e25111; color: #fff; }

    /* ---- No results ---- */
    .menu-no-results {
        text-align: center;
        padding: 50px 20px;
        color: #999;
    }
    .menu-no-results .menu-no-results-icon {
        font-size: 48px;
        color: #ddd;
        display: block;
        margin-bottom: 15px;
    }

    /* ---- Category ---- */
    .menu-category-toggle { cursor: pointer; user-select: none; }
    .menu-category-toggle:hover h2.heading { color: #e25111; }
    .menu-toggle-icon { font-size: 14px; margin-top: 8px; transition: transform .3s ease; }
    .menu-toggle-icon.is-closed { transform: rotate(-90deg); }
    ul.menu_widget li .menu-item-desc {
        display: block;
        font-size: 11px;
        margin-top: 3px;
        opacity: .72;
        line-height: 1.4;
    }
    ul.menu_widget li { overflow: hidden; }
    .menu-category-body { margin-bottom: 30px; }
    [x-cloak] { display: none !important; }
</style>
@endpush

@section('content')

<!-- Page Header -->
<section id="page_header" style="background-image: url('{{ asset('images/konoba/konoba-sala-klasicna.jpg') }}');">
    <div class="page_title">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="title">Jelovnik</h2>
                    <p>Od roštilја do fine dining kuhinje - sve na jednom mjestu</p>
                </div>
            </div>
        </div>
    </div>
</section>

@php
    $categories = \App\Models\MenuCategory::with(['items' => function($query) {
        $query->where('is_available', true)->orderBy('order');
    }])
    ->where('is_active', true)
    ->orderBy('order')
    ->get();

    $menuOpen   = [];
    $menuSearch = [];
    $isFirstCat = true;
    foreach ($categories as $cat) {
        if ($cat->items->count() > 0) {
            $menuOpen[$cat->slug]   = $isFirstCat;
            $menuSearch[$cat->slug] = $cat->items
                ->map(fn($item) => mb_strtolower($item->name . ' ' . ($item->description ?? ''), 'UTF-8'))
                ->values()
                ->toArray();
            $isFirstCat = false;
        }
    }
    $firstSlug = array_key_first($menuOpen) ?? '';
@endphp

<script>
function menuApp() {
    const open   = @json($menuOpen);
    const sData  = @json($menuSearch);
    const first  = @json($firstSlug);

    return {
        search: '',
        open: { ...open },
        searchData: sData,
        activeSlug: first,

        get isSearching() { return this.search.trim().length > 0; },

        get anyResults() {
            if (!this.isSearching) { return true; }
            const q = this.search.toLowerCase().trim();
            return Object.keys(this.searchData).some(
                slug => this.searchData[slug].some(s => s.includes(q))
            );
        },

        catHasMatch(slug) {
            if (!this.isSearching) { return true; }
            const q = this.search.toLowerCase().trim();
            return this.searchData[slug]?.some(s => s.includes(q)) ?? false;
        },

        itemMatches(slug, idx) {
            if (!this.isSearching) { return true; }
            const q = this.search.toLowerCase().trim();
            return (this.searchData[slug]?.[idx] ?? '').includes(q);
        },

        scrollTo(slug) {
            // accordion: close all, open selected
            Object.keys(this.open).forEach(k => { this.open[k] = false; });
            this.open[slug] = true;
            this.activeSlug = slug;
            this.$nextTick(() => {
                // scroll to first item of the category
                const firstItem = document.getElementById('item-' + slug + '-0');
                const cat = document.getElementById('cat-' + slug);
                const target = firstItem || cat;
                if (target) {
                    window.scrollTo({
                        top: target.getBoundingClientRect().top + window.scrollY - 120,
                        behavior: 'smooth'
                    });
                }
            });
        },

        init() {
            this.$watch('search', (val) => {
                const q = val.toLowerCase().trim();
                if (!q) { return; }

                for (const slug in this.searchData) {
                    if (this.catHasMatch(slug)) {
                        this.open[slug] = true;
                    }
                }

                this.$nextTick(() => {
                    for (const slug in this.searchData) {
                        if (!this.catHasMatch(slug)) { continue; }
                        const items = this.searchData[slug];
                        for (let i = 0; i < items.length; i++) {
                            if (items[i].includes(q)) {
                                const el = document.getElementById('item-' + slug + '-' + i);
                                if (el) {
                                    window.scrollTo({
                                        top: el.getBoundingClientRect().top + window.scrollY - 120,
                                        behavior: 'smooth'
                                    });
                                    return;
                                }
                            }
                        }
                    }
                });
            });
        }
    };
}
</script>

<!-- Menu Section -->
<section id="food" class="padding-top bg_grey" x-data="menuApp()">
    <div class="container">

        <!-- Search bar -->
        <div class="menu-search-wrap">
            <i class="fa fa-search menu-search-icon"></i>
            <input
                type="text"
                class="menu-search-input"
                placeholder="Pretražite jelovnik..."
                x-model.debounce.250ms="search"
                autocomplete="off"
            >
            <button type="button" class="menu-search-clear" x-show="isSearching" x-cloak @click="search = ''">
                <i class="fa fa-times"></i>
            </button>
        </div>

        <!-- Category pills -->
        <div class="menu-pills">
            @foreach($categories as $category)
                @if($category->items->count() > 0)
                <button
                    type="button"
                    class="menu-pill"
                    :class="{ 'is-active': activeSlug === '{{ $category->slug }}' }"
                    x-show="catHasMatch('{{ $category->slug }}')"
                    @click="scrollTo('{{ $category->slug }}')"
                >{{ $category->name }}</button>
                @endif
            @endforeach
        </div>

        <!-- No results -->
        <div x-show="isSearching && !anyResults" x-cloak class="menu-no-results">
            <i class="fa fa-search menu-no-results-icon"></i>
            <p>Nema rezultata za "<strong x-text="search"></strong>"</p>
        </div>

        @foreach($categories as $category)
            @if($category->items->count() > 0)
            @php
                $items = $category->items;
                $itemsWithImages = $items->filter(fn($item) => !empty($item->image));
                $listColClass = $itemsWithImages->count() > 0 ? 'col-md-4' : 'col-md-8';
            @endphp

            <div id="cat-{{ $category->slug }}"
                 x-show="catHasMatch('{{ $category->slug }}')">

                <div class="menu-category-toggle"
                     @click="Object.keys(open).forEach(k => { if(k !== '{{ $category->slug }}') open[k] = false; }); open['{{ $category->slug }}'] = !open['{{ $category->slug }}']; activeSlug = '{{ $category->slug }}';">
                    <div class="row">
                        <div class="col-md-12">
                            <h2 class="heading">
                                {{ $category->name }}
                                <i class="fa fa-chevron-down float-end menu-toggle-icon"
                                   :class="{ 'is-closed': !open['{{ $category->slug }}'] }"></i>
                            </h2>
                            <hr class="heading_space">
                        </div>
                    </div>
                </div>

                <div x-show="open['{{ $category->slug }}']" x-cloak>
                    <div class="menu-category-body">
                        <div class="row">
                            <div class="{{ $listColClass }}">
                                <ul class="menu_widget">
                                    @foreach($items as $item)
                                    <li id="item-{{ $category->slug }}-{{ $loop->index }}" x-show="itemMatches('{{ $category->slug }}', {{ $loop->index }})">
                                        <span>{{ number_format($item->price, 2) }} €</span>
                                        {{ $item->name }}
                                        @if($item->description)
                                        <small class="menu-item-desc">{{ $item->description }}</small>
                                        @endif
                                    </li>
                                    @endforeach
                                </ul>
                            </div>

                            @if($itemsWithImages->count() > 0)
                            <div class="col-md-8 grid_layout">
                                <div class="zerogrid">
                                    <div class="wrap-container">
                                        <div class="wrap-content clearfix">
                                            @foreach($itemsWithImages->take(4) as $item)
                                            @php
                                                $itemImageUrl = $item->getFirstMediaUrl('menu-items') ?: ($item->image
                                                    ? (file_exists(public_path('storage/' . $item->image)) ? asset('storage/' . $item->image) : asset($item->image))
                                                    : null);
                                            @endphp
                                            <div class="col-1-2">
                                                <div class="wrap-col {{ $loop->index < 2 ? 'first' : '' }}">
                                                    <div class="item-container">
                                                        <img src="{{ $itemImageUrl }}" alt="{{ $item->name }}"/>
                                                        <div class="overlay">
                                                            <a class="overlay-inner fancybox"
                                                               href="{{ $itemImageUrl }}"
                                                               data-fancybox-group="gallery-{{ $category->slug }}">
                                                                {{ $item->name }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

            </div>

            @endif
        @endforeach

        @if($categories->isEmpty() || $categories->sum(fn($c) => $c->items->count()) == 0)
        <div class="row">
            <div class="col-md-12 text-center">
                <p>Jelovnik je trenutno u pripremi.</p>
            </div>
        </div>
        @endif

    </div>
</section>

<!-- CTA Section -->
<section class="info_section paralax" style="background: url('{{ asset('images/konoba/konoba-enterijer-slike-slavonske.jpg') }}') center/cover;">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="heading_space">Spremni za rezervaciju?</h2>
                <p class="heading_space detail">Rezervirajte stol i doživite autentične okuse Slavonije.</p>
                <a href="{{ route('reservations') }}" class="btn-common-white">Rezerviraj stol</a>
            </div>
        </div>
    </div>
</section>

@endsection