{{define "extra_head"}}
<style>
.ts-wrapper .ts-control {
  border: 1px solid #dee2ea;
  border-radius: 5px;
  height: 4rem;
  font-size: 1.4rem;
  padding: 0 3.4rem 0 1.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
}
.ts-wrapper.single .ts-control { background: #fff; }
.ts-wrapper .ts-control input { font-size: 1.4rem; }
.ts-dropdown {
  border: 1px solid #dee2ea;
  border-radius: 5px;
  font-size: 1.4rem;
  z-index: 1000;
}
.ts-dropdown .active { background: #e11d48; color: #fff; }
.ts-dropdown .selected { background: #f3f4f6; font-weight: 700; }
.ts-dropdown .active.selected { background: #e11d48; color: #fff; }
.ts-dropdown .option { padding: 0.8rem 1.4rem; }
.ts-wrapper.focus .ts-control { border-color: #e11d48; box-shadow: none; }
.ts-wrapper { width: 100%; }
.ts-wrapper.search__filter--select__field { padding:0 !important; border:none !important; background:none !important; height:auto !important; }
.catalogue-results-page { padding: 30px 0 70px; background: #f6f7f9; }
.catalogue-results-title { margin-bottom: 10px; color: #111827; font-size: 36px; font-weight: 800; }
.catalogue-results-summary { margin-bottom: 20px; color: #667085; font-size: 16px; }
.catalogue-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.catalogue-result-card {
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}
.catalogue-result-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.catalogue-result-card__media {
  display: grid;
  aspect-ratio: 1 / 1;
  place-items: center;
  background: #f3f4f6;
}
.catalogue-result-card__media img,
.catalogue-result-card__media object {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.catalogue-result-card__media object {
  pointer-events: none;
}
.catalogue-result-card__placeholder {
  padding: 20px;
  color: #6b7280;
  text-align: center;
  font-weight: 700;
}
.catalogue-result-card__part {
  margin: 14px 14px 6px;
  color: #111827;
  font-size: 17px;
  font-weight: 800;
  word-break: break-word;
}
.catalogue-result-card__product {
  margin: 0 14px 6px;
  color: #667085;
  font-size: 14px;
}
.catalogue-result-card__brand {
  margin: 0 14px 16px;
  color: #e11d48;
  font-size: 13px;
  font-weight: 600;
}
.catalogue-result-card__price {
  margin: 0 14px 4px;
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.catalogue-result-card__price small {
  display: block;
}
.catalogue-result-empty { margin: 0; color: #667085; }
.filter-checkbox { accent-color: #e11d48; width: 16px; height: 16px; }
.pagination-nav { margin-top: 30px; padding: 20px 0; }
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination li a {
  display: block;
  padding: 8px 14px;
  border: 1px solid #dee2ea;
  border-radius: 6px;
  color: #111827;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.15s;
}
.pagination li a:hover { border-color: #e11d48; color: #e11d48; }
.pagination li.active a { background: #e11d48; color: #fff; border-color: #e11d48; }
.pagination li.disabled a { opacity: 0.4; pointer-events: none; }
.results-grid-wrap { position: relative; min-height: 200px; }
.results-grid-wrap:has(#results-stream:not(:empty)) #results-skeletons { display: none; }
.catalogue-result-card--skeleton { pointer-events: none; }
.catalogue-skeleton-shimmer {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 6px;
  color: transparent;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
#results-meta:empty { display: none; }
.catalogue-filters-loading {
  padding: 12px; color: #9ca3af; font-size: 13px; text-align: center;
}
.stock-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: #9ca3af;
  transition: background 0.2s;
}
.stock-dot--in { background: #22c55e; }
.stock-dot--out { background: #ef4444; }
.stock-dot--unknown { background: #9ca3af; }
</style>
{{end}}

{{template "header.tmpl" .}}

<div class="container-fluid" style="max-width:1600px;margin:0 auto;">
  <div class="row">
    {{if not .PartNumberMode}}
    <aside class="col-12 col-md-4 col-lg-3" style="padding-right:20px;">
      <div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;">
      <h5 style="font-size:18px;font-weight:800;color:#111827;margin:0 0 6px 0;padding-bottom:12px;border-bottom:2px solid #e11d48;">Filtrar</h5>
      <form id="sidebar-filters"
            hx-get="/resultados"
            hx-target="#results-content"
            hx-trigger="change delay:100ms"
            hx-push-url="true"
            hx-disabled-elt="this">
        <input type="hidden" name="page" value="1">
        <input type="hidden" id="sidebar-vt" name="vehicle_type" value="{{.SelectedVehicleType}}">
        <input type="hidden" id="sidebar-make" name="make" value="{{.SelectedMake}}">
        <input type="hidden" id="sidebar-model" name="model" value="{{.SelectedModel}}">
        <input type="hidden" id="sidebar-year" name="year" value="{{.SelectedYear}}">

        <div id="sidebar-filters-content">
          {{template "sidebar_filters.tmpl" .}}
        </div>
      </form>
      </div>
    </aside>
    {{end}}

    <main class="col-12 {{if not .PartNumberMode}}col-md-8 col-lg-9{{end}}">
      <section class="search__filter--section" style="padding-top:0;">
        <div class="search__filter--inner">
          {{if .PartNumberMode}}
          <form id="top-search-form" class="search__filter--form__style2 d-flex" style="flex-wrap: wrap;"
                hx-get="/resultados"
                hx-target="#results-content"
                hx-push-url="true"
                hx-disabled-elt="this">
            <div class="search__filter--width" style="flex:1;">
              <input type="text" name="part_number" class="search__filter--select__field"
                     value="{{.PartNumber}}" placeholder="Número de parte o fmsi:26169" required
                     style="width:100%;padding:0 1.7rem;">
            </div>
            <div style="width:100%;display:flex;justify-content:center;">
              <button class="search__filter--btn primary__btn" type="submit" style="width:auto;padding:0 3rem;">Buscar</button>
            </div>
          </form>
          {{else}}
          <form id="top-search-form" class="search__filter--form__style2 d-flex" style="flex-wrap: wrap;"
                hx-get="/resultados"
                hx-target="#results-content"
                hx-push-url="true"
                hx-disabled-elt="this">
            <div class="search__filter--select select search__filter--width">
              <select class="search__filter--select__field" id="resultados-vehicle-type" name="vehicle_type">
                <option value="" disabled {{if eq .SelectedVehicleType ""}}selected{{end}}>Selecciona una opción</option>
                <option value="Ligero" {{if eq .SelectedVehicleType "Ligero"}}selected{{end}}>Ligero</option>
                <option value="Pesado" {{if eq .SelectedVehicleType "Pesado"}}selected{{end}}>Pesado</option>
              </select>
            </div>
            <div class="search__filter--select select search__filter--width">
              <select class="search__filter--select__field" id="resultados-type" name="type" disabled>
                <option value="" disabled {{if eq (len $.SelectedTypes) 0}}selected{{end}}>Selecciona una opción</option>
                <option value="todos" {{if and (len $.SelectedTypes) (eq (index $.SelectedTypes 0) "todos")}}selected{{end}}>Todos</option>
                <option value="shock" {{if and (len $.SelectedTypes) (eq (index $.SelectedTypes 0) "shock")}}selected{{end}}>Amortiguadores</option>
                <option value="brake" {{if and (len $.SelectedTypes) (eq (index $.SelectedTypes 0) "brake")}}selected{{end}}>Frenos</option>
              </select>
            </div>
            <div class="search__filter--select select search__filter--width">
              <select class="search__filter--select__field" id="resultados-brand" name="make" disabled>
                <option value="" disabled {{if eq .SelectedMake ""}}selected{{end}}>Selecciona una opción</option>
                {{if .SelectedMake}}<option value="{{.SelectedMake}}" selected>{{.SelectedMake}}</option>{{end}}
              </select>
            </div>
            <div class="search__filter--select select search__filter--width">
              <select class="search__filter--select__field" id="resultados-model" name="model" disabled>
                <option value="" disabled {{if eq .SelectedModel ""}}selected{{end}}>Selecciona una opción</option>
                {{if .SelectedModel}}<option value="{{.SelectedModel}}" selected>{{.SelectedModel}}</option>{{end}}
              </select>
            </div>
            <div class="search__filter--select select search__filter--width">
              <select class="search__filter--select__field" id="resultados-year" name="year" disabled>
                <option value="" disabled {{if eq .SelectedYear ""}}selected{{end}}>Selecciona una opción</option>
                {{if .SelectedYear}}<option value="{{.SelectedYear}}" selected>{{.SelectedYear}}</option>{{end}}
              </select>
            </div>
              <div style="width:100%;display:flex;justify-content:center;">
                <button class="search__filter--btn primary__btn" type="submit" style="width:auto;padding:0 3rem;">Buscar</button>
              </div>
          </form>
          {{end}}
        </div>
      </section>

      <section class="catalogue-results-page" style="padding-top:0;">
        <h1 class="catalogue-results-title">Resultados de Catálogo</h1>
        <div id="results-content">
          {{template "results_partial.tmpl" .}}
        </div>
      </section>
    </main>
  </div>
</div>

{{template "footer.tmpl" .}}

{{if not .PartNumberMode}}
<script>
(function() {
    if (window.__resultadosLoaded) return;
    window.__resultadosLoaded = true;
    setTimeout(function() {
    var tsVT, tsPT, tsBR, tsMO, tsYR;

    function initTS(sel, placeholder) {
        try {
            return new TomSelect(sel, {
                placeholder: placeholder,
                allowEmptyOption: true,
                maxOptions: null,
                searchField: ['text'],
                sortField: [{field: 'text', direction: 'asc'}],
                onChange: function() { this.close(); }
            });
        } catch (e) {
            console.warn('TS init failed', sel, e);
            return { on:function(){}, disable:function(){ return this; }, enable:function(){}, clearOptions:function(){}, addOption:function(){}, setValue:function(){}, refreshOptions:function(){}, getValue:function(){return '';}, options:{} };
        }
    }

    tsVT = initTS('#resultados-vehicle-type', 'Selecciona una opción');
    tsPT = initTS('#resultados-type', 'Todos');
    tsPT.disable();
    tsBR = initTS('#resultados-brand', 'Selecciona una opción');
    tsBR.disable();
    tsMO = initTS('#resultados-model', 'Selecciona una opción');
    tsMO.disable();
    tsYR = initTS('#resultados-year', 'Selecciona una opción');
    tsYR.disable();

    var brandName = '';

    function clearAdd(ts, items) {
        ts.clearOptions();
        if (items && items.length > 0) {
            items.forEach(function(item) { ts.addOption(item); });
            ts.enable();
            ts.clear(true);
        } else {
            ts.disable();
        }
        ts.refreshOptions();
    }

    tsVT.on('change', function(vt) {
        if (vt) { tsPT.enable(); } else { tsPT.disable(); }
        clearAdd(tsBR, []);
        clearAdd(tsMO, []);
        clearAdd(tsYR, []);
    });

    tsPT.on('change', function(pt) {
        var vt = tsVT.getValue();
        clearAdd(tsBR, []);
        clearAdd(tsMO, []);
        clearAdd(tsYR, []);
        if (!vt) { clearAdd(tsBR, []); return; }

        var url = '/api/filtered-brands?vehicle_type=' + encodeURIComponent(vt);
        if (pt) { url += '&product_type=' + encodeURIComponent(pt); }
        fetch(url)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var items = data.map(function(b) { return {value: b.brand, text: b.brand}; });
                clearAdd(tsBR, items);
            })
            .catch(function() { clearAdd(tsBR, []); });
    });

    tsBR.on('change', function(bname) {
        var vt = tsVT.getValue();
        var pt = tsPT.getValue();
        clearAdd(tsMO, []);
        clearAdd(tsYR, []);
        if (!vt || !bname) { clearAdd(tsMO, []); return; }

        brandName = bname;

        var url = '/api/filtered-models?vehicle_type=' + encodeURIComponent(vt) + '&brand=' + encodeURIComponent(bname);
        if (pt) { url += '&product_type=' + encodeURIComponent(pt); }
        fetch(url)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var items = data.map(function(m) { return {value: String(m.model), text: m.model}; });
                clearAdd(tsMO, items);
            })
            .catch(function() { clearAdd(tsMO, []); });
    });

    tsMO.on('change', function(model) {
        clearAdd(tsYR, []);
        if (model && brandName) {
            fetch('/api/years?make=' + encodeURIComponent(brandName) + '&model=' + encodeURIComponent(model))
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var items = (Array.isArray(data) ? data : []).map(function(y) { return {value: String(y), text: String(y)}; });
                    clearAdd(tsYR, items);
                })
                .catch(function() { clearAdd(tsYR, []); });
        } else {
            clearAdd(tsYR, []);
        }
    });

    var initialVT = '{{.SelectedVehicleType}}';
    var initialPT = '{{if gt (len .SelectedTypes) 0}}{{index .SelectedTypes 0}}{{end}}';
    var initialMake = '{{.SelectedMake}}';
    var initialModel = '{{.SelectedModel}}';
    var initialYear = '{{.SelectedYear}}';

    function appendPT(url, pt) {
        if (pt && pt !== 'todos') { return url + '&product_type=' + encodeURIComponent(pt); }
        return url;
    }
    function keepSelected(ts, val) {
        if (val && !ts.options[val]) { ts.addOption({value: val, text: val}); }
        ts.setValue(val, true);
    }

    if (initialVT && tsVT.options && tsVT.options[initialVT]) {
        tsVT.setValue(initialVT, true);
        tsPT.enable();
    } else if (!initialVT) {
        tsPT.disable();
    }
    if (initialPT && tsPT.options && tsPT.options[initialPT]) {
        tsPT.setValue(initialPT, true);
    }

    brandName = initialMake;

    function initBrand() {
        if (!initialVT) { return Promise.resolve(); }
        var url = '/api/filtered-brands?vehicle_type=' + encodeURIComponent(initialVT);
        url = appendPT(url, initialPT);
        return fetch(url)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var items = (data || []).map(function(b) { return {value: b.brand, text: b.brand}; });
                clearAdd(tsBR, items.length ? items : (initialMake ? [{value: initialMake, text: initialMake}] : []));
                if (initialMake) { tsBR.enable(); keepSelected(tsBR, initialMake); }
            })
            .catch(function() {
                if (initialMake) { tsBR.enable(); keepSelected(tsBR, initialMake); }
            });
    }

    function initModel() {
        if (!initialVT || !initialMake) { return Promise.resolve(); }
        var url = '/api/filtered-models?vehicle_type=' + encodeURIComponent(initialVT) + '&brand=' + encodeURIComponent(initialMake);
        url = appendPT(url, initialPT);
        return fetch(url)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var items = (data || []).map(function(m) { return {value: String(m.model), text: m.model}; });
                clearAdd(tsMO, items.length ? items : (initialModel ? [{value: initialModel, text: initialModel}] : []));
                if (initialModel) { tsMO.enable(); keepSelected(tsMO, initialModel); }
            })
            .catch(function() {
                if (initialModel) { tsMO.enable(); keepSelected(tsMO, initialModel); }
            });
    }

    function initYear() {
        if (!initialMake || !initialModel) { return Promise.resolve(); }
        return fetch('/api/years?make=' + encodeURIComponent(initialMake) + '&model=' + encodeURIComponent(initialModel))
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var items = (Array.isArray(data) ? data : []).map(function(y) { return {value: String(y), text: String(y)}; });
                clearAdd(tsYR, items.length ? items : (initialYear ? [{value: initialYear, text: initialYear}] : []));
                if (initialYear) { tsYR.enable(); keepSelected(tsYR, initialYear); }
            })
            .catch(function() {
                if (initialYear) { tsYR.enable(); keepSelected(tsYR, initialYear); }
            });
    }

initBrand().then(initModel).then(initYear);

    // Also trigger for initial synchronous render (page ≥2)
    window.__scheduleStockDots();
    }, 100);
})();
</script>
{{end}}
{{if .PartNumberMode}}
<div id="part-number-search-meta" data-query="{{.PartNumber}}" hidden></div>
<script>
(function() {
    var meta = document.getElementById('part-number-search-meta');
    if (!meta) return;
    var query = (meta.dataset.query || '').trim();
    if (!query || query.toLowerCase().indexOf('fmsi:') === 0) return;
    var qLower = query.toLowerCase();

    function moveSearchedToTop() {
        var stream = document.getElementById('results-stream');
        if (!stream) return;
        var cards = stream.querySelectorAll('.catalogue-result-card');
        var card = null;
        for (var i = 0; i < cards.length; i++) {
            if ((cards[i].dataset.partNumber || '').toLowerCase() === qLower) {
                card = cards[i];
                break;
            }
        }
        if (card && stream.children[0] !== card) {
            stream.insertBefore(card, stream.firstChild);
        }
    }

    moveSearchedToTop();
    document.body.addEventListener('htmx:afterSettle', moveSearchedToTop);
})();
</script>
{{end}}
<script>
(function() {
    // When a new results set is about to be swapped in, drop every pending or
    // in-flight admintotal lookup belonging to the old render.
    document.body.addEventListener('htmx:beforeSwap', function(evt) {
        var d = evt.detail || {};
        if (d.target && d.target.id === 'results-content') {
            if (window.__purgeStockLookups) { window.__purgeStockLookups(); }
        }
        // Cancel streaming chunk responses that belong to a previous render:
        // without this, an old chain appends unfiltered cards into the new
        // grid and its OOB finalize overwrites summary, filters and meta.
        var path = (d.requestConfig && d.requestConfig.path) || '';
        if (path.indexOf('/api/results/chunk') === 0) {
            var tokEl = document.getElementById('results-render-token');
            var m = /[?&]rid=([^&]*)/.exec(path);
            var rid = m ? decodeURIComponent(m[1]) : '';
            if (!tokEl || !rid || tokEl.getAttribute('data-rid') !== rid) {
                d.shouldSwap = false;
            }
        }
    });
})();
</script>
<script src="/assets/js/stock-dots.js"></script>
<script>setTimeout(function(){ (window.__scheduleStockDots||function(){})(); }, 100);</script>