Update templates/menu.html

templates/menu.html

@@ -49,14 +49,14 @@
             border-radius: 15px 15px 0 0;
             opacity: 0;
             transition: opacity 0.5s ease-in-out;
-            background-color: #000; /* Fallback color if video fails */
+            background-color: #000;
         }
         .menu-video.loaded {
             opacity: 1;
         }
         .menu-card:hover .menu-video {
             opacity: 1;
-            transform: scale(1.05); /* Slight zoom effect on hover */
+            transform: scale(1.05);
         }
         .menu-card .card-body .card-title {
             font-size: 1.2rem;
@@ -854,7 +854,14 @@
                                     </div>
                                     {% if item.Section__c != 'Soft Drinks' %}
                                         <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
-                                        <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}"></div>
+                                        <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
+                                            <h6>Ingredients</h6>
+                                            <p>{{ item.All_Ingredients__c | default('Not specified') }}</p>
+                                            <h6>Nutritional Info</h6>
+                                            <p>{{ item.Nutritional_Information__c | default('Not available') }}</p>
+                                            <h6>Allergens</h6>
+                                            <p>{{ item.Allergen__c | default('None') }}</p>
+                                        </div>
                                     {% endif %}
                                 </div>
                             </div>
@@ -871,7 +878,7 @@
         </a>
         <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
             <i class="bi bi-cart"></i> View Cart
-            <span class="cart-icon-badge" id="cart-item-count">0</span>
+            <span class="cart-icon-badge" id="cart-item-count">{{ cart_item_count }}</span>
         </a>
     </div>
 
@@ -968,99 +975,6 @@
             "Whole Wheat Flour", "Yogurt (Curd)"
         ];
 
