Update templates/menu.html

templates/menu.html

@@ -613,29 +613,25 @@ function showItemDetails(name, price, image, description, section, selectedCateg
     // Set the default quantity to 1
     document.getElementById('quantityInput').value = 1;
 
-    // Fetch customization options based on the section
+    // ... (existing code up to fetch)
+
     fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
         .then(response => response.json())
         .then(data => {
             const addonsList = document.getElementById('addons-list');
             addonsList.innerHTML = ''; // Clear previous content
-
             if (!data.success || !data.addons || data.addons.length === 0) {
                 addonsList.innerHTML = '<p>No customization options available.</p>';
                 return;
             }
 
-            // Display customization options inside styled divs
+            // Render add-ons as before
             data.addons.forEach(addon => {
                 const sectionDiv = document.createElement('div');
-                sectionDiv.classList.add('addon-section'); // Add styling class
-
-                // Add section title
+                sectionDiv.classList.add('addon-section');
                 const title = document.createElement('h6');
                 title.innerText = addon.name;
                 sectionDiv.appendChild(title);
-
-                // Create options list
                 const optionsContainer = document.createElement('div');
                 addon.options.forEach((option, index) => {
                     const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
@@ -654,43 +650,41 @@ function showItemDetails(name, price, image, description, section, selectedCateg
                 addonsList.appendChild(sectionDiv);
             });
 
-            // Pre-select the most common add-ons (if any)
+            // Pre-select the highest-count spice level
             if (window.most_common_addons && window.most_common_addons.length > 0) {
                 const checkboxes = document.querySelectorAll('.addon-option');
-
-                // Group add-ons by category
                 const categorySelection = {
-                    "Select Spice Level": null,  // Ensure only one spice level is selected
-                    "Choose Spice Level": null,  // Ensure only one spice level is selected
-                    "Raita/Sides": [],    // Allow multiple selections for Raita/Sides
-                    // Add other categories if needed
+                    "Select Spice Level": null,
+                    "Choose Spice Level": null,
+                    "Raita/Sides": [],
                 };
 
+                // First pass: Find and select the highest-count spice level
+                for (let spice of window.most_common_addons) {
+                    const isSpiceLevel = ["Mild", "Medium", "Extra Spicy", "Hot"].includes(spice); // Define valid spice levels
+                    if (isSpiceLevel) {
+                        checkboxes.forEach(checkbox => {
+                            const checkboxName = checkbox.getAttribute('data-name').trim();
+                            const checkboxGroup = checkbox.getAttribute('data-group');
+                            if ((checkboxGroup === "Select Spice Level" || checkboxGroup === "Choose Spice Level") &&
+                                checkboxName === spice && categorySelection[checkboxGroup] === null) {
+                                console.log(`Pre-selecting highest-count spice level: ${checkboxName}`);
+                                checkbox.checked = true;
+                                categorySelection[checkboxGroup] = checkboxName;
+                            }
+                        });
+                        if (categorySelection["Select Spice Level"] || categorySelection["Choose Spice Level"]) break; // Stop after selecting the first spice
+                    }
+                }
+
+                // Second pass: Select other non-spice add-ons (e.g., Raita/Sides)
                 checkboxes.forEach(checkbox => {
-                    const checkboxName = checkbox.getAttribute('data-name').trim(); // Trim spaces for checkbox value
-                    const checkboxGroup = checkbox.getAttribute('data-group'); // Get the category/group of this checkbox
-
-                    // If the checkbox belongs to a predefined category like "Spice Level"
-                    if (checkboxGroup === "Select Spice Level" || checkboxGroup === "Choose Spice Level") {
-                        if (categorySelection[checkboxGroup] === null) {
-                            console.log(`Pre-selecting spice level: ${checkboxName} for ${checkboxGroup}`);
-                            checkbox.checked = true;
-                            categorySelection[checkboxGroup] = checkboxName; // Mark as selected for this category
-                        }
-
-                    } else if (checkboxGroup === "Raita/Sides") {
-                        // For Raita/Sides, select any matching add-ons
-                        if (window.most_common_addons.includes(checkboxName)) {
-                            console.log(`Pre-selecting add-on: ${checkboxName}`);
-                            checkbox.checked = true;
-                            categorySelection["Raita/Sides"].push(checkboxName); // Mark as selected
-                        }
-                    } else {
-                        // For other categories, select matching add-ons
-                        if (window.most_common_addons.includes(checkboxName)) {
-                            console.log(`Pre-selecting add-on: ${checkboxName}`);
-                            checkbox.checked = true;
-                        }
+                    const checkboxName = checkbox.getAttribute('data-name').trim();
+                    const checkboxGroup = checkbox.getAttribute('data-group');
+                    if (checkboxGroup === "Raita/Sides" && window.most_common_addons.includes(checkboxName)) {
+                        console.log(`Pre-selecting add-on: ${checkboxName}`);
+                        checkbox.checked = true;
+                        categorySelection["Raita/Sides"].push(checkboxName);
                     }
                 });
             }