Update templates/menu.html

templates/menu.html

@@ -1438,7 +1438,7 @@
         <label class="form-label fw-bold">Filters:</label>
         <div class="toggle-container">
             <!-- Veg Only Toggle -->
-            <input type="checkbox" id="veg-toggle" name="veg"
+            <input type="checkbox" id="veg-toggle" name="veg" value="Veg"
                    {% if selected_category == "Veg" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('veg')"
                    aria-label="Toggle Vegetarian filter">
@@ -1687,6 +1687,23 @@
             "Tomato Ketchup", "Tomatoes", "Turmeric Powder", "Vinegar", "Water", "Wheat Flour (for dough)",
             "Whole Wheat Flour", "Yogurt (Curd)"
         ];
+        const fallbackAddons = [
+            {
+                section: "Extras",
+                items: [
+                    { name: "Extra Cheese", price: 1.50 },
+                    { name: "Extra Sauce", price: 0.75 },
+                    { name: "Spicy Seasoning", price: 0.50 }
+                ]
+            },
+            {
+                section: "Sides",
+                items: [
+                    { name: "Naan Bread", price: 2.00 },
+                    { name: "Raita", price: 1.00 }
+                ]
+            }
+        ];
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -1829,78 +1846,120 @@
         console.log("Most common add-ons: ", window.most_common_addons);
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
-            baseItemPrice = parseFloat(price) || 0;
+                      baseItemPrice = parseFloat(price) || 0;
             document.getElementById('modal-price').innerText = `$${baseItemPrice.toFixed(2)}`;
-            const modalImg = document.getElementById('modal-img');
-            modalImg.src = image || '/static/placeholder.jpg';
-            document.getElementById('modal-description').innerText = description || 'No description available.';
-            document.getElementById('addons-list').innerHTML = '';
-            document.getElementById('addons-list').classList.add('addon-loading');
+            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
+            document.getElementById('modal-description').innerText = description || 'No description available';
+            document.getElementById('quantityInput').value = '1';
             document.getElementById('modal-instructions').value = '';
-            const modalSectionEl = document.getElementById('modal-section');
-            modalSectionEl.setAttribute('data-section', section);
-            modalSectionEl.setAttribute('data-category', selectedCategory);
-            document.getElementById('quantityInput').value = 1;
+            document.getElementById('modal-section').setAttribute('data-section', section);
+            document.getElementById('modal-section').setAttribute('data-category', selectedCategory);
+            const addonsList = document.getElementById('addons-list');
+            addonsList.innerHTML = '';
+            addonsList.classList.add('addon-loading');
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
-                    const addonsList = document.getElementById('addons-list');
+                    console.log('Addons API response:', data);
                     addonsList.classList.remove('addon-loading');
