Update templates/menu.html

templates/menu.html

@@ -266,6 +266,7 @@
         .addon-section .form-check-label {
             font-size: 16px;
             margin-left: 5px;
+            margin-right: 15px;
             cursor: pointer;
             display: inline-block;
             vertical-align: middle;
@@ -605,7 +606,7 @@
                                     const optionId = `addon-spice-level-${option}`;
                                     const optionHTML = `
                                         <div class="form-check">
-                                            <input type="radio" class="form-check-input" name="spice-level" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
+                                            <input type="radio" class="form-check-input" name="spice-level-first-row" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
                                             <label class="form-check-label" for="${optionId}">
                                                 ${option}
                                             </label>
@@ -638,13 +639,24 @@
                             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>
-                            `;
+
+                            if (addon.name.toLowerCase() === "spice level") {
+                                listItem.innerHTML = `
+                                    <input type="radio" class="form-check-input addon-option" name="spice-level-addons" 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>
+                                `;
+                            } else {
+                                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);
@@ -701,7 +713,7 @@
             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);
             
-            if (!isMultiSelectGroup) {
+            if (!isMultiSelectGroup && groupName.toLowerCase() !== "spice level") {
                 const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
                 checkboxes.forEach(otherCheckbox => {
                     if (otherCheckbox !== checkbox) {
@@ -759,12 +771,22 @@
                 return;
             }
            
-            let selectedAddOns = Array.from(
-                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
-            ).map(addon => ({
-                name: addon.getAttribute('data-name') || 'Default Name',
-                price: parseFloat(addon.getAttribute('data-price') || 0)
-            }));
+            let selectedAddOns = [];
+
+            const addonsListOptions = document.querySelectorAll('#addons-list .addon-option');
+            addonsListOptions.forEach(option => {
+                if (option.type === "radio" && option.checked) {
+                    selectedAddOns.push({
+                        name: option.getAttribute('data-name') || 'Default Name',
+                        price: parseFloat(option.getAttribute('data-price') || 0)
+                    });
+                } else if (option.type === "checkbox" && option.checked) {
+                    selectedAddOns.push({
+                        name: option.getAttribute('data-name') || 'Default Name',
+                        price: parseFloat(option.getAttribute('data-price') || 0)
+                    });
+                }
+            });
 
             if (section.toLowerCase() === 'starters') {
                 const prepStyleOptions = Array.from(
@@ -779,7 +801,7 @@
                     name: option.getAttribute('data-name') || 'Default Type',
                     price: 0
                 }));
-                const spiceLevelOption = document.querySelector('#spice-level-options input[type="radio"][name="spice-level"]:checked');
+                const spiceLevelOption = document.querySelector('#spice-level-options input[type="radio"][name="spice-level-first-row"]:checked');
                 const spiceLevelOptions = spiceLevelOption ? [{
                     name: spiceLevelOption.getAttribute('data-name') || 'Default Spice Level',
                     price: 0