@extends('frontend.layouts.app')

@section('title', 'Products - ShopNow')

@section('content')
<div class="container py-4">
    <div class="row">
        <!-- Sidebar Filters -->
        <div class="col-lg-3 mb-4">
            <div class="card border-0 shadow-sm p-3" style="border-radius:12px;">
                <h5 class="fw-bold mb-3">Filters</h5>
                <form action="{{ route('products.index') }}" method="GET" id="filterForm">
                    @if(request('keyword'))
                    <input type="hidden" name="keyword" value="{{ request('keyword') }}">
                    @endif

                    <div class="mb-3">
                        <label class="form-label fw-semibold small">Category</label>
                        @foreach($categories as $cat)
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="category_id" id="cat{{ $cat->id }}"
                                   value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'checked' : '' }}
                                   onchange="document.getElementById('filterForm').submit()">
                            <label class="form-check-label small" for="cat{{ $cat->id }}">{{ $cat->name }}</label>
                        </div>
                        @endforeach
                        @if(request('category_id'))
                        <a href="{{ route('products.index', request()->except('category_id')) }}" class="small text-danger">Clear</a>
                        @endif
                    </div>

                    @if($brands->count() > 0)
                    <div class="mb-3">
                        <label class="form-label fw-semibold small">Brand</label>
                        @foreach($brands as $brand)
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="brand_id" id="br{{ $brand->id }}"
                                   value="{{ $brand->id }}" {{ request('brand_id') == $brand->id ? 'checked' : '' }}
                                   onchange="document.getElementById('filterForm').submit()">
                            <label class="form-check-label small" for="br{{ $brand->id }}">{{ $brand->name }}</label>
                        </div>
                        @endforeach
                        @if(request('brand_id'))
                        <a href="{{ route('products.index', request()->except('brand_id')) }}" class="small text-danger">Clear</a>
                        @endif
                    </div>
                    @endif

                    <div class="mb-3">
                        <label class="form-label fw-semibold small">Type</label>
                        <select name="type" class="form-select form-select-sm" onchange="document.getElementById('filterForm').submit()">
                            <option value="">All</option>
                            <option value="new" {{ request('type') == 'new' ? 'selected' : '' }}>New Arrivals</option>
                            <option value="featured" {{ request('type') == 'featured' ? 'selected' : '' }}>Featured</option>
                        </select>
                    </div>

                    @if(request()->hasAny(['category_id','brand_id','type','keyword']))
                    <a href="{{ route('products.index') }}" class="btn btn-outline-danger btn-sm w-100">Reset All Filters</a>
                    @endif
                </form>
            </div>
        </div>

        <!-- Products Grid -->
        <div class="col-lg-9">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <p class="mb-0 text-muted small">{{ $products->total() }} products found</p>
                <select class="form-select form-select-sm w-auto" onchange="window.location.href = this.value">
                    <option value="{{ route('products.index', array_merge(request()->all(), ['sort' => 'latest'])) }}" {{ request('sort','latest') == 'latest' ? 'selected' : '' }}>Latest</option>
                    <option value="{{ route('products.index', array_merge(request()->all(), ['sort' => 'price_asc'])) }}" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>Price: Low to High</option>
                    <option value="{{ route('products.index', array_merge(request()->all(), ['sort' => 'price_desc'])) }}" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>Price: High to Low</option>
                </select>
            </div>

            @if($products->count() > 0)
            <div class="row g-4">
                @foreach($products as $product)
                @include('frontend.partials.product-card', compact('product'))
                @endforeach
            </div>
            <div class="mt-4">{{ $products->appends(request()->all())->links() }}</div>
            @else
            <div class="text-center py-5">
                <i class="bi bi-search fs-1 text-muted"></i>
                <h4 class="mt-3 text-muted">No products found</h4>
                <a href="{{ route('products.index') }}" class="btn btn-primary mt-2">Browse All Products</a>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection