Index: DjangoProject3/settings.py
===================================================================
--- DjangoProject3/settings.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ DjangoProject3/settings.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
@@ -38,18 +38,5 @@
 ALLOWED_HOSTS = ['*']
 
-# Application definition
-# Tuka ja dodavame kreiranata aplikacija main.apps.MainConfig da znae django deka postoi. sega mora da se ran migrate comandata
-# INSTALLED_APPS = [
-#     'django.contrib.auth',
-#     'django.contrib.contenttypes',
-#     'django.contrib.sessions',
-#     'django.contrib.messages',
-#     'django.contrib.staticfiles',
-#     'main.apps.MainConfig',
-#     'social_django',
-#     "django.contrib.sites",
-# ]
 INSTALLED_APPS = [
-    # Django built-in apps
     "django.contrib.admin",
     "django.contrib.auth",
@@ -59,16 +46,12 @@
     "django.contrib.staticfiles",
 
-    # Required for allauth
     "django.contrib.sites",
 
-    # Your app
     "main.apps.MainConfig",
 
-    # Allauth core
     "allauth",
     "allauth.account",
     "allauth.socialaccount",
 
-    # Providers
     "allauth.socialaccount.providers.google",
     "allauth.socialaccount.providers.facebook",
Index: main/models.py
===================================================================
--- main/models.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ main/models.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
@@ -85,8 +85,4 @@
         unique_together = ('shopping_list', 'product')
 
-
-
-from django.utils import timezone  # Correct import for timezone.now
-
 User = get_user_model()
 
Index: main/templates/main/header.html
===================================================================
--- main/templates/main/header.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ main/templates/main/header.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
@@ -502,5 +502,4 @@
             }
 
-            /* Add padding to content to prevent bottom nav overlap */
             body {
                 padding-bottom: 60px;
Index: main/templates/main/list_detail.html
===================================================================
--- main/templates/main/list_detail.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ main/templates/main/list_detail.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
@@ -18,13 +18,8 @@
             --background-overlay: rgba(255, 255, 255, 0.97);
             --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            {#--border-radius: 12px;#}
             --transition: all 0.3s ease;
         }
 
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
 
         html, body {
@@ -42,8 +37,5 @@
             content: '';
             position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
+            top: 0; left: 0; right: 0; bottom: 0;
             background: inherit;
             filter: blur(8px);
@@ -122,5 +114,5 @@
             background-color: var(--background-overlay);
             padding: 35px;
-            border-radius: var(--border-radius);
+            border-radius: 12px;
             box-shadow: var(--shadow);
             border: 1px solid rgba(0, 0, 0, 0.05);
@@ -153,9 +145,5 @@
         }
 
-        .shopping-list-items {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
+        .shopping-list-items { display: flex; flex-direction: column; gap: 12px; }
 
         .shopping-list-item {
@@ -172,8 +160,5 @@
         }
 
-        .shopping-list-item:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        }
+        .shopping-list-item:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
 
         .shopping-list-item.checked {
@@ -184,22 +169,13 @@
         }
 
-        .checkbox input {
-            display: none;
-        }
+        .checkbox input { display: none; }
 
         .checkbox label {
-            width: 22px;
-            height: 22px;
+            width: 22px; height: 22px;
             border: 2px solid var(--secondary-color);
             border-radius: 5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
+            display: flex; align-items: center; justify-content: center;
             cursor: pointer;
             transition: var(--transition);
-        }
-
-        .checkbox label:hover {
-            border-color: #2980b9;
         }
 
@@ -210,7 +186,5 @@
 
         .checkbox input:checked + label::after {
-            content: '✓';
-            color: white;
-            font-size: 13px;
+            content: '✓'; color: white; font-size: 13px;
         }
 
@@ -232,213 +206,62 @@
         }
 
