@extends('layouts.app')

@section('content')
<div class="mx-auto max-w-7xl px-4 py-8">
    <div class="mb-6">
        <h1 class="text-3xl font-black">Shop Groceries</h1>
        <p class="mt-2 text-gray-600">Search, filter and add supermarket essentials to your Pantry Hyper basket.</p>
    </div>

    <form class="panel mb-6 grid gap-3 p-4 md:grid-cols-5">
        <input class="field" name="q" value="{{ request('q') }}" placeholder="Search product, SKU or barcode">
        <select class="field" name="category">
            <option value="">All categories</option>
            @foreach ($categories as $category)
                <option value="{{ $category->slug }}" @selected(request('category') === $category->slug)>{{ $category->name }}</option>
            @endforeach
        </select>
        <select class="field" name="brand">
            <option value="">All brands</option>
            @foreach ($brands as $brand)
                <option value="{{ $brand->slug }}" @selected(request('brand') === $brand->slug)>{{ $brand->name }}</option>
            @endforeach
        </select>
        <select class="field" name="sort">
            @foreach (['featured' => 'Featured', 'newest' => 'Newest', 'price_low' => 'Price Low to High', 'price_high' => 'Price High to Low', 'name' => 'Name A-Z', 'saving' => 'Biggest Saving'] as $value => $label)
                <option value="{{ $value }}" @selected(request('sort', 'featured') === $value)>{{ $label }}</option>
            @endforeach
        </select>
        <button class="btn-primary">Filter</button>
        <label class="flex items-center gap-2 text-sm font-semibold"><input type="checkbox" name="specials" value="1" @checked(request('specials'))> Specials</label>
        <label class="flex items-center gap-2 text-sm font-semibold"><input type="checkbox" name="in_stock" value="1" @checked(request('in_stock'))> In stock</label>
    </form>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @forelse ($products as $product)
            <x-product-card :product="$product" />
        @empty
            <div class="panel p-6">No groceries match these filters.</div>
        @endforelse
    </div>
    <div class="mt-6">{{ $products->links() }}</div>
</div>
@endsection