@extends('layouts.store')

@section('content')
<section class="max-w-screen-2xl mx-auto px-5 md:px-8 py-10 md:py-14">
    <div class="bg-surface-container-low rounded-xl p-5 md:p-7">
        <form method="GET" action="{{ route('store.products') }}" class="flex flex-col sm:flex-row gap-4">
            <select name="category" class="w-full rounded-md border border-outline-variant/40 bg-white px-4 py-3">
                <option value="">All Categories</option>
                @foreach($categories as $category)
                    <option value="{{ $category->slug }}" @selected($selectedCategory === $category->slug)>{{ $category->name }}</option>
                @endforeach
            </select>
            <button class="bg-primary text-white font-bold px-6 py-3 rounded-md" type="submit">Filter</button>
        </form>
    </div>
</section>

<section class="max-w-screen-2xl mx-auto px-5 md:px-8 pb-20">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
        @forelse($products as $product)
            <article class="group bg-white rounded-xl overflow-hidden shadow-sm">
                <img src="{{ $product->image ?? 'https://picsum.photos/seed/default/800/600' }}" alt="{{ $product->name }}" class="w-full aspect-[4/5] object-cover group-hover:scale-105 transition duration-500">
                <div class="p-5 space-y-2">
                    <p class="text-xs uppercase tracking-widest text-on-surface-variant">{{ $product->category?->name }}</p>
                    <h3 class="font-headline font-bold text-lg text-primary">{{ $product->name }}</h3>
                    <p class="font-bold text-primary">₹{{ number_format($product->price * 85, 0) }}</p>
                    <div class="pt-2 flex gap-2">
                        <a class="flex-1 text-center bg-primary text-white font-semibold px-4 py-2 rounded-md" href="{{ route('store.product', $product->slug) }}">Details</a>
                    </div>
                </div>
            </article>
        @empty
            <p>No products found.</p>
        @endforelse
    </div>
</section>

<div class="max-w-screen-2xl mx-auto px-5 md:px-8 pb-16">
    {{ $products->links() }}
</div>
@endsection