Update templates/menu.html

templates/menu.html

@@ -515,75 +515,8 @@ form.text-center.mb-4 {
 
 <!-- JavaScript -->
 <script>
-    // Show item details and fetch customization options
-    function showItemDetails(name, price, image, description, section, selectedCategory) {
-        document.getElementById('modal-name').innerText = name;
-        document.getElementById('modal-price').innerText = `$${price}`;
-        document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
-        document.getElementById('modal-description').innerText = description || 'No description available.';
-        document.getElementById('addons-list').innerHTML = 'Loading customization options...';
-        document.getElementById('modal-instructions').value = '';
-
-        const modalSectionEl = document.getElementById('modal-section');
-        modalSectionEl.setAttribute('data-section', section);
-        modalSectionEl.setAttribute('data-category', selectedCategory);
-
-         // Set the default quantity to 1
-             document.getElementById('quantityInput').value = 1;
-        
-        // Fetch customization options based on the section
-        fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
-            .then(response => response.json())
-            .then(data => {
-                const addonsList = document.getElementById('addons-list');
-                addonsList.innerHTML = ''; // Clear previous content
-
-                if (!data.success || !data.addons || data.addons.length === 0) {
-                    addonsList.innerHTML = '<p>No customization options available.</p>';
-                    return;
-                }
-                
-                // Display customization options inside styled divs
-                data.addons.forEach(addon => {
-                    const sectionDiv = document.createElement('div');
-                    sectionDiv.classList.add('addon-section'); // Add styling class
-                    
-                    // Add section title
-                    const title = document.createElement('h6');
-                    title.innerText = addon.name;
-                    sectionDiv.appendChild(title);
-                    
-                    // Create options list
-                    const optionsContainer = document.createElement('div');
-                    addon.options.forEach((option, index) => {
-                        const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
-                        const listItem = document.createElement('div');
-                        listItem.classList.add('form-check');
-                        listItem.innerHTML = `
-                            <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
-                                   data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
-                            <label class="form-check-label" for="${optionId}">
-                                ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
-                            </label>
-                        `;
-                        optionsContainer.appendChild(listItem);
-                    });
-                    sectionDiv.appendChild(optionsContainer);
-                    addonsList.appendChild(sectionDiv);
-                });
-            })
-            .catch(err => {
-                console.error('Error fetching add-ons:', err);
-                document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
-            });
-    }
 
-    // Handle single-select/deselect logic for checkbox groups in all modals
-    document.addEventListener('click', function(event) {
-        if (event.target.classList.contains('addon-option')) {
-            handleAddonClick(event.target);
-        }
-    });
+    
 
     // Handle checkbox selection logic
     function handleAddonClick(checkbox) {
@@ -737,22 +670,115 @@ document.addEventListener('DOMContentLoaded', function () {
     const decreaseBtn = document.getElementById('decreaseQuantity');
     const increaseBtn = document.getElementById('increaseQuantity');
     const quantityInput = document.getElementById('quantityInput');
-
+    
     // Add event listener to decrease button
     decreaseBtn.addEventListener('click', function () {
         let currentQuantity = parseInt(quantityInput.value);
         if (currentQuantity > 1) {
             currentQuantity--;
             quantityInput.value = currentQuantity;
+            updatePrice();  // Update price when quantity decreases
         }
     });
-
+    
     // Add event listener to increase button
     increaseBtn.addEventListener('click', function () {
         let currentQuantity = parseInt(quantityInput.value);
         currentQuantity++;
         quantityInput.value = currentQuantity;
+        updatePrice();  // Update price when quantity increases
+    });
+});
+
+// Function to update the total price dynamically
+function updatePrice() {
+    const itemPrice = parseFloat(document.getElementById('modal-price').getAttribute('data-base-price'));
+    const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+    let addonsPrice = 0;
+
+    // Calculate price for selected add-ons
+    const selectedAddOns = Array.from(document.querySelectorAll('#addons-list input[type="checkbox"]:checked'));
+    selectedAddOns.forEach(addon => {
+        addonsPrice += parseFloat(addon.getAttribute('data-price') || 0);
     });
+
+    // Update the total price in the modal
+    const totalPrice = (itemPrice * quantity) + addonsPrice;
+    document.getElementById('modal-price').innerText = `$${totalPrice.toFixed(2)}`;
+}
+
+// Function to show item details and customization options in the modal
+function showItemDetails(name, price, image, description, section, selectedCategory) {
+    document.getElementById('modal-name').innerText = name;
+    document.getElementById('modal-price').innerText = `$${price}`;  // Set the initial price
+    document.getElementById('modal-price').setAttribute('data-base-price', price);  // Store the base price
+    document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
+    document.getElementById('modal-description').innerText = description || 'No description available.';
+    document.getElementById('addons-list').innerHTML = 'Loading customization options...';
+    document.getElementById('modal-instructions').value = '';
+    
+    const modalSectionEl = document.getElementById('modal-section');
+    modalSectionEl.setAttribute('data-section', section);
+    modalSectionEl.setAttribute('data-category', selectedCategory);
+    
+    // Set the default quantity to 1
+    document.getElementById('quantityInput').value = 1;
+    
+    // Fetch customization options based on the section
+    fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
+        .then(response => response.json())
+        .then(data => {
+            const addonsList = document.getElementById('addons-list');
+            addonsList.innerHTML = ''; // Clear previous content
+            if (!data.success || !data.addons || data.addons.length === 0) {
+                addonsList.innerHTML = '<p>No customization options available.</p>';
+                return;
+            }
+            
+            // Display customization options inside styled divs
+            data.addons.forEach(addon => {
+                const sectionDiv = document.createElement('div');
+                sectionDiv.classList.add('addon-section'); // Add styling class
+                
+                // Add section title
+                const title = document.createElement('h6');
+                title.innerText = addon.name;
+                sectionDiv.appendChild(title);
+                
+                // Create options list
+                const optionsContainer = document.createElement('div');
+                addon.options.forEach((option, index) => {
+                    const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
+                    const listItem = document.createElement('div');
+                    listItem.classList.add('form-check');
+                    listItem.innerHTML = `
+                        <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
+                               data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
+                        <label class="form-check-label" for="${optionId}">
+                            ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
+                        </label>
+                    `;
+                    optionsContainer.appendChild(listItem);
+                });
+                sectionDiv.appendChild(optionsContainer);
+                addonsList.appendChild(sectionDiv);
+            });
+        })
+        .catch(err => {
+            console.error('Error fetching add-ons:', err);
+            document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
+        });
+
+    // Update the price dynamically once the modal is populated
+    updatePrice();
+}
+
+// Handle single-select/deselect logic for checkbox groups in all modals
+document.addEventListener('click', function(event) {
+    if (event.target.classList.contains('addon-option')) {
+        handleAddonClick(event.target);
+        updatePrice();  // Update price when add-on is selected or deselected
+    }
 });
 
     // Function to round reward points to a single digit