Update templates/menu.html

templates/menu.html

@@ -454,17 +454,10 @@
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
 
-                    <div id="first-row">
-                        <div class="row">
-                            <div class="col-6">
-                                <h6>Type</h6>
-                                <div id="type-options"></div>
-                            </div>
-                            <div class="col-6">
-                                <h6>Spice Level</h6>
-                                <div id="spice-level-options"></div>
-                            </div>
-                        </div>
+                    <!-- Choose Preparation Style (for Starters only) -->
+                    <div id="prep-style-section" class="mt-4" style="display: none;">
+                        <h6>Choose Preparation Style</h6>
+                        <div id="prep-style-options" class="addon-section"></div>
                     </div>
 
                     <div id="modal-addons" class="modal-addons mt-4">
@@ -507,17 +500,15 @@
 
             document.getElementById('quantityInput').value = 1;
 
-            const typeOptions = document.getElementById('type-options');
-            const spiceLevelOptions = document.getElementById('spice-level-options');
-            const firstRow = document.getElementById('first-row');
+            const prepStyleSection = document.getElementById('prep-style-section');
+            const prepStyleOptions = document.getElementById('prep-style-options');
 
-            typeOptions.innerHTML = '';
-            spiceLevelOptions.innerHTML = '';
+            prepStyleOptions.innerHTML = '';
 
             if (section.toLowerCase() === 'starters') {
-                firstRow.style.display = 'block';
+                prepStyleSection.style.display = 'block';
             } else {
-                firstRow.style.display = 'none';
+                prepStyleSection.style.display = 'none';
             }
 
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
@@ -533,40 +524,35 @@
 
                     if (section.toLowerCase() === 'starters') {
                         data.addons.forEach(addon => {
-                            if (addon.name.toLowerCase() === "type") {
-                                addon.options.forEach(option => {
-                                    const optionId = `addon-type-${option}`;
-                                    const optionHTML = `
-                                        <div class="form-check">
-                                            <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Type">
-                                            <label class="form-check-label" for="${optionId}">
-                                                ${option}
-                                            </label>
-                                        </div>
-                                    `;
-                                    typeOptions.innerHTML += optionHTML;
-                                });
-                            }
-                            if (addon.name.toLowerCase() === "spice level") {
+                            if (addon.name.toLowerCase() === "choose preparation style") {
                                 addon.options.forEach(option => {
-                                    const optionId = `addon-spice-level-${option}`;
+                                    const optionId = `prep-style-${option}`;
                                     const optionHTML = `
                                         <div class="form-check">
-                                            <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
+                                            <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Choose Preparation Style">
                                             <label class="form-check-label" for="${optionId}">
                                                 ${option}
                                             </label>
                                         </div>
                                     `;
-                                    spiceLevelOptions.innerHTML += optionHTML;
+                                    prepStyleOptions.innerHTML += optionHTML;
                                 });
                             }
                         });
                     }
 
+                    const desiredOrder = [
+                        "Spice Level",
+                        "Choose Preparation Style",
+                        "Select Dip/Sauce",
+                        "Extra Add-ons",
+                        "Make it a Combo",
+                        "Type"
+                    ];
+
+                    const sections = {};
                     data.addons.forEach(addon => {
-                        if (section.toLowerCase() === 'starters' && 
-                            (addon.name.toLowerCase() === "type" || addon.name.toLowerCase() === "spice level")) {
+                        if (section.toLowerCase() === 'starters' && addon.name.toLowerCase() === "choose preparation style") {
                             return;
                         }
 
@@ -593,17 +579,20 @@
                             optionsContainer.appendChild(listItem);
                         });
                         sectionDiv.appendChild(optionsContainer);
-                        addonsList.appendChild(sectionDiv);
+                        sections[addon.name] = sectionDiv;
                     });
 
-                    if (section.toLowerCase() !== 'starters') {
-                        const spiceLevelSection = Array.from(addonsList.children).find(section => 
-                            section.getAttribute('data-addon-name') === "Spice Level"
-                        );
-                        if (spiceLevelSection) {
-                            addonsList.prepend(spiceLevelSection);
+                    desiredOrder.forEach(sectionName => {
+                        if (sections[sectionName]) {
+                            addonsList.appendChild(sections[sectionName]);
                         }
-                    }
+                    });
+
+                    Object.keys(sections).forEach(sectionName => {
+                        if (!desiredOrder.includes(sectionName)) {
+                            addonsList.appendChild(sections[sectionName]);
+                        }
+                    });
                 })
                 .catch(err => {
                     console.error('Error fetching add-ons:', err);
@@ -686,21 +675,14 @@
                 price: parseFloat(addon.getAttribute('data-price') || 0)
             }));
 
-            // Include Type and Spice Level for Starters
             if (section.toLowerCase() === 'starters') {
-                const typeOptions = Array.from(
-                    document.querySelectorAll('#type-options input[type="checkbox"]:checked')
-                ).map(option => ({
-                    name: option.getAttribute('data-name') || 'Default Type',
-                    price: 0
-                }));
-                const spiceLevelOptions = Array.from(
-                    document.querySelectorAll('#spice-level-options input[type="checkbox"]:checked')
+                const prepStyleOptions = Array.from(
+                    document.querySelectorAll('#prep-style-options input[type="checkbox"]:checked')
                 ).map(option => ({
-                    name: option.getAttribute('data-name') || 'Default Spice Level',
+                    name: option.getAttribute('data-name') || 'Default Preparation Style',
                     price: 0
                 }));
-                selectedAddOns = [...selectedAddOns, ...typeOptions, ...spiceLevelOptions];
+                selectedAddOns = [...selectedAddOns, ...prepStyleOptions];
             }
 
             const quantity = parseInt(document.getElementById('quantityInput').value) || 1;