@extends('layouts.app')

@section('title', 'Shop - Ulfat Collection')

@section('content')
<div class="container py-5">
    <div class="row">
        <!-- Sidebar Filters -->
        <aside class="col-lg-3 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h5>Filter by Category</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ route('shop') }}" class="text-dark">All</a></li>
                        @foreach($categories as $cat)
                        <li><a href="{{ route('shop', ['category' => $cat->id]) }}" class="text-dark">{{ $cat->name }}</a></li>
                        @endforeach
                    </ul>

                    <hr>
                    <h5>Filter by Price</h5>
                    <form method="GET" action="{{ route('shop') }}">
                        <div class="row g-2">
                            <div class="col">
                                <input type="number" name="min_price" class="form-control" placeholder="Min" value="{{ request('min_price') }}">
                            </div>
                            <div class="col">
                                <input type="number" name="max_price" class="form-control" placeholder="Max" value="{{ request('max_price') }}">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-dark mt-2 w-100">Apply</button>
                    </form>

                    <hr>
                    <h5>Filter by Size</h5>
                    @foreach($sizes as $size)
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="size" value="{{ $size }}" id="size_{{ $size }}" {{ request('size') == $size ? 'checked' : '' }} onclick="this.form.submit()">
                        <label class="form-check-label" for="size_{{ $size }}">{{ $size }}</label>
                    </div>
                    @endforeach

                    <hr>
                    <h5>Sort by</h5>
                    <select name="sort" class="form-select" onchange="this.form.submit()">
                        <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>Newest</option>
                        <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Price: Low to High</option>
                        <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Price: High to Low</option>
                        <option value="best_selling" {{ request('sort') == 'best_selling' ? 'selected' : '' }}>Best Selling</option>
                    </select>
                </div>
            </div>
        </aside>

        <!-- Product Grid -->
        <div class="col-lg-9">
            <div class="row g-4">
                @forelse($products as $product)
                <div class="col-md-6 col-lg-4">
                    @include('partials.product-card', ['product' => $product])
                </div>
                @empty
                <div class="col-12">
                    <p class="text-center">No products found.</p>
                </div>
                @endforelse
            </div>
            <div class="mt-5">
                {{ $products->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
</div>
@endsection