@extends('layouts.app')
@section('content')
<div class="pt-24">
{{-- Hero --}}
<div class="relative py-20 px-4 bg-gradient-to-br from-dark-brown to-deep-green bengali-pattern text-center">
    <p class="text-gold text-sm tracking-widest uppercase mb-2" data-aos="fade-up">Digital Menu</p>
    <h1 class="font-playfair text-5xl text-cream font-bold mb-4" data-aos="fade-up" data-aos-delay="100">Our Menu</h1>
    <div class="section-divider"></div>
</div>

<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex flex-col lg:flex-row gap-8">

        {{-- Sidebar Filters --}}
        <aside class="lg:w-64 flex-shrink-0" x-data="{ open: false }">
            <div class="glass-card p-6 sticky top-24">
                <h3 class="font-playfair text-cream text-lg font-semibold mb-5">Filter Menu</h3>
                <form id="filterForm" method="GET" action="{{ route('menu.index') }}">
                    <div class="mb-5">
                        <label class="text-cream/70 text-xs uppercase tracking-wider mb-2 block">Search</label>
                        <input type="text" name="q" value="{{ request('q') }}"
                               placeholder="Search dishes..."
                               class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/30 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-gold transition-colors">
                    </div>
                    <div class="mb-5">
                        <label class="text-cream/70 text-xs uppercase tracking-wider mb-3 block">Category</label>
                        <div class="space-y-2 max-h-56 overflow-y-auto pr-1">
                            <a href="{{ route('menu.index') }}" class="flex items-center justify-between text-sm py-1.5 px-3 rounded-lg {{ !request('category') ? 'bg-gold/20 text-gold' : 'text-cream/60 hover:text-gold hover:bg-white/5' }} transition-all">
                                All Items
                            </a>
                            @foreach($categories as $cat)
                            <a href="{{ route('menu.index', ['category' => $cat->id] + request()->except('category','page')) }}"
                               class="flex items-center justify-between text-sm py-1.5 px-3 rounded-lg {{ request('category') == $cat->id ? 'bg-gold/20 text-gold' : 'text-cream/60 hover:text-gold hover:bg-white/5' }} transition-all">
                                {{ $cat->name }}
                                <span class="text-xs bg-white/10 px-2 py-0.5 rounded-full">{{ $cat->food_items_count }}</span>
                            </a>
                            @endforeach
                        </div>
                    </div>
                    <div class="mb-5">
                        <label class="text-cream/70 text-xs uppercase tracking-wider mb-3 block">Spice Level</label>
                        <select name="spicy" onchange="this.form.submit()"
                                class="w-full bg-deep-green/60 border border-gold/20 text-cream rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-gold transition-colors">
                            <option value="">Any Level</option>
                            @foreach(['none','mild','medium','hot','extra_hot'] as $lvl)
                            <option value="{{ $lvl }}" {{ request('spicy')==$lvl?'selected':'' }}>{{ ucfirst(str_replace('_',' ',$lvl)) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-5">
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="vegetarian" value="1" onchange="this.form.submit()"
                                   {{ request('vegetarian') ? 'checked' : '' }}
                                   class="w-4 h-4 accent-green-400">
                            <span class="text-cream/70 text-sm">Vegetarian Only</span>
                        </label>
                    </div>
                    <div class="mb-5">
                        <label class="text-cream/70 text-xs uppercase tracking-wider mb-2 block">Sort By</label>
                        <select name="sort" onchange="this.form.submit()"
                                class="w-full bg-deep-green/60 border border-gold/20 text-cream rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-gold transition-colors">
                            <option value="sort_order" {{ request('sort','sort_order')=='sort_order'?'selected':'' }}>Default</option>
                            <option value="price_asc" {{ request('sort')=='price_asc'?'selected':'' }}>Price: Low to High</option>
                            <option value="price_desc" {{ request('sort')=='price_desc'?'selected':'' }}>Price: High to Low</option>
                            <option value="newest" {{ request('sort')=='newest'?'selected':'' }}>Newest</option>
                            <option value="popular" {{ request('sort')=='popular'?'selected':'' }}>Most Popular</option>
                        </select>
                    </div>
                </form>
            </div>
        </aside>

        {{-- Food Grid --}}
        <div class="flex-1">
            <div class="flex items-center justify-between mb-6">
                <p class="text-cream/60 text-sm">Showing <span class="text-gold font-semibold">{{ $foods->total() }}</span> items</p>
            </div>

            @if($foods->isEmpty())
            <div class="text-center py-20">
                <i class="fas fa-search text-gold/30 text-6xl mb-4"></i>
                <p class="text-cream/50 text-lg">No dishes found matching your criteria.</p>
                <a href="{{ route('menu.index') }}" class="btn-outline-gold mt-4 inline-block">Clear Filters</a>
            </div>
            @else
            <div class="grid sm:grid-cols-2 xl:grid-cols-3 gap-6">
                @foreach($foods as $food)
                <a href="{{ route('menu.show', $food->slug) }}"
                   class="food-card glass-card overflow-hidden group"
                   data-aos="fade-up" data-aos-delay="{{ $loop->index % 3 * 80 }}">
                    <div class="overflow-hidden h-48 relative">
                        <img src="{{ $food->thumbnail_url }}" alt="{{ $food->name }}"
                             class="food-card-img w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark-brown/70 to-transparent"></div>
                        <div class="absolute top-3 left-3 flex gap-2 flex-wrap">
                            @if($food->is_bestseller)<span class="bg-burnt-orange text-white text-xs px-2 py-0.5 rounded-full"><i class="fas fa-fire mr-1"></i>Best</span>@endif
                            @if($food->is_new)<span class="bg-deep-green border border-gold text-gold text-xs px-2 py-0.5 rounded-full">New</span>@endif
                            @if($food->is_vegetarian)<span class="bg-green-800 text-green-300 text-xs px-2 py-0.5 rounded-full">Veg</span>@endif
                        </div>
                        @if($food->discount_price)
                        <div class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
                            -{{ $food->discount_percentage }}%
                        </div>
                        @endif
                    </div>
                    <div class="p-4">
                        <div class="text-gold/60 text-xs mb-1">{{ $food->category->name }}</div>
                        <h3 class="font-playfair text-cream text-lg font-semibold mb-1 group-hover:text-gold transition-colors">{{ $food->name }}</h3>
                        <p class="text-cream/50 text-xs mb-3">{{ Str::limit($food->short_description, 60) }}</p>
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="text-gold font-bold text-lg">৳{{ number_format($food->effective_price, 0) }}</span>
                                @if($food->discount_price)
                                    <span class="text-cream/40 text-xs line-through ml-1">৳{{ number_format($food->base_price, 0) }}</span>
                                @endif
                            </div>
                            <div class="flex gap-1">
                                @if($food->spicy_level !== 'none')
                                @for($i=0;$i<(['mild'=>1,'medium'=>2,'hot'=>3,'extra_hot'=>4][$food->spicy_level]??0);$i++)
                                    <i class="fas fa-pepper-hot text-red-400 text-xs"></i>
                                @endfor
                                @endif
                            </div>
                        </div>
                        <div class="flex items-center gap-2 text-cream/40 text-xs mt-2">
                            <i class="fas fa-clock"></i> {{ $food->preparation_time }} min
                            @if($food->is_halal)<span class="ml-auto text-green-400"><i class="fas fa-check-circle mr-1"></i>Halal</span>@endif
                        </div>
                    </div>
                </a>
                @endforeach
            </div>
            <div class="mt-10">{{ $foods->withQueryString()->links() }}</div>
            @endif
        </div>
    </div>
</div>
</div>
@endsection