@extends('front.layout.master')

@php
    if(request()->keyword){
        $title = __('Showing all results for :keyword', ['keyword' => request()->keyword]);
        $seodes = $title;
    } elseif(request()->chid){
        $findchid = App\Grandcategory::find(request()->chid);
        $title = __(':title - All products', ['title' => $findchid->title ?? '']);
        $seodes = strip_tags($findchid->description ?? '');
        $seoimage = $findchid && $findchid->image ? url('images/grandcategory/'.$findchid->image) : '';
    } elseif(request()->sid){
        $findsubcat = App\Subcategory::find(request()->sid);
        $title = __(':title - All products', ['title' => $findsubcat->title ?? '']);
        $seodes = strip_tags($findsubcat->description ?? '');
        $seoimage = $findsubcat && $findsubcat->image ? url('images/subcategory/'.$findsubcat->image) : '';
    } else {
        $findcat = App\Category::find(request()->category);
        $title = __(':title - All products', ['title' => $findcat->title ?? __('Shop')]);
        $seodes = strip_tags($findcat->description ?? '');
        $seoimage = $findcat && $findcat->image ? url('images/category/'.$findcat->image) : '';
    }
@endphp

@section('meta_tags')
    <link rel="canonical" href="{{ url()->full() }}" />
    <meta name="robots" content="all">
    <meta property="og:title" content="{{ $title }}" />
    <meta name="keywords" content="{{ $title }}">
    <meta property="og:description" content="{{ $seodes }}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{ url()->full() }}" />
    <meta property="og:image" content="{{ $seoimage ?? '' }}" />
@endsection

@section('title', $title)

@section('body')