-        const menuItemDetails = {
-            "Veg Manchurian": {
-                ingredients: "Cauliflower, Onion, Ginger, Garlic, Soy Sauce, Cornflour, Green Chilies, Capsicum, Spring Onion",
-                nutritionalInfo: { calories: 250, protein: 5, carbs: 35, fats: 12, fiber: 3, sugar: 2 },
-                allergens: "Soy, Gluten"
-            },
-            "Veg Biryani": {
-                ingredients: "Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato, Cauliflower), Ginger, Garlic, Biryani Masala, Mint Leaves, Curd, Onion, Ghee",
-                nutritionalInfo: { calories: 300, protein: 6, carbs: 50, fats: 12, fiber: 5, sugar: 3 },
-                allergens: "Dairy"
-            },
-            "Sukka Gosht (Goat)": {
-                ingredients: "Goat Meat, Ginger-Garlic Paste, Green Chilies, Onion, Tomatoes, Garam Masala, Coriander Powder, Cumin Powder, Fresh Coriander",
-                nutritionalInfo: { calories: 450, protein: 35, carbs: 10, fats: 30, fiber: 2, sugar: 1 },
-                allergens: "None"
-            },
-            "Samosa": {
-                ingredients: "Potatoes, Peas, Onion, Ginger, Cumin Seeds, Garam Masala, Wheat Flour (for dough), Oil (for frying)",
-                nutritionalInfo: { calories: 150, protein: 3, carbs: 25, fats: 7, fiber: 2, sugar: 1 },
-                allergens: "Gluten"
-            },
-            "Roti": {
-                ingredients: "Whole Wheat Flour, Water, Salt",
-                nutritionalInfo: { calories: 150, protein: 4, carbs: 30, fats: 1, fiber: 3, sugar: 0 },
-                allergens: "Gluten"
-            },
-            "Prawn Fry": {
-                ingredients: "Prawns, Garlic, Ginger, Chili Powder, Coriander Powder, Cumin Powder, Lemon Juice, Oil",
-                nutritionalInfo: { calories: 350, protein: 25, carbs: 10, fats: 20, fiber: 1, sugar: 1 },
-                allergens: "Shellfish"
-            },
-            "Paneer Butter Masala": {
-                ingredients: "Paneer, Butter, Cream, Tomato Puree, Onion, Ginger, Garlic, Garam Masala",
-                nutritionalInfo: { calories: 400, protein: 15, carbs: 20, fats: 25, fiber: 2, sugar: 3 },
-                allergens: "Dairy"
-            },
-            "Paneer Biryani": {
-                ingredients: "Paneer, Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato), Onion, Tomatoes, Biryani Masala, Mint Leaves, Curd",
-                nutritionalInfo: { calories: 350, protein: 12, carbs: 55, fats: 15, fiber: 4, sugar: 3 },
-                allergens: "Dairy"
-            },
-            "Onion Pakoda": {
-                ingredients: "Onion, Chickpea Flour (Besan), Rice Flour, Green Chilies, Cumin Seeds, Ginger, Turmeric Powder, Oil (for frying)",
-                nutritionalInfo: { calories: 200, protein: 5, carbs: 30, fats: 8, fiber: 3, sugar: 2 },
-                allergens: "Gluten (if cross-contamination)"
-            },
-            "Mutton Biryani": {
-                ingredients: "Mutton, Basmati Rice, Onion, Tomatoes, Ginger-Garlic Paste, Biryani Masala, Mint Leaves, Yogurt, Ghee",
-                nutritionalInfo: { calories: 500, protein: 30, carbs: 50, fats: 25, fiber: 4, sugar: 3 },
-                allergens: "Dairy"
-            },
-            "Fish Curry": {
-                ingredients: "Fish (any firm fish like Salmon or King Fish), Onion, Tomato, Ginger-Garlic Paste, Curry Leaves, Coconut Milk, Tamarind, Mustard Seeds",
-                nutritionalInfo: { calories: 300, protein: 25, carbs: 10, fats: 20, fiber: 2, sugar: 1 },
-                allergens: "Fish"
-            },
-            "Fiery Mango Glaze Chicken": {
-                ingredients: "Chicken, Mango Puree, Chili Sauce, Soy Sauce, Honey, Garlic, Ginger, Lemon Juice",
-                nutritionalInfo: { calories: 350, protein: 30, carbs: 15, fats: 18, fiber: 1, sugar: 5 },
-                allergens: "Soy"
-            },
-            "Chilli Gobi": {
-                ingredients: "Cauliflower, Onion, Green Chilies, Soy Sauce, Cornflour, Garlic, Ginger, Cumin Powder",
-                nutritionalInfo: { calories: 250, protein: 6, carbs: 35, fats: 12, fiber: 3, sugar: 2 },
-                allergens: "Soy, Gluten"
-            },
-            "Chilli Chicken": {
-                ingredients: "Chicken, Bell Pepper, Onion, Green Chilies, Soy Sauce, Cornflour, Garlic, Ginger",
-                nutritionalInfo: { calories: 400, protein: 35, carbs: 20, fats: 18, fiber: 2, sugar: 2 },
-                allergens: "Soy, Gluten"
-            },
-            "Chicken Manchurian": {
-                ingredients: "Chicken, Onion, Garlic, Ginger, Soy Sauce, Cornflour, Green Chilies, Capsicum",
-                nutritionalInfo: { calories: 350, protein: 25, carbs: 20, fats: 18, fiber: 2, sugar: 2 },
-                allergens: "Soy, Gluten"
-            },
-            "Chicken Curry": {
-                ingredients: "Chicken, Onion, Tomatoes, Ginger-Garlic Paste, Garam Masala, Coconut Milk, Coriander Leaves",
-                nutritionalInfo: { calories: 350, protein: 28, carbs: 15, fats: 12, fiber: 4, sugar: 2 },
-                allergens: "None"
-            },
-            "Chicken Biryani": {
-                ingredients: "Chicken, Basmati Rice, Onion, Tomatoes, Ginger-Garlic Paste, Biryani Masala, Mint Leaves, Curd",
-                nutritionalInfo: { calories: 500, protein: 35, carbs: 60, fats: 20, fiber: 5, sugar: 3 },
-                allergens: "Dairy"
-            },
-            "Channa Masala": {
-                ingredients: "Chickpeas, Onion, Tomatoes, Ginger-Garlic Paste, Garam Masala, Coriander Powder, Cumin Seeds, Lemon Juice",
-                nutritionalInfo: { calories: 250, protein: 10, carbs: 45, fats: 5, fiber: 6, sugar: 2 },
-                allergens: "None"
-            }
-        };
-
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -1069,7 +983,7 @@
                 JSON.stringify(item.addons) === JSON.stringify(payload.addons)
             );
             if (existingItem) {
-                existingItem.quantity = payload.quantity;
+                existingItem.quantity += payload.quantity;
             } else {
                 cart.push(payload);
             }
@@ -1157,7 +1071,7 @@
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    updateCartUI(data.cart);
+                    updateCartUI(data.cart || getCartLocalStorage());
                     const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
                     modal.hide();
                 } else {
@@ -1180,7 +1094,7 @@
         function updateCartUI(cart) {
             if (!Array.isArray(cart)) {
                 console.error('Invalid cart data:', cart);
-                return;
+                cart = getCartLocalStorage();
             }
 
             let totalQuantity = 0;
@@ -1213,29 +1127,8 @@
                     dropdownMenu.style.display = 'none';
                 });
             });
+
             const menuCards = document.querySelectorAll('.menu-card');
