Update templates/menu.html

templates/menu.html

@@ -406,45 +406,45 @@
             modalSectionEl.setAttribute('data-category', selectedCategory);
             // Fetch customization options based on the section
             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
-                    data.addons.forEach(addon => {
-                        const sectionDiv = document.createElement('div');
-                        sectionDiv.classList.add('addon-section'); // Add styling class
-                        // Add section title
-                        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}`;
-                            const listItem = document.createElement('div');
-                            listItem.classList.add('form-check');
-                            listItem.innerHTML = `
-                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
-                                       data-name="${option}" 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})` : ''}</label>
-                            `;
-                            optionsContainer.appendChild(listItem);
-                        });
-                        sectionDiv.appendChild(optionsContainer);
-                        addonsList.appendChild(sectionDiv);
-                    });
-                })
-                .catch(err => {
-                    console.error('Error fetching add-ons:', err);
-                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
-                });
+    .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;
         }
+
+        data.addons.forEach(addon => {
+            const sectionDiv = document.createElement('div');
+            sectionDiv.classList.add('addon-section');
+            const title = document.createElement('h6');
+            title.innerText = addon.name;
+            sectionDiv.appendChild(title);
+
+            const optionsContainer = document.createElement('div');
+            addon.options.forEach((option, index) => {
+                const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
+                const listItem = document.createElement('div');
+                listItem.classList.add('form-check');
+                listItem.innerHTML = `
+                    <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
+                           data-name="${option}" 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})` : ''}
+                    </label>
+                `;
+                optionsContainer.appendChild(listItem);
+            });
+            sectionDiv.appendChild(optionsContainer);
+            addonsList.appendChild(sectionDiv);
+        });
+    })
+    .catch(err => {
+        console.error('Error fetching add-ons:', err);
+        document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
+    });
         
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;