Update templates/cart.html

templates/cart.html

@@ -388,6 +388,7 @@
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
             border: 2px solid #fdf4e3;
             position: relative;
+            min-height: 70px;
         }
         .menu-item img {
             width: 50px;
@@ -395,29 +396,36 @@
             object-fit: cover;
             border-radius: 5px;
             margin-right: 10px;
+            border: 1px solid #ffcc80;
         }
         .menu-item:hover img {
             transform: scale(1.05);
         }
         .menu-item-details {
             flex-grow: 1;
+            font-size: 0.9rem;
+        }
+        .menu-item-details strong {
+            font-size: 1rem;
         }
         .menu-item-details small {
             display: block;
             color: #666;
+            font-size: 0.8rem;
         }
         .quantity-selector {
-            display: flex;
+            display: none;
             align-items: center;
         }
         .quantity-selector button {
-            width: 24px;
-            height: 24px;
+            width: 28px;
+            height: 28px;
             border: none;
             background-color: #f0f0f0;
-            font-size: 0.8rem;
+            font-size: 1rem;
             font-weight: bold;
             cursor: pointer;
+            border-radius: 4px;
         }
         .quantity-selector input {
             width: 40px;
@@ -426,6 +434,7 @@
             background-color: #f8f9fa;
             font-size: 1rem;
             margin: 0 5px;
+            border-radius: 4px;
         }
         .customization-section {
             display: none;
@@ -439,6 +448,8 @@
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
             z-index: 10;
             border: 2px solid #fdf4e3;
+            max-height: 300px;
+            overflow-y: auto;
         }
         .customization-section.show {
             display: block;
@@ -450,6 +461,7 @@
         .customization-section label {
             display: block;
             margin-bottom: 5px;
+            font-size: 0.9rem;
         }
         .customization-section textarea {
             width: 100%;
@@ -458,11 +470,12 @@
             padding: 5px;
             border: 1px solid #ccc;
             border-radius: 5px;
+            font-size: 0.9rem;
         }
         .customization-actions {
             display: flex;
             justify-content: space-between;
-            margin-top: 10px;
+            margin-top: 15px;
         }
         .customization-actions button {
             padding: 8px;
@@ -471,14 +484,14 @@
             cursor: pointer;
             width: 48%;
             text-align: center;
+            font-size: 0.9rem;
+            color: #fff;
         }
         .add-to-cart-btn {
             background-color: #A52A2A;
-            color: #fff;
         }
         .cancel-customization-btn {
             background-color: #6c757d;
-            color: #fff;
         }
         .bill-item {
             display: flex;
@@ -666,13 +679,28 @@
         let currentCart = null;
         let menuItems = [];
         let selectedItem = null;
+        let availableAddOns = [];
 
-        // Static list of add-ons (replace with dynamic fetch if available)
-        const availableAddOns = [
-            { name: "Extra Raita ($2.00)", price: 2.00 },
-            { name: "Extra Gravy ($3.00)", price: 3.00 },
-            { name: "Extra Salad ($1.50)", price: 1.50 }
-        ];
+        // Fetch add-ons when the modal is opened
+        function fetchAddOns() {
+            return fetch('/cart/fetch_add_ons', {
+                method: 'GET',
+                headers: { 'Content-Type': 'application/json' }
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    availableAddOns = data.add_ons;
+                } else {
+                    console.error('Error fetching add-ons:', data.error);
+                    availableAddOns = [];
+                }
+            })
+            .catch(err => {
+                console.error('Error fetching add-ons:', err);
+                availableAddOns = [];
+            });
+        }
 
         function updateQuantity(action, itemName, customerEmail) {
             let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
@@ -743,24 +771,27 @@
             if (selectedCoupon === "" || selectedCoupon === "None" || selectedCoupon === "Null") {
                 selectedCoupon = null;
             }
-            fetch('/cart/checkout', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ selectedCoupon: selectedCoupon })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    currentCart = data.cart;
-                    menuItems = data.menu_items;
-                    displayAnythingElse();
-                } else {
-                    alert(data.error || data.message);
-                }
-            })
-            .catch(err => {
-                console.error('Error during checkout:', err);
-                alert('An error occurred. Please try again.');
+            // Fetch add-ons before displaying the modal
+            fetchAddOns().then(() => {
+                fetch('/cart/checkout', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ selectedCoupon: selectedCoupon })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        currentCart = data.cart;
+                        menuItems = data.menu_items;
+                        displayAnythingElse();
+                    } else {
+                        alert(data.error || data.message);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error during checkout:', err);
+                    alert('An error occurred. Please try again.');
+                });
             });
         }
 
@@ -778,21 +809,15 @@
                         <small>$${item.Price__c.toFixed(2)}</small>
                     </div>
                     <button class="add-back-button" onclick="showQuantitySelector('${item.Name}', ${item.Price__c}, '${item.Image1__c}', this)">+</button>