-            menuCards.forEach(card => {
-                const itemName = card.querySelector('.card-title').innerText;
-                const detailsDiv = card.querySelector('.item-details');
-                const detailsData = menuItemDetails[itemName];
-                if (detailsDiv && detailsData) {
-                    detailsDiv.innerHTML = `
-                        <h6>Ingredients</h6>
-                        <p>${detailsData.ingredients}</p>
-                        <h6>Nutritional Info</h6>
-                        <div class="nutritional-info">
-                            <span>Calories: ${detailsData.nutritionalInfo.calories} kcal</span>
-                            <span>Carbs: ${detailsData.nutritionalInfo.carbs}g</span>
-                            <span>Protein: ${detailsData.nutritionalInfo.protein}g</span>
-                            <span>Fats: ${detailsData.nutritionalInfo.fats}g</span>
-                        </div>
-                        <h6>Allergens</h6>
-                        <p>${detailsData.allergens}</p>
-                    `;
-                } else if (detailsDiv) {
-                    detailsDiv.innerHTML = '<p>No details available for this item.</p>';
-                }
-            });
             const menuVideos = document.querySelectorAll('.menu-video');
             const cardObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
@@ -1270,6 +1163,7 @@
             });
             menuCards.forEach(card => cardObserver.observe(card));
             menuVideos.forEach(video => videoObserver.observe(video));
+
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {
                 link.addEventListener('click', function () {
@@ -1279,6 +1173,7 @@
                     this.innerText = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show Details';
                 });
             });
+
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
@@ -1294,9 +1189,10 @@
                     categoryForm.submit();
                 });
             });
+
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
-            searchBar.addEventListener('input', function () {
+            searchBar.addEventListener('input', debounce(function () {
                 const input = this.value.trim().toLowerCase();
                 suggestionsContainer.innerHTML = '';
                 suggestionsContainer.style.display = 'none';
@@ -1320,12 +1216,14 @@
                     }
                 }
                 filterMenu();
-            });
+            }, 300));
+
             document.addEventListener('click', function (event) {
                 if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
                     suggestionsContainer.style.display = 'none';
                 }
             });
+
             const descriptionTextarea = document.getElementById('custom-dish-description');
             const descriptionSuggestions = document.getElementById('descriptionSuggestions');
             if (descriptionTextarea && descriptionSuggestions) {
@@ -1342,7 +1240,7 @@
                         });
                     }
                 }
-                descriptionTextarea.addEventListener('input', function () {
+                descriptionTextarea.addEventListener('input', debounce(function () {
                     const inputText = this.value.trim();
                     const words = inputText.split(/,\s*/);
                     const lastWord = words[words.length - 1].trim().toLowerCase();
@@ -1372,13 +1270,14 @@
                             descriptionSuggestions.style.display = 'block';
                         }
                     }
-                });
+                }, 300));
                 document.addEventListener('click', function (event) {
                     if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
                         descriptionSuggestions.style.display = 'none';
                     }
                 });
             }
+
             fetch('/cart/get')
                 .then(response => {
                     if (!response.ok) {
@@ -1400,12 +1299,14 @@
                     const cart = getCartLocalStorage();
                     updateCartUI(cart);
                 });
+
             const preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
             preloadedVideos.forEach(link => {
                 const video = document.createElement('video');
                 video.src = link.href;
                 video.preload = 'auto';
             });
+
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
             const quantityInput = document.getElementById('quantityInput');
@@ -1425,7 +1326,6 @@
             const softDrinkDecreaseBtn = document.getElementById('soft-drink-decrease');
             const softDrinkIncreaseBtn = document.getElementById('soft-drink-increase');
             const softDrinkQuantityInput = document.getElementById('soft-drink-quantity');
-            
             softDrinkDecreaseBtn.addEventListener('click', function() {
                 let currentQuantity = parseInt(softDrinkQuantityInput.value);
                 if (currentQuantity > 1) {
@@ -1433,7 +1333,6 @@
                     softDrinkQuantityInput.value = currentQuantity;
                 }
             });
-            
             softDrinkIncreaseBtn.addEventListener('click', function() {
                 let currentQuantity = parseInt(softDrinkQuantityInput.value);
                 if (currentQuantity < 10) {
@@ -1619,13 +1518,18 @@
             .then(data => {
                 if (data.success) {
                     alert('Item added to cart successfully!');
-                    updateCartUI(data.cart);
+                    updateCartUI(data.cart || getCartLocalStorage());
                     const modal = document.getElementById('itemModal');
                     const modalInstance = bootstrap.Modal.getInstance(modal);
                     modalInstance.hide();
                 } else {
                     console.error('Failed to add item to cart:', data.error);
                     alert(data.error || 'Failed to add item to cart.');
+                    const cart = addToCartLocalStorage(cartPayload);
+                    updateCartUI(cart);
+                    const modal = document.getElementById('itemModal');
+                    const modalInstance = bootstrap.Modal.getInstance(modal);
+                    modalInstance.hide();
                 }
             })
             .catch(err => {