From 6b80add10236462b6c88a0f1c3493c0c264173d6 Mon Sep 17 00:00:00 2001
From: otamegane2 <jesus6iribe4@gmail.com>
Date: Thu, 18 Jun 2026 12:11:39 -0600
Subject: [PATCH] Mejora, ahora los intercambios estan paginados para que no
 sea una lista larga, muestran de 15 en 15 los intermcambios

---
 pos/static/css/catalog.css | 18 +++++++++-
 pos/static/js/catalog.js   | 69 +++++++++++++++++++++++++++++++-------
 2 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/pos/static/css/catalog.css b/pos/static/css/catalog.css
index c9fad21..882186b 100644
--- a/pos/static/css/catalog.css
+++ b/pos/static/css/catalog.css
@@ -363,13 +363,29 @@
     .bodega-table th { text-align: left; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-border); }
     .bodega-table td { padding: var(--space-2); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); }
 
-    /* Alternatives list */
+/* Alternatives list */
     .alt-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
     .alt-item:last-child { border-bottom: none; }
     .alt-item__pn { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-size: var(--text-body-sm); }
     .alt-item__mfr { font-size: var(--text-caption); color: var(--color-text-muted); }
     .alt-item__stock { font-size: var(--text-caption); }
 
+    /* Compatible vehicles pagination */
+    .compat-pager {
+      display: flex; align-items: center; justify-content: space-between;
+      gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3);
+      border-top: 1px solid var(--color-border);
+    }
+    .compat-pager__btn {
+      font-family: inherit; font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
+      color: var(--color-text-primary); background: var(--color-surface-2);
+      border: 1px solid var(--color-border); border-radius: var(--radius-sm);
+      padding: var(--space-2) var(--space-3); cursor: pointer; white-space: nowrap;
+    }
+    .compat-pager__btn:hover:not(:disabled) { background: var(--color-surface-3, var(--color-surface-2)); }
+    .compat-pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .compat-pager__info { font-size: var(--text-caption); color: var(--color-text-muted); text-align: center; flex: 1; }
+
     /* Add to cart section */
     .detail-footer {
       padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border);
diff --git a/pos/static/js/catalog.js b/pos/static/js/catalog.js
index 82d9b83..2fce149 100644
--- a/pos/static/js/catalog.js
+++ b/pos/static/js/catalog.js
@@ -1272,10 +1272,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 +1282,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');