@extends('layouts.admin')

@section('page-title', 'Parts Search')

@section('page-styles')
<link rel="stylesheet" href="{{ asset('assets/css/parts-search.css') }}">
@endsection

@section('breadcrumb')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="#">Dashboards</a></li>
        <li class="breadcrumb-item active">Parts Search</li>
    </ol>
</nav>
@endsection

@section('page-heading', 'Parts Search')

@section('page-content')
        <!-- Content Row -->
        <div class="ps-content-row">

            <!-- ════════════════════════════════════════
                 LEFT FILTER PANEL
                 ════════════════════════════════════════ -->
            <aside class="ps-filter-panel">

                <!-- Header -->
                <div class="psf-header">
                    <span class="psf-title"><i class="bi bi-funnel-fill"></i>Filter</span>
                    <button class="psf-clear" id="clearAll">Clear All</button>
                </div>

                <!-- Search Part No -->
                <div class="psf-block">
                    <div class="psf-search-box">
                        <i class="bi bi-search psf-search-icon"></i>
                        <input type="text" id="partNoInput" class="psf-search-input" placeholder="Search Part No...">
                    </div>
                </div>

                <!-- Equivalent Parts -->
                <div class="psf-block psf-block--tight">
                    <label class="psf-toggle">
                        <input type="checkbox" id="equivToggle">
                        <span>Equivalent all brand parts</span>
                    </label>
                </div>

                <div class="psf-sep"></div>

                <!-- Stock -->
                <div class="psf-group">
                    <button class="psf-group-btn" data-target="grpStock">
                        <span>Stock</span><i class="bi bi-chevron-down psf-chevron open"></i>
                    </button>
                    <div class="psf-group-body" id="grpStock">
                        <label class="psf-check"><input type="checkbox" checked><span>Available Stock</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Out of Stock</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Pre-Order</span></label>
                    </div>
                </div>

                <div class="psf-sep"></div>

                <!-- Vehicle Search -->
                <div class="psf-group">
                    <button class="psf-group-btn" data-target="grpVehicle">
                        <span>Vehicle Search</span><i class="bi bi-chevron-down psf-chevron open"></i>
                    </button>
                    <div class="psf-group-body" id="grpVehicle">

                        <!-- Make -->
                        <div class="psf-field" id="fldMake">
                            <label class="psf-field-label">Make</label>
                            <div class="psf-dropdown" id="ddMake">
                                <button class="psf-dd-trigger" id="trigMake">
                                    <span id="valMake">Select a Make</span>
                                    <i class="bi bi-chevron-down psf-dd-icon"></i>
                                </button>
                                <div class="psf-dd-menu" id="menuMake">
                                    <div class="psf-dd-search">
                                        <i class="bi bi-search"></i>
                                        <input type="text" placeholder="Search make..." id="srchMake" class="psf-dd-search-input">
                                    </div>
                                    <div class="psf-dd-list" id="listMake">
                                        <div class="psf-dd-item" data-v="Aston Martin">Aston Martin</div>
                                        <div class="psf-dd-item" data-v="Audi">Audi</div>
                                        <div class="psf-dd-item" data-v="Bentley">Bentley</div>
                                        <div class="psf-dd-item" data-v="BMW">BMW</div>
                                        <div class="psf-dd-item" data-v="Chevrolet">Chevrolet</div>
                                        <div class="psf-dd-item" data-v="Citroen">Citroen</div>
                                        <div class="psf-dd-item" data-v="Ferrari">Ferrari</div>
                                        <div class="psf-dd-item" data-v="Fiat">Fiat</div>
                                        <div class="psf-dd-item" data-v="Ford">Ford</div>
                                        <div class="psf-dd-item" data-v="Honda">Honda</div>
                                        <div class="psf-dd-item" data-v="Hyundai">Hyundai</div>
                                        <div class="psf-dd-item" data-v="Isuzu">Isuzu</div>
                                        <div class="psf-dd-item" data-v="Jaguar">Jaguar</div>
                                        <div class="psf-dd-item" data-v="Jeep">Jeep</div>
                                        <div class="psf-dd-item" data-v="Kia">Kia</div>
                                        <div class="psf-dd-item" data-v="Lamborghini">Lamborghini</div>
                                        <div class="psf-dd-item" data-v="Land Rover">Land Rover</div>
                                        <div class="psf-dd-item" data-v="Lexus">Lexus</div>
                                        <div class="psf-dd-item" data-v="Mahindra">Mahindra</div>
                                        <div class="psf-dd-item" data-v="Maruti Suzuki">Maruti Suzuki</div>
                                        <div class="psf-dd-item" data-v="McLaren">McLaren</div>
                                        <div class="psf-dd-item" data-v="Mercedes Benz">Mercedes Benz</div>
                                        <div class="psf-dd-item" data-v="Maserati">Maserati</div>
                                        <div class="psf-dd-item" data-v="Mini">Mini</div>
                                        <div class="psf-dd-item" data-v="Mitsubishi">Mitsubishi</div>
                                        <div class="psf-dd-item" data-v="Nissan">Nissan</div>
                                        <div class="psf-dd-item" data-v="Porsche">Porsche</div>
                                        <div class="psf-dd-item" data-v="Renault">Renault</div>
                                        <div class="psf-dd-item" data-v="Toyota">Toyota</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Model (hidden until make chosen) -->
                        <div class="psf-field psf-cascade" id="fldModel" hidden>
                            <label class="psf-field-label">Model</label>
                            <div class="psf-dropdown" id="ddModel">
                                <button class="psf-dd-trigger" id="trigModel">
                                    <span id="valModel">Select a Model</span>
                                    <i class="bi bi-chevron-down psf-dd-icon"></i>
                                </button>
                                <div class="psf-dd-menu" id="menuModel">
                                    <div class="psf-dd-search">
                                        <i class="bi bi-search"></i>
                                        <input type="text" placeholder="Search model..." id="srchModel" class="psf-dd-search-input">
                                    </div>
                                    <div class="psf-dd-list" id="listModel"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Variant (hidden until model chosen) -->
                        <div class="psf-field psf-cascade" id="fldVariant" hidden>
                            <label class="psf-field-label">Variant</label>
                            <div class="psf-dropdown" id="ddVariant">
                                <button class="psf-dd-trigger" id="trigVariant">
                                    <span id="valVariant">All Variant</span>
                                    <i class="bi bi-chevron-down psf-dd-icon"></i>
                                </button>
                                <div class="psf-dd-menu" id="menuVariant">
                                    <div class="psf-dd-list" id="listVariant">
                                        <div class="psf-dd-item active" data-v="All Variant">All Variant</div>
                                        <div class="psf-dd-item" data-v="Base">Base</div>
                                        <div class="psf-dd-item" data-v="Sport">Sport</div>
                                        <div class="psf-dd-item" data-v="M Sport">M Sport</div>
                                        <div class="psf-dd-item" data-v="AMG Line">AMG Line</div>
                                        <div class="psf-dd-item" data-v="S-Line">S-Line</div>
                                        <div class="psf-dd-item" data-v="Executive">Executive</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Year (hidden until variant chosen) -->
                        <div class="psf-field psf-cascade" id="fldYear" hidden>
                            <label class="psf-field-label">Year</label>
                            <div class="psf-dropdown" id="ddYear">
                                <button class="psf-dd-trigger" id="trigYear">
                                    <span id="valYear">Select Year</span>
                                    <i class="bi bi-chevron-down psf-dd-icon"></i>
                                </button>
                                <div class="psf-dd-menu" id="menuYear">
                                    <div class="psf-dd-list" id="listYear">
                                        <div class="psf-dd-item" data-v="2024">2024</div>
                                        <div class="psf-dd-item" data-v="2023">2023</div>
                                        <div class="psf-dd-item" data-v="2022">2022</div>
                                        <div class="psf-dd-item" data-v="2021">2021</div>
                                        <div class="psf-dd-item" data-v="2020">2020</div>
                                        <div class="psf-dd-item" data-v="2019">2019</div>
                                        <div class="psf-dd-item" data-v="2018">2018</div>
                                        <div class="psf-dd-item" data-v="2017">2017</div>
                                        <div class="psf-dd-item" data-v="2016">2016</div>
                                        <div class="psf-dd-item" data-v="2015">2015</div>
                                        <div class="psf-dd-item" data-v="2014">2014</div>
                                        <div class="psf-dd-item" data-v="2013">2013</div>
                                        <div class="psf-dd-item" data-v="2012">2012</div>
                                        <div class="psf-dd-item" data-v="2011">2011</div>
                                        <div class="psf-dd-item" data-v="2010">2010</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Search Spares Btn -->
                <div class="psf-block">
                    <button class="psf-search-btn" id="searchSpares">
                        <i class="bi bi-search"></i> Search Spares
                    </button>
                </div>

                <div class="psf-sep"></div>

                <!-- Product Type -->
                <div class="psf-group">
                    <button class="psf-group-btn" data-target="grpType">
                        <span>Product Type</span><i class="bi bi-chevron-down psf-chevron open"></i>
                    </button>
                    <div class="psf-group-body" id="grpType">
                        <label class="psf-check"><input type="checkbox" checked><span>All</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Brake Pads</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Brake Disc</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Brake Oil</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Oil Filter</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Spark Plugs</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Air Filter</span></label>
                    </div>
                </div>

                <div class="psf-sep"></div>

                <!-- Popular Brands -->
                <div class="psf-group">
                    <button class="psf-group-btn" data-target="grpBrands">
                        <span>Popular Brands</span><i class="bi bi-chevron-down psf-chevron open"></i>
                    </button>
                    <div class="psf-group-body" id="grpBrands">
                        <label class="psf-check"><input type="checkbox" checked><span>All</span></label>
                        <label class="psf-check"><input type="checkbox"><span>BREMBO HP</span></label>
                        <label class="psf-check"><input type="checkbox"><span>PAGID OEM</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Brembo</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Brake Kraft</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Pagid Racing</span></label>
                        <label class="psf-check"><input type="checkbox"><span>EBC</span></label>
                        <label class="psf-check"><input type="checkbox"><span>Icer</span></label>
                        <label class="psf-check"><input type="checkbox"><span>DBA</span></label>
                    </div>
                </div>

            </aside><!-- end filter panel -->

            <!-- ════════════════════════════════════════
                 RIGHT RESULTS AREA
                 ════════════════════════════════════════ -->
            <div class="ps-results">

                <!-- Active Tags -->
                <div class="ps-tags" id="activeTags" style="display:none;"></div>

                <!-- Loading Overlay -->
                <div class="ps-loading-overlay" id="resultsLoading" style="display:none;">
                    <div class="ps-loading-content">
                        <img src="{{ asset('assets/images/car_loading.gif') }}" alt="Searching..." class="ps-loading-gif">
                        <p class="ps-loading-text">Searching for parts...</p>
                    </div>
                </div>

                <!-- Results Bar -->
                <div class="ps-results-bar">
                    <p class="ps-count">Showing <strong id="resCount">4</strong> items results</p>
                    <div class="ps-view-btns">
                        <button class="ps-view-btn" id="btnList" title="List View"><i class="bi bi-list-task"></i></button>
                        <button class="ps-view-btn active" id="btnGrid" title="Grid View"><i class="bi bi-grid-3x3-gap-fill"></i></button>
                    </div>
                </div>

                <!-- Product Grid -->
                <div class="ps-grid" id="productGrid">

                    <!-- Card 1 -->
                    <div class="ps-card">
                        <div class="ps-card-img">
                            <span class="ps-badge ps-badge--in">In Stock</span>
                            <img src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=400&auto=format&fit=crop&q=60" alt="Brake Pad">
                        </div>
                        <div class="ps-card-body">
                            <div class="ps-brand ps-brand--blue">Brembo</div>
                            <h5 class="ps-card-title">High Performance Front Brake Pad Kit - Ceramic</h5>
                            <div class="ps-card-meta">
                                <span class="ps-partno">BK-8829-HP</span>
                                <span class="ps-vehicle">BMW 3 Series</span>
                            </div>
                            <div class="ps-card-footer">
                                <span class="ps-price">₹12,450.00</span>
                                <button class="ps-add-btn"><i class="bi bi-plus-lg"></i></button>
                            </div>
                        </div>
                    </div>

                    <!-- Card 2 -->
                    <div class="ps-card">
                        <div class="ps-card-img">
                            <span class="ps-badge ps-badge--out">Out of Stock</span>
                            <img src="https://images.unsplash.com/photo-1635833215234-a764d08439df?w=400&auto=format&fit=crop&q=60" alt="Brake Disc">
                        </div>
                        <div class="ps-card-body">
                            <div class="ps-brand ps-brand--red">PAGID</div>
                            <h5 class="ps-card-title">Vented Brake Disc - Rear Axle Set</h5>
                            <div class="ps-card-meta">
                                <span class="ps-partno">PG-8374-RD</span>
                                <span class="ps-vehicle">Audi A4/A6</span>
                            </div>
                            <div class="ps-card-footer">
                                <span class="ps-price">₹8,900.00</span>
                                <button class="ps-add-btn" disabled><i class="bi bi-plus-lg"></i></button>
                            </div>
                        </div>
                    </div>

                    <!-- Card 3 -->
                    <div class="ps-card">
                        <div class="ps-card-img">
                            <span class="ps-badge ps-badge--in">In Stock</span>
                            <img src="https://images.unsplash.com/photo-1590234020117-640656a5c138?w=400&auto=format&fit=crop&q=60" alt="Oil Filter">
                        </div>
                        <div class="ps-card-body">
                            <div class="ps-brand ps-brand--green">Mahle</div>
                            <h5 class="ps-card-title">High Efficiency Oil Filter - Synthetic Media</h5>
                            <div class="ps-card-meta">
                                <span class="ps-partno">MN-1122-OF</span>
                                <span class="ps-vehicle">Toyota Camry</span>
                            </div>
                            <div class="ps-card-footer">
                                <span class="ps-price">₹1,250.00</span>
                                <button class="ps-add-btn"><i class="bi bi-plus-lg"></i></button>
                            </div>
                        </div>
                    </div>

                    <!-- Card 4 -->
                    <div class="ps-card">
                        <div class="ps-card-img">
                            <span class="ps-badge ps-badge--in">In Stock</span>
                            <img src="https://images.unsplash.com/photo-1619642751034-765dfdf7c58e?w=400&auto=format&fit=crop&q=60" alt="Spark Plug">
                        </div>
                        <div class="ps-card-body">
                            <div class="ps-brand ps-brand--orange">NGK</div>
                            <h5 class="ps-card-title">Iridium IX Spark Plug Set - High Ignite</h5>
                            <div class="ps-card-meta">
                                <span class="ps-partno">NG-5544-SP</span>
                                <span class="ps-vehicle">Honda Civic</span>
                            </div>
                            <div class="ps-card-footer">
                                <span class="ps-price">₹4,800.00</span>
                                <button class="ps-add-btn"><i class="bi bi-plus-lg"></i></button>
                            </div>
                        </div>
                    </div>

                </div>
            </div><!-- end results -->

        </div><!-- end content-row -->
