Update templates/menu.html

templates/menu.html

@@ -456,6 +456,10 @@
 
                     <div id="first-row">
                         <h6 id="first-row-title" style="display: none;">Customization Options</h6>
+                        <div class="addon-section">
+                            <h6>Choose Preparation Style</h6>
+                            <div id="prep-style-options"></div>
+                        </div>
                         <div class="addon-section">
                             <h6>Type</h6>
                             <div id="type-options"></div>
@@ -506,12 +510,14 @@
 
             document.getElementById('quantityInput').value = 1;
 
+            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 = '';
 
@@ -539,6 +545,20 @@
 
                     if (section.toLowerCase() === 'starters') {
                         data.addons.forEach(addon => {
+                            if (addon.name.toLowerCase() === "choose preparation style") {
+                                addon.options.forEach(option => {
+                                    const optionId = `addon-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="Choose Preparation Style">
+                                            <label class="form-check-label" for="${optionId}">
+                                                ${option}
+                                            </label>
+                                        </div>
+                                    `;
+                                    prepStyleOptions.innerHTML += optionHTML;
+                                });
+                            }
                             if (addon.name.toLowerCase() === "type") {
                                 addon.options.forEach(option => {
                                     const optionId = `addon-type-${option}`;
@@ -572,7 +592,9 @@
 
                     data.addons.forEach(addon => {
                         if (section.toLowerCase() === 'starters' && 
-                            (addon.name.toLowerCase() === "type" || addon.name.toLowerCase() === "spice level")) {
+                            (addon.name.toLowerCase() === "type" || 
+                             addon.name.toLowerCase() === "spice level" || 
+                             addon.name.toLowerCase() === "choose preparation style")) {
                             return;
                         }
 
@@ -603,7 +625,6 @@
                     });
 
                     const startersOrder = [
-                        "Choose Preparation Style",
                         "Select Dip/Sauce",
                         "Extra Add-ons",
                         "Make it a Combo"
@@ -719,6 +740,12 @@
             }));
 
             if (section.toLowerCase() === 'starters') {
+                const prepStyleOptions = Array.from(
+                    document.querySelectorAll('#prep-style-options input[type="checkbox"]:checked')
+                ).map(option => ({
+                    name: option.getAttribute('data-name') || 'Default Prep Style',
+                    price: 0
+                }));
                 const typeOptions = Array.from(
                     document.querySelectorAll('#type-options input[type="checkbox"]:checked')
                 ).map(option => ({
@@ -731,7 +758,7 @@
                     name: option.getAttribute('data-name') || 'Default Spice Level',
                     price: 0
                 }));
-                selectedAddOns = [...selectedAddOns, ...typeOptions, ...spiceLevelOptions];
+                selectedAddOns = [...selectedAddOns, ...prepStyleOptions, ...typeOptions, ...spiceLevelOptions];
             }
 
             const quantity = parseInt(document.getElementById('quantityInput').value) || 1;