-                    addonsList.innerHTML = '';
-                    if (!data.success || !data.addons || data.addons.length === 0) {
-                        const noAddonsMessage = document.createElement('p');
-                        noAddonsMessage.textContent = 'No add-ons available for this item.';
-                        noAddonsMessage.className = 'text-muted';
-                        addonsList.appendChild(noAddonsMessage);
+                    let addons = [];
+                    if (data.success && Array.isArray(data.addons) && data.addons.length > 0) {
+                        addons = data.addons;
+                    } else if (window.most_common_addons && Array.isArray(window.most_common_addons) && window.most_common_addons.length > 0) {
+                        console.log('Using most_common_addons as fallback');
+                        addons = window.most_common_addons;
                     } else {
-                        data.addons.forEach(addon => {
-                            const addonSection = document.createElement('div');
-                            addonSection.className = 'addon-section';
-                            const addonHeader = document.createElement('h6');
-                            addonHeader.textContent = addon.section;
-                            addonHeader.setAttribute('data-bs-toggle', 'collapse');
-                            addonHeader.setAttribute('data-bs-target', `#addon-collapse-${addon.section.replace(/\s+/g, '-')}`);
-                            addonHeader.setAttribute('aria-expanded', 'true');
-                            addonHeader.setAttribute('aria-controls', `addon-collapse-${addon.section.replace(/\s+/g, '-')}`);
-                            addonSection.appendChild(addonHeader);
-                            const addonCollapse = document.createElement('div');
-                            addonCollapse.id = `addon-collapse-${addon.section.replace(/\s+/g, '-')}`;
-                            addonCollapse.className = 'addon-options collapse show';
-                            addon.items.forEach(item => {
-                                const addonItem = document.createElement('div');
-                                addonItem.className = 'form-check';
-                                const input = document.createElement('input');
-                                input.type = 'checkbox';
-                                input.className = 'form-check-input';
-                                input.id = `addon-${item.name.replace(/\s+/g, '-')}`;
-                                input.setAttribute('data-price', item.price || 0);
-                                input.setAttribute('data-name', item.name);
-                                input.setAttribute('data-section', addon.section);
-                                input.addEventListener('change', updateModalPrice);
-                                const label = document.createElement('label');
-                                label.className = 'form-check-label';
-                                label.htmlFor = `addon-${item.name.replace(/\s+/g, '-')}`;
-                                label.textContent = item.name;
-                                if (item.price > 0) {
-                                    const priceSpan = document.createElement('span');
-                                    priceSpan.className = 'extra-charge';
-                                    priceSpan.textContent = `+$${parseFloat(item.price).toFixed(2)}`;
-                                    label.appendChild(priceSpan);
-                                }
-                                addonItem.appendChild(label);
-                                addonItem.appendChild(input);
-                                addonCollapse.appendChild(addonItem);
-                            });
-                            addonSection.appendChild(addonCollapse);
-                            addonsList.appendChild(addonSection);
-                        });
+                        console.log('Using static fallback addons');
+                        addons = fallbackAddons;
+                    }
+                    if (addons.length === 0) {
+                        addonsList.innerHTML = '<p class="text-muted">No customization options available.</p>';
+                        return;
                     }
+                    addons.forEach(addon => {
+                        const addonSection = document.createElement('div');
+                        addonSection.className = 'addon-section';
+                        const addonHeader = document.createElement('h6');
+                        addonHeader.textContent = addon.section;
+                        addonHeader.setAttribute('data-bs-toggle', 'collapse');
+                        addonHeader.setAttribute('data-bs-target', `#collapse-${addon.section.replace(/\s+/g, '-')}`);
+                        addonSection.appendChild(addonHeader);
+                        const addonCollapse = document.createElement('div');
+                        addonCollapse.id = `collapse-${addon.section.replace(/\s+/g, '-')}`;
+                        addonCollapse.className = 'addon-options';
+                        addon.items.forEach(item => {
+                            const addonItem = document.createElement('div');
+                            addonItem.className = 'form-check';
+                            const input = document.createElement('input');
+                            input.type = 'checkbox';
+                            input.className = 'form-check-input';
+                            input.id = `addon-${item.name.replace(/\s+/g, '-')}`;
+                            input.setAttribute('data-price', item.price || 0);
+                            input.setAttribute('data-name', item.name);
+                            input.setAttribute('data-section', addon.section);
+                            input.addEventListener('change', updateModalPrice);
+                            const label = document.createElement('label');
+                            label.className = 'form-check-label';
+                            label.htmlFor = `addon-${item.name.replace(/\s+/g, '-')}`;
+                            label.textContent = item.name;
+                            if (item.price > 0) {
+                                const priceSpan = document.createElement('span');
+                                priceSpan.className = 'extra-charge';
+                                priceSpan.textContent = `+$${parseFloat(item.price).toFixed(2)}`;
+                                label.appendChild(priceSpan);
+                            }
+                            addonItem.appendChild(label);
+                            addonItem.appendChild(input);
+                            addonCollapse.appendChild(addonItem);
+                        });
+                        addonSection.appendChild(addonCollapse);
+                        addonsList.appendChild(addonSection);
+                    });
                 })
                 .catch(err => {
                     console.error('Error fetching addons:', err);
-                    const addonsList = document.getElementById('addons-list');
                     addonsList.classList.remove('addon-loading');
-                    addonsList.innerHTML = '<p class="text-muted">Failed to load add-ons.</p>';
+                    console.log('Using static fallback addons due to error');
+                    addonsList.innerHTML = '';
+                    fallbackAddons.forEach(addon => {
+                        const addonSection = document.createElement('div');
+                        addonSection.className = 'addon-section';
+                        const addonHeader = document.createElement('h6');
+                        addonHeader.textContent = addon.section;
+                        addonHeader.setAttribute('data-bs-toggle', 'collapse');
+                        addonHeader.setAttribute('data-bs-target', `#collapse-${addon.section.replace(/\s+/g, '-')}`);
+                        addonSection.appendChild(addonHeader);
+                        const addonCollapse = document.createElement('div');
+                        addonCollapse.id = `collapse-${addon.section.replace(/\s+/g, '-')}`;
+                        addonCollapse.className = 'addon-options';
+                        addon.items.forEach(item => {
+                            const addonItem = document.createElement('div');
+                            addonItem.className = 'form-check';
+                            const input = document.createElement('input');
+                            input.type = 'checkbox';
+                            input.className = 'form-check-input';
+                            input.id = `addon-${item.name.replace(/\s+/g, '-')}`;
+                            input.setAttribute('data-price', item.price || 0);
+                            input.setAttribute('data-name', item.name);
+                            input.setAttribute('data-section', addon.section);
+                            input.addEventListener('change', updateModalPrice);
+                            const label = document.createElement('label');
+                            label.className = 'form-check-label';
+                            label.htmlFor = `addon-${item.name.replace(/\s+/g, '-')}`;
+                            label.textContent = item.name;
+                            if (item.price > 0) {
+                                const priceSpan = document.createElement('span');
+                                priceSpan.className = 'extra-charge';
+                                priceSpan.textContent = `+$${parseFloat(item.price).toFixed(2)}`;
+                                label.appendChild(priceSpan);
+                            }
+                            addonItem.appendChild(label);
+                            addonItem.appendChild(input);
+                            addonCollapse.appendChild(addonItem);
+                        });
+                        addonSection.appendChild(addonCollapse);
+                        addonsList.appendChild(addonSection);
+                    });
                 });
         }
         function addToCartFromModal() {
@@ -1987,17 +2046,25 @@
         function handleToggle(toggleType) {
             const vegToggle = document.getElementById('veg-toggle');
             const customToggle = document.getElementById('category-CustomizedDish');
-            let url = '/menu?';
-            const params = [];
-            if (toggleType === 'veg' && vegToggle.checked) {
-                params.push('veg=Veg');
-                customToggle.checked = false;
-            } else if (toggleType === 'custom' && customToggle.checked) {
-                params.push('category=Customized+Dish');
-                vegToggle.checked = false;
-            }
-            url += params.join('&');
-            window.location.href = url;
+            const form = document.getElementById('filter-form');
+            if (toggleType === 'veg') {
+                if (vegToggle.checked) {
+                    customToggle.checked = false;
+                    vegToggle.value = 'Veg';
+                } else {
+                    vegToggle.value = '';
+                }
+            } else if (toggleType === 'custom') {
+                if (customToggle.checked) {
+                    vegToggle.checked = false;
+                    vegToggle.value = '';
+                }
+            }
+            console.log('Filter state:', {
+                veg: vegToggle.checked ? 'Veg' : '',
+                category: customToggle.checked ? 'Customized Dish' : ''
+            });
+            form.submit();
         }
         document.addEventListener('DOMContentLoaded', function () {
             const avatarIcon = document.querySelector('.avatar-icon');