@extends('front.layout.app')
@section('title', 'Browse Car Listings | TRL Japan')
@section('meta_description', 'Search through our extensive inventory of SUVs, Sedans, and Luxury cars. Filter by brand, price, and year.')
@section('content')

    <section class="listing-grid tf-section3">
        <div class="container2">
            <div class="row">
                <div class="col-lg-12">
                    <div class="heading-section">
                        <h2>{{ \App\Models\CmsPage::get($cms, 'hero_title') }}</h2>
                        <p class="mt-20">  {{ \App\Models\CmsPage::get($cms, 'hero_description') }}</p>
                    </div>
                </div>
                <div class="col-lg-12 flex gap-30 text-start">
                    <div class="sidebar-right-listing">
                        <div class="sidebar-title flex-two flex-wrap">
                            <h4>Filters and Sort</h4>
                            <a class="fw-5 font clear text-color-2 clear-filters" href="#"><i
                                    class="icon-autodeal-plus"></i>Clear</a>
                        </div>
                        <div class="form-filter-siderbar">
                            <form method="get" id="listing-filter-form">
                                <div class="wd-find-select">

                                    <div class="form-group">
                                        <div class="group-select" style="border: 1px solid #E5E5EA !important;
    border-radius: 11px;
    padding: 14px;">
                                            <input type="text"
                                                   name="zip_code"
                                                   id="desk-zip-input"
                                                   class="text-field"
                                                   placeholder="Zip Code"
                                                   maxlength="5"
                                                   pattern="[0-9]{5}"
                                                   autocomplete="postal-code"
                                                   style="height:100%; width:100%; border:none; outline:none; background:transparent; padding: 0 16px; font-size:14px;">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="group-select" style="border: 1px solid #E5E5EA !important;
    border-radius: 11px;
    padding: 14px;">
                                            <select name="radius"
                                                    id="desk-radius-input"
                                                    aria-label="Search radius"
                                                    style="height:100%; width:100%; border:none; outline:none; background:transparent; padding: 0 16px; font-size:14px;">
                                                <option value="10">Within 10 miles</option>
                                                <option value="25">Within 25 miles</option>
                                                <option value="50" selected>Within 50 miles</option>
                                                <option value="75">Within 75 miles</option>
                                                <option value="100">Within 100 miles</option>
                                                <option value="nationwide">Nationwide</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="group-select">
                                            <div class="nice-select" tabindex="0" id="desk-make-nice">
                                                <span class="current">Make</span>
                                                <ul class="list" id="desk-make-list">
                                                    <li data-value="" class="option selected">Make</li>
                                                    @foreach($filterData['makes'] as $make)
                                                        <li data-value="{{ $make->id }}"
                                                            class="option">{{ $make->name }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                            <input type="hidden" name="make_id" id="desk-make-value" value="">
                                        </div>
                                    </div>

                                    {{-- MODEL --}}
                                    <div class="form-group">
                                        <div class="group-select">
                                            <div class="nice-select" tabindex="0" id="desk-model-nice">
                                                <span class="current">Models</span>
                                                <ul class="list" id="desk-model-list">
                                                    <li data-value="" class="option selected">Models</li>
                                                </ul>
                                            </div>
                                            <input type="hidden" name="model_id" id="desk-model-value" value="">
                                        </div>
                                    </div>

                                    {{-- BODY --}}
                                    <div class="form-group">
                                        <div class="group-select">
                                            <div class="nice-select" tabindex="0" id="desk-body-nice">
                                                <span class="current">Body</span>
                                                <ul class="list">
                                                    <li data-value="" class="option selected">Body</li>
                                                    @foreach($filterData['body_types'] as $body)
                                                        <li data-value="{{ $body->id }}"
                                                            class="option">{{ $body->name }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                            <input type="hidden" name="body_type_id" id="desk-body-value" value="">
                                        </div>
                                    </div>

                                    {{-- PRICE SLIDER --}}
                                    <div class="form-group wg-box3">
                                        <div class="widget widget-price ">
                                            <div class="caption flex-two">
                                                <div>
                                                    <span class="fw-6">Price: </span>
                                                    <span id="slider-range-value01"></span>
                                                    <span id="slider-range-value02"></span>
                                                </div>
                                            </div>
                                            <div id="slider-range2"></div>
                                            <div class="slider-labels">
                                                <div>
                                                    <input type="hidden" id="listing-min-price" name="min_price"
                                                           value="">
                                                    <input type="hidden" id="listing-max-price" name="max_price"
                                                           value="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- FUEL TYPE --}}
                                    <div class="form-group ">
                                        <div class="group-select">
                                            <div class="nice-select" tabindex="0" id="desk-fuel-nice">
                                                <span class="current">Fuel type</span>
                                                <ul class="list">
                                                    <li data-value="" class="option selected">Fuel type</li>
                                                    @foreach($filterData['fuel_types'] as $fuel)
                                                        <li data-value="{{ $fuel->id }}"
                                                            class="option">{{ $fuel->name }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                            <input type="hidden" name="fuel_type_id" id="desk-fuel-value" value="">
                                        </div>
                                    </div>

                                    {{-- TRANSMISSION --}}
                                    <div class="form-group ">
                                        <div class="group-select">
                                            <div class="nice-select" tabindex="0" id="desk-transmission-nice">
                                                <span class="current">Transmission</span>
                                                <ul class="list">
                                                    <li data-value="" class="option selected">Transmission</li>
                                                    @foreach($filterData['transmissions'] as $trans)
                                                        <li data-value="{{ $trans->id }}"
                                                            class="option">{{ $trans->name }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                            <input type="hidden" name="transmission_id" id="desk-transmission-value"
                                                   value="">
                                        </div>
                                    </div>

                                    {{-- DRIVE TYPE --}}
                                    <div class="form-group ">
                                        <div class="group-select">
                                            <div class="nice-select" tabindex="0" id="desk-drive-nice">
                                                <span class="current">Driver type</span>
                                                <ul class="list">
                                                    <li data-value="" class="option selected">Driver type</li>
                                                    @foreach($filterData['drive_types'] as $drive)
                                                        <li data-value="{{ $drive->id }}"
                                                            class="option">{{ $drive->name }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                            <input type="hidden" name="drive_type_id" id="desk-drive-value" value="">
                                        </div>
                                    </div>

                                    {{-- DOOR --}}
                                    {{--                                    <div class="form-group ">--}}
                                    {{--                                        <div class="group-select">--}}
                                    {{--                                            <div class="nice-select" tabindex="0" id="desk-doors-nice">--}}
                                    {{--                                                <span class="current">Door</span>--}}
                                    {{--                                                <ul class="list">--}}
                                    {{--                                                    <li data-value="" class="option selected">Door</li>--}}
                                    {{--                                                    @foreach($filterData['doors'] as $d)--}}
                                    {{--                                                        <li data-value="{{ $d->name }}" class="option">{{ $d->name }}--}}
                                    {{--                                                            Door--}}
                                    {{--                                                        </li>--}}
                                    {{--                                                    @endforeach--}}
                                    {{--                                                </ul>--}}
                                    {{--                                            </div>--}}
                                    {{--                                            <input type="hidden" name="doors" id="desk-doors-value" value="">--}}
                                    {{--                                        </div>--}}
                                    {{--                                    </div>--}}

                                    {{-- CYLINDER --}}
                                    {{--                                    <div class="form-group ">--}}
                                    {{--                                        <div class="group-select">--}}
                                    {{--                                            <div class="nice-select" tabindex="0" id="desk-cylinders-nice">--}}
                                    {{--                                                <span class="current">Cylinder</span>--}}
                                    {{--                                                <ul class="list">--}}
                                    {{--                                                    <li data-value="" class="option selected">Cylinder</li>--}}
                                    {{--                                                    @foreach($filterData['cylinders'] as $cyl)--}}
                                    {{--                                                        <li data-value="{{ $cyl->name }}"--}}
                                    {{--                                                            class="option">{{ $cyl->name }} Cylinder--}}
                                    {{--                                                        </li>--}}
                                    {{--                                                    @endforeach--}}
                                    {{--                                                </ul>--}}
                                    {{--                                            </div>--}}
                                    {{--                                            <input type="hidden" name="cylinders" id="desk-cylinders-value" value="">--}}
                                    {{--                                        </div>--}}
                                    {{--                                    </div>--}}

                                    {{-- COLOR --}}
                                    {{--                                    <div class="form-group ">--}}
                                    {{--                                        <div class="group-select">--}}
                                    {{--                                            <div class="nice-select" tabindex="0" id="desk-color-nice">--}}
                                    {{--                                                <span class="current">Color</span>--}}
                                    {{--                                                <ul class="list">--}}
                                    {{--                                                    <li data-value="" class="option selected">Color</li>--}}
                                    {{--                                                    @foreach($filterData['colors'] as $color)--}}
                                    {{--                                                        <li data-value="{{ $color->id }}"--}}
                                    {{--                                                            class="option">{{ $color->name }}</li>--}}
                                    {{--                                                    @endforeach--}}
                                    {{--                                                </ul>--}}
                                    {{--                                            </div>--}}
                                    {{--                                            <input type="hidden" name="color_id" id="desk-color-value" value="">--}}
                                    {{--                                        </div>--}}
                                    {{--                                    </div>--}}
                                    {{-- ENGINE --}}
                                    <div class="form-group">
                                        <div class="group-select">
                                            <div class="nice-select" tabindex="0" id="desk-engine-nice">
                                                <span class="current">Engine</span>
                                                <ul class="list">
                                                    <li data-value="" class="option selected">Engine</li>
                                                    @foreach($filterData['engine'] as $eng)
                                                        <li data-value="{{ $eng->id }}"
                                                            class="option">{{ $eng->name }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                            <input type="hidden" name="engine_id" id="desk-engine-value" value="">
                                        </div>
                                    </div>

                                    {{-- EXTERIOR COLOR --}}
                                    <div class="form-group">
                                        <div class="group-select">
                                            <div class="nice-select" tabindex="0" id="desk-exterior-nice">
                                                <span class="current">Exterior Color</span>
                                                <ul class="list">
                                                    <li data-value="" class="option selected">Exterior Color</li>
                                                    @foreach($filterData['exterior_color'] as $ext)
                                                        <li data-value="{{ $ext->id }}"
                                                            class="option">{{ $ext->name }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                            <input type="hidden" name="exterior_color_id" id="desk-exterior-value"
                                                   value="">
                                        </div>
                                    </div>

                                    {{-- INTERIOR COLOR --}}
                                    <div class="form-group">
                                        <div class="group-select">
                                            <div class="nice-select" tabindex="0" id="desk-interior-nice">
                                                <span class="current">Interior Color</span>
                                                <ul class="list">
                                                    <li data-value="" class="option selected">Interior Color</li>
                                                    @foreach($filterData['interior_color'] as $int)
                                                        <li data-value="{{ $int->id }}"
                                                            class="option">{{ $int->name }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                            <input type="hidden" name="interior_color_id" id="desk-interior-value"
                                                   value="">
                                        </div>
                                    </div>

                                    {{-- YEAR SLIDER --}}
                                    <div class="form-group wg-box3">
                                        <div class="widget widget-price ">
                                            <div class="caption flex-two">
                                                <div>
                                                    <span class="fw-6">Year: </span>
                                                    <span id="slider-range-value03"></span>
                                                    <span id="slider-range-value04"></span>
                                                </div>
                                            </div>
                                            <div id="slider-range3"></div>
                                            <div class="slider-labels">
                                                <div>
                                                    <input type="hidden" id="listing-min-year" name="min_year" value="">
                                                    <input type="hidden" id="listing-max-year" name="max_year" value="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- MILEAGE SLIDER --}}
                                    <div class="form-group wg-box3">
                                        <div class="widget widget-price ">
                                            <div class="caption flex-two">
                                                <div>
                                                    <span class="fw-6">Miles: </span>
                                                    <span id="slider-range-value1"></span>
                                                    <span id="slider-range-value2"></span>
                                                </div>
                                            </div>
                                            <div id="slider-range"></div>
                                            <div class=" slider-labels">
                                                <div>
                                                    <input type="hidden" id="listing-min-mileage" name="min_mileage"
                                                           value="">
                                                    <input type="hidden" id="listing-max-mileage" name="max_mileage"
                                                           value="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- FEATURED CHECKBOX --}}
                                    <div class="form-group">
                                        <div class="tf-amenities bg-white">
                                            <label class="flex-three">
                                                <input name="is_featured" type="checkbox" value="1"/>
                                                <span class="btn-checkbox"></span>
                                                <span class="font-2">Featured</span>
                                            </label>
                                        </div>
                                    </div>

                                    {{-- FEATURES --}}
                                    <div class="features-wrap">
                                        <h4>Featured</h4>
                                        <div class="form-group">
                                            <div class="tf-amenities bg-white">
                                                @foreach($filterData['features']->flatten() as $feature)
                                                    <label class="flex-three">
                                                        <input name="features[]" type="checkbox"
                                                               value="{{ $feature->id }}"/>
                                                        <span class="btn-checkbox"></span>
                                                        <span class="text-color-2 font-2">{{ $feature->name }}</span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="sidebar-left-listing">
                        <div class="row">
                            <div class="col-lg-12 listing-list-car-wrap listing-grid-car-wrap">
                                <div class="flat-tabs themesflat-tabs category-filter">
                                    <div class="box-tab center flex-two mb-40 flex-wrap gap-20">
                                        <ul class="menu-tab tab-title style1 flex" id="listing-condition-tabs">
                                            <li class="item-title active" data-tab="">
                                                <h5 class="inner">All Cars</h5>
                                            </li>
                                            <li class="item-title" data-tab="new">
                                                <h5 class="inner">New Cars</h5>
                                            </li>
                                            <li class="item-title" data-tab="used">
                                                <h5 class="inner ">Used Cars</h5>
                                            </li>
                                            <li class="item-title" data-tab="certified">
                                                <h5 class="inner ">CPO</h5>
                                            </li>
                                        </ul>
                                        <div class="box-2 flex gap-8 flex-wrap">
                                            <div class="filter-mobie">
                                                <a data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
                                                   aria-controls="offcanvasRight" class="filter">Filter<i
                                                        class="icon-autodeal-filter"></i></a>
                                            </div>
                                            <a href="#" class="btn-view grid active">
                                                <svg width="25" height="25" viewBox="0 0 25 25" fill="none"
                                                     xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M5.04883 6.40508C5.04883 5.6222 5.67272 5 6.41981 5C7.16686 5 7.7908 5.62221 7.7908 6.40508C7.7908 7.18801 7.16722 7.8101 6.41981 7.8101C5.67241 7.8101 5.04883 7.18801 5.04883 6.40508Z"
                                                        stroke="CurrentColor"></path>
                                                    <path
                                                        d="M11.1045 6.40508C11.1045 5.62221 11.7284 5 12.4755 5C13.2229 5 13.8466 5.6222 13.8466 6.40508C13.8466 7.18789 13.2227 7.8101 12.4755 7.8101C11.7284 7.8101 11.1045 7.18794 11.1045 6.40508Z"
                                                        stroke="CurrentColor"></path>
                                                    <path
                                                        d="M19.9998 6.40514C19.9998 7.18797 19.3757 7.81016 18.6288 7.81016C17.8818 7.81016 17.2578 7.18794 17.2578 6.40508C17.2578 5.62211 17.8813 5 18.6288 5C19.3763 5 19.9998 5.62215 19.9998 6.40514Z"
                                                        stroke="CurrentColor"></path>
                                                    <path
                                                        d="M7.74249 12.5097C7.74249 13.2926 7.11849 13.9147 6.37133 13.9147C5.62411 13.9147 5 13.2926 5 12.5097C5 11.7267 5.62419 11.1044 6.37133 11.1044C7.11842 11.1044 7.74249 11.7266 7.74249 12.5097Z"
                                                        stroke="CurrentColor"></path>
                                                    <path
                                                        d="M13.7976 12.5097C13.7976 13.2927 13.1736 13.9147 12.4266 13.9147C11.6795 13.9147 11.0557 13.2927 11.0557 12.5097C11.0557 11.7265 11.6793 11.1044 12.4266 11.1044C13.1741 11.1044 13.7976 11.7265 13.7976 12.5097Z"
                                                        stroke="CurrentColor"></path>
                                                    <path
                                                        d="M19.9516 12.5097C19.9516 13.2927 19.328 13.9147 18.5807 13.9147C17.8329 13.9147 17.209 13.2925 17.209 12.5097C17.209 11.7268 17.8332 11.1044 18.5807 11.1044C19.3279 11.1044 19.9516 11.7265 19.9516 12.5097Z"
                                                        stroke="CurrentColor"></path>
                                                    <path
                                                        d="M5.04297 18.5947C5.04297 17.8118 5.66709 17.1896 6.4143 17.1896C7.16137 17.1896 7.78523 17.8116 7.78523 18.5947C7.78523 19.3778 7.16139 19.9997 6.4143 19.9997C5.66714 19.9997 5.04297 19.3773 5.04297 18.5947Z"
                                                        stroke="CurrentColor"></path>
                                                    <path
                                                        d="M11.0986 18.5947C11.0986 17.8118 11.7227 17.1896 12.47 17.1896C13.2169 17.1896 13.8409 17.8117 13.8409 18.5947C13.8409 19.3778 13.2169 19.9997 12.47 19.9997C11.7225 19.9997 11.0986 19.3774 11.0986 18.5947Z"
                                                        stroke="CurrentColor"></path>
                                                    <path
                                                        d="M17.252 18.5947C17.252 17.8117 17.876 17.1896 18.6229 17.1896C19.3699 17.1896 19.9939 17.8117 19.9939 18.5947C19.9939 19.3778 19.3702 19.9997 18.6229 19.9997C17.876 19.9997 17.252 19.3774 17.252 18.5947Z"
                                                        stroke="CurrentColor"></path>
                                                </svg>
                                            </a>
                                            <div class="wd-find-select flex gap-8">
                                                <div class="group-select">
                                                    <div class="nice-select" tabindex="0" id="per-page-nice"><span
                                                            class="current">Show: 20</span>
                                                        <ul class="list style">
                                                            <li data-value="20" class="option selected focus">Show: 20
                                                            </li>
                                                            <li data-value="40" class="option">Show: 40</li>
                                                            <li data-value="80" class="option ">Show: 80
                                                            </li>
                                                            <li data-value="100" class="option">Show: 100</li>
                                                        </ul>
                                                    </div>
                                                    <input type="hidden" id="per-page-value" value="20">
                                                </div>
                                                <div class="group-select">
                                                    <div class="nice-select" tabindex="0" id="sort-nice"><span
                                                            class="current">Default order</span>
                                                        <ul class="list style">
                                                            <li data-value="latest" class="option selected focus">
                                                                Default order
                                                            </li>
                                                            {{--                                                            <li data-value="latest" class="option">All</li>--}}
                                                            <li data-value="price_asc" class="option">Pricing Low to
                                                                High
                                                            </li>
                                                            <li data-value="price_desc" class="option">Pricing High to
                                                                low
                                                            </li>

                                                            <li data-value="mi_asc" class="option">Mileage Low to High
                                                            </li>
                                                            <li data-value="mi_desc" class="option">Mileage High to
                                                                Low
                                                            </li>

                                                            <li data-value="year_asc" class="option">Year Old to New
                                                            </li>
                                                            <li data-value="year_desc" class="option">Year New to Old
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <input type="hidden" id="sort-value" value="latest">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <style>
                                        .skeleton-pulse {
                                            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                                            background-size: 200% 100%;
                                            animation: skeleton-shimmer 1.4s infinite;
                                            border-radius: 6px;
                                        }

                                        .skeleton-img {
                                            width: 100%;
                                            height: 220px;
                                        }

                                        @keyframes skeleton-shimmer {
                                            0% {
                                                background-position: 200% 0;
                                            }
                                            100% {
                                                background-position: -200% 0;
                                            }
                                        }
                                    </style>

                                    <div id="skeleton-loader" style="display:none;"
                                         class="list-car-list-1 list-car-grid-1">
                                        @for($i = 0; $i < 20; $i++)
                                            <div class="box-car-list style-2 skeleton-card">
                                                <div class="skeleton-img skeleton-pulse"></div>
                                                <div class="content" style="padding:20px">
                                                    <div class="skeleton-line skeleton-pulse"
                                                         style="width:40%;height:14px;margin-bottom:10px"></div>
                                                    <div class="skeleton-line skeleton-pulse"
                                                         style="width:80%;height:20px;margin-bottom:16px"></div>
                                                    <div class="skeleton-line skeleton-pulse"
                                                         style="width:60%;height:14px;margin-bottom:8px"></div>
                                                    <div class="skeleton-line skeleton-pulse"
                                                         style="width:30%;height:22px;margin-bottom:16px"></div>
                                                </div>
                                            </div>
                                        @endfor
                                    </div>

                                    <div class="content-tab">
                                        <div class="content-inner tab-content">
                                            <div id="zip-notice"
                                                 style="{{ $zipNotice ? '' : 'display:none;' }}padding:12px 16px;margin-bottom:16px;border:1px solid #ffd9b3;background:#fff7ee;color:#7a3a00;border-radius:10px;font-size:14px;">
                                                <i class="fas fa-info-circle"
                                                   style="margin-right:8px;color:#FF7101;"></i>
                                                <span id="zip-notice-text">{{ $zipNotice }}</span>
                                            </div>
                                            <div class="list-car-list-1 list-car-grid-1" id="cars-grid">
                                                @include('front.partials.main_card', ['cars' => $cars])
                                            </div>
                                        </div>
                                    </div>

                                    <div id="pagination-wrap">
                                        @include('front.partials.pagination', ['cars' => $cars])
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    {{-- MOBILE OFFCANVAS - exact same UI, same dynamic data --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight">
        <div class="offcanvas-header">
            <h4 class="offcanvas-title" id="offcanvasRightLabel">Filters and Sort</h4>
            <a class="clear-filters" href="#"
               style="    background: #f97316;
    color: #fff;
    padding:6px 4px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    display: flex
;
    align-items: center;
    gap: 5px;
    margin-left: 163px;">
                Clear
            </a>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="form-filter-siderbar">
                <form method="get" id="mob-filter-form">
                    <div class="wd-find-select">

                        {{-- ZIP CODE --}}
                        <div class="form-group">
                            <div class="group-select"
                                 style="border: 1px solid #E5E5EA !important; border-radius: 11px; padding: 14px;">
                                <input type="text"
                                       name="zip_code"
                                       id="mob-zip-input"
                                       class="text-field"
                                       placeholder="Zip Code"
                                       maxlength="5"
                                       pattern="[0-9]{5}"
                                       autocomplete="postal-code"
                                       style="height:100%; width:100%; border:none; outline:none; background:transparent; padding: 0 16px; font-size:14px;">
                            </div>
                        </div>

                        {{-- RADIUS --}}
                        <div class="form-group">
                            <div class="group-select"
                                 style="border: 1px solid #E5E5EA !important; border-radius: 11px; padding: 14px;">
                                <select name="radius"
                                        id="mob-radius-input"
                                        aria-label="Search radius"
                                        style="height:100%; width:100%; border:none; outline:none; background:transparent; padding: 0 16px; font-size:14px;">
                                    <option value="10">Within 10 miles</option>
                                    <option value="25">Within 25 miles</option>
                                    <option value="50" selected>Within 50 miles</option>
                                    <option value="75">Within 75 miles</option>
                                    <option value="100">Within 100 miles</option>
                                    <option value="nationwide">Nationwide</option>
                                </select>
                            </div>
                        </div>

                        {{-- MAKE --}}
                        <div class="form-group">
                            <div class="group-select">
                                <div class="nice-select" tabindex="0" id="mob-make-nice">
                                    <span class="current">Make</span>
                                    <ul class="list" id="mob-make-list">
                                        <li data-value="" class="option selected">Make</li>
                                        @foreach($filterData['makes'] as $make)
                                            <li data-value="{{ $make->id }}" class="option">{{ $make->name }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <input type="hidden" name="make_id" id="mob-make-value" value="">
                            </div>
                        </div>

                        {{-- MODEL --}}
                        <div class="form-group">
                            <div class="group-select">
                                <div class="nice-select" tabindex="0" id="mob-model-nice">
                                    <span class="current">Models</span>
                                    <ul class="list" id="mob-model-list">
                                        <li data-value="" class="option selected">Models</li>
                                    </ul>
                                </div>
                                <input type="hidden" name="model_id" id="mob-model-value" value="">
                            </div>
                        </div>

                        {{-- BODY --}}
                        <div class="form-group">
                            <div class="group-select">
                                <div class="nice-select" tabindex="0" id="mob-body-nice">
                                    <span class="current">Body</span>
                                    <ul class="list">
                                        <li data-value="" class="option selected">Body</li>
                                        @foreach($filterData['body_types'] as $body)
                                            <li data-value="{{ $body->id }}" class="option">{{ $body->name }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <input type="hidden" name="body_type_id" id="mob-body-value" value="">
                            </div>
                        </div>

                        {{-- PRICE SLIDER --}}
                        <div class="form-group wg-box3">
                            <div class="widget widget-price ">
                                <div class="caption flex-two">
                                    <div>
                                        <span class="fw-6">Price: </span>
                                        <span id="slider-range-mob-value01"></span>
                                        <span id="slider-range-mob-value02"></span>
                                    </div>
                                </div>
                                <div id="slider-range-mob2"></div>
                                <div class="slider-labels">
                                    <div>
                                        <input type="hidden" name="min_price" value="">
                                        <input type="hidden" name="max_price" value="">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- FUEL TYPE --}}
                        <div class="form-group ">
                            <div class="group-select">
                                <div class="nice-select" tabindex="0" id="mob-fuel-nice">
                                    <span class="current">Fuel type</span>
                                    <ul class="list">
                                        <li data-value="" class="option selected">Fuel type</li>
                                        @foreach($filterData['fuel_types'] as $fuel)
                                            <li data-value="{{ $fuel->id }}" class="option">{{ $fuel->name }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <input type="hidden" name="fuel_type_id" id="mob-fuel-value" value="">
                            </div>
                        </div>

                        {{-- TRANSMISSION --}}
                        <div class="form-group ">
                            <div class="group-select">
                                <div class="nice-select" tabindex="0" id="mob-transmission-nice">
                                    <span class="current">Transmission</span>
                                    <ul class="list">
                                        <li data-value="" class="option selected">Transmission</li>
                                        @foreach($filterData['transmissions'] as $trans)
                                            <li data-value="{{ $trans->id }}" class="option">{{ $trans->name }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <input type="hidden" name="transmission_id" id="mob-transmission-value" value="">
                            </div>
                        </div>

                        {{-- DRIVE TYPE --}}
                        <div class="form-group ">
                            <div class="group-select">
                                <div class="nice-select" tabindex="0" id="mob-drive-nice">
                                    <span class="current">Driver type</span>
                                    <ul class="list">
                                        <li data-value="" class="option selected">Driver type</li>
                                        @foreach($filterData['drive_types'] as $drive)
                                            <li data-value="{{ $drive->id }}" class="option">{{ $drive->name }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <input type="hidden" name="drive_type_id" id="mob-drive-value" value="">
                            </div>
                        </div>

                        {{-- DOOR --}}
                        {{--                        <div class="form-group ">--}}
                        {{--                            <div class="group-select">--}}
                        {{--                                <div class="nice-select" tabindex="0" id="mob-doors-nice">--}}
                        {{--                                    <span class="current">Door</span>--}}
                        {{--                                    <ul class="list">--}}
                        {{--                                        <li data-value="" class="option selected">Door</li>--}}
                        {{--                                        @foreach($filterData['doors'] as $d)--}}
                        {{--                                            <li data-value="{{ $d->name }}" class="option">{{ $d->name }} Door</li>--}}
                        {{--                                        @endforeach--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <input type="hidden" name="doors" id="mob-doors-value" value="">--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}

                        {{-- CYLINDER --}}
                        {{--                        <div class="form-group ">--}}
                        {{--                            <div class="group-select">--}}
                        {{--                                <div class="nice-select" tabindex="0" id="mob-cylinders-nice">--}}
                        {{--                                    <span class="current">Cylinder</span>--}}
                        {{--                                    <ul class="list">--}}
                        {{--                                        <li data-value="" class="option selected">Cylinder</li>--}}
                        {{--                                        @foreach($filterData['cylinders'] as $cyl)--}}
                        {{--                                            <li data-value="{{ $cyl->name }}" class="option">{{ $cyl->name }} Cylinder--}}
                        {{--                                            </li>--}}
                        {{--                                        @endforeach--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <input type="hidden" name="cylinders" id="mob-cylinders-value" value="">--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}

                        {{-- COLOR --}}
                        {{--                        <div class="form-group ">--}}
                        {{--                            <div class="group-select">--}}
                        {{--                                <div class="nice-select" tabindex="0" id="mob-color-nice">--}}
                        {{--                                    <span class="current">Color</span>--}}
                        {{--                                    <ul class="list">--}}
                        {{--                                        <li data-value="" class="option selected">Color</li>--}}
                        {{--                                        @foreach($filterData['colors'] as $color)--}}
                        {{--                                            <li data-value="{{ $color->id }}" class="option">{{ $color->name }}</li>--}}
                        {{--                                        @endforeach--}}
                        {{--                                    </ul>--}}
                        {{--                                </div>--}}
                        {{--                                <input type="hidden" name="color_id" id="mob-color-value" value="">--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}
                        {{-- ENGINE --}}
                        <div class="form-group">
                            <div class="group-select">
                                <div class="nice-select" tabindex="0" id="mob-engine-nice">
                                    <span class="current">Engine</span>
                                    <ul class="list">
                                        <li data-value="" class="option selected">Engine</li>
                                        @foreach($filterData['engine'] as $eng)
                                            <li data-value="{{ $eng->id }}" class="option">{{ $eng->name }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <input type="hidden" name="engine_id" id="mob-engine-value" value="">
                            </div>
                        </div>

                        {{-- EXTERIOR COLOR --}}
                        <div class="form-group">
                            <div class="group-select">
                                <div class="nice-select" tabindex="0" id="mob-exterior-nice">
                                    <span class="current">Exterior Color</span>
                                    <ul class="list">
                                        <li data-value="" class="option selected">Exterior Color</li>
                                        @foreach($filterData['exterior_color'] as $ext)
                                            <li data-value="{{ $ext->id }}" class="option">{{ $ext->name }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <input type="hidden" name="exterior_color_id" id="mob-exterior-value" value="">
                            </div>
                        </div>

                        {{-- INTERIOR COLOR --}}
                        <div class="form-group">
                            <div class="group-select">
                                <div class="nice-select" tabindex="0" id="mob-interior-nice">
                                    <span class="current">Interior Color</span>
                                    <ul class="list">
                                        <li data-value="" class="option selected">Interior Color</li>
                                        @foreach($filterData['interior_color'] as $int)
                                            <li data-value="{{ $int->id }}" class="option">{{ $int->name }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <input type="hidden" name="interior_color_id" id="mob-interior-value" value="">
                            </div>
                        </div>
                        {{-- YEAR SLIDER --}}
                        <div class="form-group wg-box3">
                            <div class="widget widget-price ">
                                <div class="caption flex-two">
                                    <div>
                                        <span class="fw-6">Year: </span>
                                        <span id="slider-range-mob-value03"></span>
                                        <span id="slider-range-mob-value04"></span>
                                    </div>
                                </div>
                                <div id="slider-range-mob3"></div>
                                <div class="slider-labels">
                                    <div>
                                        <input type="hidden" name="min_year" value="">
                                        <input type="hidden" name="max_year" value="">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- MILEAGE SLIDER --}}
                        <div class="form-group wg-box3">
                            <div class="widget widget-price ">
                                <div class="caption flex-two">
                                    <div>
                                        <span class="fw-6">Miles: </span>
                                        <span id="slider-range-mob-value1"></span>
                                        <span id="slider-range-mob-value2"></span>
                                    </div>
                                </div>
                                <div id="slider-range-mob"></div>
                                <div class=" slider-labels">
                                    <div>
                                        <input type="hidden" name="min_mileage" value="">
                                        <input type="hidden" name="max_mileage" value="">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- FEATURED --}}
                        <div class="form-group">
                            <div class="tf-amenities bg-white">
                                <label class="flex-three">
                                    <input name="is_featured" type="checkbox" value="1"/>
                                    <span class="btn-checkbox"></span>
                                    <span class="font-2">Featured</span>
                                </label>
                            </div>
                        </div>

                        {{-- FEATURES --}}
                        <div class="features-wrap">
                            <h4>Featured</h4>
                            <div class="form-group">
                                <div class="tf-amenities bg-white">
                                    @foreach($filterData['features']->flatten() as $feature)
                                        <label class="flex-three">
                                            <input name="features[]" type="checkbox" value="{{ $feature->id }}"/>
                                            <span class="btn-checkbox"></span>
                                            <span class="text-color-2 font-2">{{ $feature->name }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>

    {{--    @include('showroom.resources.views.front.partials.availability_modal')--}}
@endsection
@push('script')
    <script>
        $(document).ready(function () {

            const FILTER_URL = "{{ route('front.car.filter') }}";
            const MODELS_URL = "{{ route('front.car.models') }}";
            const LISTING_URL = "{{ route('front.listing') }}";

            const PRICE_MIN = {{ $filterData['price_range']['min'] }};
            const PRICE_MAX = {{ $filterData['price_range']['max'] }};
            const YEAR_MIN = {{ $filterData['year_range']['min'] }};
            const YEAR_MAX = {{ $filterData['year_range']['max'] }};
            const MILEAGE_MAX = {{ $filterData['mileage_range']['max'] }};

            let filterTimer = null;
            let currentPage = 1;

            /* ─── NICE-SELECT MAP ─── */
            const niceMap = {
                'desk-make-nice': 'desk-make-value',
                'desk-model-nice': 'desk-model-value',
                'desk-body-nice': 'desk-body-value',
                'desk-fuel-nice': 'desk-fuel-value',
                'desk-transmission-nice': 'desk-transmission-value',
                'desk-drive-nice': 'desk-drive-value',
                // 'desk-doors-nice': 'desk-doors-value',
                // 'desk-cylinders-nice': 'desk-cylinders-value',
                // 'desk-color-nice': 'desk-color-value',
                'mob-make-nice': 'mob-make-value',
                'mob-model-nice': 'mob-model-value',
                'mob-body-nice': 'mob-body-value',
                'mob-fuel-nice': 'mob-fuel-value',
                'mob-transmission-nice': 'mob-transmission-value',
                'mob-drive-nice': 'mob-drive-value',
                // 'mob-doors-nice': 'mob-doors-value',
                // 'mob-cylinders-nice': 'mob-cylinders-value',
                // 'mob-color-nice': 'mob-color-value',
                'per-page-nice': 'per-page-value',
                'sort-nice': 'sort-value',

                'desk-engine-nice': 'desk-engine-value',
                'desk-exterior-nice': 'desk-exterior-value',
                'desk-interior-nice': 'desk-interior-value',
                'mob-engine-nice': 'mob-engine-value',
                'mob-exterior-nice': 'mob-exterior-value',
                'mob-interior-nice': 'mob-interior-value',
            };

            /* ─── COLLECT FILTERS ─── */
            function collectFilters() {

                const f = [];
                $('input[name="features[]"]:checked').each(function () {
                    f.push($(this).val());
                });

                return {
                    page: currentPage,
                    per_page: $('#per-page-value').val() || 20,
                    sort: $('#sort-value').val() || 'latest',
                    tab: $('#listing-condition-tabs .item-title.active').data('tab') || '',
                    make_id: $('#desk-make-value').val() || $('#mob-make-value').val() || '',
                    model_id: $('#desk-model-value').val() || $('#mob-model-value').val() || '',
                    body_type_id: $('#desk-body-value').val() || $('#mob-body-value').val() || '',
                    fuel_type_id: $('#desk-fuel-value').val() || $('#mob-fuel-value').val() || '',
                    transmission_id: $('#desk-transmission-value').val() || $('#mob-transmission-value').val() || '',
                    drive_type_id: $('#desk-drive-value').val() || $('#mob-drive-value').val() || '',
                    // doors: $('#desk-doors-value').val() || $('#mob-doors-value').val() || '',
                    // cylinders: $('#desk-cylinders-value').val() || $('#mob-cylinders-value').val() || '',
                    // color_id: $('#desk-color-value').val() || $('#mob-color-value').val() || '',
                    min_price: $('#listing-min-price').val() || '',
                    max_price: $('#listing-max-price').val() || '',
                    min_year: $('#listing-min-year').val() || '',
                    max_year: $('#listing-max-year').val() || '',
                    min_mileage: $('#listing-min-mileage').val() || '',
                    max_mileage: $('#listing-max-mileage').val() || '',
                    is_featured: $('input[name="is_featured"]').is(':checked') ? 1 : '',
                    'features[]': f,
                    engine_id: $('#desk-engine-value').val() || $('#mob-engine-value').val() || '',
                    exterior_color_id: $('#desk-exterior-value').val() || $('#mob-exterior-value').val() || '',
                    interior_color_id: $('#desk-interior-value').val() || $('#mob-interior-value').val() || '',
                    zip_code: $('#desk-zip-input').val() || $('#mob-zip-input').val() || '',
                    radius: $('#desk-radius-input').val() || $('#mob-radius-input').val() || '',
                };
            }

            /* ─── AJAX FILTER ─── */
            window.doFilter = function (resetPage = true) {
                if (resetPage) currentPage = 1;
                clearTimeout(filterTimer);
                filterTimer = setTimeout(function () {
                    const filters = collectFilters();
                    Object.keys(filters).forEach(k => {
                        if (k === 'features[]') return; // skip — array hai
                        if (!filters[k] && filters[k] !== 0) delete filters[k];
                    });
                    // ✅ Features empty array ho to delete karo
                    if (filters['features[]'] && filters['features[]'].length === 0) {
                        delete filters['features[]'];
                    }

                    $('#cars-grid').hide();
                    $('#skeleton-loader').show();

                    $.ajax({
                        url: FILTER_URL,
                        method: 'GET',
                        data: filters,
                        traditional: true,
                        headers: {'X-Requested-With': 'XMLHttpRequest'},
                        success: function (res) {
                            setTimeout(function () {
                                $('#skeleton-loader').hide();
                                $('#cars-grid').html(res.html).fadeIn(200);
                                $('#pagination-wrap').html(res.pagination);

                                if (res.zip_notice) {
                                    $('#zip-notice-text').text(res.zip_notice);
                                    $('#zip-notice').show();
                                } else {
                                    $('#zip-notice').hide();
                                }

                                // ✅ Features properly URL mein
                                const params = new URLSearchParams();
                                Object.keys(filters).forEach(k => {
                                    if (k === 'features[]') {
                                        filters[k].forEach(v => params.append('features[]', v));
                                    } else if (filters[k] !== undefined && filters[k] !== '') {
                                        params.append(k, filters[k]);
                                    }
                                });
                                window.history.pushState({}, '', LISTING_URL + '?' + params.toString());
                            }, 300);
                        },
                        error: function () {
                            $('#skeleton-loader').hide();
                            $('#cars-grid').fadeIn(200);
                        }
                    });
                }, 400);
            };

            /* ─── NICE-SELECT CLICK ─── */
            $(document).on('click', '.nice-select .option', function () {
                const $nice = $(this).closest('.nice-select');
                const niceId = $nice.attr('id');
                const val = $(this).data('value') !== undefined ? $(this).data('value') : '';

                if (niceMap[niceId]) $('#' + niceMap[niceId]).val(val);

                if (niceId === 'desk-make-nice') loadModels(val, 'desk');
                if (niceId === 'mob-make-nice') loadModels(val, 'mob');

                setTimeout(() => doFilter(), 100);
            });

            /* ─── LOAD MODELS ─── */
            function loadModels(makeId, prefix) {
                const $current = $('#' + prefix + '-model-nice .current');
                const $list = $('#' + prefix + '-model-list');
                $('#' + prefix + '-model-value').val('');

                if (!makeId) {
                    $current.text('Models');
                    $list.html('<li data-value="" class="option selected">Models</li>');
                    return;
                }
                $current.text('Loading...');
                $.get(MODELS_URL, {make_id: makeId}, function (models) {
                    let items = '<li data-value="" class="option selected">All Models</li>';
                    models.forEach(m => {
                        items += `<li data-value="${m.id}" class="option">${m.name}</li>`;
                    });
                    $current.text('All Models');
                    $list.html(items);
                }).fail(() => $current.text('Error'));
            }

            /* ─── noUiSlider HOOK ─────────────────────────────────────────────────
               price.js sliders banata hai — hum sirf unke change pe hidden inputs
               update karte hain (ID based — no getElementsByName conflict)
            ─────────────────────────────────────────────────────────────────────── */
            function hookSlider(elId, minId, maxId, fmt) {
                var el = document.getElementById(elId);
                if (!el || !el.noUiSlider) return;
                // el.noUiSlider.on('update', function (values) {
                //     document.getElementById(minId).value = fmt.from(values[0]);
                //     document.getElementById(maxId).value = fmt.from(values[1]);
                // });
                el.noUiSlider.on('change', function (values) {
                    document.getElementById(minId).value = fmt.from(values[0]);
                    document.getElementById(maxId).value = fmt.from(values[1]);
                    doFilter();
                });
            }

            // price.js ke baad sliders ready hote hain — window load pe hook karo
            $(window).on('load', function () {
                var numFmt = wNumb({decimals: 0, thousand: ','});
                var yearFmt = wNumb({decimals: 0, thousand: ''});
                $('#listing-min-price').val('');
                $('#listing-max-price').val('');
                $('#listing-min-year').val('');
                $('#listing-max-year').val('');
                $('#listing-min-mileage').val('');
                $('#listing-max-mileage').val('');
                // Desktop
                hookSlider('slider-range', 'listing-min-mileage', 'listing-max-mileage', numFmt);
                hookSlider('slider-range2', 'listing-min-price', 'listing-max-price', numFmt);
                hookSlider('slider-range3', 'listing-min-year', 'listing-max-year', yearFmt);

                // Mobile
                hookSlider('slider-range-mob', 'listing-min-mileage', 'listing-max-mileage', numFmt);
                hookSlider('slider-range-mob2', 'listing-min-price', 'listing-max-price', numFmt);
                hookSlider('slider-range-mob3', 'listing-min-year', 'listing-max-year', yearFmt);

                /* ─── URL PARAMS SE PRE-FILL ─── */
                const urlParams = new URLSearchParams(window.location.search);
                if (!urlParams.toString()) {
                    doFilter();
                    return;
                }

                function setNiceSelect(niceId, val) {
                    const $nice = $('#' + niceId);
                    const $opt = $nice.find('.option').filter(function () {
                        return String($(this).data('value')) === String(val);
                    });
                    if ($opt.length) {
                        $nice.find('.option').removeClass('selected');
                        $opt.addClass('selected');
                        $nice.find('.current').text($opt.text().trim());
                    }
                }

                const dropdownMap = {
                    'make_id': {
                        desk: 'desk-make-nice',
                        mob: 'mob-make-nice',
                        deskVal: 'desk-make-value',
                        mobVal: 'mob-make-value'
                    },
                    'model_id': {
                        desk: 'desk-model-nice',
                        mob: 'mob-model-nice',
                        deskVal: 'desk-model-value',
                        mobVal: 'mob-model-value'
                    },
                    'body_type_id': {
                        desk: 'desk-body-nice',
                        mob: 'mob-body-nice',
                        deskVal: 'desk-body-value',
                        mobVal: 'mob-body-value'
                    },
                    'fuel_type_id': {
                        desk: 'desk-fuel-nice',
                        mob: 'mob-fuel-nice',
                        deskVal: 'desk-fuel-value',
                        mobVal: 'mob-fuel-value'
                    },
                    'transmission_id': {
                        desk: 'desk-transmission-nice',
                        mob: 'mob-transmission-nice',
                        deskVal: 'desk-transmission-value',
                        mobVal: 'mob-transmission-value'
                    },
                    'drive_type_id': {
                        desk: 'desk-drive-nice',
                        mob: 'mob-drive-nice',
                        deskVal: 'desk-drive-value',
                        mobVal: 'mob-drive-value'
                    },
                    // 'doors': {
                    //     desk: 'desk-doors-nice',
                    //     mob: 'mob-doors-nice',
                    //     deskVal: 'desk-doors-value',
                    //     mobVal: 'mob-doors-value'
                    // },
                    // 'cylinders': {
                    //     desk: 'desk-cylinders-nice',
                    //     mob: 'mob-cylinders-nice',
                    //     deskVal: 'desk-cylinders-value',
                    //     mobVal: 'mob-cylinders-value'
                    // },
                    // 'color_id': {
                    //     desk: 'desk-color-nice',
                    //     mob: 'mob-color-nice',
                    //     deskVal: 'desk-color-value',
                    //     mobVal: 'mob-color-value'
                    // },
                    'engine_id': {
                        desk: 'desk-engine-nice',
                        mob: 'mob-engine-nice',
                        deskVal: 'desk-engine-value',
                        mobVal: 'mob-engine-value'
                    },
                    'exterior_color_id': {
                        desk: 'desk-exterior-nice',
                        mob: 'mob-exterior-nice',
                        deskVal: 'desk-exterior-value',
                        mobVal: 'mob-exterior-value'
                    },
                    'interior_color_id': {
                        desk: 'desk-interior-nice',
                        mob: 'mob-interior-nice',
                        deskVal: 'desk-interior-value',
                        mobVal: 'mob-interior-value'
                    },
                };

                // Dropdowns
                Object.keys(dropdownMap).forEach(function (field) {
                    const val = urlParams.get(field);
                    if (!val) return;
                    const map = dropdownMap[field];
                    $('#' + map.deskVal).val(val);
                    $('#' + map.mobVal).val(val);
                    setNiceSelect(map.desk, val);
                    setNiceSelect(map.mob, val);
                });

                // Tab
                const tab = urlParams.get('tab');
                if (tab) {
                    $('#listing-condition-tabs .item-title').removeClass('active');
                    $('#listing-condition-tabs .item-title[data-tab="' + tab + '"]').addClass('active');
                }

                // ✅ noUiSlider set — jQuery UI slider() nahi
                function setNoUiSlider(elId, minVal, maxVal, minInputId, maxInputId, displayMin, displayMax, fmt, type) {
                    var el = document.getElementById(elId);
                    if (!el || !el.noUiSlider) return;

                    el.noUiSlider.off('change');
                    el.noUiSlider.set([minVal, maxVal]);

                    document.getElementById(minInputId).value = minVal;
                    document.getElementById(maxInputId).value = maxVal;

                    if (displayMin && displayMax) {
                        // Dynamic Label Logic
                        let labelMin = fmt ? fmt.to(minVal) : minVal;
                        let labelMax = fmt ? fmt.to(maxVal) : maxVal;

                        if (type === 'mileage') {
                            if (maxVal >= 250000) labelMax = "250,000+ mi";
                            else labelMax = labelMax + " mi";
                            labelMin = labelMin + " mi";
                        } else if (type === 'price') {
                            if (maxVal >= 250000) labelMax = "$ 250,000+";
                        } else if (type === 'year') {
                            if (minVal <= 1996) labelMin = "1996 & Older";
                            if (maxVal >= 2027) labelMax = "2027+";
                        }

                        document.getElementById(displayMin).innerHTML = labelMin;
                        document.getElementById(displayMax).innerHTML = labelMax;
                    }

                    el.noUiSlider.on('change', function (values) {
                        document.getElementById(minInputId).value = fmt.from(values[0]);
                        document.getElementById(maxInputId).value = fmt.from(values[1]);
                        doFilter();
                    });
                }

                if (urlParams.get('min_price') || urlParams.get('max_price')) {
                    const pMin = urlParams.get('min_price') ? parseInt(urlParams.get('min_price')) : PRICE_MIN;
                    const pMax = urlParams.get('max_price') ? parseInt(urlParams.get('max_price')) : PRICE_MAX;
                    setNoUiSlider('slider-range2', pMin, pMax, 'listing-min-price', 'listing-max-price', 'slider-range-value01', 'slider-range-value02', numFmt);
                    setNoUiSlider('slider-range-mob2', pMin, pMax, 'listing-min-price', 'listing-max-price', 'slider-range-mob-value01', 'slider-range-mob-value02', numFmt);
                }

                // ✅ Year — sirf URL mein ho tab
                if (urlParams.get('min_year') || urlParams.get('max_year')) {
                    const yMin = urlParams.get('min_year') ? parseInt(urlParams.get('min_year')) : YEAR_MIN;
                    const yMax = urlParams.get('max_year') ? parseInt(urlParams.get('max_year')) : YEAR_MAX;
                    setNoUiSlider('slider-range3', yMin, yMax, 'listing-min-year', 'listing-max-year', 'slider-range-value03', 'slider-range-value04', yearFmt);
                    setNoUiSlider('slider-range-mob3', yMin, yMax, 'listing-min-year', 'listing-max-year', 'slider-range-mob-value03', 'slider-range-mob-value04', yearFmt);
                }

                // ✅ Mileage — sirf URL mein ho tab
                if (urlParams.get('min_mileage') || urlParams.get('max_mileage')) {
                    const mMin = urlParams.get('min_mileage') ? parseInt(urlParams.get('min_mileage')) : 0;
                    const mMax = urlParams.get('max_mileage') ? parseInt(urlParams.get('max_mileage')) : MILEAGE_MAX;
                    setNoUiSlider('slider-range', mMin, mMax, 'listing-min-mileage', 'listing-max-mileage', 'slider-range-value1', 'slider-range-value2', numFmt);
                    setNoUiSlider('slider-range-mob', mMin, mMax, 'listing-min-mileage', 'listing-max-mileage', 'slider-range-mob-value1', 'slider-range-mob-value2', numFmt);
                }
                // Features
                const featureIds = urlParams.getAll('features[]');
                if (featureIds.length) {
                    featureIds.forEach(id => {
                        $('input[name="features[]"][value="' + id + '"]').prop('checked', true);
                    });
                }

                if (urlParams.get('is_featured')) {
                    $('input[name="is_featured"]').prop('checked', true);
                }
                const zipCode = urlParams.get('zip_code');
                if (zipCode) {
                    $('#desk-zip-input').val(zipCode);
                    $('#mob-zip-input').val(zipCode);
                }
                const radius = urlParams.get('radius');
                if (radius && $('#desk-radius-input option[value="' + radius + '"]').length) {
                    $('#desk-radius-input').val(radius);
                    $('#mob-radius-input').val(radius);
                }
                // Make → Models, phir doFilter
                const makeId = urlParams.get('make_id');
                const modelId = urlParams.get('model_id');

                if (makeId) {
                    $.get(MODELS_URL, {make_id: makeId}, function (models) {
                        ['desk', 'mob'].forEach(function (prefix) {
                            let items = '<li data-value="" class="option selected">All Models</li>';
                            models.forEach(m => {
                                items += `<li data-value="${m.id}" class="option">${m.name}</li>`;
                            });
                            $('#' + prefix + '-model-list').html(items);
                            if (modelId) {
                                $('#' + prefix + '-model-value').val(modelId);
                                setNiceSelect(prefix + '-model-nice', modelId);
                            }
                        });
                        doFilter();
                    });
                } else {
                    doFilter();
                }

            }); // end window.load

            /* ─── CONDITION TABS ─── */
            $(document).on('click', '#listing-condition-tabs .item-title', function () {
                $('#listing-condition-tabs .item-title').removeClass('active');
                $(this).addClass('active');
                doFilter();
            });
            $('#desk-zip-input').on('input', function () {
                this.value = this.value.replace(/\D/g, '').slice(0, 5);
                $('#mob-zip-input').val(this.value);
                doFilter();
            });
            $('#desk-radius-input').on('change', function () {
                $('#mob-radius-input').val(this.value);
                doFilter();
            });
            $('#mob-zip-input').on('input', function () {
                this.value = this.value.replace(/\D/g, '').slice(0, 5);
                $('#desk-zip-input').val(this.value);
                doFilter();
            });
            $('#mob-radius-input').on('change', function () {
                $('#desk-radius-input').val(this.value);
                doFilter();
            });

            /* ─── CHECKBOXES ─── */
            $(document).on('change', 'input[name="is_featured"], input[name="features[]"]', function () {
                doFilter();
            });

            /* ─── PAGINATION ─── */
            $(document).on('click', '.page-numbers[data-page]', function (e) {
                e.preventDefault();
                currentPage = $(this).data('page');
                doFilter(false);
                $('html, body').animate({scrollTop: $('#cars-grid').offset().top - 100}, 300);
            });

            /* ─── CLEAR FILTERS ─── */
            $(document).on('click', '.clear-filters', function (e) {
                e.preventDefault();
                $('input[type="hidden"]').val('');
                $('input[type="checkbox"]').prop('checked', false);
                $('#desk-zip-input').val('');
                $('#mob-zip-input').val('');
                $('#desk-radius-input').val('50');
                $('#mob-radius-input').val('50');
                $('.nice-select').each(function () {
                    $(this).find('.current').text($(this).find('.option:first').text());
                    $(this).find('.option').removeClass('selected');
                    $(this).find('.option:first').addClass('selected');
                });

                var sliders = [
                    {
                        id: 'slider-range',
                        minId: 'listing-min-mileage',
                        maxId: 'listing-max-mileage',
                        min: 0,
                        max: 250000,
                        fmt: wNumb({decimals: 0, thousand: ','})
                    },
                    {
                        id: 'slider-range2',
                        minId: 'listing-min-price',
                        maxId: 'listing-max-price',
                        min: 0,
                        max: 250000,
                        fmt: wNumb({decimals: 0, thousand: ','})
                    },
                    {
                        id: 'slider-range3',
                        minId: 'listing-min-year',
                        maxId: 'listing-max-year',
                        min: 1996,
                        max: 2027,
                        fmt: wNumb({decimals: 0, thousand: ''})
                    },
                    {
                        id: 'slider-range-mob',
                        minId: 'listing-min-mileage',
                        maxId: 'listing-max-mileage',
                        min: 0,
                        max: 250000,
                        fmt: wNumb({decimals: 0, thousand: ','})
                    },
                    {
                        id: 'slider-range-mob2',
                        minId: 'listing-min-price',
                        maxId: 'listing-max-price',
                        min: 0,
                        max: 250000,
                        fmt: wNumb({decimals: 0, thousand: ','})
                    },
                    {
                        id: 'slider-range-mob3',
                        minId: 'listing-min-year',
                        maxId: 'listing-max-year',
                        min: 1996,
                        max: 2027,
                        fmt: wNumb({decimals: 0, thousand: ''})
                    },
                ];

                sliders.forEach(function (s) {
                    var el = document.getElementById(s.id);
                    if (!el || !el.noUiSlider) return;

                    // ✅ change off karo takay set se doFilter na chale
                    el.noUiSlider.off('change');
                    el.noUiSlider.set([s.min, s.max]);

                    // ✅ hidden inputs bhi clear karo
                    document.getElementById(s.minId).value = '';
                    document.getElementById(s.maxId).value = '';

                    // ✅ change listener wapas lagao
                    el.noUiSlider.on('change', function (values) {
                        document.getElementById(s.minId).value = s.fmt.from(values[0]);
                        document.getElementById(s.maxId).value = s.fmt.from(values[1]);
                        doFilter();
                    });
                });

                $('#listing-condition-tabs .item-title').removeClass('active');
                $('#listing-condition-tabs .item-title:first').addClass('active');
                currentPage = 1;
                doFilter();
                window.history.pushState({}, '', LISTING_URL);
            });

        });


    </script>
@endpush