@endsection

@section('page-scripts')
<script>
/* ── Vehicle Data ───────────────────────────────────────────── */
const VEHICLE_DATA = {
    'Aston Martin':['DB11','DBX','Vantage','DBS'],
    'Audi':['A3','A4','A6','A8','Q3','Q5','Q7','Q8','TT','R8'],
    'Bentley':['Continental GT','Bentayga','Flying Spur'],
    'BMW':['1 Series','2 Series','3 Series','4 Series','5 Series','7 Series','X1','X3','X5','X7','M3','M5'],
    'Chevrolet':['Cruze','Beat','Spark','Trailblazer'],
    'Citroen':['C3','C5 Aircross'],
    'Ferrari':['Roma','Portofino','SF90','488'],
    'Fiat':['Linea','Punto'],
    'Ford':['Figo','EcoSport','Endeavour','Mustang'],
    'Honda':['City','Civic','CR-V','Jazz','Amaze','WR-V'],
    'Hyundai':['i10','i20','Verna','Creta','Tucson','Elantra'],
    'Isuzu':['D-Max','MU-X'],
    'Jaguar':['XE','XF','XJ','F-Type','F-Pace'],
    'Jeep':['Compass','Wrangler','Grand Cherokee'],
    'Kia':['Seltos','Sonet','Carnival','EV6'],
    'Lamborghini':['Huracan','Urus','Aventador'],
    'Land Rover':['Defender','Discovery','Range Rover','Range Rover Sport'],
    'Lexus':['ES','GS','LS','NX','RX','UX'],
    'Mahindra':['Thar','Scorpio','XUV300','XUV500','XUV700','Bolero'],
    'Maruti Suzuki':['Swift','Baleno','Dzire','Brezza','Ertiga','Alto','WagonR'],
    'McLaren':['570S','720S','GT','Artura'],
    'Mercedes Benz':['A-Class','C-Class','E-Class','S-Class','GLA','GLC','GLE','GLS'],
    'Maserati':['Ghibli','Quattroporte','Levante','GranTurismo'],
    'Mini':['Cooper','Clubman','Countryman'],
    'Mitsubishi':['Outlander','Pajero','Eclipse Cross'],
    'Nissan':['Micra','X-Trail','GT-R','Magnite'],
    'Porsche':['911','Cayenne','Macan','Panamera','Taycan'],
    'Renault':['Kwid','Triber','Duster','Kiger'],
    'Toyota':['Camry','Corolla','Fortuner','Innova','Land Cruiser','Hilux'],
};