@php
    // Build a unified product array for display (variants + simple)
    $displayProducts = collect();
    $catName = '';

    if (request()->keyword) {
        $catName = __('Search results for') . ' "' . e(request()->keyword) . '"';
    } elseif (request()->_featured_page || (request()->featured == 1 && empty(request()->category))) {
        $catName = __('Featured Products');
    } elseif (isset($findchid) && $findchid) {
        $catName = $findchid->title ?? '';
    } elseif (isset($findsubcat) && $findsubcat) {
        $catName = $findsubcat->title ?? '';
    } elseif (isset($findcat) && $findcat) {
        $catName = $findcat->title ?? '';
    } else {
        $catName = __('Shop');
    }

    // Brand list for filter sidebar — only brands that have products in the current category
    $brandsAll = collect();
    $currentCatId = request('category') ?: $catid ?? null;
    if ($currentCatId) {
        // Brands referencing this category in their JSON category_id field
        $brandsAll = App\Brand::where('status', '1')->orderBy('name')->get()->filter(function($b) use ($currentCatId) {
            $cats = $b->category_id;
            if (is_string($cats)) $cats = json_decode($cats, true);
            return is_array($cats) && in_array((string)$currentCatId, array_map('strval', $cats));
        })->values();
        // Plus any brands whose products actually live in this category
        $brandIdsFromProducts = App\Product::where('status', 1)->where('category_id', $currentCatId)->pluck('brand_id')->unique()->filter();
        $brandIdsFromSimple   = App\SimpleProduct::where('status', 1)->where('category_id', $currentCatId)->pluck('brand_id')->unique()->filter();
        $allBrandIds = $brandIdsFromProducts->merge($brandIdsFromSimple)->unique();
        if ($allBrandIds->count()) {
            $extraBrands = App\Brand::whereIn('id', $allBrandIds)->where('status', '1')->orderBy('name')->get();
            $brandsAll = $brandsAll->merge($extraBrands)->unique('id')->values();
        }
    } else {
        $brandsAll = App\Brand::where('status', '1')->orderBy('name')->get();
    }

    // Cache base URL strings to avoid url() calls in tight loops
    $baseImg = url('variantimages/thumbnails/');
    $baseHover = url('variantimages/hoverthumbnail/');
    $baseSimpleImg = url('images/simple_products/');
    $noImg = url('images/no-image.png');
    $isAuth = auth()->check();

    // Pre-fetch wishlist ids in one query (huge win vs per-row queries)
    $wishVariantIds = collect();
    $wishSimpleIds = collect();
    if ($isAuth) {
        $wishRows = App\Wishlist::where('user_id', auth()->id())->get(['pro_id','simple_pro_id']);
        $wishVariantIds = $wishRows->pluck('pro_id')->filter()->flip();
        $wishSimpleIds = $wishRows->pluck('simple_pro_id')->filter()->flip();
    }

    // Pre-fetch ratings for all visible products (one query each for variant/simple)
    $variantIds = isset($products) ? collect($products)->pluck('id')->filter() : collect();
    $simpleIds  = isset($simple_products) ? collect($simple_products)->pluck('id')->filter() : collect();
    $ratingsByVariantPro = collect();
    $ratingsBySimplePro  = collect();
    if ($variantIds->count() || $simpleIds->count()) {
        $allIds = $variantIds->merge($simpleIds)->unique();
        $ratingsRows = App\UserReview::whereIn('pro_id', $allIds)->where('status', '1')->select('pro_id', \DB::raw('AVG((price + value)/2) as avg_r'))->groupBy('pro_id')->get();
        foreach ($ratingsRows as $rr) {
            $val = round((float) $rr->avg_r, 1);
            // map to 0-5 scale (price/value are already 0-5, so AVG is already 0-5)
            $ratingsByVariantPro[$rr->pro_id] = $val;
            $ratingsBySimplePro[$rr->pro_id]  = $val;
        }
    }

    // Helper: variant -> normalized array (no per-row DB queries)
    $normalizeVariant = function($p, $orivar) use ($conversion_rate, $baseImg, $baseHover, $wishVariantIds, $ratingsByVariantPro) {
        if (!$orivar || !isset($orivar->variantimages)) return null;
        // Use the same helper as the homepage cards so all surfaces agree on the number.
        // (mainprice = vender_price + variant.price + commission; offerprice mirrors with vender_offer_price.)
        $priceData = ProductPrice::getprice($p, $orivar)->getData();
        $price = (float) ($priceData->mainprice ?? 0);
        $offerCandidate = (float) ($priceData->offerprice ?? 0);
        $offer = ($offerCandidate > 0 && $offerCandidate < $price) ? $offerCandidate : 0;
        $minQty = (int) ($orivar->min_order_qty ?? 1) ?: 1;
        $simpleUrl = url('details/' . \Illuminate\Support\Str::slug($p->name, '-') . '/' . $p->id);
        return (object) [
            'productid' => $p->id,
            'variantid' => $orivar->id,
            'product_type' => 'variant',
            'productname' => $p->name,
            'brand_id' => $p->brand_id ?? null,
            'thumbnail' => $baseImg . '/' . ($orivar->variantimages->main_image ?? ''),
            'hover_thumbnail' => $baseHover . '/' . ($orivar->variantimages->image2 ?? $orivar->variantimages->main_image ?? ''),
            'mainprice' => price_format($price * $conversion_rate),
            'offerprice' => $offer > 0 ? price_format($offer * $conversion_rate) : price_format($price * $conversion_rate),
            '_priceval_raw' => $offer > 0 ? $offer : $price,
            '_compareval_raw' => $offer > 0 ? $price : null,
            'rating' => $ratingsByVariantPro->get($p->id, 0),
            'stock' => $orivar->stock ?? 0,
            'cartURL' => route('add.cart', ['id' => $p->id, 'variantid' => $orivar->id, 'varprice' => $price, 'varofferprice' => $offer, 'qty' => $minQty]),
            'producturl' => $simpleUrl,
            'is_in_wishlist' => $wishVariantIds->has($orivar->id) ? 1 : 0,
            'sale_tag' => $p->sale_tag ?? null,
            'sale_tag_color' => $p->sale_tag_color ?? null,
            'sale_tag_text_color' => $p->sale_tag_text_color ?? null,
        ];
    };

    // Helper: simple product -> normalized (no per-row DB queries)
    $normalizeSimple = function($sp) use ($conversion_rate, $baseSimpleImg, $noImg, $wishSimpleIds, $ratingsBySimplePro) {
        $offer = $sp->offer_price > 0 ? (float) $sp->offer_price : 0;
        $price = (float) ($sp->price ?? 0);
        return (object) [
            'productid' => $sp->id,
            'product_type' => 'simple',
            'productname' => $sp->product_name,
            'brand_id' => $sp->brand_id ?? null,
            'thumbnail' => $sp->thumbnail ? $baseSimpleImg . '/' . $sp->thumbnail : $noImg,
            'hover_thumbnail' => $sp->hover_thumbnail ? $baseSimpleImg . '/' . $sp->hover_thumbnail : ($sp->thumbnail ? $baseSimpleImg . '/' . $sp->thumbnail : $noImg),
            'mainprice' => price_format($price * $conversion_rate),
            'offerprice' => $offer > 0 ? price_format($offer * $conversion_rate) : price_format($price * $conversion_rate),
            '_priceval_raw' => $offer > 0 ? $offer : $price,
            '_compareval_raw' => $offer > 0 ? $price : null,
            'rating' => $ratingsBySimplePro->get($sp->id, 0),
            'stock' => $sp->stock ?? 0,
            'cartURL' => route('add.cart.simple', ['pro_id' => $sp->id, 'price' => $price, 'offerprice' => $offer]),
            'producturl' => route('show.product', ['id' => $sp->id, 'slug' => $sp->slug]),
            'is_in_wishlist' => $wishSimpleIds->has($sp->id) ? 1 : 0,
            'sale_tag' => $sp->sale_tag ?? null,
            'sale_tag_color' => $sp->sale_tag_color ?? null,
            'sale_tag_text_color' => $sp->sale_tag_text_color ?? null,
        ];
    };

    if (isset($products) && count($products)) {
        foreach ($products as $p) {
            $orivar = $p->subvariants[0] ?? null;
            $norm = $normalizeVariant($p, $orivar);
            if ($norm) {
                $norm->_created_at = $p->created_at ?? null;
                $norm->_priceval = (float) preg_replace('/[^0-9.]/', '', (string) $norm->offerprice);
                $displayProducts->push($norm);
            }
        }
    }
    if (isset($simple_products) && count($simple_products)) {
        foreach ($simple_products as $sp) {
            $norm = $normalizeSimple($sp);
            $norm->_created_at = $sp->created_at ?? null;
            $norm->_priceval = (float) preg_replace('/[^0-9.]/', '', (string) $norm->offerprice);
            $displayProducts->push($norm);
        }
    }

    // Back-stop filters: the legacy categoryf() controller has many branches and several of
    // them never apply price-range / brand / out-of-stock to the SQL query. Re-apply the same
    // filters here against the already-normalised collection so "Apply Filters" reliably
    // narrows the result set regardless of which controller branch ran.
    // The MIN/MAX the shopper types are in the *displayed* currency (same as the
    // prices on the cards, which are raw * conversion_rate). But _priceval_raw is
    // the base-currency price, so convert it up before comparing — otherwise the
    // filter silently works in the base currency and mismatches the card prices
    // whenever a non-default currency (conversion_rate != 1) is active.
    $curRate = (float) ($conversion_rate ?? 1) ?: 1;
    $priceLow  = (float) request('start', 0);
    $priceHigh = (float) request('end', 0);
    if ($priceLow > 0 || $priceHigh > 0) {
        $hi = $priceHigh > 0 ? $priceHigh : INF;
        $displayProducts = $displayProducts->filter(function($p) use ($priceLow, $hi, $curRate) {
            $v = (float) ($p->_priceval_raw ?? 0) * $curRate;
            return $v >= $priceLow && $v <= $hi;
        })->values();
    }

    $brandFilter = request('brands');
    if (!empty($brandFilter)) {
        $brandIds = array_filter(array_map('trim', explode(',', $brandFilter)));
        if (count($brandIds)) {
            $displayProducts = $displayProducts->filter(function($p) use ($brandIds) {
                return in_array((string) ($p->brand_id ?? ''), $brandIds, true);
            })->values();
        }
    }

    if (!request('outofstock')) {
        $displayProducts = $displayProducts->filter(function($p) {
            return (int) ($p->stock ?? 0) > 0;
        })->values();
    }

    // Rating filter (server-side)
    $ratingFilter = (int) request('ratings', 0);
    if ($ratingFilter > 0) {
        $displayProducts = $displayProducts->filter(function($p) use ($ratingFilter) {
            return ((float) $p->rating) >= $ratingFilter;
        })->values();
    }

    // Sorting
    $sortKey = request('sort');
    if ($sortKey === 'price_asc') {
        $displayProducts = $displayProducts->sortBy('_priceval')->values();
    } elseif ($sortKey === 'price_desc') {
        $displayProducts = $displayProducts->sortByDesc('_priceval')->values();
    } elseif ($sortKey === 'newest') {
        $displayProducts = $displayProducts->sortByDesc('_created_at')->values();
    } elseif ($sortKey === 'rating') {
        $displayProducts = $displayProducts->sortByDesc('rating')->values();
    }

    // Load-more pagination: 20 per page (cumulative)
    $pageSize = 20;
    $loadedPages = max(1, (int) request('lp', 1));
    $totalProducts = $displayProducts->count();
    $shownCount = min($pageSize * $loadedPages, $totalProducts);
    $hasMore = $shownCount < $totalProducts;
    $displayProducts = $displayProducts->take($shownCount)->values();
    // Discount % per item — calculated once here for both grid and list
    foreach ($displayProducts as $p) {
        $p->discount_pct = ($p->_compareval_raw && $p->_priceval_raw && $p->_compareval_raw > $p->_priceval_raw)
            ? round((1 - $p->_priceval_raw / $p->_compareval_raw) * 100)
            : 0;
    }
