Update templates/menu.html

templates/menu.html

@@ -299,9 +299,10 @@
                     <p id="modal-description" class="text-secondary"></p>
                     <!-- Add-ons -->
                     <div id="modal-addons" class="modal-addons mt-4">
-                        <h6>Add-ons</h6>
-                        <div id="addons-list" class="addons-container">Loading add-ons...</div>
+                        <h6>Customization Options</h6>
+                        <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
+
                     <div class="mt-4">
                         <h6>Special Instructions</h6>
                         <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
@@ -320,43 +321,68 @@
     <!-- JavaScript -->
     <script>
         function showItemDetails(name, price, image, description, section, selectedCategory) {
-            // Set modal content dynamically
             document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `$${price}`;
+            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 add-ons...';
+            document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
-            // Correctly set data attributes for section and category
+
+            // Set section and category for reference
             const modalSectionEl = document.getElementById('modal-section');
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
-            // Fetch add-ons dynamically based on item Name
-            fetch(`/api/addons?item_name=${encodeURIComponent(name)}`)
+
+            // 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 = 'No add-ons available.';
+                        addonsList.innerHTML = '<p>No customization options available.</p>';
                         return;
                     }
-                    // Populate the add-ons list
+
+                    // Display customization options dynamically
                     data.addons.forEach(addon => {
-                        const listItem = document.createElement('div');
-                        listItem.innerHTML = `
-                            <input type="checkbox" id="addon-${addon.Id}" value="${addon.Id}" 
-                                   data-name="${addon.Name}" data-price="${addon.Price__c}">
-                            <label for="addon-${addon.Id}">${addon.Name} - $${addon.Price__c}</label>
-                        `;
-                        addonsList.appendChild(listItem);
+                        const sectionDiv = document.createElement('div');
+                        sectionDiv.classList.add('addon-section');
+
+                        // 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-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 = 'Unable to fetch add-ons. Please try again later.';
+                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
         }
+
         function filterMenu() {
             let input = document.getElementById('searchBar').value.toLowerCase();
             let sections = document.querySelectorAll('.menu-section'); // Select all sections
@@ -388,37 +414,38 @@
         }
 
         function addToCartFromModal() {
-            const itemName = document.getElementById('modal-name').innerText; // Get item name
-            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')); // Get item price
-            const itemImage = document.getElementById('modal-img').src; // Get item image
+            const itemName = document.getElementById('modal-name').innerText;
+            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('₹', ''));
+            const itemImage = document.getElementById('modal-img').src;
             const modalSectionEl = document.getElementById('modal-section');
             const section = modalSectionEl.getAttribute('data-section');
             const selectedCategory = modalSectionEl.getAttribute('data-category');
+
+            // Collect selected add-ons
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
             ).map(addon => ({
-                name: addon.getAttribute('data-name'), // Add-on name
-                price: parseFloat(addon.getAttribute('data-price')) // Add-on price
+                name: addon.getAttribute('data-name'),
+                price: parseFloat(addon.getAttribute('data-price'))
             }));
+
             const instructions = document.getElementById('modal-instructions').value;
-            // Ensure itemName and itemPrice are present
+
             if (!itemName || !itemPrice) {
                 alert('Failed to add item to cart. Please try again.');
                 return;
             }
-        
-            // Create the payload to send to the backend
+
             const cartPayload = {
-                itemName: itemName, // Food item name
+                itemName: itemName,
                 itemPrice: itemPrice,
-                itemImage: itemImage, // Image URL
+                itemImage: itemImage,
                 section: section,
                 category: selectedCategory,
                 addons: selectedAddOns,
                 instructions: instructions
             };
-        
-            // Send the payload to the server
+
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -426,24 +453,23 @@
                 },
                 body: JSON.stringify(cartPayload)
             })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        alert('Item added to cart successfully!');
-                        const modal = document.getElementById('itemModal');
-                        const modalInstance = bootstrap.Modal.getInstance(modal); // Get the Bootstrap modal instance
-                        modalInstance.hide(); // Hide the modal
-                       // window.location.href = '/menu'; // Redirect to the cart page
-                    } else {
-                        console.error('Error adding item to cart:', data.error);
-                        alert(data.error || 'Failed to add item to cart.');
-                    }
-                })
-                .catch(err => {
-                    console.error('Error adding item to cart:', err);
-                    alert('An error occurred while adding the item to the cart.');
-                });
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('Item added to cart successfully!');
+                    const modal = document.getElementById('itemModal');
+                    const modalInstance = bootstrap.Modal.getInstance(modal);
+                    modalInstance.hide();
+                } else {
+                    alert(data.error || 'Failed to add item to cart.');
+                }
+            })
+            .catch(err => {
+                console.error('Error adding item to cart:', err);
+                alert('An error occurred while adding the item to the cart.');
+            });
         }
+
         // Function to round reward points to a single digit
         function roundRewardPoints() {
             let rewardPointsElement = document.getElementById('reward-points');