Update templates/menu.html

templates/menu.html

@@ -279,14 +279,6 @@
             display: inline-block;
             vertical-align: middle;
         }
-        .spice-level-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-        }
-        .spice-level-grid .form-check {
-            margin-left: 0;
-        }
         form.text-center.mb-4 {
             display: flex;
             flex-direction: column;
@@ -635,9 +627,6 @@
                 font-size: 12px;
                 margin-right: 10px;
             }
-            .spice-level-grid {
-                gap: 5px;
-            }
         }
     </style>
 </head>
@@ -783,27 +772,6 @@
                             <h6>Type</h6>
                             <div id="type-options"></div>
                         </div>
-                        <div class="addon-section">
-                            <h6>Select Spice Level</h6>
-                            <div id="spice-level-options" class="spice-level-grid">
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-mild" value="Mild" data-name="Mild" data-group="Spice Level">
-                                    <label class="form-check-label" for="spice-mild">Mild</label>
-                                </div>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-spicy" value="Spicy" data-name="Spicy" data-group="Spice Level">
-                                    <label class="form-check-label" for="spice-spicy">Spicy</label>
-                                </div>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-medium" value="Medium" data-name="Medium" data-group="Spice Level">
-                                    <label class="form-check-label" for="spice-medium">Medium</label>
-                                </div>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-extra-spicy" value="Extra Spicy" data-name="Extra Spicy" data-group="Spice Level">
-                                    <label class="form-check-label" for="spice-extra-spicy">Extra Spicy</label>
-                                </div>
-                            </div>
-                        </div>
                     </div>
 
                     <div id="modal-addons" class="modal-addons mt-4">
@@ -1116,14 +1084,12 @@
 
             const prepStyleOptions = document.getElementById('prep-style-options');
             const typeOptions = document.getElementById('type-options');
-            const spiceLevelOptions = document.getElementById('spice-level-options');
             const firstRow = document.getElementById('first-row');
             const firstRowTitle = document.getElementById('first-row-title');
             const addonsTitle = document.getElementById('addons-title');
 
             prepStyleOptions.innerHTML = '';
             typeOptions.innerHTML = '';
-            spiceLevelOptions.innerHTML = '';
 
             if (section.toLowerCase() === 'starters') {
                 firstRow.style.display = 'block';
@@ -1222,7 +1188,6 @@
                     data.addons.forEach(addon => {
                         if (section.toLowerCase() === 'starters' && 
                             (addon.name.toLowerCase() === "type" || 
-                             addon.name.toLowerCase() === "spice level" || 
                              addon.name.toLowerCase() === "choose preparation style")) {
                             return;
                         }
@@ -1242,7 +1207,7 @@
                             listItem.classList.add('form-check');
 
                             listItem.innerHTML = `
-                                <input type="checkbox" class="form-check-input ${addon.name.toLowerCase() === 'spice level' ? 'spice-level-option' : 'addon-option'}" id="${optionId}" value="${option}"
+                                <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})` : ''}
@@ -1261,7 +1226,6 @@
                     ];
 
                     const desiredOrder = [
-                        "Spice Level",
                         "Choose Preparation Style",
                         "Select Dip/Sauce",
                         "Extra Add-ons",
@@ -1295,7 +1259,7 @@
         }
 
         document.addEventListener('click', function(event) {
-            if (event.target.classList.contains('spice-level-option') || event.target.classList.contains('addon-option')) {
+            if (event.target.classList.contains('addon-option')) {
                 handleAddonClick(event.target);
             }
         });
@@ -1304,15 +1268,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 (groupName.toLowerCase() === "spice level") {
-                const allSpiceLevelCheckboxes = document.querySelectorAll('.spice-level-option');
-                allSpiceLevelCheckboxes.forEach(otherCheckbox => {
-                    if (otherCheckbox !== checkbox) {
-                        otherCheckbox.checked = false;
-                    }
-                });
-            }
-            else if (!isMultiSelectGroup) {
+            if (!isMultiSelectGroup) {
                 const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
                 checkboxes.forEach(otherCheckbox => {
                     if (otherCheckbox !== checkbox) {
@@ -1398,12 +1354,7 @@
                     name: option.getAttribute('data-name') || 'Default Type',
                     price: 0
                 }));
-                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
-                }] : [];
-                selectedAddOns = [...selectedAddOns, ...prepStyleOptions, ...typeOptions, ...spiceLevelOptions];
+                selectedAddOns = [...selectedAddOns, ...prepStyleOptions, ...typeOptions];
             }
 
             const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
@@ -1737,7 +1688,4 @@
         });
     </script>
 </body>
-</html>
-
-
-
+</html>