@extends('store.layouts.app')

@section('title', 'Products')
@section('meta_description', 'All products – ' . ($store_name ?? config('app.name')))

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <h1 class="text-3xl font-black text-gray-900">All Products</h1>
        @if(request('search'))
        <p class="text-gray-600">
            <i class="fas fa-search mr-1"></i>Results for "<span class="font-semibold">{{ request('search') }}</span>"
        </p>
        @endif
    </div>

    {{-- Filters & Sort Bar --}}
    <div class="card p-4 mb-6">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div class="flex flex-wrap items-center gap-3">
                <span class="text-sm font-semibold text-gray-700">Sort by:</span>
                <form action="{{ route('products.index') }}" method="GET" class="flex items-center gap-2">
                    @if(request('search'))<input type="hidden" name="search" value="{{ request('search') }}">@endif
                    @if(request('category_id'))<input type="hidden" name="category_id" value="{{ request('category_id') }}">@endif
                    @if(request('featured'))<input type="hidden" name="featured" value="{{ request('featured') }}">@endif
                    <select name="sort" onchange="this.form.submit()" class="input py-2 w-auto text-sm border-2 border-blinkit-green/30 focus:border-blinkit-green">
                        <option value="default" {{ request('sort') === 'default' ? '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="rating" {{ request('sort') === 'rating' ? 'selected' : '' }}>Highest Rated</option>
                    </select>
                </form>
            </div>
            <div class="text-sm text-gray-600">
                <span class="font-semibold">{{ $products->total() }}</span> products found
            </div>
        </div>
    </div>

    @if($products->isEmpty())
    <div class="card p-12 sm:p-16 text-center">
        <div class="w-24 h-24 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
            <i class="fas fa-search text-4xl text-gray-300"></i>
        </div>
        <h2 class="text-2xl font-black text-gray-800 mb-2">No products found</h2>
        <p class="text-gray-600 mb-6">Try adjusting your search or filters.</p>
        <a href="{{ route('products.index') }}" class="btn-primary inline-block">
            <i class="fas fa-redo mr-2"></i> View All Products
        </a>
    </div>
    @else
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-5">
        @foreach($products as $product)
        @include('store.components.product-card', ['product' => $product])
        @endforeach
    </div>
    <div class="mt-10">
        {{ $products->withQueryString()->links() }}
    </div>
    @endif
</div>
@endsection