-                    <div class="quantity-selector" style="display: none;">
+                    <div class="quantity-selector" data-item-name="${item.Name}">
                         <button onclick="updateMenuItemQuantity('${item.Name}', 'decrease')">-</button>
                         <input type="text" value="1" readonly data-item-name="${item.Name}">
                         <button onclick="updateMenuItemQuantity('${item.Name}', 'increase')">+</button>
                     </div>
                     <div class="customization-section" data-item-name="${item.Name}">
                         <h4>Customize ${item.Name}</h4>
-                        <div>
-                            <strong>Add-Ons</strong>
-                            ${availableAddOns.map(addon => `
-                                <label>
-                                    <input type="checkbox" value="${addon.name}" data-price="${addon.price}">
-                                    ${addon.name}
-                                </label>
-                            `).join('')}
+                        <div id="addOns-${item.Name}">
+                            <!-- Add-ons will be populated dynamically -->
                         </div>
                         <div>
                             <strong>Special Instructions</strong>
@@ -805,6 +830,17 @@
                     </div>
                 `;
                 menuItemsContainer.appendChild(itemElement);
+                // Populate add-ons for this item
+                const addOnsContainer = document.getElementById(`addOns-${item.Name}`);
+                addOnsContainer.innerHTML = `
+                    <strong>Add-Ons</strong>
+                    ${availableAddOns.length > 0 ? availableAddOns.map(addon => `
+                        <label>
+                            <input type="checkbox" value="${addon.name}" data-price="${addon.price}">
+                            ${addon.name}
+                        </label>
+                    `).join('') : '<p>No add-ons available</p>'}
+                `;
             });
             document.getElementById('anythingElseModal').style.display = 'flex';
         }
@@ -813,20 +849,24 @@
             // Hide all quantity selectors and customization sections
             document.querySelectorAll('.quantity-selector').forEach(selector => {
                 selector.style.display = 'none';
+                selector.querySelector('input').value = 1; // Reset quantity
             });
             document.querySelectorAll('.customization-section').forEach(section => {
                 section.classList.remove('show');
+                section.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+                    checkbox.checked = false; // Reset add-ons
+                });
+                section.querySelector('textarea').value = ''; // Reset instructions
             });
             document.querySelectorAll('.add-back-button').forEach(btn => {
                 btn.style.display = 'inline-block';
             });
 
-            // Show quantity selector for the clicked item
+            // Show quantity selector and customization for the clicked item
             const quantitySelector = buttonElement.nextElementSibling;
             quantitySelector.style.display = 'flex';
             buttonElement.style.display = 'none';
 
-            // Show customization section
             const customizationSection = quantitySelector.nextElementSibling;
             customizationSection.classList.add('show');
 
@@ -834,18 +874,21 @@
         }
 
         function updateMenuItemQuantity(itemName, action) {
-            const quantityInput = document.querySelector(`.quantity-selector input[data-item-name="${itemName}"]`);
+            const quantityInput = document.querySelector(`.quantity-selector[data-item-name="${itemName}"] input`);
             let quantity = parseInt(quantityInput.value);
             if (action === 'increase') {
                 quantity++;
             } else if (action === 'decrease' && quantity > 1) {
                 quantity--;
             }
+            if (isNaN(quantity) || quantity < 1) {
+                quantity = 1;
+            }
             quantityInput.value = quantity;
         }
 
         function cancelCustomization(itemName) {
-            const quantitySelector = document.querySelector(`.quantity-selector input[data-item-name="${itemName}"]`).parentElement;
+            const quantitySelector = document.querySelector(`.quantity-selector[data-item-name="${itemName}"]`);
             const customizationSection = quantitySelector.nextElementSibling;
             const addButton = quantitySelector.previousElementSibling;
 
@@ -864,8 +907,12 @@
         }
 
         function addToCartWithCustomizations(itemName, itemPrice, itemImage) {
-            const quantityInput = document.querySelector(`.quantity-selector input[data-item-name="${itemName}"]`);
-            const quantity = parseInt(quantityInput.value);
+            const quantitySelector = document.querySelector(`.quantity-selector[data-item-name="${itemName}"]`);
+            const quantity = parseInt(quantitySelector.querySelector('input').value);
+            if (isNaN(quantity) || quantity < 1) {
+                alert('Invalid quantity!');
+                return;
+            }
             const customizationSection = document.querySelector(`.customization-section[data-item-name="${itemName}"]`);
             const addOns = Array.from(customizationSection.querySelectorAll('input[type="checkbox"]:checked')).map(checkbox => checkbox.value);
             const instructions = customizationSection.querySelector('textarea').value.trim();
@@ -895,7 +942,10 @@
                     alert('Error adding item to cart: ' + data.error);
                 }
             })
-            .catch(err => console.error('Error adding item:', err));
+            .catch(err => {
+                console.error('Error adding item:', err);
+                alert('An error occurred while adding the item to the cart.');
+            });
         }
 
         function closeAnythingElseModal() {
@@ -995,7 +1045,8 @@
                 item_image: itemImage,
                 addons: [],
                 instructions: "",
-                customer_email: customerEmail
+                customer_email: customerEmail,
+                quantity: 1
             };
             fetch('/cart/add_suggestion_to_cart', {
                 method: 'POST',