@extends('storefront.layouts.app')
@section('title', ($currentCategory?->title ?? __('Shop')).' — '.config('shop.name'))

@section('content')
<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb small">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('Home') }}</a></li>
            <li class="breadcrumb-item active">{{ $currentCategory?->title ?? __('Shop') }}</li>
        </ol>
    </nav>

    <div class="row g-4">
        {{-- Filters --}}
        <aside class="col-lg-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="fw-bold">{{ __('Categories') }}</h6>
                    <ul class="list-unstyled small mb-3">
                        <li class="mb-1"><a href="{{ route('shop') }}" class="{{ ! $currentCategory ? 'fw-bold text-primary' : 'text-dark' }}">{{ __('All Categories') }}</a></li>
                        @foreach($categories as $cat)
                            <li class="mb-1">
                                <a href="{{ route('category', $cat->slug) }}" class="{{ $currentCategory?->id === $cat->id ? 'fw-bold text-primary' : 'text-dark' }}">{{ $cat->title }}</a>
                            </li>
                        @endforeach
                    </ul>

                    <form action="{{ url()->current() }}" method="GET">
                        @if(request('q'))<input type="hidden" name="q" value="{{ request('q') }}">@endif
                        <h6 class="fw-bold">{{ __('Price Range') }}</h6>
                        <div class="d-flex gap-2 mb-3">
                            <input type="number" name="min" value="{{ $filters['min'] ?? '' }}" class="form-control form-control-sm" placeholder="0" min="0">
                            <input type="number" name="max" value="{{ $filters['max'] ?? '' }}" class="form-control form-control-sm" placeholder="৳" min="0">
                        </div>
                        <button class="btn btn-primary btn-sm w-100">{{ __('Filter') }}</button>
                    </form>
                </div>
            </div>
        </aside>

        {{-- Products --}}
        <div class="col-lg-9">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="small text-muted">{{ $products->total() }} {{ __('Products') }}</span>
                <form method="GET" action="{{ url()->current() }}">
                    @foreach($filters as $k => $v) @if($k !== 'sort' && $v !== null)<input type="hidden" name="{{ $k }}" value="{{ $v }}">@endif @endforeach
                    <select name="sort" class="form-select form-select-sm" style="width:auto" onchange="this.form.submit()">
                        <option value="">{{ __('Sort By') }}</option>
                        <option value="newest" @selected(($filters['sort'] ?? '')==='newest')>{{ __('Newest') }}</option>
                        <option value="price_asc" @selected(($filters['sort'] ?? '')==='price_asc')>{{ __('Price: Low to High') }}</option>
                        <option value="price_desc" @selected(($filters['sort'] ?? '')==='price_desc')>{{ __('Price: High to Low') }}</option>
                        <option value="popular" @selected(($filters['sort'] ?? '')==='popular')>{{ __('Most Popular') }}</option>
                    </select>
                </form>
            </div>

            @if($products->isEmpty())
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-inbox fs-1 d-block mb-2"></i>{{ __('No products found.') }}
                </div>
            @else
                <div class="row g-3">
                    @foreach($products as $product)
                        <div class="col-6 col-md-4">@include('storefront.partials.product-card')</div>
                    @endforeach
                </div>
                <div class="mt-4">{{ $products->links() }}</div>
            @endif
        </div>
    </div>
</div>
@endsection