@extends('layouts.app')

@section('title', 'All Auto Parts')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex gap-8">

        {{-- Sidebar Filters --}}
        <aside class="w-64 flex-shrink-0">
            <div class="bg-white rounded-xl shadow-sm p-5 sticky top-24">
                <h3 class="font-bold text-gray-800 mb-4">Filter Parts</h3>
                <form method="GET" action="{{ route('shop.index') }}">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                        @foreach($categories as $cat)
                        <label class="flex items-center gap-2 text-sm text-gray-600 mb-1 cursor-pointer">
                            <input type="radio" name="category" value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'checked' : '' }}>
                            {{ $cat->name }} ({{ $cat->products_count }})
                        </label>
                        @endforeach
                    </div>
                    <div class="mb-4">
                        <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-3 py-2 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 class="mb-4">
                        <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" placeholder="Min" value="{{ request('min_price') }}" class="w-full border border-gray-300 rounded px-2 py-1 text-sm">
                            <input type="number" name="max_price" placeholder="Max" value="{{ request('max_price') }}" class="w-full border border-gray-300 rounded px-2 py-1 text-sm">
                        </div>
                    </div>
                    <div class="mb-4">
                        <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-3 py-2 text-sm">
                            <option value="">All Conditions</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="mb-4">
                        <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
                            <input type="checkbox" name="in_stock" value="1" {{ request('in_stock') ? 'checked' : '' }}>
                            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.index') }}" class="block text-center text-sm text-gray-500 mt-2 hover:text-red-600">Clear Filters</a>
                </form>
            </div>
        </aside>

        {{-- Products Grid --}}
        <div class="flex-1">
            <div class="flex justify-between items-center mb-6">
                <p class="text-gray-600">{{ $products->total() }} products found</p>
                <select name="sort" onchange="window.location.href='?sort='+this.value+'&{{ http_build_query(request()->except('sort')) }}'"
                    class="border border-gray-300 rounded px-3 py-2 text-sm">
                    <option value="latest" {{ request('sort', 'latest') == '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>
            </div>

            @if($products->count() > 0)
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    @foreach($products as $product)
                        @include('components.product-card', ['product' => $product])
                    @endforeach
                </div>
                <div class="mt-8">{{ $products->links() }}</div>
            @else
                <div class="text-center py-16 text-gray-500">
                    <svg class="w-16 h-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                    <p class="text-xl font-medium">No products found</p>
                    <p class="mt-2">Try adjusting your filters</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection