@extends('store.layouts.app')

@section('title', $category->name)
@section('meta_description', $category->description ?? 'Products in ' . $category->name)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <nav class="text-sm text-gray-500 mb-4 flex items-center gap-2 flex-wrap">
        <a href="{{ route('home') }}" class="hover:text-blinkit-green transition">Home</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="{{ route('categories.index') }}" class="hover:text-blinkit-green transition">Categories</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <span class="text-gray-800 font-medium">{{ $category->name }}</span>
    </nav>

    <div class="mb-6">
        <h1 class="text-3xl font-black text-gray-900 mb-2">{{ $category->name }}</h1>
        @if($category->description)
        <p class="text-gray-600">{{ $category->description }}</p>
        @endif
    </div>

    {{-- Filters & Sort --}}
    <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('categories.show', $category->slug) }}" method="GET" class="flex items-center gap-2">
                    <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
            </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-box-open text-4xl text-gray-300"></i>
        </div>
        <h2 class="text-2xl font-black text-gray-800 mb-2">No products in this category</h2>
        <p class="text-gray-600 mb-6">Check back later for new products.</p>
        <a href="{{ route('categories.index') }}" class="btn-primary inline-block">
            <i class="fas fa-arrow-left mr-2"></i> Browse Categories
        </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