Update templates/menu.html

templates/menu.html

@@ -832,7 +832,7 @@
                                                 <div class="button-container" 
                                                      data-item-name="{{ item.Name | default('Unnamed Item') }}" 
                                                      data-item-price="{{ item.Price__c | default('0.00') }}" 
-                                                     data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}" 
+                                                     data-item-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
                                                      data-item-section="{{ item.Section__c | default(section) }}" 
                                                      data-item-category="{{ selected_category }}">
                                                     {% if item.Section__c == 'Soft Drinks' %}
@@ -852,7 +852,6 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <!-- Only show toggle-details if not Soft Drinks -->
                                     {% 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>
@@ -872,6 +871,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>
         </a>
     </div>
 
@@ -910,28 +910,30 @@
         </div>
     </div>
 
-    <!-- Modal for Soft Drinks Quantity Selection -->
+    <!-- Modified Modal for Soft Drinks Quantity Selection -->
     <div class="modal fade" id="softDrinkModal" tabindex="-1" aria-labelledby="softDrinkModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="softDrinkModalLabel">Select Quantity</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <div class="modal-content" style="border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
+                <div class="modal-header" style="background: linear-gradient(45deg, #0FAA39, #0D9232); color: white; border-radius: 15px 15px 0 0;">
+                    <h5 class="modal-title" id="softDrinkModalLabel">Select Your Drink</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body">
-                    <div class="text-center mb-3">
-                        <h5 id="soft-drink-name"></h5>
-                        <p id="soft-drink-price"></p>
+                <div class="modal-body" style="padding: 20px;">
+                    <div class="text-center mb-4">
+                        <img id="soft-drink-image" class="img-fluid rounded mb-3" alt="Soft Drink Image" style="max-height: 150px; width: auto; object-fit: contain;">
+                        <h5 id="soft-drink-name" class="fw-bold" style="color: #333;"></h5>
+                        <p id="soft-drink-price" class="text-muted" style="font-size: 1.1rem;"></p>
                     </div>
                     <div class="d-flex justify-content-center align-items-center mb-4">
-                        <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease">-</button>
-                        <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly style="width: 60px;">
-                        <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase">+</button>
+                        <div class="quantity-selector" style="background-color: #f8f9fa; padding: 10px; border-radius: 10px;">
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease" style="width: 40px; height: 40px;">-</button>
+                            <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly style="width: 60px; font-weight: bold; font-size: 1.1rem;">
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase" style="width: 40px; height: 40px;">+</button>
+                        </div>
                     </div>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()">Add to Cart</button>
+                <div class="modal-footer" style="border-top: none; padding: 0 20px 20px 20px; justify-content: center;">
+                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" style="width: 200px; padding: 12px; font-size: 1.1rem; background-color: #0FAA39; border-color: #0FAA39;">Add to Cart</button>
                 </div>
             </div>
         </div>
@@ -1110,10 +1112,13 @@
             const buttonContainer = button.closest('.button-container');
             const itemName = buttonContainer.getAttribute('data-item-name');
             const itemPrice = buttonContainer.getAttribute('data-item-price');
+            const itemImage = buttonContainer.getAttribute('data-item-image');
             
             document.getElementById('soft-drink-name').textContent = itemName;
             document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
             document.getElementById('soft-drink-quantity').value = '1';
+            const softDrinkImage = document.getElementById('soft-drink-image');
+            softDrinkImage.src = itemImage || '/static/placeholder.jpg';
             
             const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
             modal.show();
@@ -1213,7 +1218,7 @@
                 const itemName = card.querySelector('.card-title').innerText;
                 const detailsDiv = card.querySelector('.item-details');
                 const detailsData = menuItemDetails[itemName];
-                if (detailsDiv && detailsData) {  // Only populate if details div exists (not Soft Drinks)
+                if (detailsDiv && detailsData) {
                     detailsDiv.innerHTML = `
                         <h6>Ingredients</h6>
                         <p>${detailsData.ingredients}</p>
@@ -1417,7 +1422,6 @@
                 quantityInput.value = currentQuantity;
             });
 
-            // Soft Drinks modal quantity controls
             const softDrinkDecreaseBtn = document.getElementById('soft-drink-decrease');
             const softDrinkIncreaseBtn = document.getElementById('soft-drink-increase');
             const softDrinkQuantityInput = document.getElementById('soft-drink-quantity');
@@ -1432,7 +1436,7 @@
             
             softDrinkIncreaseBtn.addEventListener('click', function() {
                 let currentQuantity = parseInt(softDrinkQuantityInput.value);
-                if (currentQuantity < 500) {
+                if (currentQuantity < 10) {
                     currentQuantity++;
                     softDrinkQuantityInput.value = currentQuantity;
                 }
@@ -1559,7 +1563,7 @@
 
         function handleAddonClick(checkbox) {
             const groupName = checkbox.getAttribute('data-group');
-            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo","Beverages","Sauces"].includes(groupName);
+            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo"].includes(groupName);
             if (!isMultiSelectGroup) {
                 const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
                 checkboxes.forEach(otherCheckbox => {