/* ── Accordion Groups ───────────────────────────────────────── */
document.querySelectorAll('.psf-group-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        const id  = btn.getAttribute('data-target');
        const body = document.getElementById(id);
        const icon = btn.querySelector('.psf-chevron');
        const open = body.style.display !== 'none' && body.style.display !== '';
        body.style.display = open ? 'none' : 'block';
        icon.classList.toggle('open', !open);
    });
});

/* ── Generic dropdown factory ───────────────────────────────── */
function makeDropdown(triggerId, menuId, valId, searchId, onPick) {
    const trig   = document.getElementById(triggerId);
    const menu   = document.getElementById(menuId);
    const valEl  = document.getElementById(valId);
    const search = searchId ? document.getElementById(searchId) : null;

    trig.addEventListener('click', e => {
        e.stopPropagation();
        closeAllMenus(menu);
        menu.classList.toggle('open');
        if (menu.classList.contains('open') && search) setTimeout(() => search.focus(), 30);
    });

    if (search) {
        search.addEventListener('click', e => e.stopPropagation());
        search.addEventListener('input', () => {
            const q = search.value.toLowerCase();
            menu.querySelectorAll('.psf-dd-item').forEach(it => {
                it.style.display = it.textContent.toLowerCase().includes(q) ? '' : 'none';
            });
        });
    }

    menu.addEventListener('click', e => {
        const item = e.target.closest('.psf-dd-item');
        if (!item) return;
        e.stopPropagation();
        const val = item.getAttribute('data-v');
        menu.querySelectorAll('.psf-dd-item').forEach(i => i.classList.remove('active'));
        item.classList.add('active');
        valEl.textContent = val;
        if (search) { search.value = ''; menu.querySelectorAll('.psf-dd-item').forEach(i => i.style.display = ''); }
        menu.classList.remove('open');
        if (onPick) onPick(val);
        updateTags();
    });
}