@endphp

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 flex-wrap leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <a href="{{ url('shop') }}" class="hover:text-brand-600">{{ __('Shop') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium truncate max-w-[400px]">{{ $catName }}</span>
    </nav>

    <div class="flex items-end justify-between mt-4 mb-4 flex-wrap gap-3">
        <div>
            <h1 class="font-display font-extrabold text-2xl lg:text-3xl">{{ $catName }}</h1>
            <p class="text-slate-500 text-[14px] mt-1">{{ $totalProducts }} {{ __('products found') }}</p>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
            <button class="lg:hidden flex items-center gap-2 bg-white shadow-card px-4 py-2 rounded-full text-[13px] font-semibold" onclick="document.getElementById('mobileFilters').classList.toggle('-translate-x-full')">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 6h18M6 12h12M9 18h6"/></svg>
                {{ __('Filters') }}
            </button>
            @php $viewMode = request('view') === 'list' ? 'list' : 'grid'; @endphp
            <div class="bg-white rounded-full shadow-card p-1 flex items-center">
                <a href="?{{ http_build_query(array_merge(request()->all(), ['view' => 'grid'])) }}" class="w-9 h-9 grid place-items-center rounded-full {{ $viewMode === 'grid' ? 'bg-brand-500 text-white' : 'text-slate-500 hover:bg-slate-100' }}" title="{{ __('Grid view') }}">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
                </a>
                <a href="?{{ http_build_query(array_merge(request()->all(), ['view' => 'list'])) }}" class="w-9 h-9 grid place-items-center rounded-full {{ $viewMode === 'list' ? 'bg-brand-500 text-white' : 'text-slate-500 hover:bg-slate-100' }}" title="{{ __('List view') }}">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="3" cy="6" r="1"/><circle cx="3" cy="12" r="1"/><circle cx="3" cy="18" r="1"/></svg>
                </a>
            </div>
            @php
                $sortOptions = [
                    '' => __('Featured'),
                    'price_asc' => __('Price: Low to High'),
                    'price_desc' => __('Price: High to Low'),
                    'newest' => __('Newest'),
                    'rating' => __('Top Rated'),
                ];
                $currentSort = request('sort', '');
                $currentLabel = $sortOptions[$currentSort] ?? __('Featured');
            @endphp
            <div class="relative" id="sortByWrap">
                <button type="button" id="sortByBtn" class="bg-white rounded-full pl-4 pr-3 h-10 flex items-center gap-2 shadow-card text-[13px] hover:shadow-hover transition-shadow">
                    <span class="text-slate-500 hidden sm:inline">{{ __('Sort by') }}:</span>
                    <span class="font-semibold text-deep">{{ $currentLabel }}</span>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-slate-400 transition-transform" id="sortByIcon"><path d="m6 9 6 6 6-6"/></svg>
                </button>
                <div id="sortByMenu" class="hidden absolute right-0 top-full mt-2 w-56 bg-white rounded-xl shadow-hover border border-slate-100 z-30 overflow-hidden">
                    @foreach($sortOptions as $key => $label)
                        @php
                            $params = array_merge(request()->all(), ['sort' => $key, 'lp' => 1]);
                            if ($key === '') unset($params['sort']);
                            $href = '?' . http_build_query($params);
                            $active = $currentSort === $key;
                        @endphp
                        <a href="{{ $href }}" class="flex items-center justify-between gap-2 px-4 py-2.5 text-[13px] hover:bg-slate-50 {{ $active ? 'bg-brand-50 text-brand-600 font-semibold' : 'text-slate-700' }}">
                            <span>{{ $label }}</span>
                            @if($active)<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m4 12 5 5L20 7"/></svg>@endif
                        </a>
                    @endforeach
                </div>
            </div>
            <script>
            (function(){
                var btn = document.getElementById('sortByBtn');
                var menu = document.getElementById('sortByMenu');
                var icon = document.getElementById('sortByIcon');
                var wrap = document.getElementById('sortByWrap');
                if (!btn || !menu) return;
                btn.addEventListener('click', function(e){
                    e.stopPropagation();
                    var hidden = menu.classList.toggle('hidden');
                    if (icon) icon.style.transform = hidden ? '' : 'rotate(180deg)';
                });
                document.addEventListener('click', function(e){
                    if (wrap && !wrap.contains(e.target)) {
                        menu.classList.add('hidden');
                        if (icon) icon.style.transform = '';
                    }
                });
            })();
            </script>
        </div>
    </div>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 grid lg:grid-cols-[280px_1fr] gap-5 pb-12">

    {{-- Sidebar filters --}}
    <aside id="mobileFilters" class="lg:!translate-x-0 fixed lg:relative inset-y-0 left-0 z-40 w-[85%] max-w-[320px] lg:w-auto bg-white lg:bg-transparent overflow-y-auto -translate-x-full lg:translate-x-0 transition-transform duration-300 lg:overflow-visible">
        <div class="lg:sticky lg:top-28 space-y-4 p-4 lg:p-0">

            <div class="lg:hidden flex items-center justify-between mb-2">
                <h3 class="font-display font-extrabold text-lg">{{ __('Filters') }}</h3>
                <button onclick="document.getElementById('mobileFilters').classList.add('-translate-x-full')" class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg>
                </button>
            </div>

            <form action="{{ route('filtershop') }}" method="GET" id="filterForm" class="bg-white rounded-2xl shadow-card p-5 space-y-5">
                <input type="hidden" name="category" value="{{ request('category') }}">
                <input type="hidden" name="sid" value="{{ request('sid') }}">
                <input type="hidden" name="chid" value="{{ request('chid') }}">
                <input type="hidden" name="keyword" value="{{ request('keyword') }}">

                {{-- Price range slider --}}
                @php
                    // $start/$end arrive in the base currency (min/max of the raw
                    // result-set prices). Lift them to the displayed currency so the
                    // slider numbers line up with the card prices and the price filter.
                    // request('start'/'end') already come from this slider, so they're
                    // in the displayed currency — never re-convert those.
                    $sliderRate = (float) ($conversion_rate ?? 1) ?: 1;
                    $priceMin = 0;
                    $dispEnd  = (float) ($end ?? 100000) * $sliderRate;
                    $priceMax = max(100000, (int) ceil($dispEnd));
                    $valStart = (int) request('start', (int) round(($start ?? 0) * $sliderRate));
                    $valEnd   = (int) request('end', (int) round($dispEnd ?: $priceMax));
                @endphp
                <div>
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="font-semibold text-[14px]">{{ __('Price Range') }}</h4>
                        <span id="priceRangeLabel" class="text-[12px] font-semibold text-brand-600 tabular"></span>
                    </div>
                    <div class="px-1">
                        <div id="priceSliderTrack" class="relative h-1.5 bg-slate-200 rounded-full">
                            <div id="priceSliderFill" class="absolute h-full bg-brand-500 rounded-full"></div>
                        </div>
                        <div class="relative h-0">
                            <input type="range" id="priceMinRange" min="{{ $priceMin }}" max="{{ $priceMax }}" step="10" value="{{ $valStart }}" class="price-slider absolute inset-x-0 top-1/2 -translate-y-1/2 -mt-3 w-full appearance-none bg-transparent pointer-events-none">
                            <input type="range" id="priceMaxRange" min="{{ $priceMin }}" max="{{ $priceMax }}" step="10" value="{{ $valEnd }}" class="price-slider absolute inset-x-0 top-1/2 -translate-y-1/2 -mt-3 w-full appearance-none bg-transparent pointer-events-none">
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-2 mt-4">
                        <div class="relative">
                            <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-[10px] uppercase font-bold text-slate-400">{{ __('Min') }}</span>
                            <input type="number" id="priceMinInput" name="start" value="{{ $valStart }}" class="h-10 pl-10 pr-2 w-full rounded-lg border border-slate-200 focus:border-brand-500 outline-none text-[13px] tabular">
                        </div>
                        <div class="relative">
                            <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-[10px] uppercase font-bold text-slate-400">{{ __('Max') }}</span>
                            <input type="number" id="priceMaxInput" name="end" value="{{ $valEnd }}" class="h-10 pl-10 pr-2 w-full rounded-lg border border-slate-200 focus:border-brand-500 outline-none text-[13px] tabular">
                        </div>
                    </div>
                </div>

                <style>
                    /* Range inputs are layered on top of our own track/fill — wipe every default chrome */
                    .price-slider {
                        -webkit-appearance: none !important; appearance: none !important;
                        background: transparent !important;
                        outline: none; border: 0; padding: 0; margin: 0;
                        height: 18px;
                        pointer-events: none;
                    }
                    .price-slider::-webkit-slider-runnable-track {
                        -webkit-appearance: none; appearance: none;
                        background: transparent !important;
                        border: 0; height: 18px;
                    }
                    .price-slider::-moz-range-track {
                        background: transparent !important;
                        border: 0; height: 18px;
                    }
                    .price-slider::-ms-track {
                        background: transparent !important; border-color: transparent; color: transparent; height: 18px;
                    }
                    .price-slider::-ms-fill-lower, .price-slider::-ms-fill-upper { background: transparent !important; }
                    .price-slider::-webkit-slider-thumb {
                        -webkit-appearance: none; appearance: none;
                        pointer-events: auto;
                        width: 18px; height: 18px; border-radius: 50%;
                        background: #fff; border: 3px solid #3b6df0;
                        box-shadow: 0 2px 6px rgba(15,23,42,.15);
                        cursor: pointer; margin-top: 0;
                    }
                    .price-slider::-moz-range-thumb {
                        pointer-events: auto;
                        width: 18px; height: 18px; border-radius: 50%;
                        background: #fff; border: 3px solid #3b6df0;
                        box-shadow: 0 2px 6px rgba(15,23,42,.15);
                        cursor: pointer;
                    }
                    .price-slider:focus { outline: none; }
                </style>
                <script>
                (function(){
                    var minR = document.getElementById('priceMinRange');
                    var maxR = document.getElementById('priceMaxRange');
                    var minI = document.getElementById('priceMinInput');
                    var maxI = document.getElementById('priceMaxInput');
                    var fill = document.getElementById('priceSliderFill');
                    var label = document.getElementById('priceRangeLabel');
                    if (!minR || !maxR) return;
                    var mn = parseFloat(minR.min), mx = parseFloat(minR.max);
                    function fmt(v){ return Number(v).toLocaleString(undefined, { maximumFractionDigits: 0 }); }
                    function clamp(v, a, b){ return Math.max(a, Math.min(b, v)); }
                    function update(){
                        var lo = parseFloat(minR.value) || mn;
                        var hi = parseFloat(maxR.value) || mx;
                        if (lo > hi - 1) { lo = hi - 1; minR.value = lo; }
                        if (hi < lo + 1) { hi = lo + 1; maxR.value = hi; }
                        var loPct = ((lo - mn) / (mx - mn)) * 100;
                        var hiPct = ((hi - mn) / (mx - mn)) * 100;
                        fill.style.left = loPct + '%';
                        fill.style.right = (100 - hiPct) + '%';
                        if (label) label.textContent = fmt(lo) + ' – ' + fmt(hi);
                        minI.value = Math.round(lo);
                        maxI.value = Math.round(hi);
                    }
                    function fromInputs(){
                        minR.value = clamp(parseFloat(minI.value) || mn, mn, mx);
                        maxR.value = clamp(parseFloat(maxI.value) || mx, mn, mx);
                        update();
                    }
                    minR.addEventListener('input', update);
                    maxR.addEventListener('input', update);
                    minI.addEventListener('change', fromInputs);
                    maxI.addEventListener('change', fromInputs);
                    update();
                })();
                </script>

                {{-- Brands (only those with products in this category) --}}
                @if(count($brandsAll))
                <div>
                    <h4 class="font-semibold text-[14px] mb-3">{{ __('Brands') }} <span class="text-[11px] text-slate-400 font-normal">({{ count($brandsAll) }})</span></h4>
                    <div class="space-y-2 max-h-48 overflow-y-auto pr-1">
                        @php
                            $selectedBrands = is_array($brand_names ?? null) ? $brand_names : (request('brands') ? explode(',', request('brands')) : []);
                        @endphp
                        @foreach($brandsAll->take(50) as $brand)
                            @php $checked = in_array((string)$brand->id, array_map('strval', $selectedBrands)); @endphp
                            <label class="flex items-center gap-2 cursor-pointer hover:bg-slate-50 px-2 py-1 rounded">
                                <input type="checkbox" name="brand_filter[]" value="{{ $brand->id }}" {{ $checked ? 'checked' : '' }} class="w-4 h-4 rounded brand-filter-cb">
                                <span class="text-[13px]">{{ $brand->name }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
                @endif

                {{-- Hidden combined brand input that controller reads ($request->brands as comma list) --}}
                <input type="hidden" name="brands" id="brandsHidden" value="{{ request('brands') }}">
                <script>
                    (function(){
                        var form = document.getElementById('filterForm');
                        if (!form) return;
                        form.addEventListener('submit', function(){
                            var ids = [];
                            form.querySelectorAll('.brand-filter-cb:checked').forEach(function(c){ ids.push(c.value); });
                            var hidden = document.getElementById('brandsHidden');
                            if (hidden) hidden.value = ids.join(',');
                        });
                    })();
                </script>
                <input type="hidden" name="lp" value="1">

                {{-- Rating --}}
                <div>
                    <h4 class="font-semibold text-[14px] mb-3">{{ __('Rating') }}</h4>
                    <div class="space-y-2">
                        @for($r = 4; $r >= 1; $r--)
                            <label class="flex items-center gap-2 cursor-pointer hover:bg-slate-50 px-2 py-1 rounded">
                                <input type="radio" name="ratings" value="{{ $r }}" {{ request('ratings') == $r ? 'checked' : '' }} class="w-4 h-4">
                                <span class="text-[13px] flex items-center gap-1">
                                    @for($s = 0; $s < $r; $s++)<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" class="text-star"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg>@endfor
                                    @for($s = $r; $s < 5; $s++)<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" class="text-slate-300"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg>@endfor
                                    <span class="ml-1">{{ __('& up') }}</span>
                                </span>
                            </label>
                        @endfor
                    </div>
                </div>

                {{-- Stock --}}
                <div>
                    <h4 class="font-semibold text-[14px] mb-3">{{ __('Availability') }}</h4>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="outofstock" value="1" {{ request('outofstock') == '1' ? 'checked' : '' }} class="w-4 h-4 rounded">
                        <span class="text-[13px]">{{ __('Show out of stock') }}</span>
                    </label>
                </div>

                <button type="submit" class="w-full bg-brand-500 hover:bg-brand-600 text-white font-bold py-2.5 rounded-lg">{{ __('Apply Filters') }}</button>
                <a href="{{ url()->current() }}" class="block text-center text-[13px] text-brand-600 hover:underline">{{ __('Clear all filters') }}</a>
            </form>
        </div>
    </aside>

    {{-- Products grid --}}
    <div>
        @if($totalProducts > 0)
            @if($viewMode === 'list')
                <div class="space-y-3">
                    @foreach($displayProducts as $p)
                        @include('front.partials.product-list-card', ['p' => $p, 'lang' => session('changed_language') ?? 'en'])
                    @endforeach
                </div>
            @else
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-3 lg:gap-4">
                    @foreach($displayProducts as $p)
                        @include('front.partials.product-card', ['p' => $p, 'lang' => session('changed_language') ?? 'en'])
                    @endforeach
                </div>
            @endif

            {{-- Load more --}}
            @if($hasMore)
                @php
                    $loadMoreParams = array_merge(request()->all(), ['lp' => $loadedPages + 1]);
                    $loadMoreUrl = '?' . http_build_query($loadMoreParams);
                @endphp
                <div class="mt-8 flex flex-col items-center gap-2">
                    <p class="text-[12px] text-slate-500">{{ __('Showing') }} {{ $shownCount }} {{ __('of') }} {{ $totalProducts }} {{ __('products') }}</p>
                    <a href="{{ $loadMoreUrl }}" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-8 py-3 rounded-full transition-colors flex items-center gap-2">
                        {{ __('Load more') }}
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
                    </a>
                </div>
            @endif
        @else
            <div class="bg-white rounded-2xl shadow-card p-12 text-center">
                <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
                <h2 class="font-display font-extrabold text-2xl mt-5">{{ __('No products found') }}</h2>
                <p class="text-slate-500 mt-2">{{ __('Try adjusting your filters or search terms.') }}</p>
                <a href="{{ url('shop') }}" class="inline-flex items-center gap-2 mt-6 bg-brand-500 hover:bg-brand-600 text-white px-6 py-3 rounded-full font-semibold transition-colors">
                    {{ __('Browse all products') }}
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
            </div>
        @endif
    </div>
</section>

{{-- Overlay for mobile filters --}}
<div id="mobileFiltersOverlay" class="fixed inset-0 z-30 bg-black/50 hidden lg:!hidden" onclick="document.getElementById('mobileFilters').classList.add('-translate-x-full');this.classList.add('hidden')"></div>

@endsection