Update templates/menu.html

templates/menu.html

@@ -229,40 +229,13 @@
             border-color: #006400;
         }
         .addon-section .form-check-input:checked::before {
-            content: '';
+            content: '\2713';
             font-size: 14px;
             position: absolute;
             top: 3px;
             left: 4px;
             color: white;
         }
-        .addon-section .form-check-input[type="radio"] {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            width: 20px;
-            height: 20px;
-            border: 2px solid #343a40;
-            border-radius: 50%;
-            background-color: #f0f0f0;
-            position: relative;
-            margin-right: 10px;
-        }
-        .addon-section .form-check-input[type="radio"]:checked {
-            background-color: #006400;
-            border-color: #006400;
-        }
-        .addon-section .form-check-input[type="radio"]:checked::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 10px;
-            height: 10px;
-            background-color: white;
-            border-radius: 50%;
-        }
         .addon-section .form-check-label {
             font-size: 16px;
             margin-left: 5px;
@@ -606,7 +579,7 @@
                                     const optionId = `addon-spice-level-${option}`;
                                     const optionHTML = `
                                         <div class="form-check">
-                                            <input type="radio" class="form-check-input" name="spice-level-first-row" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
+                                            <input type="checkbox" class="form-check-input spice-level-option" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
                                             <label class="form-check-label" for="${optionId}">
                                                 ${option}
                                             </label>
@@ -640,23 +613,13 @@
                             const listItem = document.createElement('div');
                             listItem.classList.add('form-check');
 
-                            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>
-                                `;
-                            }
+                            listItem.innerHTML = `
+                                <input type="checkbox" class="form-check-input ${addon.name.toLowerCase() === 'spice level' ? 'spice-level-option' : '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);
@@ -704,7 +667,7 @@
         }
 
         document.addEventListener('click', function(event) {
-            if (event.target.classList.contains('addon-option')) {
+            if (event.target.classList.contains('spice-level-option') || event.target.classList.contains('addon-option')) {
                 handleAddonClick(event.target);
             }
         });
@@ -712,8 +675,16 @@
         function handleAddonClick(checkbox) {
             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 && groupName.toLowerCase() !== "spice level") {
+
+            if (groupName.toLowerCase() === "spice level") {
+                const allSpiceLevelCheckboxes = document.querySelectorAll('.spice-level-option');
+                allSpiceLevelCheckboxes.forEach(otherCheckbox => {
+                    if (otherCheckbox !== checkbox) {
+                        otherCheckbox.checked = false;
+                    }
+                });
+            }
+            else if (!isMultiSelectGroup) {
                 const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
                 checkboxes.forEach(otherCheckbox => {
                     if (otherCheckbox !== checkbox) {
@@ -775,12 +746,7 @@
 
             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) {
+                if (option.checked) {
                     selectedAddOns.push({
                         name: option.getAttribute('data-name') || 'Default Name',
                         price: parseFloat(option.getAttribute('data-price') || 0)
@@ -801,7 +767,7 @@
                     name: option.getAttribute('data-name') || 'Default Type',
                     price: 0
                 }));
-                const spiceLevelOption = document.querySelector('#spice-level-options input[type="radio"][name="spice-level-first-row"]:checked');
+                const spiceLevelOption = document.querySelector('#spice-level-options input[type="checkbox"].spice-level-option:checked');
                 const spiceLevelOptions = spiceLevelOption ? [{
                     name: spiceLevelOption.getAttribute('data-name') || 'Default Spice Level',
                     price: 0