@extends('layouts.app')

@section('title', $category->name . ' - Auto Parts')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    {{-- Breadcrumb --}}
    <nav class="text-sm text-gray-500 mb-6">
        <a href="{{ route('home') }}" class="hover:text-red-600">Home</a>
        <span class="mx-2">/</span>
        <a href="{{ route('shop.index') }}" class="hover:text-red-600">Shop</a>
        <span class="mx-2">/</span>
        <span class="text-gray-800 font-medium">{{ $category->name }}</span>
    </nav>

    <h1 class="text-2xl font-bold text-gray-800 mb-6">{{ $category->name }}</h1>

    <div class="flex flex-col lg:flex-row gap-8">
        {{-- Sidebar Filters --}}
        <aside class="w-full lg:w-64 flex-shrink-0">
            <form method="GET" class="bg-white rounded-xl shadow-sm p-5 space-y-5">
                <h3 class="font-bold text-gray-800">Filters</h3>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Price Range</label>
                    <div class="flex gap-2">
                        <input type="number" name="min_price" value="{{ request('min_price') }}" placeholder="Min" class="w-full border border-gray-300 rounded px-2 py-1 text-sm">
                        <input type="number" name="max_price" value="{{ request('max_price') }}" placeholder="Max" class="w-full border border-gray-300 rounded px-2 py-1 text-sm">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Brand</label>
                    <select name="brand" class="w-full border border-gray-300 rounded px-2 py-1 text-sm">
                        <option value="">All Brands</option>
                        @foreach($brands as $brand)
                        <option value="{{ $brand->id }}" {{ request('brand') == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Condition</label>
                    <select name="condition" class="w-full border border-gray-300 rounded px-2 py-1 text-sm">
                        <option value="">Any</option>
                        <option value="new" {{ request('condition') == 'new' ? 'selected' : '' }}>New</option>
                        <option value="used" {{ request('condition') == 'used' ? 'selected' : '' }}>Used</option>
                        <option value="refurbished" {{ request('condition') == 'refurbished' ? 'selected' : '' }}>Refurbished</option>
                    </select>
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="in_stock" value="1" id="in_stock" {{ request('in_stock') ? 'checked' : '' }}>
                    <label for="in_stock" class="text-sm text-gray-700">In Stock Only</label>
                </div>
                <button type="submit" class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 text-sm font-medium">Apply Filters</button>
                <a href="{{ route('shop.category', $category->slug) }}" class="block text-center text-sm text-gray-500 hover:text-red-600">Clear Filters</a>
            </form>
        </aside>

        {{-- Products Grid --}}
        <div class="flex-1">
            <div class="flex justify-between items-center mb-4">
                <p class="text-sm text-gray-500">{{ $products->total() }} products found</p>
                <form method="GET">
                    <select name="sort" onchange="this.form.submit()" class="border border-gray-300 rounded px-3 py-1 text-sm">
                        <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Newest First</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="popular" {{ request('sort') == 'popular' ? 'selected' : '' }}>Most Popular</option>
                    </select>
                </form>
            </div>

            @if($products->count() > 0)
            <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
                @foreach($products as $product)
                    @include('components.product-card', ['product' => $product])
                @endforeach
            </div>
            <div class="mt-6">{{ $products->links() }}</div>
            @else
            <div class="text-center py-16 bg-white rounded-xl">
                <p class="text-gray-500">No products found in this category.</p>
                <a href="{{ route('shop.index') }}" class="mt-4 inline-block text-red-600 hover:text-red-800">Browse All Products</a>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection
