Update templates/menu.html

templates/menu.html

@@ -492,8 +492,6 @@ form.text-center.mb-4 {
                         <h6>Customization Options</h6>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
-
-
                     <div class="mt-4">
                         <h6>Custom Request</h6>
                         <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
@@ -558,6 +556,7 @@ form.text-center.mb-4 {
                         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) => {
@@ -566,7 +565,7 @@ form.text-center.mb-4 {
                             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}">
+                                       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>
@@ -582,8 +581,30 @@ form.text-center.mb-4 {
                     document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
         }
+// Generalized function to handle single/multi-select logic for all modals
+    document.addEventListener('click', function(event) {
+        if (event.target.classList.contains('addon-option')) {
+            handleAddonClick(event.target);
+        }
+    });
+
+    // Handle single-select/deselect logic for checkbox groups in all modals
+    function handleAddonClick(checkbox) {
+        const groupName = checkbox.getAttribute('data-group');
+        const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides"].includes(groupName);
+        
+        // If it's not multi-select, uncheck all other checkboxes in the same group
+        if (!isMultiSelectGroup) {
+            const checkboxes = document.querySelectorAll(.addon-option[data-group="${groupName}"]);
+            checkboxes.forEach(otherCheckbox => {
+                if (otherCheckbox !== checkbox) {
+                    otherCheckbox.checked = false;
+                }
+            });
+        }
+    }
 
-        function filterMenu() {
+  function filterMenu() {
     let input = document.getElementById('searchBar').value.toLowerCase(); // Get the value from search bar
     let sections = document.querySelectorAll('h3'); // Select section headers
     let items = document.querySelectorAll('.menu-card'); // Select all items