Update templates/menu.html

templates/menu.html

@@ -592,8 +592,6 @@ form-check-input addon-option{
 <!-- JavaScript -->
 <script>
 // Show item details and fetch customization options
-// Show item details and fetch customization options
-// Show item details and fetch customization options
 function showItemDetails(name, price, image, description, section, selectedCategory) {
     console.log(`Showing details for: ${name}`);
     document.getElementById('modal-name').innerText = name;
@@ -609,6 +607,21 @@ function showItemDetails(name, price, image, description, section, selectedCateg
     // Set the default quantity to 1
     document.getElementById('quantityInput').value = 1;
 
+    // Display most common add-ons if available
+    const mostCommonAddonsSection = document.getElementById('most-common-addons');
+    mostCommonAddonsSection.innerHTML = ''; // Clear previous content
+    if (window.most_common_addons && window.most_common_addons.length > 0) {
+        // Display the most common add-ons
+        let commonAddonsText = "<h6>Most Common Add-Ons:</h6><ul>";
+        window.most_common_addons.forEach(addon => {
+            commonAddonsText += `<li>${addon}</li>`;
+        });
+        commonAddonsText += "</ul>";
+        mostCommonAddonsSection.innerHTML = commonAddonsText;
+    } else {
+        mostCommonAddonsSection.innerHTML = '<p>No most common add-ons found.</p>';
+    }
+
     // Fetch customization options based on the section
     fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
         .then(response => response.json())
@@ -684,9 +697,6 @@ function showItemDetails(name, price, image, description, section, selectedCateg
         });
 }
 
-
-
-
   function handleToggle(source) {
         const form = document.getElementById("filter-form");
         const veg = document.getElementById("veg-toggle");