function closeAllMenus(except) {
    document.querySelectorAll('.psf-dd-menu.open').forEach(m => { if (m !== except) m.classList.remove('open'); });
}
document.addEventListener('click', () => closeAllMenus(null));

/* ── Make ───────────────────────────────────────────────────── */
makeDropdown('trigMake', 'menuMake', 'valMake', 'srchMake', val => {
    const list = document.getElementById('listModel');
    list.innerHTML = (VEHICLE_DATA[val] || []).map(m =>
        `<div class="psf-dd-item" data-v="${m}">${m}</div>`
    ).join('');
    show('fldModel'); hide('fldVariant'); hide('fldYear');
    document.getElementById('valModel').textContent   = 'Select a Model';
    document.getElementById('valVariant').textContent = 'All Variant';
    document.getElementById('valYear').textContent    = 'Select Year';
});

/* model search */
document.getElementById('srchModel').addEventListener('click', e => e.stopPropagation());
document.getElementById('srchModel').addEventListener('input', function() {
    const q = this.value.toLowerCase();
    document.querySelectorAll('#listModel .psf-dd-item').forEach(i => {
        i.style.display = i.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
});
document.getElementById('trigModel').addEventListener('click', e => {
    e.stopPropagation();
    const m = document.getElementById('menuModel');
    closeAllMenus(m); m.classList.toggle('open');
    if (m.classList.contains('open')) setTimeout(() => document.getElementById('srchModel').focus(), 30);
});
document.getElementById('menuModel').addEventListener('click', e => {
    const item = e.target.closest('.psf-dd-item');
    if (!item) return;
    e.stopPropagation();
    document.querySelectorAll('#listModel .psf-dd-item').forEach(i => i.classList.remove('active'));
    item.classList.add('active');
    document.getElementById('valModel').textContent = item.getAttribute('data-v');
    document.getElementById('menuModel').classList.remove('open');
    show('fldVariant'); hide('fldYear');
    document.getElementById('valVariant').textContent = 'All Variant';
    document.getElementById('valYear').textContent = 'Select Year';
    updateTags();
});

/* ── Variant ────────────────────────────────────────────────── */
makeDropdown('trigVariant', 'menuVariant', 'valVariant', null, () => { show('fldYear'); document.getElementById('valYear').textContent = 'Select Year'; });

/* ── Year ───────────────────────────────────────────────────── */
makeDropdown('trigYear', 'menuYear', 'valYear', null, null);

/* ── show / hide helpers ────────────────────────────────────── */
function show(id) {
    const el = document.getElementById(id);
    el.hidden = false;
    el.classList.add('psf-cascade-in');
    el.addEventListener('animationend', () => el.classList.remove('psf-cascade-in'), { once: true });
}
function hide(id) { document.getElementById(id).hidden = true; }

/* ── Active Tags ────────────────────────────────────────────── */
function updateTags() {
    const bar  = document.getElementById('activeTags');
    const vals = [
        { id:'valMake',    label: document.getElementById('valMake').textContent,    def:'Select a Make'  },
        { id:'valModel',   label: document.getElementById('valModel').textContent,   def:'Select a Model' },
        { id:'valVariant', label: document.getElementById('valVariant').textContent, def:'All Variant'    },
        { id:'valYear',    label: document.getElementById('valYear').textContent,    def:'Select Year'    },
    ].filter(v => v.label !== v.def);

    if (!vals.length) { bar.style.display = 'none'; return; }
    bar.style.display = 'flex';
    bar.innerHTML = vals.map(v =>
        `<span class="ps-tag">${v.label}<button class="ps-tag-x" data-rid="${v.id}"><i class="bi bi-x"></i></button></span>`
    ).join('') + `<button class="ps-tag-clr" id="clearTagsBtn">All Clear</button>`;

    bar.querySelectorAll('.ps-tag-x').forEach(btn => {
        btn.addEventListener('click', () => {
            const rid = btn.getAttribute('data-rid');
            const el  = document.getElementById(rid);
            const defs = { valMake:'Select a Make', valModel:'Select a Model', valVariant:'All Variant', valYear:'Select Year' };
            el.textContent = defs[rid];
            if (rid === 'valMake')    { hide('fldModel'); hide('fldVariant'); hide('fldYear'); }
            if (rid === 'valModel')   { hide('fldVariant'); hide('fldYear'); }
            if (rid === 'valVariant') { hide('fldYear'); }
            updateTags();
        });
    });
    const clrBtn = document.getElementById('clearTagsBtn');
    if (clrBtn) clrBtn.addEventListener('click', clearAllFn);
}

function clearAllFn() {
    ['valMake','valModel','valVariant','valYear'].forEach(id => {
        const defs = { valMake:'Select a Make', valModel:'Select a Model', valVariant:'All Variant', valYear:'Select Year' };
        document.getElementById(id).textContent = defs[id];
    });
    hide('fldModel'); hide('fldVariant'); hide('fldYear');
    updateTags();
}
document.getElementById('clearAll').addEventListener('click', clearAllFn);
document.getElementById('searchSpares').addEventListener('click', () => {
    const loader = document.getElementById('resultsLoading');
    const grid = document.getElementById('productGrid');
    const resBar = document.querySelector('.ps-results-bar');
    
    loader.style.display = 'flex';
    grid.style.display = 'none';
    resBar.style.display = 'none';
    
    setTimeout(() => {
        loader.style.display = 'none';
        grid.style.display = 'grid';
        resBar.style.display = 'flex';
        updateTags();
    }, 1500);
});

/* ── View Toggle ────────────────────────────────────────────── */
document.getElementById('btnGrid').addEventListener('click', () => {
    document.getElementById('productGrid').classList.remove('ps-grid--list');
    document.getElementById('btnGrid').classList.add('active');
    document.getElementById('btnList').classList.remove('active');
});
document.getElementById('btnList').addEventListener('click', () => {
    document.getElementById('productGrid').classList.add('ps-grid--list');
    document.getElementById('btnList').classList.add('active');
    document.getElementById('btnGrid').classList.remove('active');
});
</script>
@endsection