Update templates/menu.html

templates/menu.html

@@ -242,9 +242,10 @@
             color: #343a40;
         }
         .addon-section .form-check {
-            display: inline-flex;
+            display: flex;
             align-items: center;
             margin-left: 10px;
+            margin-bottom: 8px;
             color: #343a40;
         }
         .addon-section .form-check-input {
@@ -274,7 +275,6 @@
         .addon-section .form-check-label {
             font-size: 16px;
             margin-left: 5px;
-            margin-right: 15px;
             cursor: pointer;
             display: inline-block;
             vertical-align: middle;
@@ -618,6 +618,10 @@
                 padding: 8px;
                 margin-bottom: 5px;
             }
+            .addon-section .form-check {
+                margin-left: 0;
+                margin-bottom: 5px;
+            }
             .addon-section .form-check-input {
                 width: 16px;
                 height: 16px;
@@ -625,7 +629,6 @@
             }
             .addon-section .form-check-label {
                 font-size: 12px;
-                margin-right: 10px;
             }
         }
     </style>
@@ -772,6 +775,27 @@
                             <h6>Type</h6>
                             <div id="type-options"></div>
                         </div>
+                        <div class="addon-section">
+                            <h6>Select Spice Level</h6>
+                            <div id="spice-level-options">
+                                <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-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-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-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">
@@ -1084,12 +1108,14 @@
 
             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';
@@ -1188,6 +1214,7 @@
                     data.addons.forEach(addon => {
                         if (section.toLowerCase() === 'starters' && 
                             (addon.name.toLowerCase() === "type" || 
+                             addon.name.toLowerCase() === "spice level" || 
                              addon.name.toLowerCase() === "choose preparation style")) {
                             return;
                         }
@@ -1207,7 +1234,7 @@
                             listItem.classList.add('form-check');
 
                             listItem.innerHTML = `
-                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
+                                <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})` : ''}
@@ -1226,6 +1253,7 @@
                     ];
 
                     const desiredOrder = [
+                        "Spice Level",
                         "Choose Preparation Style",
                         "Select Dip/Sauce",
                         "Extra Add-ons",
@@ -1259,7 +1287,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);
             }
         });
@@ -1268,7 +1296,15 @@
             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 (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) {
@@ -1354,7 +1390,12 @@
                     name: option.getAttribute('data-name') || 'Default Type',
                     price: 0
                 }));
-                selectedAddOns = [...selectedAddOns, ...prepStyleOptions, ...typeOptions];
+                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];
             }
 
             const quantity = parseInt(document.getElementById('quantityInput').value) || 1;