@extends('frontend.layouts.app')
@section('title', 'Digital Menu')
@section('content')
<section style="padding-top:40px;">
    <div class="container">
        <div class="section-title"><h2>Our <span>Menu</span></h2><p>Browse, search and filter our full menu</p></div>

        <form method="GET" class="card" style="padding:20px; margin-bottom:30px; display:grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap:12px; align-items:end;">
            <div><label style="font-size:0.8rem; font-weight:600; display:block; margin-bottom:6px;">Search</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search dishes..." style="width:100%; padding:11px; border-radius:10px; border:1.5px solid #ddd;">
            </div>
            <div><label style="font-size:0.8rem; font-weight:600; display:block; margin-bottom:6px;">Category</label>
                <select name="category" style="width:100%; padding:11px; border-radius:10px; border:1.5px solid #ddd;">
                    <option value="">All</option>
                    @foreach($categories as $c)<option value="{{ $c->slug }}" {{ request('category')==$c->slug?'selected':'' }}>{{ $c->name }}</option>@endforeach
                </select>
            </div>
            <div><label style="font-size:0.8rem; font-weight:600; display:block; margin-bottom:6px;">Min Price</label><input type="number" name="min_price" value="{{ request('min_price') }}" style="width:100%; padding:11px; border-radius:10px; border:1.5px solid #ddd;"></div>
            <div><label style="font-size:0.8rem; font-weight:600; display:block; margin-bottom:6px;">Max Price</label><input type="number" name="max_price" value="{{ request('max_price') }}" style="width:100%; padding:11px; border-radius:10px; border:1.5px solid #ddd;"></div>
            <button class="btn btn-primary" type="submit">Filter</button>
        </form>

        <div class="grid grid-4">
            @forelse($products as $p)
                <a href="{{ route('product.show', $p) }}" class="card product-card hover-lift">
                    @if($p->discountPercent())<span class="badge badge-discount">-{{ $p->discountPercent() }}%</span>
                    @elseif($p->is_featured)<span class="badge badge-featured">Featured</span>@endif
                    <img src="{{ $p->image ? asset('storage/'.$p->image) : 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500' }}">
                    <div style="padding:18px;">
                        <h4>{{ $p->name }}</h4>
                        <p style="opacity:0.55; font-size:0.78rem; margin:4px 0 10px;">{{ $p->category->name ?? '' }}</p>
                        <div>
                            @if($p->discount_price)<span class="price-old">{{ $siteSettings['currency'] }}{{ number_format($p->regular_price,2) }}</span>@endif
                            <span class="price-new">{{ $siteSettings['currency'] }}{{ number_format($p->finalPrice(),2) }}</span>
                        </div>
                    </div>
                </a>
            @empty
                <p style="opacity:0.6; grid-column:1/-1; text-align:center; padding:60px 0;">No dishes matched your search. Try different filters.</p>
            @endforelse
        </div>
        <div style="margin-top:30px;">{{ $products->links() }}</div>
    </div>
</section>
@endsection