Merge branch 'desarrollo_hector' into main

pos/static/js/catalog.js

@@ -276,7 +276,20 @@
         if (nav.nxPartType) parts.push({ label: nav.nxPartType.name, action: null });
         else if (nav.partType) parts.push({ label: nav.partType.name, action: null });
 
+        //Botón para retroceder
+        var backAction = null;
+        if (parts.length > 1) {
+            var prev = parts[parts.length - 2];
+            backAction = prev ? prev.action : 'loadBrands';
+        }
+
         var html = '';
+        //Botón para retroceder
+        if (backAction) {
+            html += '<button class="breadcrumb__back" data-bc-action="' + backAction + '">&#8592; Atr&aacute;s</button>';
+            html += '<span class="breadcrumb__sep" aria-hidden="true">|</span>';
+        }
+        //--------
         for (var i = 0; i < parts.length; i++) {
             if (i > 0) html += '<span class="breadcrumb__sep" aria-hidden="true">/</span>';
             if (i < parts.length - 1 && parts[i].action) {
@@ -303,6 +316,7 @@
                 else if (action === 'loadNxPartTypes') { resetNavFrom('part_types'); loadNexpartPartTypes(); }
             });
         });
+
     }
 
     function resetNav() {
@@ -1272,10 +1286,8 @@
                 html += '</div>';
             }
 
-            // Compatibilities — deduplicate by (make, model, year, engine)
+// Compatibilities — deduplicate by (make, model, year, engine)
             if (p.compatibilities && p.compatibilities.length) {
-                html += '<div class="detail-section">';
-                html += '<div class="detail-section__title">Vehiculos compatibles</div>';
                 var seenCompat = {};
                 var uniqCompat = [];
                 p.compatibilities.forEach(function(c) {
@@ -1284,22 +1296,69 @@
                     seenCompat[key] = true;
                     uniqCompat.push(c);
                 });
-                var currentMake = '';
-                uniqCompat.forEach(function(c) {
-                    if (c.make !== currentMake) {
-                        currentMake = c.make;
-                        html += '<div style="font-weight:600;margin-top:8px;">' + esc(c.make) + '</div>';
-                    }
-                    html += '<div style="padding-left:12px;color:var(--color-text-muted);font-size:var(--text-body-sm);">' +
-                        esc(c.model) + ' ' + c.year + ' ' + esc(c.engine || '') + '</div>';
-                });
+                html += '<div class="detail-section">';
+                html += '<div class="detail-section__title">Vehiculos compatibles</div>';
+                html += '<div id="compat-list"></div>';
+                html += '<div id="compat-pager" class="compat-pager"></div>';
                 html += '</div>';
+                compatFullList = uniqCompat;
+            } else {
+                compatFullList = [];
             }
 
             detailBody.innerHTML = html;
+
+            if (compatFullList.length) {
+                renderCompatPage(1);
+            }
         });
     }
 