-        .price, .store {
-            font-weight: 500;
-            color: #444;
-            font-size: 15px;
-        }
-
-        .price {
-            font-weight: 600;
-            color: #2c3e50;
-        }
-
-        .product-name {
-            font-weight: 500;
-            word-break: break-word;
-            font-size: 15px;
-            line-height: 1.4;
-        }
-
-        .actions {
-            display: flex;
-            justify-content: flex-end;
-        }
+        .price, .store { font-weight: 500; color: #444; font-size: 15px; }
+
+        .price { font-weight: 600; color: #2c3e50; }
+
+        .product-name { font-weight: 500; word-break: break-word; font-size: 15px; line-height: 1.4; }
+
+        .actions { display: flex; justify-content: flex-end; }
 
         .remove-button {
             background-color: #e74c3c;
-            border: none;
-            color: white;
+            border: none; color: white;
             padding: 10px 18px;
             border-radius: 8px;
-            cursor: pointer;
-            font-size: 14px;
+            cursor: pointer; font-size: 14px;
             transition: var(--transition);
-            font-weight: 500;
-            margin-right: -50px;
-        }
-
-        .remove-button:hover {
-            background-color: #c0392b;
-            transform: translateY(-1px);
-        }
-
-        .product-image img {
-            width: 50px;
-            height: 50px;
-            object-fit: cover;
-            border-radius: 8px;
-            border: 1px solid #eee;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-        }
-
-        /* Mobile Styles (unchanged from your loved version) */
-        @media (max-width: 768px) {
-            .sticky-price-summary {
-                top: 70px;
-                flex-wrap: wrap;
-                padding: 10px;
-            }
-
-            .sticky-price-summary .summary-item {
-                font-size: 12px;
-                margin: 5px;
-            }
-
-            .sticky-price-summary .summary-item span:last-child {
-                font-size: 14px;
-            }
-
-            .sticky-price-summary .group-button {
-                order: 1;
-                margin-top: 10px;
-                width: 100%;
-            }
-
-            .shopping-list-wrapper {
-                flex-direction: column;
-                padding: 10px;
-                margin-top: 0;
-            }
-
-            .shopping-list-container {
-                width: 100%;
-                padding: 15px;
-            }
-
-            .shopping-list-header {
-                display: none;
-            }
-
-            .shopping-list-item {
-                grid-template-columns: 50px 1fr auto;
-                grid-template-rows: auto auto auto;
-                gap: 12px;
-                padding: 15px;
-                position: relative;
-            }
-
-            .product-image {
-                grid-column: 1;
-                grid-row: 1 / span 3;
-            }
-
-            .product-name {
-                grid-column: 2;
-                grid-row: 1;
-                font-weight: 600;
-            }
-
-            .quantity {
-                grid-column: 2;
-                grid-row: 2;
-                display: flex;
-                align-items: center;
-                gap: 10px;
-            }
-
-            .price {
-                grid-column: 3;
-                grid-row: 2;
-                text-align: right;
-            }
-
-            .store {
-                grid-column: 2;
-                grid-row: 3;
-                font-size: 13px;
-                color: #666;
-            }
-
-            .actions {
-                position: absolute;
-                top: 15px;
-                right: 15px;
-            }
-
-            .checkbox {
-                position: absolute;
-                bottom: 15px;
-                right: 15px;
-            }
-
-            .quantity input {
-                width: 70px;
-            }
-
-            .shopping-list-title {
-                font-size: 22px;
-                margin-bottom: 15px;
-            }
-
-            .remove-button {
-                padding: 6px 12px;
-                font-size: 13px;
-                {#margin-left: -50px;#}\
-                margin-right: 50px;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .shopping-list-item {
-                grid-template-columns: 40px 1fr auto;
-                padding: 12px;
-                gap: 10px;
-            }
-
-            .product-image img {
-                width: 40px;
-                height: 40px;
-            }
-
-            .quantity input {
-                width: 60px;
-                padding: 6px;
-            }
-
-            .price {
-                font-size: 14px;
-            }
-
-            .store {
-                font-size: 12px;
-            }
-
-            .remove-button {
-                padding: 5px 10px;
-                font-size: 12px;
-                {#margin-left: -50px;#}
-                margin-right: 1px;
-
-            }
-
-            .shopping-list-title {
-                font-size: 20px;
-            }
-        }
-
-        @media (min-width: 769px) {
-            .sticky-price-summary {
-                top: 130px;
-            }
-        }
-
-        {#isklucok#}
-        {#i.fas.fa-search{#}
-        {#    margin-right: 35px;#}
-        {#}#}
-       .header-search input{
-           width: 102%;
-       }
-        }
+            font-weight: 500; margin-right: -50px;
+        }
+
+        .remove-button:hover { background-color: #c0392b; transform: translateY(-1px); }
+
+        .product-image img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
+
+        /* Alternative list styles */
+        #alternative-list {
+            margin:30px 0;
+            padding:20px;
+            background:#fffbe6;
+            border:1px solid #f0c36d;
+            border-radius:10px;
+            display:none;
+        }
+
+        #alternative-list h2 {
+            color:#e67e22;
+            margin-bottom:15px;
+            font-size:20px;
+        }
+
+        .alternative-item {
+            display:flex;
+            justify-content: space-between;
+            align-items:center;
+            padding:10px;
+            border-bottom:1px solid #ddd;
+        }
+
+        .alternative-item span {
+            display:block;
+        }
+
+        .alternative-total {
+            margin-top:15px;
+            font-weight:700;
+            font-size:16px;
+            text-align:right;
+            color:#27ae60;
+        }
+
     </style>
 </head>
@@ -475,4 +298,5 @@
     </div>
     <button id="group-by-store" class="group-button">Групирај по продавници</button>
+    <button id="find-cheaper" class="group-button" style="background-color:#f39c12;">Најди поевтина алтернатива</button>
 </div>
 
@@ -492,9 +316,7 @@
             <div class="shopping-list-items">
                 {% for item in items %}
-                    <div class="shopping-list-item {% if item.checked %}checked{% endif %}"
-                         data-item-id="{{ item.id }}">
+                    <div class="shopping-list-item {% if item.checked %}checked{% endif %}" data-item-id="{{ item.id }}">
                         <div class="checkbox">
-                            <input type="checkbox" class="item-checkbox" id="item-{{ item.id }}"
-                                   {% if item.checked %}checked{% endif %}>
+                            <input type="checkbox" class="item-checkbox" id="item-{{ item.id }}" {% if item.checked %}checked{% endif %}>
                             <label for="item-{{ item.id }}"></label>
                         </div>
@@ -504,6 +326,5 @@
                         <div class="product-name">{{ item.product.name }}</div>
                         <div class="quantity">
-                            <input type="number" class="quantity-input" min="1" value="{{ item.quantity }}"
-                                   data-price="{{ item.product.price }}">
+                            <input type="number" class="quantity-input" min="1" value="{{ item.quantity }}" data-price="{{ item.product.price }}">
                         </div>
                         <div class="price">{{ item.product.price }} ден.</div>
@@ -519,164 +340,161 @@
         {% endif %}
     </div>
+
+    <!-- Alternative List -->
+    <div id="alternative-list">
+        <h2>Поевтина алтернативна листа</h2>
+        <div id="alternative-items"></div>
+        <div id="alternative-total" class="alternative-total"></div>
+    </div>
 </div>
 
 <script>
-    document.addEventListener('DOMContentLoaded', () => {
-        function getCookie(name) {
-            let cookieValue = null;
-            if (document.cookie && document.cookie !== '') {
-                const cookies = document.cookie.split(';');
-                for (let cookie of cookies) {
-                    cookie = cookie.trim();
-                    if (cookie.startsWith(name + '=')) {
-                        cookieValue = decodeURIComponent(cookie.slice(name.length + 1));
-                        break;
-                    }
+document.addEventListener('DOMContentLoaded', () => {
+    function getCookie(name) {
+        let cookieValue = null;
+        if (document.cookie && document.cookie !== '') {
+            const cookies = document.cookie.split(';');
+            for (let cookie of cookies) {
+                cookie = cookie.trim();
+                if (cookie.startsWith(name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.slice(name.length + 1));
+                    break;
                 }
             }
-            return cookieValue;
-        }
-
-        const csrftoken = getCookie('csrftoken');
-
-        function updateAllPriceDisplays() {
-            let checked = 0, all = 0, checkedCount = 0;
-            document.querySelectorAll('.shopping-list-item').forEach(item => {
-                const qty = parseInt(item.querySelector('.quantity-input').value) || 0;
-                const price = parseFloat(item.querySelector('.quantity-input').dataset.price);
-                const total = qty * price;
-                all += total;
-                if (item.querySelector('.item-checkbox').checked) {
-                    checked += total;
-                    checkedCount++;
+        }
+        return cookieValue;
+    }
+
+    const csrftoken = getCookie('csrftoken');
+
+    function updateAllPriceDisplays() {
+        let checked = 0, all = 0, checkedCount = 0;
+        document.querySelectorAll('.shopping-list-item').forEach(item => {
+            const qty = parseInt(item.querySelector('.quantity-input').value) || 0;
+            const price = parseFloat(item.querySelector('.quantity-input').dataset.price);
+            const total = qty * price;
+            all += total;
+            if (item.querySelector('.item-checkbox').checked) {
+                checked += total;
+                checkedCount++;
+            }
+        });
+
+        document.getElementById('sticky-total-price').textContent = `${checked.toFixed(2)} ден.`;
+        document.getElementById('sticky-total-price-all').textContent = `${all.toFixed(2)} ден.`;
+        document.getElementById('sticky-checked-items').textContent = checkedCount;
+    }
+
+    function updateCheckedCount() { updateAllPriceDisplays(); }
+
+    document.querySelectorAll('.item-checkbox').forEach(cb => {
+        cb.addEventListener('change', () => {
+            const itemId = cb.closest('.shopping-list-item').dataset.itemId;
+            cb.closest('.shopping-list-item').classList.toggle('checked', cb.checked);
+
+            fetch(`/update-list-item/${itemId}/`, {
+                method: 'POST',
+                headers: {'X-CSRFToken': csrftoken,'Content-Type': 'application/json'},
+                body: JSON.stringify({checked: cb.checked})
+            });
+
+            updateCheckedCount();
+        });
+    });
+
+    document.querySelectorAll('.quantity-input').forEach(input => {
+        input.addEventListener('change', function() {
+            const itemId = this.closest('.shopping-list-item').dataset.itemId;
+            fetch(`/update-list-item/${itemId}/`, {
+                method: 'POST',
+                headers: {'X-CSRFToken': csrftoken,'Content-Type': 'application/json'},
+                body: JSON.stringify({quantity: this.value})
+            });
+            updateAllPriceDisplays();
+        });
+    });
+
+    document.querySelectorAll('.remove-button').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const id = btn.dataset.itemId;
+            if (!confirm('Дали сте сигурни дека сакате да го отстраните овој производ?')) return;
+
+            fetch(`/remove-from-list/${id}/`, {
+                method: 'POST',
+                headers: {'X-CSRFToken': csrftoken,'Content-Type': 'application/json'},
+            }).then(res => {
+                if (res.ok) {
+                    btn.closest('.shopping-list-item').remove();
+                    const itemCount = document.querySelectorAll('.shopping-list-item').length;
+                    document.getElementById('sticky-total-items').textContent = itemCount;
+                    updateCheckedCount();
                 }
             });
-
-            document.getElementById('sticky-total-price').textContent = `${checked.toFixed(2)} ден.`;
-            document.getElementById('sticky-total-price-all').textContent = `${all.toFixed(2)} ден.`;
-            document.getElementById('sticky-checked-items').textContent = checkedCount;
-        }
-
-        function updateCheckedCount() {
-            const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
-            document.getElementById('sticky-checked-items').textContent = checkedCount;
-            updateAllPriceDisplays();
-        }
-
-        // Checkbox functionality
-        document.querySelectorAll('.item-checkbox').forEach(cb => {
-            cb.addEventListener('change', () => {
-                const itemId = cb.closest('.shopping-list-item').dataset.itemId;
-                cb.closest('.shopping-list-item').classList.toggle('checked', cb.checked);
-
-                // Send update to server
-                fetch(`/update-list-item/${itemId}/`, {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRFToken': csrftoken,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        checked: cb.checked
-                    })
-                }).then(response => {
-                    if (!response.ok) {
-                        console.error('Failed to update item');
-                    }
-                });
-
-                updateCheckedCount();
+        });
+    });
+
+    let isGrouped = false;
+    let originalOrder = [];
+    document.getElementById('group-by-store')?.addEventListener('click', () => {
+        const container = document.querySelector('.shopping-list-items');
+        if (!isGrouped) {
+            originalOrder = Array.from(container.children);
+            const grouped = {};
+            originalOrder.forEach(item => {
+                const store = item.querySelector('.store').textContent.trim();
+                if (!grouped[store]) grouped[store] = [];
+                grouped[store].push(item);
             });
+            container.innerHTML = '';
+            for (const store in grouped) {
+                const section = document.createElement('div');
+                section.style.marginBottom = '25px';
+                section.innerHTML = `<div style="font-weight:bold; margin:15px 0 10px; padding:12px 20px; background:#f1f8e9; border-radius:8px; color:#2e652e; font-size:16px; border-left:4px solid #2e652e;">${store}</div>`;
+                grouped[store].forEach(i => section.appendChild(i));
+                container.appendChild(section);
+            }
+            isGrouped = true;
+            document.getElementById('group-by-store').textContent = 'Одгрупирај';
+        } else {
+            container.innerHTML = '';
+            originalOrder.forEach(item => container.appendChild(item));
+            isGrouped = false;
+            document.getElementById('group-by-store').textContent = 'Групирај по продавници';
+        }
+    });
+
+    updateCheckedCount();
+});
+
+// Find cheaper alternatives
+document.getElementById('find-cheaper')?.addEventListener('click', async () => {
+    const listId = "{{ shopping_list.id }}";
+    const response = await fetch(`/api/lists/${listId}/cheaper/`);
+    if (!response.ok) { alert("Не успеавме да ги најдеме алтернативите."); return; }
+    const data = await response.json();
+    const container = document.getElementById("alternative-items");
+    container.innerHTML = "";
+
+    let totalAlternativePrice = 0;
+
+    if (data.alternatives.length === 0) {
+        container.innerHTML = "<p>Нема поевтини алтернативи.</p>";
+    } else {
+        data.alternatives.forEach(item => {
+            totalAlternativePrice += parseFloat(item.original_price);
+            const div = document.createElement('div');
+            div.className = 'alternative-item';
+            div.innerHTML = `
+                <span><b>${item.original}</b></span>
+                <span style="color:green;"><b>${item.alternative}</b></span>
+                <span><i>во ${item.store}</i></span>
+            `;
+            container.appendChild(div);
         });
-
-        // Quantity input functionality
-        document.querySelectorAll('.quantity-input').forEach(input => {
-            input.addEventListener('change', function() {
-                const itemId = this.closest('.shopping-list-item').dataset.itemId;
-                const newQuantity = this.value;
-
-                // Send update to server
-                fetch(`/update-list-item/${itemId}/`, {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRFToken': csrftoken,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        quantity: newQuantity
-                    })
-                }).then(response => {
-                    if (!response.ok) {
-                        console.error('Failed to update quantity');
-                    }
-                });
-
-                updateAllPriceDisplays();
-            });
-        });
-
-        // Remove button functionality
-        document.querySelectorAll('.remove-button').forEach(btn => {
-            btn.addEventListener('click', () => {
-                const id = btn.dataset.itemId;
-                if (!confirm('Дали сте сигурни дека сакате да го отстраните овој производ?')) return;
-
-                fetch(`/remove-from-list/${id}/`, {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRFToken': csrftoken,
-                        'Content-Type': 'application/json'
-                    },
-                }).then(res => {
-                    if (res.ok) {
-                        btn.closest('.shopping-list-item').remove();
-                        const itemCount = document.querySelectorAll('.shopping-list-item').length;
-                        document.getElementById('sticky-total-items').textContent = itemCount;
-                        updateCheckedCount();
-                    }
-                });
-            });
-        });
-
-        // Group by store functionality
-        let isGrouped = false;
-        let originalOrder = [];
-
-        document.getElementById('group-by-store')?.addEventListener('click', () => {
-            const container = document.querySelector('.shopping-list-items');
-
-            if (!isGrouped) {
-                originalOrder = Array.from(container.children);
-
-                const grouped = {};
-                originalOrder.forEach(item => {
-                    const store = item.querySelector('.store').textContent.trim();
-                    if (!grouped[store]) grouped[store] = [];
-                    grouped[store].push(item);
-                });
-
-                container.innerHTML = '';
-                for (const store in grouped) {
-                    const section = document.createElement('div');
-                    section.style.marginBottom = '25px';
-                    section.innerHTML = `<div style="font-weight:bold; margin:15px 0 10px; padding:12px 20px; background:#f1f8e9; border-radius:8px; color:#2e652e; font-size:16px; border-left:4px solid #2e652e;">${store}</div>`;
-                    grouped[store].forEach(i => section.appendChild(i));
-                    container.appendChild(section);
-                }
-
-                isGrouped = true;
-                document.getElementById('group-by-store').textContent = 'Одгрупирај';
-            } else {
-                container.innerHTML = '';
-                originalOrder.forEach(item => container.appendChild(item));
-
-                isGrouped = false;
-                document.getElementById('group-by-store').textContent = 'Групирај по продавници';
-            }
-        });
-
-        // Initialize counts
-        updateCheckedCount();
-    });
+    }
+
+    {#document.getElementById("alternative-total").textContent = `Вкупна цена на алтернативите: ${totalAlternativePrice.toFixed(2)} ден.`;#}
+    document.getElementById("alternative-list").style.display = "block";
+});
 </script>
 </body>
Index: main/templates/main/product_list.html
===================================================================
--- main/templates/main/product_list.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ main/templates/main/product_list.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
@@ -590,5 +590,6 @@
                     height: 160px;
                 }
-                .pagination{
+
+                .pagination {
                     margin-bottom: 50px;
                 }
@@ -1733,9 +1734,9 @@
                         <label for="store-ramstore">Ramstore</label>
                     </div>
-                    {#                    <div class="filter-option">#}
-                    {#                        <input type="checkbox" id="store-zito" name="store" value="Zito"#}
-                    {#                               {% if 'Zito' in selected_stores %}checked{% endif %}>#}
-                    {#                        <label for="store-zito">Zito</label>#}
-                    {#                    </div>#}
+                    {#                                        <div class="filter-option">#}
+                    {#                                            <input type="checkbox" id="store-zito" name="store" value="Zito"#}
+                    {#                                                   {% if 'Zito' in selected_stores %}checked{% endif %}>#}
+                    {#                                            <label for="store-zito">Zito</label>#}
+                    {#                                        </div>#}
                     {#                    <div class="filter-option">#}
                     {#                        <input type="checkbox" id="store-kam" name="store" value="Kam"#}
@@ -1803,10 +1804,10 @@
                         <a href="{% url 'product_detail' product.id %}">
                             <div class="product-image">
-{#                                {% if product.store == 'Vero' %}#}
-{#                                    <img src="{% static 'images/no-image.png' %}" alt="no-image">#}
-{#                                {% else %}#}
-{#                                    <img src="{{ product.image_url }}" alt="{{ product.name }}"#}
-{#                                         style="max-width: 100%; max-height: 100%;">#}
-{#                                {% endif %}#}
+                                {#                                {% if product.store == 'Vero' %}#}
+                                {#                                    <img src="{% static 'images/no-image.png' %}" alt="no-image">#}
+                                {#                                {% else %}#}
+                                {#                                    <img src="{{ product.image_url }}" alt="{{ product.name }}"#}
+                                {#                                         style="max-width: 100%; max-height: 100%;">#}
+                                {#                                {% endif %}#}
                                 {% if product.image_url and product.store != 'Vero' %}
                                     <img src="{{ product.image_url }}" alt="{{ product.name }}"
@@ -1915,7 +1916,9 @@
                                     </div>
                                 {% endif %}
+
+                                <!-- Move the anchor to only wrap the product image and info, not the button -->
                                 <a href="{% url 'product_detail' product.id %}">
                                     <div class="product-image">
-                                        {% if product.image_url %}
+                                        {% if product.image_url and product.store != 'Vero' %}
                                             <img src="{{ product.image_url }}" alt="{{ product.name }}"
                                                  style="max-width: 100%; max-height: 100%;">
@@ -1959,17 +1962,24 @@
                                             {% endif %}
                                         </div>
-                                        <div class="product-category">{{ product.category|translate_category }}</div>
-                                        <div class="product-actions">
-                                            <a href="{{ product.product_url }}" target="_blank" class="view-product"
-                                               style="color: rgba(22,53,22,0.93); ">Види производ</a>
-                                            <div class="product-actions">
-                                                <button class="btn btn-success add-to-list-btn"
-                                                        style="padding: 7px; background-color: #2e652e; color: white; border-radius: 10px; border-color: rgba(84,146,73,0.71); cursor: pointer; "
-                                                        data-product-id="{{ product.id }}"><b>Додај</b>
-                                                </button>
-                                            </div>
-                                        </div>
+                                        <div class="product-category"
+                                             style="color: rgba(42,82,42,0.76)">{{ product.category|translate_category }}</div>
                                     </div>
                                 </a>
+
+                                <div class="product-actions">
+                                    <a href="{{ product.product_url }}" target="_blank" class="view-product"
+                                       style="color: rgba(22,53,22,0.93); ">Види производ</a>
+
+                                    <!-- Buttons are now directly inside the div -->
+                                    <button class="btn btn-success add-to-list-btn"
+                                            style="padding: 7px; background-color: #2e652e; color: white; border-radius: 10px; border-color: rgba(84,146,73,0.71); cursor: pointer;"
+                                            data-product-id="{{ product.id }}"><b>Додај</b>
+                                    </button>
+
+                                    <button onclick="toggleFavorite(this, {{ product.id }})" class="favorite-btn"
+                                            data-product-id="{{ product.id }}">
+                                        <i class="far fa-heart"></i>
+                                    </button>
+                                </div>
                             </div>
                         {% endfor %}
@@ -2114,6 +2124,26 @@
 
 
+
+
+
+
+
+
+
+
+
+
                             {% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&laquo;</a>
                     <a href="?page=
+
+
+
+
+
+
+
+
+
+
 
 
@@ -2320,73 +2350,16 @@
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
                             {{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&rsaquo;</a>
                     <a href="?page=
+
+
+
+
+
+
+
+
+
+
 
 
@@ -2530,11 +2503,67 @@
 
     <script>
-        function toggleMenu() {
-            const menu = document.getElementById('other');
-            menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
-        }
-
-
-        // Filter toggle for mobile
+        let userLists = [];
+        let currentProductId = null;
+
+        document.addEventListener('DOMContentLoaded', function () {
+            if (window.innerWidth <= 768) {
+                document.querySelectorAll('.filter-section').forEach(section => {
+                    section.classList.remove('active');
+                });
+            }
+
+            const priceSlider = document.getElementById('priceRange');
+            const maxPriceDisplay = document.getElementById('maxPriceDisplay');
+
+            if (priceSlider && maxPriceDisplay) {
+                if ("{{ selected_max_price }}" && "{{ selected_max_price }}" !== "1000") {
+                    priceSlider.value = "{{ selected_max_price }}";
+                    maxPriceDisplay.textContent = "{{ selected_max_price }}" + ' ден.';
+                }
+
+                priceSlider.addEventListener('input', function () {
+                    maxPriceDisplay.textContent = this.value + ' ден.';
+                });
+            }
+
+            const sortSelect = document.getElementById('sort');
+            if (sortSelect) {
+                sortSelect.addEventListener('change', function () {
+                    const sortValue = this.value;
+
+                    const urlParams = new URLSearchParams(window.location.search);
+
+                    urlParams.set('sort', sortValue);
+                    urlParams.set('page', '1');
+                    window.location.search = urlParams.toString();
+                });
+            }
+
+            document.querySelectorAll('.filter-option input[type="checkbox"]').forEach(checkbox => {
+                checkbox.addEventListener('change', function () {
+                    document.getElementById('filterForm').submit();
+                });
+            });
+
+            document.getElementById('filterForm').addEventListener('submit', function (e) {
+            });
+
+            setupSearchFunctionality();
+            {% if user.is_authenticated %}
+                fetchUserLists();
+            {% endif %}
+
+            if (!localStorage.getItem('catalogTourShown')) {
+                setTimeout(showInstructionModal, 1000);
+                localStorage.setItem('catalogTourShown', 'true');
+            }
+
+            document.getElementById('closeInstruction')?.addEventListener('click', function () {
+                document.getElementById('instructionModal').style.display = 'none';
+            });
+
+            setupFavoriteButtons();
+        });
+
         function toggleFilters() {
             document.querySelectorAll('.filter-section').forEach(section => {
@@ -2543,144 +2572,64 @@
         }
 
-        document.addEventListener('DOMContentLoaded', function () {
-            // Initialize filters as collapsed on mobile
-            if (window.innerWidth <= 768) {
+        document.addEventListener('click', function (e) {
+            if (!e.target.closest('.filters') && !e.target.classList.contains('filter-toggle')) {
                 document.querySelectorAll('.filter-section').forEach(section => {
                     section.classList.remove('active');
                 });
             }
-
-            // Close filters when clicking outside
-            document.addEventListener('click', function (e) {
-                if (!e.target.closest('.filters') && !e.target.classList.contains('filter-toggle')) {
-                    document.querySelectorAll('.filter-section').forEach(section => {
-                        section.classList.remove('active');
-                    });
-                }
-            });
         });
-        document.addEventListener('DOMContentLoaded', function () {
-            // Price range slider functionality
-            const priceSlider = document.getElementById('priceRange');
-            const maxPriceDisplay = document.getElementById('maxPriceDisplay');
-
-            if (priceSlider && maxPriceDisplay) {
-                // Set initial value if filter is active
-                if ("{{ selected_max_price }}" && "{{ selected_max_price }}" !== "1000") {
-                    priceSlider.value = "{{ selected_max_price }}";
-                    maxPriceDisplay.textContent = "{{ selected_max_price }}" + ' ден.';
-                }
-
-                // Update display when slider moves
-                priceSlider.addEventListener('input', function () {
-                    maxPriceDisplay.textContent = this.value + ' ден.';
+
+        async function handleAddToListClick(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            this.classList.remove('pulse-on-click');
+            void this.offsetWidth; // Trigger reflow
+            this.classList.add('pulse-on-click');
+
+            const productId = this.dataset.productId;
+
+            const selectedListId = document.getElementById('listSelector')?.value;
+
+            if (!selectedListId) {
+                alert("Ве молиме изберете листа.");
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/lists/add-product/', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': getCookie('csrftoken'),
+                    },
+                    body: JSON.stringify({product_id: productId, list_id: selectedListId})
                 });
-            }
-
-            // Connect the sorting dropdown
-            const sortSelect = document.getElementById('sort');
-            if (sortSelect) {
-                sortSelect.addEventListener('change', function () {
-                    // Get the selected sort value
-                    const sortValue = this.value;
-
-                    // Get current URL parameters
-                    const urlParams = new URLSearchParams(window.location.search);
-
-                    // Update or add the sort parameter
-                    urlParams.set('sort', sortValue);
-
-                    // Reset to first page when changing sort
-                    urlParams.set('page', '1');
-
-                    // Reload the page with new parameters
-                    window.location.search = urlParams.toString();
-                });
-            }
-
-            // Function to handle checkbox changes (immediate filter application)
-            document.querySelectorAll('.filter-option input[type="checkbox"]').forEach(checkbox => {
-                checkbox.addEventListener('change', function () {
-                    document.getElementById('filterForm').submit();
-                });
-            });
-
-            // Ensure form submits properly
-            document.getElementById('filterForm').addEventListener('submit', function (e) {
-                // You can add any pre-submit logic here if needed
-            });
-
-            // Add to shopping list functionality
-            document.querySelectorAll('.add-to-list').forEach(button => {
-                button.addEventListener('click', function () {
-                    const productId = this.getAttribute('data-product-id');
-
-                    // Send AJAX request to add to shopping list
-                    fetch('/add-to-list/', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRFToken': '{{ csrf_token }}'
-                        },
-                        body: JSON.stringify({
-                            product_id: productId
-                        })
-                    })
-                        .then(response => response.json())
-                        .then(data => {
-                            if (data.success) {
-                                alert('Продуктот е додаден во вашата листа!');
-                            } else {
-                                alert('Грешка: ' + data.message);
-                            }
-                        })
-                        .catch(error => {
-                            console.error('Error:', error);
-                            alert('Настана грешка при додавање на продуктот.');
-                        });
-                });
-            });
-        });
-        // Global variables for list management
-
-        let selectedListId = null;
-        let rememberChoice = localStorage.getItem('rememberListChoice') === 'true';
-
-        // Toggle lists dropdown
-        function toggleListsDropdown() {
-            const dropdown = document.getElementById('listsDropdown');
-            dropdown.classList.toggle('show');
-
-            // Load lists if not already loaded
-            if (dropdown.classList.contains('show') && userLists.length === 0) {
-                fetchUserLists();
+
+                const result = await response.json();
+                if (result.success) {
+                    const counter = document.querySelector(`#counter-${productId}`);
+                    if (counter) counter.textContent = parseInt(counter.textContent) + 1;
+                    alert("Продуктот е успешно додаден во листата!");
+                } else {
+                    alert("Грешка: " + result.message);
+                }
+            } catch (error) {
+                console.error("Fetch error:", error);
+                alert("Настана грешка. Обидете се повторно.");
             }
         }
 
-        // Close dropdown when clicking outside
-        window.addEventListener('click', function (e) {
-            if (!e.target.closest('.lists-dropdown') && !e.target.classList.contains('lists-toggle')) {
-                const dropdown = document.getElementById('listsDropdown');
-                dropdown.classList.remove('show');
-            }
-        });
-
-        // Fetch user's shopping lists
-        let userLists = [];
-        let currentProductId = null;
-
-        // Fetch user's lists
         async function fetchUserLists() {
             try {
                 const response = await fetch('/api/lists/');
                 const data = await response.json();
-                console.log("Fetched data from /api/lists/:", data); // 🔍 Check structure
-
-                // Access the lists properly based on the received data structure
+                console.log("Fetched data from /api/lists/:", data);
+
                 if (data.lists && Array.isArray(data.lists)) {
-                    userLists = data.lists;  // Now userLists gets the correct array
+                    userLists = data.lists;
                 } else {
                     console.error("Unexpected response format:", data);
-                    userLists = []; // Fallback to empty
+                    userLists = [];
                 }
             } catch (error) {
@@ -2690,516 +2639,154 @@
         }
 
-
-        // Render user's shopping lists in navbar
-        function renderUserLists() {
-            const container = document.getElementById('navbarListsContainer');
-
-            if (userLists.length === 0) {
-                container.innerHTML = '<div class="no-lists">Немате креирано листи</div>';
-                return;
-            }
-
-            container.innerHTML = '';
-
-            userLists.forEach(list => {
-                const listItem = document.createElement('div');
-                listItem.className = 'list-item';
-                listItem.textContent = list.name;
-                listItem.dataset.listId = list.id;
-
-                if (selectedListId === list.id) {
-                    listItem.classList.add('active');
-                }
-
-                listItem.addEventListener('click', (e) => {
-                    e.stopPropagation(); // Prevent event bubbling
-                    window.location.href = `/lists/${list.id}/`; // Navigate to list detail
-                });
-
-                container.appendChild(listItem);
-            });
-        }
-
-        // Create new list from dropdown
-        function createNewListFromDropdown() {
-            const listName = prompt('Внесете име за новата листа:');
-            if (!listName) return;
-
-            fetch('/api/lists/create/', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRFToken': '{{ csrf_token }}'
-                },
-                body: JSON.stringify({name: listName})
-            })
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error('Network response was not ok');
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    if (data.success) {
-                        userLists.push({id: data.list_id, name: listName});
-                        renderUserLists();
-                        alert('Листата е успешно креирана!');
-                    } else {
-                        alert('Грешка: ' + data.message);
-                    }
-                })
-                .catch(error => {
-                    console.error('Error:', error);
-                    alert('Настана грешка при креирање на листата.');
-                });
-        }
-
-
-        async function showListOptions(button) {
-            currentProductId = button.getAttribute('data-product-id');
-
-            // Check authentication
-            {% if not user.is_authenticated %}
-                window.location.href = "{% url 'login' %}?next={{ request.path }}";
-                return;
-            {% endif %}
-
-            // Fetch lists if not already loaded
-            if (userLists.length === 0) {
-                await fetchUserLists();
-            }
-
-            // Populate modal
-            const modal = document.getElementById('listModal');
-            const listsContainer = document.getElementById('listsContainer');
-            listsContainer.innerHTML = '';
-
-            if (userLists.length === 0) {
-                listsContainer.innerHTML = `
-                <p>Немате креирано листи.</p>
-                <div class="create-new-list" onclick="showNewListForm()">Креирај нова листа</div>
-            `;
-            } else {
-                userLists.forEach(list => {
-                    const listOption = document.createElement('div');
-                    listOption.className = 'list-option';
-                    listOption.textContent = list.name;
-                    listOption.onclick = () => addProductToList(currentProductId, list.id);
-                    listsContainer.appendChild(listOption);
-                });
-            }
-
-            modal.style.display = 'flex';
-        }
-
-        async function showListOptionsModal(productId) {
-            const modal = document.getElementById('listModal');
-            const listsContainer = document.getElementById('listsContainer');
-
-            try {
-                const response = await fetch('/api/lists/');
-                const userLists = await response.json();
-
-                console.log("Fetched user lists:", userLists); // 🔍 ADD THIS LINE HERE
-
-                // Clear old list options
-                listsContainer.innerHTML = '';
-
-                // Add new list options
-                userLists.forEach(list => {
-                    console.log("Rendering option →", list.name, list.id); // Optional: log each list's name & id
-
-                    const listOption = document.createElement('div');
-                    listOption.className = 'list-option';
-                    listOption.innerHTML = list.name;
-                    listOption.onclick = () => addProductToList(productId, list.id);
-                    listsContainer.appendChild(listOption);
-                });
-
-                modal.style.display = 'block';
-            } catch (error) {
-                console.error('Error loading user lists:', error);
-            }
-        }
-
-        async function addProductToList(productId, listId) {
-            if (!productId || !listId) {
-                alert('Недостасува ID на продукт или листа!');
-                return;
-            }
-
-            console.log("Sending to server → Product ID:", productId, "List ID:", listId);
-
-            try {
-                const response = await fetch('/add-to-list/', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRFToken': getCSRFToken()
-                    },
-                    body: JSON.stringify({
-                        product_id: productId,
-                        list_id: listId
-                    })
-                });
-
-                const data = await response.json();
-
-                if (data.success) {
-                    alert('Продуктот е успешно додаден во листата!');
-                    closeModal();
-                } else {
-                    alert('Грешка: ' + data.message);
-                }
-            } catch (error) {
-                console.error('Error:', error);
-                alert('Настана грешка при додавање на продуктот.');
-            }
-        }
-
-        // Helper function to get CSRF token from cookies
-        function getCSRFToken() {
-            return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-        }
-
-
-        // Function to create new list
-        function createNewList() {
-            const listName = document.getElementById('newListName').value.trim();
-            if (!listName) return;
-
-            fetch('/api/lists/create/', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRFToken': '{{ csrf_token }}'
-                },
-                body: JSON.stringify({name: listName})
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        userLists.push({id: data.list_id, name: listName});
-                        showListOptionsModal(currentProductId);
-                        document.getElementById('newListForm').style.display = 'none';
-                        document.getElementById('newListName').value = '';
-                    } else {
-                        alert('Грешка: ' + data.message);
-                    }
-                })
-                .catch(error => {
-                    console.error('Error:', error);
-                    alert('Настана грешка при креирање на листата.');
-                });
-        }
-
-        function showNewListForm() {
-            document.getElementById('newListForm').style.display = 'block';
-        }
-
-        function closeModal() {
-            document.getElementById('listModal').style.display = 'none';
-        }
-
-
-        // Initialize on page load
-        document.addEventListener('DOMContentLoaded', function () {
-            // Close modal when clicking outside
-            document.getElementById('listModal').addEventListener('click', function (e) {
-                if (e.target === this) {
-                    closeModal();
-                }
-            });
-
-            // Pre-fetch user lists if authenticated
-            {% if user.is_authenticated %}
-                fetchUserLists();
-            {% endif %}
-        });
-
-        function toggleMobileMenu() {
-            const menu = document.getElementById("mobile-menu");
-            const overlay = document.getElementById("overlay");
-
-            menu.classList.toggle("open");
-            overlay.classList.toggle("active");
-        }
-
-        document.addEventListener('DOMContentLoaded', function () {
-            const addToListButtons = document.querySelectorAll('.add-to-list-btn');
-
-            addToListButtons.forEach(button => {
-                button.addEventListener('click', async () => {
-                    // Pulse animation
-                    button.classList.remove('pulse-on-click');
-                    void button.offsetWidth; // force reflow
-                    button.classList.add('pulse-on-click');
-
-                    // Add to list logic
-                    const productId = button.dataset.productId;
-                    const selectedListId = document.getElementById('listSelector').value;
-
-                    if (!selectedListId) {
-                        alert("Ве молиме изберете листа.");
-                        return;
-                    }
-
-                    try {
-                        const response = await fetch('/api/lists/add-product/', {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'X-CSRFToken': getCookie('csrftoken'),
-                            },
-                            body: JSON.stringify({
-                                product_id: productId,
-                                list_id: selectedListId
-                            })
-                        });
-
-                        const result = await response.json();
-                        if (result.success) {
-                            // Optionally show a message here
-                            // alert("Производот е додаден во листата!");
-                        } else {
-                            alert("Грешка: " + result.message);
-                        }
-                    } catch (error) {
-                        console.error("Fetch error:", error);
-                        alert("Настана грешка. Обидете се повторно.");
-                    }
-                });
-            });
-
-            // Helper for CSRF token
-            function getCookie(name) {
-                let cookieValue = null;
-                if (document.cookie && document.cookie !== '') {
-                    const cookies = document.cookie.split(';');
-                    for (let i = 0; i < cookies.length; i++) {
-                        const cookie = cookies[i].trim();
-                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                            break;
-                        }
-                    }
-                }
-                return cookieValue;
-            }
-        });
-
-
-        document.addEventListener('DOMContentLoaded', function () {
-            // Desktop search elements
+        function setupSearchFunctionality() {
             const searchInput = document.getElementById('searchInput');
             const suggestionsDiv = document.getElementById('suggestions');
             const searchForm = document.getElementById('searchForm');
 
-            // Mobile search elements
             const mobileSearchInput = document.getElementById('mobileSearchInput');
             const mobileSearchForm = document.getElementById('mobileSearchForm');
 
-            // Extended transliteration with typo correction
-            function transliterateLatinToCyrillic(text) {
-                const map = {
-                    'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
-                    'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
-                    'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
-                    'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
-                    'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
-                    'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
-                    's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
-                    'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
-                    'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
-                };
-
-                const typoPatterns = [
-                    {pattern: /sampon/gi, replace: 'shampon'},
-                    {pattern: /cresi/gi, replace: 'creshi'},
-                    {pattern: /stipki/gi, replace: 'shtipki'},
-                    {pattern: /sch/gi, replace: 'sh'},
-                    {pattern: /ck/gi, replace: 'k'},
-                    {pattern: /ph/gi, replace: 'f'},
-                    {pattern: /th/gi, replace: 't'},
-                    {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
-                    {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
-                    {pattern: /([a-z])\1/gi, replace: '$1'}
-                ];
-
-                let normalizedText = text.toLowerCase();
-                for (const {pattern, replace} of typoPatterns) {
-                    normalizedText = normalizedText.replace(pattern, replace);
-                }
-
-                let result = '';
-                let i = 0;
-                while (i < normalizedText.length) {
-                    if (map[normalizedText.substring(i, i + 3)]) {
-                        result += map[normalizedText.substring(i, i + 3)];
-                        i += 3;
-                    } else if (map[normalizedText.substring(i, i + 2)]) {
-                        result += map[normalizedText.substring(i, i + 2)];
-                        i += 2;
-                    } else if (map[normalizedText[i]]) {
-                        result += map[normalizedText[i]];
-                        i++;
-                    } else {
-                        result += normalizedText[i];
-                        i++;
-                    }
-                }
-                return result;
-            }
-
-            function setupSearch(input, form) {
-                input.addEventListener('input', function () {
-                    const query = this.value.trim();
-                    if (query.length < 2) {
-                        suggestionsDiv.style.display = 'none';
-                        return;
-                    }
-
-                    fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
-                        .then(response => response.json())
-                        .then(data => {
-                            suggestionsDiv.innerHTML = '';
-                            if (data.suggestions.length > 0) {
-                                data.suggestions.forEach(suggestion => {
-                                    const div = document.createElement('div');
-                                    div.textContent = suggestion;
-                                    div.style.padding = '5px 10px';
-                                    div.style.cursor = 'pointer';
-                                    div.addEventListener('click', function () {
-                                        input.value = transliterateLatinToCyrillic(suggestion);
-                                        suggestionsDiv.style.display = 'none';
-                                        form.submit();
-                                    });
-                                    suggestionsDiv.appendChild(div);
+            if (searchInput && suggestionsDiv && searchForm) {
+                setupSearch(searchInput, searchForm, suggestionsDiv);
+            }
+
+            if (mobileSearchInput && mobileSearchForm) {
+                setupSearch(mobileSearchInput, mobileSearchForm, suggestionsDiv);
+            }
+
+            document.addEventListener('click', function (e) {
+                if (suggestionsDiv &&
+                    !searchInput?.contains(e.target) &&
+                    !suggestionsDiv.contains(e.target) &&
+                    !mobileSearchInput?.contains(e.target)) {
+                    suggestionsDiv.style.display = 'none';
+                }
+            });
+        }
+
+        function setupSearch(input, form, suggestionsDiv) {
+            input.addEventListener('input', function () {
+                const query = this.value.trim();
+                if (query.length < 2) {
+                    suggestionsDiv.style.display = 'none';
+                    return;
+                }
+
+                fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        suggestionsDiv.innerHTML = '';
+                        if (data.suggestions.length > 0) {
+                            data.suggestions.forEach(suggestion => {
+                                const div = document.createElement('div');
+                                div.textContent = suggestion;
+                                div.style.padding = '5px 10px';
+                                div.style.cursor = 'pointer';
+                                div.addEventListener('click', function () {
+                                    input.value = transliterateLatinToCyrillic(suggestion);
+                                    suggestionsDiv.style.display = 'none';
+                                    form.submit();
                                 });
-                                suggestionsDiv.style.display = 'block';
-                            } else {
-                                suggestionsDiv.style.display = 'none';
-                            }
-                        });
+                                suggestionsDiv.appendChild(div);
+                            });
+                            suggestionsDiv.style.display = 'block';
+                        } else {
+                            suggestionsDiv.style.display = 'none';
+                        }
+                    });
+            });
+
+            input.addEventListener('keydown', function (e) {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    suggestionsDiv.style.display = 'none';
+                    input.value = transliterateLatinToCyrillic(input.value);
+                    form.submit();
+                }
+            });
+        }
+
+        function transliterateLatinToCyrillic(text) {
+            const map = {
+                'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
+                'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
+                'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
+                'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
+                'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
+                'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
+                's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
+                'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
+                'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
+            };
+
+            const typoPatterns = [
+                {pattern: /sampon/gi, replace: 'shampon'},
+                {pattern: /cresi/gi, replace: 'creshi'},
+                {pattern: /stipki/gi, replace: 'shtipki'},
+                {pattern: /sch/gi, replace: 'sh'},
+                {pattern: /ck/gi, replace: 'k'},
+                {pattern: /ph/gi, replace: 'f'},
+                {pattern: /th/gi, replace: 't'},
+                {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
+                {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
+                {pattern: /([a-z])\1/gi, replace: '$1'}
+            ];
+
+            let normalizedText = text.toLowerCase();
+            for (const {pattern, replace} of typoPatterns) {
+                normalizedText = normalizedText.replace(pattern, replace);
+            }
+
+            let result = '';
+            let i = 0;
+            while (i < normalizedText.length) {
+                if (map[normalizedText.substring(i, i + 3)]) {
+                    result += map[normalizedText.substring(i, i + 3)];
+                    i += 3;
+                } else if (map[normalizedText.substring(i, i + 2)]) {
+                    result += map[normalizedText.substring(i, i + 2)];
+                    i += 2;
+                } else if (map[normalizedText[i]]) {
+                    result += map[normalizedText[i]];
+                    i++;
+                } else {
+                    result += normalizedText[i];
+                    i++;
+                }
+            }
+            return result;
+        }
+
+        function setupFavoriteButtons() {
+            const favoriteButtons = document.querySelectorAll('.favorite-btn');
+            favoriteButtons.forEach(button => {
+                button.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const productId = this.getAttribute('data-product-id');
+                    toggleFavorite(this, productId);
                 });
-
-                input.addEventListener('keydown', function (e) {
-                    if (e.key === 'Enter') {
-                        e.preventDefault();
-                        suggestionsDiv.style.display = 'none';
-                        input.value = transliterateLatinToCyrillic(input.value);
-                        form.submit();
-                    }
-                });
-            }
-
-            setupSearch(searchInput, searchForm);
-            setupSearch(mobileSearchInput, mobileSearchForm);
-
-            document.addEventListener('click', function (e) {
-                if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
-                    !mobileSearchInput.contains(e.target)) {
-                    suggestionsDiv.style.display = 'none';
-                }
             });
-        });
-        const priceRange = document.getElementById('priceRange');
-        const maxPriceDisplay = document.getElementById('maxPriceDisplay');
-
-        priceRange.addEventListener('input', () => {
-            maxPriceDisplay.textContent = priceRange.value + ' ден.';
-        });
-        document.addEventListener('DOMContentLoaded', function () {
-            // Check if this is the first visit to the catalog page
-            if (!localStorage.getItem('catalogTourShown')) {
-                // Show the instruction modal after a short delay
-                setTimeout(showInstructionModal, 1000);
-
-                // Mark that the tour has been shown
-                localStorage.setItem('catalogTourShown', 'true');
-            }
-
-            // Close button handler
-            document.getElementById('closeInstruction')?.addEventListener('click', function () {
-                document.getElementById('instructionModal').style.display = 'none';
-            });
-        });
-
-        document.addEventListener('DOMContentLoaded', function () {
-            // Check if first visit
-            if (!localStorage.getItem('catalogTourShown')) {
-                setTimeout(showEnhancedTour, 1000);
-                localStorage.setItem('catalogTourShown', 'true');
-            }
-
-            // Close button
-            document.getElementById('closeInstruction')?.addEventListener('click', closeTour);
-            document.getElementById('gotItBtn')?.addEventListener('click', closeTour);
-
-            // Optional: Replay button
-            document.getElementById('showInstructionsAgain')?.addEventListener('click', showEnhancedTour);
-        });
-
-        function showEnhancedTour() {
-            const modal = document.getElementById('instructionModal');
-            const listArrow = document.getElementById('listArrow');
-            const navArrow = document.getElementById('navArrow');
-            const listSelector = document.getElementById('listSelector');
-            const navLists = document.querySelector('.user-actions .list-icon');
-            // In showEnhancedTour():
-            {#listArrow.style.left = '300px';  // Fixed test position#}
-            {#listArrow.style.top = '100px';#}
-            {#navArrow.style.left = '200px';#}
-            {#navArrow.style.top = '200px';#}
-
-            if (modal && listArrow && navArrow) {
-                // Position arrows
-                if (listSelector) {
-                    const listRect = listSelector.getBoundingClientRect();
-                    listArrow.style.left = `${listRect.left + listRect.width / 2 - 50}px`; // Adjust X position
-                    listArrow.style.top = `${listRect.top - 80}px`; // Adjust Y position
-                }
-
-                if (navLists) {
-                    const navRect = navLists.getBoundingClientRect();
-                    navArrow.style.left = `${navRect.left + navRect.width / 2 - 50}px`; // Adjust X position
-                    navArrow.style.top = `${navRect.bottom - 30}px`; // Adjust Y position
-                }
-
-                // Show modal and arrows
-                modal.style.display = 'flex';
-                setTimeout(() => {
-                    listArrow.style.opacity = '1';
-                    navArrow.style.opacity = '1';
-                }, 500);
-            }
-        }
-
-        function closeTour() {
-            const modal = document.getElementById('instructionModal');
-            if (modal) {
-                modal.style.animation = 'modalExit 0.3s forwards';
-                setTimeout(() => {
-                    modal.style.display = 'none';
-                }, 300);
-            }
-        }
-
-        document.getElementById('showInstructionsAgain')?.addEventListener('click', showInstructionModal);
-
-        // Add this script to your template
-        function getCookie(name) {
-            let cookieValue = null;
-            if (document.cookie && document.cookie !== '') {
-                const cookies = document.cookie.split(';');
-                for (let cookie of cookies) {
-                    cookie = cookie.trim();
-                    if (cookie.startsWith(name + '=')) {
-                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                        break;
-                    }
-                }
-            }
-            return cookieValue;
+
+            {% if user.is_authenticated %}
+                fetch('/get-favorites/')
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            favoriteButtons.forEach(button => {
+                                const productId = button.getAttribute('data-product-id');
+                                if (data.favorites.includes(parseInt(productId))) {
+                                    const icon = button.querySelector('i');
+                                    icon.classList.remove('far');
+                                    icon.classList.add('fas');
+                                    icon.style.color = '#e74c3c';
+                                }
+                            });
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error fetching favorites:', error);
+                    });
+            {% endif %}
         }
 
@@ -3218,9 +2805,7 @@
                 .then(data => {
                     if (data.success) {
-                        // Toggle the heart icon
                         icon.classList.toggle('far');
                         icon.classList.toggle('fas');
 
-                        // Update color immediately
                         if (icon.classList.contains('fas')) {
                             icon.style.color = '#e74c3c';
@@ -3231,5 +2816,4 @@
                         }
 
-                        // Reload favorites list page if needed
                         if (window.location.pathname === '/favorites/') {
                             window.location.reload();
@@ -3247,34 +2831,47 @@
         }
 
-        document.addEventListener('DOMContentLoaded', function () {
-            // Check if user is authenticated
-            {% if user.is_authenticated %}
-                // Get all favorite buttons
-                const favoriteButtons = document.querySelectorAll('.favorite-btn');
-
-                // Get list of favorited product IDs from the server
-                fetch('/get-favorites/')
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.success) {
-                            // For each product, check if it's favorited
-                            favoriteButtons.forEach(button => {
-                                const productId = button.getAttribute('data-product-id');
-                                if (data.favorites.includes(parseInt(productId))) {
-                                    // If favorited, set the heart to filled state
-                                    const icon = button.querySelector('i');
-                                    icon.classList.remove('far');
-                                    icon.classList.add('fas');
-                                    icon.style.color = '#e74c3c';
-                                }
-                            });
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error fetching favorites:', error);
-                    });
-            {% endif %}
-        });
-
+        function getCookie(name) {
+            let cookieValue = null;
+            if (document.cookie && document.cookie !== '') {
+                const cookies = document.cookie.split(';');
+                for (let cookie of cookies) {
+                    cookie = cookie.trim();
+                    if (cookie.startsWith(name + '=')) {
+                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                        break;
+                    }
+                }
+            }
+            return cookieValue;
+        }
+
+        function showInstructionModal() {
+            const modal = document.getElementById('instructionModal');
+            if (modal) {
+                modal.style.display = 'flex';
+            }
+        }
+
+        function closeTour() {
+            const modal = document.getElementById('instructionModal');
+            if (modal) {
+                modal.style.animation = 'modalExit 0.3s forwards';
+                setTimeout(() => {
+                    modal.style.display = 'none';
+                }, 300);
+            }
+        }
+
+        function updateSort() {
+            const sortSelect = document.getElementById('sort');
+            if (sortSelect) {
+                const sortValue = sortSelect.value;
+
+                const urlParams = new URLSearchParams(window.location.search);
+                urlParams.set('sort', sortValue);
+                urlParams.set('page', '1');
+                window.location.search = urlParams.toString();
+            }
+        }
     </script>
     <!-- Instruction Modal - Enhanced -->
@@ -3292,4 +2889,5 @@
                 <div class="instruction-step">
                     <div class="step-number">2</div>
+                    {#                    <span id="counter-{{ product.id }}">0</span>#}
                     <p>Кликнете на копчето <strong>"Додај"</strong> за да го вметнете производот во избраната листа.</p>
                 </div>
@@ -3303,31 +2901,9 @@
     </div>
 
-
-    {#    <!-- Arrow pointing to list selector -->#}
-    {#    <div id="listArrow" class="arrow-pointer pulse-arrow"#}
-    {#         style="width: 60px; height: 60px; position: absolute;">#}
-    {#        <svg viewBox="0 0 24 24" style="width: 100%; height: 100%;" preserveAspectRatio="xMidYMid meet"#}
-    {#             xmlns="http://www.w3.org/2000/svg">#}
-    {#            <path d="m14.707 12.707-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 1 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414z"#}
-    {#                  style="fill:rgba(31,63,31,0.93)"/>#}
-    {#        </svg>#}
-    {#    </div>#}
-
-
-    {#    <div id="navArrow" class="arrow-pointer pulse-arrow"#}
-    {#         style="position: absolute; width: 50px; height: 50px;">#}
-    {#        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"#}
-    {#             style="width: 100%; height: 100%;">#}
-    {#            <path d="M16 15a1 1 0 0 1-.707-.293L12 11.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4A1 1 0 0 1 16 15z"#}
-    {#                  style="fill:rgba(31,63,31,0.93)"/>#}
-    {#        </svg>#}
-    {#    </div>#}
-
-
     </div>
-    <button id="showInstructionsAgain"
-            style="position: fixed; bottom: 20px; right: 20px; background: #2e652e; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px;">
-        ?
-    </button>
+    {#    <button id="showInstructionsAgain"#}
+    {#            style="position: fixed; bottom: 20px; right: 20px; background: #2e652e; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px;">#}
+    {#        ?#}
+    {#    </button>#}
     </body>
 {% endblock %}
Index: main/templates/main/stats.html
===================================================================
--- main/templates/main/stats.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ main/templates/main/stats.html	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
@@ -16,935 +16,1042 @@
 </div>
 
-<div class="main-content">
-  <main class="content-area">
-    <div class="page-header">
-      <h2 class="section-title">Ценовна историја</h2>
-      <p class="page-description">Откријте ја историјата на цените на производите од вашите омилени продавници</p>
+<div class="stores-wrapper">
+    <div class="stores-container">
+        <!-- Header Section -->
+        <div class="stores-header">
+            <div class="header-content">
+                <h1 class="stores-main-title">Ценовна историја</h1>
+                <p class="stores-subtitle">Откријте ја историјата на цените на производите од вашите омилени продавници</p>
+            </div>
+            <div class="back-button">
+                <a href="{% url 'home' %}" class="back-link">
+                    <i class="fas fa-arrow-left"></i> Назад кон почетна
+                </a>
+            </div>
+        </div>
+
+        <!-- Search Card -->
+        <div class="search-card">
+            <form method="get" id="searchForm" class="store-search-form">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="store"><i class="fas fa-store"></i> Продавница:</label>
+                        <select name="store" id="store" required class="form-input">
+                            <option value="">-- Избери продавница --</option>
+                            <option value="Vero" {% if store == 'Vero' %}selected{% endif %}>Vero</option>
+                            <option value="Ramstore" {% if store == 'Ramstore' %}selected{% endif %}>Ramstore</option>
+                            <option value="Reptil" {% if store == 'Reptil' %}selected{% endif %}>Reptil</option>
+                            <option value="Zito" {% if store == 'Zito' %}selected{% endif %}>Zito</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="searchInput"><i class="fas fa-search"></i> Име на производ:</label>
+                        <input type="text" name="query" id="searchInput" value="{{ query }}" required
+                               class="form-input" placeholder="Внеси име на производ (латиница или кирилица)" autocomplete="off">
+                        <div id="suggestions" class="suggestions-container"></div>
+                    </div>
+                </div>
+
+                <div class="form-actions">
+                    <button type="submit" class="action-button primary-button">
+                        <i class="fas fa-search"></i> Пребарај
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        <!-- Main Content Area -->
+        <div class="main-content-area">
+            {% if similar_products %}
+            <div class="similar-products-section">
+                <h2 class="section-title"><i class="fas fa-lightbulb"></i> Слични производи</h2>
+                <div class="similar-products-grid">
+                    {% for p, similarity in similar_products %}
+                    <div class="similar-product-card" data-product="{{ p }}">
+                        <span class="product-name">{{ p }}</span>
+{#                        <span class="similarity-badge">{{ similarity|floatformat:2 }}% сличност</span>#}
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+            {% endif %}
+
+            <!-- Chart Section -->
+            <div class="results-section">
+                <h2 class="section-title"><i class="fas fa-chart-line"></i> Графикон на цени</h2>
+
+                <div class="chart-container" id="chartContainer">
+                    <div class="chart-header">
+                        <h3 class="chart-title" id="chartTitle">Изберете производ за да ја видите ценовната историја</h3>
+                        <div class="chart-actions" id="chartActions" style="display: none;"></div>
+                    </div>
+
+                    <div id="chartContent">
+                        <div class="no-data">
+                            <i class="fas fa-chart-bar"></i>
+                            <h4>Нема податоци за приказ</h4>
+                            <p>Изберете производ од листата за да ја видите неговата ценовната историја</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="stats-container" id="statsContainer" style="display: none;">
+                    <div class="stat-card">
+                        <div class="stat-icon"><i class="fas fa-tag"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="currentPrice">-</span>
+                            <span class="stat-label">Тековна цена</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon low"><i class="fas fa-arrow-down"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="lowestPrice">-</span>
+                            <span class="stat-label">Најниска цена</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon high"><i class="fas fa-arrow-up"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="highestPrice">-</span>
+                            <span class="stat-label">Највисока цена</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon avg"><i class="fas fa-balance-scale"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="averagePrice">-</span>
+                            <span class="stat-label">Просечна цена</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-
-    <div class="price-history-container">
-      <!-- Search panel -->
-      <div class="search-panel">
-        <div class="panel-header">
-          <i class="fas fa-search"></i>
-          <h3>Пребарај производи</h3>
-        </div>
-
-        <form method="get" id="searchForm" class="search-form">
-          <div class="form-group">
-            <label for="store">Продавница:</label>
-            <div class="select-wrapper">
-              <select name="store" id="store" required>
-                <option value="">-- Избери продавница --</option>
-                <option value="Vero" {% if store == 'Vero' %}selected{% endif %}>Vero</option>
-                <option value="Ramstore" {% if store == 'Ramstore' %}selected{% endif %}>Ramstore</option>
-                <option value="Reptil" {% if store == 'Reptil' %}selected{% endif %}>Reptil</option>
-                <option value="Zito" {% if store == 'Zito' %}selected{% endif %}>Zito</option>
-              </select>
-              <i class="fas fa-chevron-down"></i>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label for="query">Име на производ:</label>
-            <div class="input-wrapper">
-              <input type="text" name="query" id="query" value="{{ query }}" required placeholder="Внеси име на производ">
-              <i class="fas fa-tag"></i>
-            </div>
-          </div>
-
-          <button type="submit" class="search-btn">
-            <i class="fas fa-search"></i>
-            Пребарај
-          </button>
-        </form>
-
-        {% if similar_products %}
-        <div class="similar-products">
-          <div class="similar-header">
-            <i class="fas fa-lightbulb"></i>
-            <h3>Препорачани производи:</h3>
-          </div>
-          <div class="products-scroll-container">
-            {% for p, similarity in similar_products %}
-              <div class="product-item" data-product="{{ p }}">
-                <span class="product-name">{{ p }}</span>
-{#                <span class="similarity-badge">{{ similarity|floatformat:0 }}%</span>#}
-              </div>
-            {% endfor %}
-          </div>
-        </div>
-        {% endif %}
-      </div>
-
-      <!-- Chart panel -->
-      <div class="chart-panel">
-        <div class="panel-header">
-          <i class="fas fa-chart-line"></i>
-          <h3>Графикон на цени</h3>
-        </div>
-
-        <div class="chart-container" id="chartContainer">
-          <div class="chart-header">
-            <h3 class="chart-title" id="chartTitle">Изберете производ за да ја видите ценовната историја</h3>
-            <div class="chart-actions" id="chartActions" style="display: none;">
-              <button class="chart-btn export-btn" id="downloadChart">
-                <i class="fas fa-download"></i>
-                <span>Сними</span>
-              </button>
-              <button class="chart-btn info-btn" id="chartInfo">
-                <i class="fas fa-info-circle"></i>
-                <span>Инфо</span>
-              </button>
-            </div>
-          </div>
-
-          <div id="chartContent">
-            <div class="no-data">
-              <div class="no-data-icon">
-                <i class="fas fa-chart-bar"></i>
-              </div>
-              <h4>Нема податоци за приказ</h4>
-              <p>Изберете производ од листата за да ја видите неговата ценовна историја</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="stats-container" id="statsContainer" style="display: none;">
-          <div class="stat-card">
-            <div class="stat-icon">
-              <i class="fas fa-tag"></i>
-            </div>
-            <div class="stat-info">
-              <span class="stat-value" id="currentPrice">-</span>
-              <span class="stat-label">Тековна цена</span>
-            </div>
-          </div>
-
-          <div class="stat-card">
-            <div class="stat-icon low">
-              <i class="fas fa-arrow-down"></i>
-            </div>
-            <div class="stat-info">
-              <span class="stat-value" id="lowestPrice">-</span>
-              <span class="stat-label">Најниска цена</span>
-            </div>
-          </div>
-
-          <div class="stat-card">
-            <div class="stat-icon high">
-              <i class="fas fa-arrow-up"></i>
-            </div>
-            <div class="stat-info">
-              <span class="stat-value" id="highestPrice">-</span>
-              <span class="stat-label">Највисока цена</span>
-            </div>
-          </div>
-
-          <div class="stat-card">
-            <div class="stat-icon avg">
-              <i class="fas fa-balance-scale"></i>
-            </div>
-            <div class="stat-info">
-              <span class="stat-value" id="averagePrice">-</span>
-              <span class="stat-label">Просечна цена</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
 </div>
 
-<!-- Styles -->
+<!-- Chart.js -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<script>
+let priceChart = null;
+
+// Show messages
+document.querySelectorAll('.alert').forEach(alert => {
+    setTimeout(() => alert.classList.add('show'), 100);
+    setTimeout(() => { alert.remove(); }, 5000);
+});
+
+// Handle product click
+document.querySelectorAll('.similar-product-card').forEach(item => {
+    item.addEventListener('click', async function() {
+        document.querySelectorAll('.similar-product-card').forEach(i => i.classList.remove('active'));
+        this.classList.add('active');
+
+        const productName = this.dataset.product;
+        const store = document.querySelector('#store').value;
+        if (!store) {
+            showNotification("Ве молам изберете продавница прво.", "error");
+            return;
+        }
+
+        document.getElementById('chartTitle').innerText = `Историја на цени за: ${productName}`;
+        document.getElementById('chartActions').style.display = 'flex';
+        document.getElementById('chartContent').innerHTML = '<div class="loading-spinner"><div class="spinner"></div><p>Вчитување на податоци...</p></div>';
+        document.getElementById('statsContainer').style.display = 'grid';
+        document.querySelectorAll('.stat-value').forEach(el => el.innerText = '...');
+
+        try {
+            const res = await fetch(`/api/product-history/?store=${store}&product=${encodeURIComponent(productName)}`);
+            const data = await res.json();
+
+            if (!data?.data?.length) {
+                document.getElementById('chartContent').innerHTML = `
+                    <div class="no-data">
+                        <i class="fas fa-exclamation-circle"></i>
+                        <h4>Нема податоци за цени</h4>
+                        <p>Не се пронајдени записи за цени на овој производ</p>
+                    </div>`;
+                document.getElementById('statsContainer').style.display = 'none';
+                return;
+            }
+
+            const sorted = data.data.sort((a,b)=> new Date(a.date)-new Date(b.date));
+            const labels = sorted.map(e=>e.date);
+            const prices = sorted.map(e=>parseFloat(e.price));
+
+            document.getElementById('currentPrice').innerText = prices[prices.length-1] + " МКД";
+            document.getElementById('lowestPrice').innerText = Math.min(...prices) + " МКД";
+            document.getElementById('highestPrice').innerText = Math.max(...prices) + " МКД";
+            document.getElementById('averagePrice').innerText = (prices.reduce((a,b)=>a+b,0)/prices.length).toFixed(2) + " МКД";
+
+            document.getElementById('chartContent').innerHTML = '<canvas id="priceChart"></canvas>';
+            const ctx = document.getElementById('priceChart').getContext('2d');
+            if (priceChart) priceChart.destroy();
+
+            priceChart = new Chart(ctx, {
+                type:'line',
+                data:{
+                    labels: labels,
+                    datasets:[{
+                        label:'Цена (МКД)',
+                        data: prices,
+                        borderColor:'#2e652e',
+                        backgroundColor:'rgba(46,101,46,0.1)',
+                        fill:true,
+                        tension: 0.3,
+                        borderWidth: 2,
+                        pointBackgroundColor: '#2e652e',
+                        pointRadius: 4,
+                        pointHoverRadius: 6
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                        },
+                        tooltip: {
+                            mode: 'index',
+                            intersect: false,
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: false,
+                            title: {
+                                display: true,
+                                text: 'Цена (МКД)'
+                            }
+                        },
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Датум'
+                            }
+                        }
+                    }
+                }
+            });
+
+        } catch(err){
+            console.error(err);
+            document.getElementById('chartContent').innerHTML = `
+                <div class="no-data">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    <h4>Грешка при вчитување</h4>
+                    <p>Настана грешка при вчитување на податоците</p>
+                </div>`;
+            document.getElementById('statsContainer').style.display = 'none';
+        }
+    });
+});
+
+// ==================== Transliteration + Search Suggestions ====================
+document.addEventListener('DOMContentLoaded', function () {
+    const searchInput = document.getElementById('searchInput');
+    const suggestionsDiv = document.getElementById('suggestions');
+    const searchForm = document.getElementById('searchForm');
+
+    // Enhanced transliteration function
+    function transliterateLatinToCyrillic(text) {
+        const map = {
+            'dzh': 'џ', 'dz': 'ѕ', 'zh': 'ж', 'ch': 'ч', 'sh': 'ш',
+            'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'gj': 'ѓ',
+            'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д',
+            'e': 'е', 'z': 'з', 'i': 'и', 'j': 'ј', 'k': 'к',
+            'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п',
+            'r': 'р', 's': 'с', 't': 'т', 'u': 'у', 'f': 'ф',
+            'h': 'х', 'c': 'ц', 'y': 'ј', 'w': 'в', 'x': 'кс',
+            'q': 'к'
+        };
+
+        let result = '';
+        let i = 0;
+        const t = text.toLowerCase();
+
+        while (i < t.length) {
+            let found = false;
+
+            // Check for 3-character sequences first
+            if (i + 2 < t.length && map[t.substring(i, i + 3)]) {
+                result += map[t.substring(i, i + 3)];
+                i += 3;
+                found = true;
+            }
+            // Check for 2-character sequences
+            else if (i + 1 < t.length && map[t.substring(i, i + 2)]) {
+                result += map[t.substring(i, i + 2)];
+                i += 2;
+                found = true;
+            }
+            // Check for single characters
+            else if (map[t[i]]) {
+                result += map[t[i]];
+                i++;
+                found = true;
+            }
+
+            // If no mapping found, keep the original character
+            if (!found) {
+                result += t[i];
+                i++;
+            }
+        }
+
+        return result;
+    }
+
+    // Handle form submission with transliteration
+    searchForm.addEventListener('submit', function(e) {
+        const query = searchInput.value.trim();
+        if (query) {
+            // Check if the query is in Latin script
+            const isLatin = /[a-zA-Z]/.test(query) && !/[а-яА-Я]/.test(query);
+
+            if (isLatin) {
+                // Convert Latin to Cyrillic for search
+                const cyrillicQuery = transliterateLatinToCyrillic(query);
+
+                // Create a hidden input to submit the Cyrillic version
+                const hiddenInput = document.createElement('input');
+                hiddenInput.type = 'hidden';
+                hiddenInput.name = 'query_cyr';
+                hiddenInput.value = cyrillicQuery;
+
+                // Add to form and submit
+                this.appendChild(hiddenInput);
+            }
+        }
+    });
+
+    async function fetchSuggestions(query){
+        const store = document.querySelector('#store').value;
+        if(!store) {
+            suggestionsDiv.style.display='none';
+            return [];
+        }
+
+        // Check if query is in Latin and transliterate
+        const isLatin = /[a-zA-Z]/.test(query) && !/[а-яА-Я]/.test(query);
+        const searchQuery = isLatin ? transliterateLatinToCyrillic(query) : query;
+
+        try {
+            const res = await fetch(`/api/similar-products/?store=${store}&q=${encodeURIComponent(searchQuery)}`);
+            const data = await res.json();
+            return data.products || [];
+        } catch (error) {
+            console.error("Error fetching suggestions:", error);
+            return [];
+        }
+    }
+
+    searchInput.addEventListener('input', async function(){
+        const val = this.value.trim();
+        if(!val) {
+            suggestionsDiv.style.display='none';
+            return;
+        }
+
+        const suggestions = await fetchSuggestions(val);
+
+        if(suggestions.length){
+            suggestionsDiv.innerHTML = suggestions.map(p=>`<div class="suggestion-item" data-product="${p}">${p}</div>`).join('');
+            suggestionsDiv.style.display='block';
+
+            document.querySelectorAll('.suggestion-item').forEach(el=>{
+                el.addEventListener('click', function(){
+                    searchInput.value = this.dataset.product;
+                    suggestionsDiv.style.display='none';
+                });
+            });
+        } else {
+            suggestionsDiv.style.display='none';
+        }
+    });
+
+    document.addEventListener('click', e=>{
+        if(!suggestionsDiv.contains(e.target) && e.target!==searchInput) {
+            suggestionsDiv.style.display='none';
+        }
+    });
+});
+
+function showNotification(message, type) {
+    // Remove any existing notifications
+    const existingNotifications = document.querySelectorAll('.notification');
+    existingNotifications.forEach(notif => notif.remove());
+
+    const notification = document.createElement('div');
+    notification.className = `notification ${type}`;
+    notification.innerHTML = `
+        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
+        <span>${message}</span>
+        <button onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
+    `;
+
+    document.body.appendChild(notification);
+
+    // Auto remove after 5 seconds
+    setTimeout(() => {
+        if (notification.parentElement) {
+            notification.remove();
+        }
+    }, 5000);
+}
+</script>
+
 <style>
 :root {
-  --primary: #2e652e;
-  --primary-light: #4caf50;
-  --primary-dark: #1f3f1f;
-  --secondary: #ff9800;
-  --bg: #f8f9fa;
-  --card-bg: #ffffff;
-  --white: #fff;
-  --border: #e0e0e0;
-  --text: #333333;
-  --text-light: #666666;
-  --text-lighter: #888888;
-  --success: #4caf50;
-  --warning: #ff9800;
-  --danger: #f44336;
-  --info: #2196f3;
-  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
-  --radius: 12px;
-  --radius-sm: 8px;
-  --transition: all 0.3s ease;
+    --primary: #2e652e;
+    --primary-dark: #1f3f1f;
+    --primary-light: #81c784;
+    --accent: #4caf50;
+    --text: #333;
+    --text-light: #666;
+    --background: #f9f9f9;
+    --card-bg: #ffffff;
+    --border: #e0e0e0;
+    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
+    --success: #4caf50;
+    --error: #f44336;
 }
 
 * {
-  box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
 }
 
 body {
-  background: var(--bg);
     font-family: Arial, sans-serif;
-  margin: 0;
-  color: var(--text);
-  line-height: 1.6;
-}
-
-.main-content {
-  display: flex;
-  max-width: 1400px;
-  margin: 20px auto;
-  padding: 0 20px;
-  gap: 25px;
-}
-
-.header-search input{
+    background: var(--background);
+    color: var(--text);
+    line-height: 1.6;
+}
+
+.stores-wrapper {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.stores-container {
+    background: var(--card-bg);
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: var(--shadow);
+}
+
+.stores-header {
+    background: linear-gradient(135deg, rgba(46,101,46,0.9) 0%, rgba(76,175,80,0.8) 100%), url('{% static "images/baner1.jpg" %}') center/cover no-repeat;
+    color: white;
+    padding: 30px;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.header-content {
+    max-width: 70%;
+}
+
+.stores-main-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 10px;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.stores-subtitle {
+    font-size: 1.1rem;
+    opacity: 0.9;
+    font-weight: 300;
+}
+
+.back-button {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+.back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 30px;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.back-link:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: translateY(-2px);
+}
+
+.search-card {
+    padding: 30px;
+    border-bottom: 1px solid var(--border);
+}
+
+.form-row {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.form-group {
+    flex: 1;
+    min-width: 250px;
+    position: relative;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--primary);
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.form-input, select {
     width: 100%;
-}
-
-.content-area {
-  flex-grow: 1;
-  background: var(--card-bg);
-  border-radius: var(--radius);
-  padding: 25px;
-  box-shadow: var(--shadow);
-}
-
-.page-header {
-  margin-bottom: 30px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid var(--border);
+    padding: 14px 16px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background: var(--card-bg);
+}
+
+.form-input:focus, select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.1);
+}
+
+.form-actions {
+    display: flex;
+    gap: 15px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+}
+
+.action-button {
+    padding: 14px 28px;
+    border-radius: 10px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    border: none;
+    font-size: 1rem;
+}
+
+.primary-button {
+    background: var(--primary);
+    color: white;
+}
+
+.primary-button:hover {
+    background: var(--primary-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(46, 101, 46, 0.2);
+}
+
+/* Main content area with side-by-side layout */
+.main-content-area {
+    display: flex;
+    padding: 20px;
+    gap: 30px;
+    align-items: flex-start;
+}
+
+.similar-products-section {
+    flex: 0 0 35%;
+    max-width: 35%;
+    padding: 20px;
+    background: var(--card-bg);
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+}
+
+.results-section {
+    flex: 1;
+    min-width: 0;
 }
 
 .section-title {
-  font-size: 1.8rem;
-  color: var(--primary);
-  margin: 0 0 8px 0;
-  font-weight: 700;
-}
-
-.page-description {
-  color: var(--text-light);
-  margin: 0;
-  font-size: 1rem;
-}
-
-.price-history-container {
-  display: flex;
-  gap: 25px;
-  flex-wrap: wrap;
-}
-
-.search-panel, .chart-panel {
-  background: var(--card-bg);
-  border-radius: var(--radius);
-  padding: 0;
-  box-shadow: var(--shadow);
-  transition: var(--transition);
-}
-
-.search-panel:hover, .chart-panel:hover {
-  box-shadow: var(--shadow-hover);
-}
-
-.search-panel {
-  flex: 1 1 320px;
-  max-width: 380px;
-}
-
-.chart-panel {
-  flex: 2 1 600px;
-  min-width: 340px;
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  padding: 20px 25px;
-  border-bottom: 1px solid var(--border);
-  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-  color: white;
-  border-radius: var(--radius) var(--radius) 0 0;
-}
-
-.panel-header i {
-  margin-right: 12px;
-  font-size: 1.2rem;
-}
-
-.panel-header h3 {
-  margin: 0;
-  font-size: 1.2rem;
-  font-weight: 600;
-}
-
-.search-form {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 25px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.form-group label {
-  font-weight: 600;
-  font-size: 0.95rem;
-  color: var(--text);
-}
-
-.select-wrapper, .input-wrapper {
-  position: relative;
-}
-
-.select-wrapper i, .input-wrapper i {
-  position: absolute;
-  right: 15px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--text-lighter);
-  pointer-events: none;
-}
-
-.form-group input, .form-group select {
-  padding: 14px 15px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  font-size: 1rem;
-  width: 100%;
-  transition: var(--transition);
-  background: var(--white);
-  appearance: none;
-}
-
-.form-group input:focus, .form-group select:focus {
-  outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.2);
-}
-
-.search-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  padding: 14px;
-  border: none;
-  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-  color: #fff;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: var(--transition);
-  font-weight: 600;
-  font-size: 1rem;
-  margin-top: 10px;
-}
-
-.search-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(46, 101, 46, 0.3);
-}
-
-.similar-products {
-  margin-top: 20px;
-  border-top: 1px solid var(--border);
-  padding: 25px;
-}
-
-.similar-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-.similar-header i {
-  color: var(--secondary);
-  margin-right: 10px;
-  font-size: 1.1rem;
-}
-
-.similar-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-  color: var(--text);
-}
-
-.products-scroll-container {
-  max-height: 300px;
-  overflow-y: auto;
-  padding-right: 5px;
-}
-
-.products-scroll-container::-webkit-scrollbar {
-  width: 6px;
-}
-
-.products-scroll-container::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 10px;
-}
-
-.products-scroll-container::-webkit-scrollbar-thumb {
-  background: var(--primary);
-  border-radius: 10px;
-}
-
-.products-scroll-container::-webkit-scrollbar-thumb:hover {
-  background: var(--primary-dark);
-}
-
-.product-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 15px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  margin-bottom: 10px;
-  cursor: pointer;
-  transition: var(--transition);
-  background: var(--white);
-}
-
-.product-item:hover {
-  background: #eef8ee;
-  border-color: var(--primary-light);
-  transform: translateX(5px);
-}
-
-.product-item.active {
-  background: var(--primary);
-  color: #fff;
-  border-color: var(--primary);
+    font-size: 1.5rem;
+    margin-bottom: 25px;
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.similar-products-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 15px;
+    max-height: 600px;
+    overflow-y: auto;
+    padding-right: 10px;
+}
+
+.similar-products-grid::-webkit-scrollbar {
+    width: 8px;
+}
+
+.similar-products-grid::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+
+.similar-products-grid::-webkit-scrollbar-thumb {
+    background: var(--primary-light);
+    border-radius: 10px;
+}
+
+.similar-products-grid::-webkit-scrollbar-thumb:hover {
+    background: var(--primary);
+}
+
+.similar-product-card {
+    background: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: var(--shadow);
+    transition: all 0.3s ease;
+    border-left: 4px solid var(--primary-light);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+
+.similar-product-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-hover);
+}
+
+.similar-product-card.active {
+    background: #e8f5e9;
+    border-left: 4px solid var(--primary);
 }
 
 .product-name {
-  flex: 1;
-  font-weight: 500;
+    font-weight: 500;
+    color: var(--text);
+    flex: 1;
 }
 
 .similarity-badge {
-  background: var(--secondary);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 20px;
-  font-size: 0.8rem;
-  font-weight: 600;
+    background: var(--primary-light);
+    color: var(--primary-dark);
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-left: 10px;
 }
 
 .chart-container {
-  display: flex;
-  flex-direction: column;
-  min-height: 300px;
-  padding: 25px;
+    background: var(--card-bg);
+    border-radius: 12px;
+    padding: 25px;
+    box-shadow: var(--shadow);
+    margin-bottom: 25px;
+    min-height: 500px;
+    display: flex;
+    flex-direction: column;
 }
 
 .chart-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-  gap: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 15px;
 }
 
 .chart-title {
-  font-size: 1.2rem;
-  color: var(--text);
-  margin: 0;
-  font-weight: 600;
+    font-size: 1.2rem;
+    color: var(--text);
+    margin: 0;
+    font-weight: 600;
 }
 
 .chart-actions {
-  display: flex;
-  gap: 10px;
+    display: flex;
+    gap: 10px;
 }
 
 .chart-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 15px;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: var(--transition);
-  font-weight: 500;
-  font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 15px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    font-size: 0.9rem;
 }
 
 .export-btn {
-  background: var(--primary);
-  color: white;
+    background: var(--primary);
+    color: white;
 }
 
 .export-btn:hover {
-  background: var(--primary-dark);
+    background: var(--primary-dark);
 }
 
 .info-btn {
-  background: var(--info);
-  color: white;
+    background: #2196f3;
+    color: white;
 }
 
 .info-btn:hover {
-  background: #0b7dda;
+    background: #0b7dda;
+}
+
+#chartContent {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+#priceChart {
+    flex: 1;
+    min-height: 400px;
 }
 
 .no-data {
-  text-align: center;
-  color: var(--text-light);
-  padding: 40px 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 300px;
-}
-
-.no-data-icon {
-  font-size: 3.5rem;
-  margin-bottom: 15px;
-  color: #ddd;
+    text-align: center;
+    color: var(--text-light);
+    padding: 40px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    flex: 1;
+}
+
+.no-data i {
+    font-size: 3.5rem;
+    margin-bottom: 15px;
+    color: #ddd;
 }
 
 .no-data h4 {
-  font-size: 1.3rem;
-  margin: 0 0 10px 0;
-  color: var(--text-light);
+    font-size: 1.3rem;
+    margin: 0 0 10px 0;
+    color: var(--text-light);
 }
 
 .no-data p {
-  margin: 0;
-  font-size: 1rem;
+    margin: 0;
+    font-size: 1rem;
 }
 
 .loading-spinner {
-  width: 50px;
-  height: 50px;
-  border: 4px solid rgba(46, 101, 46, 0.2);
-  border-top-color: var(--primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 40px auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 30px;
+    text-align: center;
+    flex: 1;
+}
+
+.spinner {
+    width: 60px;
+    height: 60px;
+    border: 4px solid rgba(46, 101, 46, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid var(--primary);
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 
 .stats-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 15px;
-  padding: 20px 25px;
-  border-top: 1px solid var(--border);
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
 }
 
 .stat-card {
-  display: flex;
-  align-items: center;
-  padding: 15px;
-  background: var(--white);
-  border-radius: var(--radius-sm);
-  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
-  transition: var(--transition);
+    background: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: var(--shadow);
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
 }
 
 .stat-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-hover);
 }
 
 .stat-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 15px;
-  background: rgba(46, 101, 46, 0.1);
-  color: var(--primary);
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 15px;
+    background: rgba(46, 101, 46, 0.1);
+    color: var(--primary);
+    font-size: 1.2rem;
 }
 
 .stat-icon.low {
-  background: rgba(76, 175, 80, 0.1);
-  color: var(--success);
+    background: rgba(76, 175, 80, 0.1);
+    color: var(--success);
 }
 
 .stat-icon.high {
-  background: rgba(244, 67, 54, 0.1);
-  color: var(--danger);
+    background: rgba(244, 67, 54, 0.1);
+    color: var(--error);
 }
 
 .stat-icon.avg {
-  background: rgba(33, 150, 243, 0.1);
-  color: var(--info);
+    background: rgba(33, 150, 243, 0.1);
+    color: #2196f3;
 }
 
 .stat-info {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .stat-value {
-  font-size: 1.3rem;
-  font-weight: 700;
-  color: var(--text);
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 5px;
 }
 
 .stat-label {
-  font-size: 0.85rem;
-  color: var(--text-light);
+    font-size: 0.9rem;
+    color: var(--text-light);
+}
+.stores-wrapper{
+    margin-left: 60px;
+    margin-right: 60px;
 }
 
 .message-container {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
 .alert {
-  position: relative;
-  padding: 15px 20px;
-  background: var(--card-bg);
-  border-left: 4px solid var(--primary);
-  border-radius: 6px;
-  box-shadow: var(--shadow);
-  opacity: 0;
-  transform: translateX(100%);
-  transition: 0.4s;
-  max-width: 350px;
+    position: relative;
+    padding: 15px 20px;
+    background: var(--card-bg);
+    border-left: 4px solid var(--primary);
+    border-radius: 6px;
+    box-shadow: var(--shadow);
+    opacity: 0;
+    transform: translateX(100%);
+    transition: 0.4s;
+    max-width: 350px;
 }
 
 .alert.show {
-  opacity: 1;
-  transform: translateX(0);
+    opacity: 1;
+    transform: translateX(0);
 }
 
 .close-btn {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  cursor: pointer;
-  font-weight: bold;
-  font-size: 1.2rem;
-  color: var(--text-light);
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 1.2rem;
+    color: var(--text-light);
 }
 
 .close-btn:hover {
-  color: var(--text);
-}
-
-@media (max-width: 1024px) {
-  .main-content {
-    flex-direction: column;
-  }
-
-  .stats-container {
-    grid-template-columns: repeat(2, 1fr);
-  }
+    color: var(--text);
+}
+
+.suggestions-container {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid var(--border);
+    border-radius: 0 0 8px 8px;
+    box-shadow: var(--shadow);
+    z-index: 100;
+    display: none;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.suggestion-item {
+    padding: 12px 15px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.suggestion-item:hover {
+    background: #e8f5e9;
+}
+
+.suggestion-item:last-child {
+    border-bottom: none;
+}
+
+/* Notification system */
+.notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 15px 20px;
+    border-radius: 10px;
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    box-shadow: var(--shadow);
+    z-index: 1000;
+    animation: slideIn 0.3s ease;
+    max-width: 350px;
+}
+
+.notification.success {
+    background: var(--success);
+}
+
+.notification.error {
+    background: var(--error);
+}
+
+.notification button {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Responsive design */
+@media (max-width: 1200px) {
+    .main-content-area {
+        flex-direction: column;
+    }
+
+    .similar-products-section {
+        flex: 1;
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .similar-products-grid {
+        max-height: 300px;
+    }
 }
 
 @media (max-width: 768px) {
-  .main-content {
-    padding: 0 15px;
-    margin: 15px auto;
-  }
-
-  .content-area {
-    padding: 20px;
-  }
-
-  .price-history-container {
-    flex-direction: column;
-    gap: 20px;
-  }
-
-  .search-panel, .chart-panel {
-    max-width: 100%;
-    min-width: 100%;
-  }
-
-  .chart-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .chart-actions {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .stats-container {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 480px) {
-  .section-title {
-    font-size: 1.5rem;
-  }
-
-  .search-form {
-    padding: 20px;
-  }
-
-  .similar-products, .chart-container {
-    padding: 20px;
-  }
+    .stores-header {
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .header-content {
+        max-width: 100%;
+    }
+
+    .back-button {
+        position: relative;
+        top: 0;
+        right: 0;
+        align-self: flex-end;
+    }
+
+    .stores-main-title {
+        font-size: 2rem;
+    }
+
+    .form-row {
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .form-group {
+        min-width: 100%;
+    }
+
+    .form-actions {
+        flex-direction: column;
+    }
+
+    .action-button {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .stats-container {
+        grid-template-columns: 1fr;
+    }
+
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .chart-actions {
+        width: 100%;
+        justify-content: center;
+    }
 }
 </style>
 
-<!-- Chart.js -->
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.1/dist/chartjs-plugin-zoom.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
-
-<script>
-let priceChart = null;
-
-// Animate messages
-document.querySelectorAll('.alert').forEach(alert => {
-  setTimeout(() => alert.classList.add('show'), 100);
-  setTimeout(() => {
-    alert.style.opacity = '0';
-    setTimeout(() => alert.remove(), 300);
-  }, 5000);
-});
-
-// Cyrillic transliteration
-const cyrMap = {a:"а",b:"б",v:"в",g:"г",d:"д",e:"е",zh:"ж",z:"з",i:"и",j:"ј",k:"к",l:"л",m:"м",n:"н",o:"о",p:"п",r:"р",s:"с",t:"т",u:"у",f:"ф",h:"х",c:"ц",ch:"ч",sh:"ш",dj:"џ",lj:"љ",nj:"њ",y:"ј",w:"в",x:"кс",q:"ќ"};
-
-function latinToCyrillic(str) {
-  str = str.toLowerCase();
-  for(let k in cyrMap) {
-    str = str.replace(new RegExp(k, "g"), cyrMap[k]);
-  }
-  return str;
-}
-
-// Handle similar product clicks
-document.querySelectorAll('.product-item').forEach(item => {
-  item.addEventListener('click', async function() {
-    document.querySelectorAll('.product-item').forEach(i => i.classList.remove('active'));
-    this.classList.add('active');
-
-    let productName = this.dataset.product;
-    const store = document.querySelector('#store').value;
-    if (!store) {
-      showMessage("Ве молам изберете продавница прво.", "warning");
-      return;
-    }
-
-    const cyrName = latinToCyrillic(productName);
-    document.getElementById('chartActions').style.display = 'flex';
-    document.getElementById('chartTitle').innerText = `Историја на цени за: ${productName}`;
-    document.getElementById('chartContent').innerHTML = '<div class="loading-spinner"></div>';
-
-    // Show loading state for stats
-    document.getElementById('statsContainer').style.display = 'grid';
-    document.querySelectorAll('.stat-value').forEach(el => {
-      el.innerText = '...';
-    });
-
-    try {
-      const res = await fetch(`/api/product-history/?store=${store}&product=${encodeURIComponent(cyrName)}`);
-      const data = await res.json();
-
-      if (!data?.data?.length) {
-        document.getElementById('chartContent').innerHTML = `
-          <div class="no-data">
-            <div class="no-data-icon">
-              <i class="fas fa-exclamation-circle"></i>
-            </div>
-            <h4>Нема податоци за цените</h4>
-            <p>Не се пронајдени записи за цени на овој производ</p>
-          </div>`;
-        document.getElementById('statsContainer').style.display = 'none';
-        return;
-      }
-
-      // Process data for chart
-      const sortedData = data.data.sort((a, b) => new Date(a.date) - new Date(b.date));
-      const labels = sortedData.map(e => new Date(e.date));
-      const prices = sortedData.map(e => parseFloat(e.price));
-
-      // Calculate stats
-      const currentPrice = prices[prices.length - 1];
-      const lowestPrice = Math.min(...prices);
-      const highestPrice = Math.max(...prices);
-      const averagePrice = (prices.reduce((a, b) => a + b, 0) / prices.length).toFixed(2);
-
-      // Update stats
-      document.getElementById('currentPrice').innerText = `${currentPrice} МКД`;
-      document.getElementById('lowestPrice').innerText = `${lowestPrice} МКД`;
-      document.getElementById('highestPrice').innerText = `${highestPrice} МКД`;
-      document.getElementById('averagePrice').innerText = `${averagePrice} МКД`;
-
-      // Render chart
-      document.getElementById('chartContent').innerHTML = '<canvas id="priceChart"></canvas>';
-      const ctx = document.getElementById('priceChart').getContext('2d');
-
-      if (priceChart) priceChart.destroy();
-
-      priceChart = new Chart(ctx, {
-        type: 'line',
-        data: {
-          labels: labels,
-          datasets: [{
-            label: 'Цена (МКД)',
-            data: prices,
-            borderColor: '#2e652e',
-            backgroundColor: 'rgba(46, 101, 46, 0.1)',
-            fill: true,
-            tension: 0.2,
-            pointBackgroundColor: '#fff',
-            pointBorderColor: '#2e652e',
-            pointBorderWidth: 2,
-            pointRadius: 4,
-            pointHoverRadius: 6
-          }]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: true,
-          plugins: {
-            legend: {
-              display: false
-            },
-            tooltip: {
-              mode: 'index',
-              intersect: false,
-              callbacks: {
-                label: function(context) {
-                  return `Цена: ${context.parsed.y} МКД`;
-                },
-                title: function(context) {
-                  return new Date(context[0].parsed.x).toLocaleDateString('mk-MK');
-                }
-              }
-            },
-            zoom: {
-              zoom: {
-                wheel: {
-                  enabled: true,
-                },
-                pinch: {
-                  enabled: true
-                },
-                mode: 'x',
-              },
-              pan: {
-                enabled: true,
-                mode: 'x',
-              }
-            }
-          },
-          scales: {
-            x: {
-              type: 'time',
-              time: {
-                unit: 'day',
-                tooltipFormat: 'dd MMM yyyy',
-                displayFormats: {
-                  day: 'dd MMM'
-                }
-              },
-              title: {
-                display: true,
-                text: 'Датум'
-              }
-            },
-            y: {
-              title: {
-                display: true,
-                text: 'Цена (МКД)'
-              },
-              grace: '5%'
-            }
-          }
-        }
-      });
-
-    } catch (err) {
-      console.error(err);
-      document.getElementById('chartContent').innerHTML = `
-        <div class="no-data">
-          <div class="no-data-icon">
-            <i class="fas fa-exclamation-triangle"></i>
-          </div>
-          <h4>Грешка при вчитување</h4>
-          <p>Настана грешка при вчитување на податоците. Обидете се повторно.</p>
-        </div>`;
-      document.getElementById('statsContainer').style.display = 'none';
-    }
-  });
-});
-
-// Download chart
-document.getElementById('downloadChart')?.addEventListener('click', () => {
-  if (priceChart) {
-    const link = document.createElement('a');
-    link.download = 'price-history.png';
-    link.href = priceChart.toBase64Image();
-    link.click();
-  } else {
-    showMessage("Нема графикон за снимање.", "warning");
-  }
-});
-
-// Chart info button
-document.getElementById('chartInfo')?.addEventListener('click', () => {
-  showMessage("Користете го тркалчето на глушецот за да зумирате или влечете за да панорамирате графиконот.", "info");
-});
-
-// Helper function to show messages
-function showMessage(message, type) {
-  const messageContainer = document.querySelector('.message-container');
-  const alert = document.createElement('div');
-  alert.className = `alert alert-${type}`;
-  alert.innerHTML = `
-    ${message}
-    <span class="close-btn" onclick="this.parentElement.remove()">×</span>
-  `;
-
-  messageContainer.appendChild(alert);
-
-  setTimeout(() => alert.classList.add('show'), 100);
-  setTimeout(() => {
-    alert.style.opacity = '0';
-    setTimeout(() => alert.remove(), 300);
-  }, 5000);
-}
-
-// Add event listener for form submission to show loading state
-document.getElementById('searchForm').addEventListener('submit', function() {
-  const store = document.querySelector('#store').value;
-  const query = document.querySelector('#query').value;
-
-  if (!store || !query) {
-    return; // Let browser handle validation
-  }
-
-  // Show loading state for similar products
-  const similarProducts = document.querySelector('.similar-products');
-  if (similarProducts) {
-    similarProducts.innerHTML = '<div class="loading-spinner"></div>';
-  }
-});
-</script>
-
 {% endblock %}
Index: main/urls.py
===================================================================
--- main/urls.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ main/urls.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
@@ -47,6 +47,9 @@
     path('api/product-history/', views.product_history_api, name='product_history_api'),
     path("accounts/", include("allauth.urls")),
-    path('admin/', admin.site.urls),  # <<< Add this line
-    # provides login, logout, callbacks
+    path('admin/', admin.site.urls),
+    path("api/lists/<int:list_id>/cheaper/", views.generate_cheaper_list, name="generate_cheaper_list"),
+    path('update-list-item/<int:item_id>/', views.update_list_item, name='update_list_item'),
+
+
 
 ]
Index: main/utils/similarity.py
===================================================================
--- main/utils/similarity.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ main/utils/similarity.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
@@ -10,5 +10,5 @@
 
 STOPWORDS = {
-    "парче", "свежо", "парчиња", "грам", "г.", "ком", "комад", "број", "бр", "парчиња", "(Р)","крекери","чоколадо","kg","кг","/","млад","млади",
+    "млад", "млади", "свежо", "голем", "мал", "ситен", "парче", "парчиња", "грам", "г.", "ком", "комад", "бр", "(Р)"
 }
 
@@ -36,9 +36,9 @@
     for p in filtered_products:
         try:
-            product_keywords = set(tokenize(p['name']))
+            product_keywords = set([k for k in tokenize(p['name']) if k not in STOPWORDS])
             common_keywords = query_keywords & product_keywords
 
             if len(common_keywords) == 0:
-                continue  # skip if no overlap
+                continue
 
             keyword_score = sum(keyword_freq[k] for k in common_keywords)
@@ -63,5 +63,5 @@
                 store_bonus -= 5
 
-            total_score = keyword_score + bonus + (sim * 5) + store_bonus
+            total_score = keyword_score + bonus + (sim * 2) + store_bonus
 
             results.append({
Index: main/views.py
===================================================================
--- main/views.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ main/views.py	(revision d4d5affd0822dce729ed3aea4f48627692ce7884)
@@ -349,7 +349,36 @@
 
     # Debugging: Log the items being passed to the template
-    print(f"Items in list {shopping_list.name}: {items}")
+    # print(f"Items in list {shopping_list.name}: {items}")
 
     return render(request, 'main/list_detail.html', {'shopping_list': shopping_list, 'items': items})
+
+@login_required
+@csrf_exempt   # ако користиш fetch без CSRF token
+def update_list_item(request, item_id):
+    if request.method == "POST":
+        try:
+            data = json.loads(request.body)
+            item = get_object_or_404(ShoppingListItem, id=item_id, shopping_list__user=request.user)
+
+            # quantity update
+            if "quantity" in data:
+                item.quantity = int(data["quantity"])
+
+            # checked update (ако го користиш)
+            if "checked" in data:
+                item.checked = bool(data["checked"])
+
+            item.save()
+
+            return JsonResponse({
+                "success": True,
+                "id": item.id,
+                "quantity": item.quantity,
+                "checked": item.checked,
+            })
+        except Exception as e:
+            return JsonResponse({"success": False, "error": str(e)}, status=400)
+
+    return JsonResponse({"success": False, "error": "Invalid request"}, status=400)
 
 @login_required
@@ -680,5 +709,5 @@
     store_chain = request.GET.get('store_chain')
 
-    print("Received params:", user_lat, user_lon, fuel_consumption, store_chain)
+    # print("Received params:", user_lat, user_lon, fuel_consumption, store_chain)
 
     if not all([user_lat, user_lon, fuel_consumption, store_chain]):
@@ -716,14 +745,31 @@
         {"name": "Reptil Market Vlae", "lat": 42.011056469322966, "lon": 21.374480029937953, "chain": "reptil"},
         {"name": "Reptil Market Centar Pestaloci", "lat": 41.99836555442384, "lon": 21.421861676512417, "chain": "reptil"},
-        {"name": "Ramstore Vardar", "lat": 41.9981, "lon": 21.4325, "chain": "ramstore"},
-        {"name": "Ramstore City Mall", "lat": 42.0045, "lon": 21.3919, "chain": "ramstore"},
-        {"name": "Vero Aerodrom", "lat": 41.9980, "lon": 21.4680, "chain": "vero"},
-        {"name": "Vero Taftalidze", "lat": 41.9972, "lon": 21.4085, "chain": "vero"},
-        {"name": "Vero GTC", "lat": 41.9981, "lon": 21.4325, "chain": "vero"},
-        {"name": "Vero Čair", "lat": 42.0000, "lon": 21.4330, "chain": "vero"},
+        {"name": "Ramstore Market 11", "lat": 41.9896248940383, "lon": 21.45568173713548, "chain": "ramstore"},
+        {"name": "Ramstore Cair", "lat": 42.017436971570035, "lon": 21.436184959875927, "chain": "ramstore"},
+        {"name": "Ramstore Cair 2", "lat": 42.022700328389064, "lon": 21.435762437135484, "chain": "ramstore"},
+        {"name": "Ramstore Star Aerodrom", "lat": 41.98654757229333, "lon": 21.450426514395055, "chain": "ramstore"},
+        {"name": "Ramstore Shopping Center", "lat": 41.99251527889315, "lon": 21.427055698505697, "chain": "ramstore"},
+        {"name": "Ramstore Kapitol", "lat": 41.9878772356499, "lon": 21.46707632124615, "chain": "ramstore"},
+        {"name": "Ramstore Market", "lat": 41.9853253132668, "lon": 21.483641643472588, "chain": "ramstore"},
+        {"name": "Ramstore Kapishtec", "lat": 41.9947383374632, "lon": 21.416895067820587, "chain": "ramstore"},
+        {"name": "Ramstore Taftalidze", "lat": 42.001758830707814, "lon": 21.389292875765268, "chain": "ramstore"},
+        {"name": "Ramstore Prashka", "lat": 41.99939882083739, "lon": 21.39787594427638, "chain": "ramstore"},
+        {"name": "Ramstore Vodno", "lat": 41.98469521844405, "lon":  21.420580291654616, "chain": "ramstore"},
+        {"name": "Ramstore Karposh", "lat": 42.00807772238484, "lon":  21.408472021246162, "chain": "ramstore"},
+        {"name": "Ramstore Debar Maalo", "lat": 42.002711576049585, "lon": 21.416465914395033, "chain": "ramstore"},
+        {"name": "Ramstore City Mall", "lat": 42.00592369715923, "lon": 21.391752451931264, "chain": "ramstore"},
+        {"name": "Vero Center", "lat": 41.99349349030633, "lon": 21.441443522297725, "chain": "vero"},
+        {"name": "Vero Market Diamond Mall", "lat": 41.99070018070719, "lon": 21.430010799252866, "chain": "vero"},
+        {"name": "Vero GTC", "lat": 41.9953250741886, "lon": 21.43430233350842, "chain": "vero"},
+        {"name": "Vero Kisela Voda", "lat": 41.98282114008978, "lon": 21.440353396808742, "chain": "vero"},
+        {"name": "Vero Aerodrom", "lat": 41.984879474737774, "lon": 21.46860481127003, "chain": "vero"},
+        {"name": "Vero Taftalidze", "lat": 41.99826594634961, "lon": 21.40492322342702, "chain": "vero"},
+        {"name": "Vero Market", "lat": 41.995321011631525, "lon": 21.420769939888274, "chain": "vero"},
+        {"name": "Vero Market Cair", "lat": 42.01471886198107, "lon": 21.44505766894132, "chain": "vero"},
+        {"name": "Vero Karposh 4", "lat": 42.00712126048666, "lon": 21.392984968941317, "chain": "vero"},
     ]
 
     filtered_stores = [s for s in stores if s["chain"] == store_chain]
-    print("Filtered stores:", filtered_stores)
+    # print("Filtered stores:", filtered_stores)
 
     results = []
@@ -979,2 +1025,34 @@
 
     return JsonResponse({'data': data})
+
+from django.http import JsonResponse
+from rapidfuzz import fuzz
+from .models import ShoppingList, ShoppingListItem, Products2
+
+def generate_cheaper_list(request, list_id):
+    shopping_list = get_object_or_404(ShoppingList, id=list_id)
+    items = ShoppingListItem.objects.filter(shopping_list=shopping_list)
+
+    cheaper_alternatives = []
+
+    for item in items:
+        product = item.product
+        product_name = product.name
+        product_category = product.category
+
+        # најди најслични продукти со твојата функција
+        candidates = get_similar_products(product_name, product_category, top_n=5)
+
+        if candidates:
+            # земи го првиот кој е поевтин
+            for candidate in candidates:
+                if candidate['price'] and product.price and candidate['price'] < product.price:
+                    cheaper_alternatives.append({
+                        "original": f"{product.name} ({product.price} ден.)",
+                        "alternative": f"{candidate['name']} ({candidate['price']} ден.)",
+                        "store": candidate['store'],
+                        "image": candidate.get('image'),
+                    })
+                    break  # најдовме поевтина → не барај понатаму
+
+    return JsonResponse({"alternatives": cheaper_alternatives})