@extends('layouts.app')

@section('title', 'Culinary Menu & Online Ordering')

@section('content')

    <!-- Menu Hero Header -->
    <section class="relative py-20 bg-[#f8f3ec] border-b border-black/5 overflow-hidden">
        <div class="container-custom relative z-10 text-center max-w-3xl mx-auto space-y-4">
            <span class="section-subtitle">A LA CARTE & TASTINGS</span>
            <h1 class="section-title">Culinary Menu & Online Ordering</h1>
            <p class="text-[#57534e] text-sm max-w-xl mx-auto font-light">
                Every dish is prepared fresh to order using dry-aged prime meats, day-boat wild seafood, and hand-rolled pasta.
            </p>

            <!-- Search Bar -->
            <form method="GET" action="{{ route('menu.index') }}" class="pt-4 max-w-md mx-auto flex">
                <input type="text" 
                       name="q" 
                       value="{{ $search ?? '' }}" 
                       placeholder="Search dishes, ingredients, truffles..." 
                       class="w-full bg-white border border-black/10 rounded-l-full px-5 py-3 text-xs text-[#1c1917] placeholder:text-[#78716c] focus:outline-none focus:border-[#d4881a] shadow-sm">
                <button type="submit" class="bg-[#d4881a] hover:bg-[#b8710f] text-white font-bold px-6 rounded-r-full text-xs transition-colors flex items-center justify-center shadow-sm">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </form>
        </div>
    </section>

    <!-- Category Filter Sticky Bar -->
    <div class="sticky top-20 z-30 bg-white/95 backdrop-blur-md border-b border-black/8 py-4 shadow-sm">
        <div class="container-custom flex items-center gap-3 overflow-x-auto no-scrollbar py-1">
            <a href="{{ route('menu.index') }}" 
               class="px-5 py-2 rounded-full text-xs font-semibold whitespace-nowrap transition-all {{ empty($activeCategorySlug) && empty($search) ? 'bg-[#d4881a] text-white shadow-md font-bold' : 'bg-[#f8f3ec] text-[#57534e] hover:bg-amber-50 hover:text-[#d4881a] border border-black/8' }}">
                All Dishes ({{ $menuItems->count() }})
            </a>
            @foreach($categories as $cat)
                <a href="{{ route('menu.index', ['category' => $cat->slug]) }}" 
                   class="px-5 py-2 rounded-full text-xs font-semibold whitespace-nowrap transition-all {{ $activeCategorySlug === $cat->slug ? 'bg-[#d4881a] text-white shadow-md font-bold' : 'bg-[#f8f3ec] text-[#57534e] hover:bg-amber-50 hover:text-[#d4881a] border border-black/8' }}">
                    {{ $cat->name }} ({{ $cat->menu_items_count }})
                </a>
            @endforeach
        </div>
    </div>

    <!-- Menu Items Grid -->
    <section class="py-16 bg-[#fdfaf6] min-h-[600px]">
        <div class="container-custom">
            
            @if($menuItems->isEmpty())
                <div class="text-center py-20 max-w-md mx-auto space-y-4">
                    <i class="fa-solid fa-utensils text-4xl text-[#d6ccc0]"></i>
                    <h3 class="font-serif text-xl font-bold text-[#1c1917]">No culinary items found</h3>
                    <p class="text-xs text-[#78716c]">Try adjusting your search query or selecting a different menu category.</p>
                    <a href="{{ route('menu.index') }}" class="btn-secondary text-xs">Reset Filters</a>
                </div>
            @elseif(!empty($groupedItems))
                <!-- Grouped by Category View -->
                <div class="space-y-20">
                    @foreach($groupedItems as $catName => $group)
                        <div id="{{ $group['category']->slug }}" class="space-y-8">
                            <div class="border-b border-black/8 pb-4">
                                <span class="text-[10px] uppercase font-bold tracking-widest text-[#d4881a]">Category Section</span>
                                <h2 class="font-serif text-3xl font-bold text-[#1c1917] mt-1">{{ $catName }}</h2>
                                @if($group['category']->description)
                                    <p class="text-xs text-[#78716c] mt-1">{{ $group['category']->description }}</p>
                                @endif
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                                @foreach($group['items'] as $item)
                                    @include('components.menu-card', ['dish' => $item])
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <!-- Single Filtered Grid View -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($menuItems as $item)
                        @include('components.menu-card', ['dish' => $item])
                    @endforeach
                </div>
            @endif

        </div>
    </section>

@endsection