+    // --- Pagination for "Vehiculos compatibles" ---
+    var compatFullList = [];
+    var compatPageSize = 15;
+    var compatCurrentPage = 1;
+
+    function renderCompatPage(page) {
+        var listEl = document.getElementById('compat-list');
+        var pagerEl = document.getElementById('compat-pager');
+        if (!listEl || !pagerEl) return;
+
+        var totalItems = compatFullList.length;
+        var totalPages = Math.max(1, Math.ceil(totalItems / compatPageSize));
+        page = Math.min(Math.max(1, page), totalPages);
+        compatCurrentPage = page;
+
+        var start = (page - 1) * compatPageSize;
+        var pageItems = compatFullList.slice(start, start + compatPageSize);
+
+        var listHtml = '';
+        var currentMake = '';
+        pageItems.forEach(function(c) {
+            if (c.make !== currentMake) {
+                currentMake = c.make;
+                listHtml += '<div style="font-weight:600;margin-top:8px;">' + esc(c.make) + '</div>';
+            }
+            listHtml += '<div style="padding-left:12px;color:var(--color-text-muted);font-size:var(--text-body-sm);">' +
+                esc(c.model) + ' ' + c.year + ' ' + esc(c.engine || '') + '</div>';
+        });
+        listEl.innerHTML = listHtml;
+
+        if (totalPages > 1) {
+            pagerEl.innerHTML =
+                '<button type="button" id="compat-prev" class="compat-pager__btn"' + (page <= 1 ? ' disabled' : '') + '>&lsaquo; Anterior</button>' +
+                '<span class="compat-pager__info">Pagina ' + page + ' de ' + totalPages + ' (' + totalItems + ' vehiculos)</span>' +
+                '<button type="button" id="compat-next" class="compat-pager__btn"' + (page >= totalPages ? ' disabled' : '') + '>Siguiente &rsaquo;</button>';
+
+            var prevBtn = document.getElementById('compat-prev');
+            var nextBtn = document.getElementById('compat-next');
+            if (prevBtn) prevBtn.addEventListener('click', function () { renderCompatPage(compatCurrentPage - 1); });
+            if (nextBtn) nextBtn.addEventListener('click', function () { renderCompatPage(compatCurrentPage + 1); });
+        } else {
+            pagerEl.innerHTML = '';
+        }
+    }
+
     function closeDetail() {
         detailPanel.classList.remove('is-open');
         detailOverlay.classList.remove('is-visible');
@@ -1802,20 +1861,22 @@
         });
     }
 
+
     function vsYearChanged() {
         var yearId = vsYear.value;
-        vsBrand.innerHTML = '<option value="">Marca...</option>';
-        vsModel.innerHTML = '<option value="">Modelo...</option>';
-        vsEngine.innerHTML = '<option value="">Motor...</option>';
-        vsBrand.disabled = true;
-        vsModel.disabled = true;
-        vsEngine.disabled = true;
-        vsClear.style.display = yearId ? '' : 'none';
+        vsClear.style.display = (yearId || vsBrand.value || vsModel.value) ? '' : 'none';
 
-        if (!yearId) return;
-
-        // Load brands filtered by year
+        // Resetear marca solo si no hay nada seleccionado en ella
         vsBrand.disabled = false;
+        vsEngine.innerHTML = '<option value="">Motor...</option>';
+        vsEngine.disabled = true;
+
+        if (!yearId) {
+            //carga todo
+            vsLoadAllBrands();
+            return;
+        }
+        // Filtrar marcas por año
         apiFetch(API + '/brands?year_id=' + yearId + '&mode=' + catalogMode).then(function (data) {
             var brands = data.data || data;
             if (!brands) return;
@@ -1823,21 +1884,39 @@
                 brands.map(function (b) {
                     return '<option value="' + b.id_brand + '">' + esc(b.name_brand) + '</option>';
                 }).join('');
+            // si hay marca seleccionada despliega modelos
+            if (vsBrand.value) vsBrandChanged();
+        });
+    }
+    function vsLoadAllBrands() {
+        apiFetch(API + '/brands?mode=' + catalogMode).then(function (data) {
+            var brands = data.data || data;
+            if (!brands) return;
+            var current = vsBrand.value;
+            vsBrand.innerHTML = '<option value="">Marca...</option>' +
+                brands.map(function (b) {
+                    return '<option value="' + b.id_brand + '">' + esc(b.name_brand) + '</option>';
+                }).join('');
+            if (current) vsBrand.value = current;
         });
     }
 
     function vsBrandChanged() {
         var brandId = vsBrand.value;
         var yearId = vsYear.value;
+        vsClear.style.display = (yearId || brandId) ? '' : 'none';
+
         vsModel.innerHTML = '<option value="">Modelo...</option>';
         vsEngine.innerHTML = '<option value="">Motor...</option>';
-        vsModel.disabled = true;
+        vsModel.disabled = false;  // cambio
         vsEngine.disabled = true;
 
-        if (!brandId) return;
+        if (!brandId) {
+            vsModel.disabled = true;
+            return;
+        }
 
-        // Load models filtered by brand AND year
-        vsModel.disabled = false;
+        // Cargar modelos con o sin año
         apiFetch(API + '/models?brand_id=' + brandId + (yearId ? '&year_id=' + yearId : '')).then(function (data) {
             var models = data.data || data;
             if (!models) return;
@@ -1846,9 +1925,12 @@
                     var variants = (m.variant_ids || [m.id_model]).join(',');
                     return '<option value="' + m.id_model + '" data-variant-ids="' + esc(variants) + '">' + esc(m.display_name || m.name_model) + '</option>';
                 }).join('');
+            // si hay modelo seleccionado despliega año
+            if (vsModel.value) vsModelChanged();
         });
     }
 
+
     function vsModelChanged() {
         var modelId = vsModel.value;
         var yearVal = vsYear.value;
@@ -1856,27 +1938,45 @@
         var variantIds = selectedOption && selectedOption.dataset.variantIds
             ? selectedOption.dataset.variantIds.split(',').map(function(x){ return parseInt(x); })
             : (modelId ? [parseInt(modelId)] : []);
+
         vsEngine.innerHTML = '<option value="">Motor...</option>';
         vsEngine.disabled = true;
 
-        if (!modelId || !yearVal || !variantIds.length) return;
+        if (!modelId || !variantIds.length) return;
 
-        vsEngine.disabled = false;
-        apiFetch(API + '/engines?model_id=' + variantIds.join(',') + '&year_id=' + yearVal).then(function (data) {
-            var engines = data.data || data;
-            if (!engines) return;
-            vsEngine.innerHTML = '<option value="">Motor...</option>' +
-                engines.map(function (e) {
-                    var name = (e.name_engine && e.name_engine !== 'N/A') ? e.name_engine : 'Sin especificar';
-                    var label = name + (e.trim_level ? ' (' + e.trim_level + ')' : '');
-                    return '<option value="' + e.id_mye + '">' + esc(label) + '</option>';
-                }).join('');
-            // If only 1 engine, auto-select
-            if (engines.length === 1) {
-                vsEngine.value = engines[0].id_mye;
-                vsEngineChanged();
-            }
-        });
+        // Si hay año carga motores usando todas las variantes del modelo
+        if (yearVal) {
+            vsEngine.disabled = false;
+            apiFetch(API + '/engines?model_id=' + variantIds.join(',') + '&year_id=' + yearVal).then(function (data) {
+                var engines = data.data || data;
+                if (!engines) return;
+                vsEngine.innerHTML = '<option value="">Motor...</option>' +
+                    engines.map(function (e) {
+                        var name = (e.name_engine && e.name_engine !== 'N/A') ? e.name_engine : 'Sin especificar';
+                        var label = name + (e.trim_level ? ' (' + e.trim_level + ')' : '');
+                        return '<option value="' + e.id_mye + '">' + esc(label) + '</option>';
+                    }).join('');
+                if (engines.length === 1) {
+                    vsEngine.value = engines[0].id_mye;
+                    vsEngineChanged();
+                }
+            });
+        } else {
+            // Sin año: cargar categorías a nivel modelo
+            var brandId = vsBrand.value;
+            if (!brandId) return;
+            nav.brand = { id: parseInt(brandId), name: vsBrand.options[vsBrand.selectedIndex].text };
+            nav.model = { id: parseInt(modelId), name: vsModel.options[vsModel.selectedIndex].text };
+            nav.year = null;
+            nav.engine = null;
+            nav.level = 'categories';
+            pushNavState();
+            loadCategoriesForMode();
+            setTimeout(function () {
+                var body = document.getElementById('pageBody');
+                if (body) body.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }, 300);
+        }
     }
 
     function vsEngineChanged() {