Update templates/menu.html

templates/menu.html

@@ -470,120 +470,137 @@ form.text-center.mb-4 {
         </a>
     </div>
 
-  <!-- Modal for Item Details -->
-    <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ <!-- Modal for Item Details -->
+<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <!-- Item Image -->
+                <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
+                <!-- Item Name -->
+                <h5 id="modal-name" class="fw-bold text-center"></h5>
+                <!-- Item Price -->
+                <p id="modal-price" class="text-muted text-center"></p>
+                <!-- Item Description -->
+                <p id="modal-description" class="text-secondary"></p>
+                <!-- Add-ons -->
+                <div id="modal-addons" class="modal-addons mt-4">
+                    <h6>Customization Options</h6>
+                    <div id="addons-list" class="addons-container">Loading customization options...</div>
                 </div>
-                <div class="modal-body">
-                    <!-- Item Image -->
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
-                    <!-- Item Name -->
-                    <h5 id="modal-name" class="fw-bold text-center"></h5>
-                    <!-- Item Price -->
-                    <p id="modal-price" class="text-muted text-center"></p>
-                    <!-- Item Description -->
-                    <p id="modal-description" class="text-secondary"></p>
-                    <!-- Add-ons -->
-                    <div id="modal-addons" class="modal-addons mt-4">
-                        <h6>Customization Options</h6>
-                        <div id="addons-list" class="addons-container">Loading customization options...</div>
-                    </div>
-                    <div class="mt-4">
-                        <h6>Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
-                    </div>
-                    <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
-
+                <div class="mt-4">
+                    <h6>Custom Request</h6>
+                    <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
                 </div>
-                <!-- Quantity Controls and Add to Cart Button -->
-<div class="modal-footer d-flex align-items-center justify-content-between">
-    <!-- Quantity Controls -->
-    <div class="d-flex align-items-center gap-2">
-        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
-        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
-        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
-    </div>
-
-    <!-- Add to Cart Button -->
-    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
-</div>
-
-                    
+                <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
+            </div>
+            <!-- Quantity Controls and Add to Cart Button -->
+            <div class="modal-footer d-flex align-items-center justify-content-between">
+                <!-- Quantity Controls -->
+                <div class="d-flex align-items-center gap-2">
+                    <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
+                    <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
+                    <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
                 </div>
+                <!-- Add to Cart Button -->
+                <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
             </div>
         </div>
     </div>
+</div>
 
-    <!-- JavaScript -->
-   <script>
-        function showItemDetails(name, price, image, description, section, selectedCategory) {
-            document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `$${price}`;
-            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
-            document.getElementById('modal-description').innerText = description || 'No description available.';
-            document.getElementById('addons-list').innerHTML = 'Loading customization options...';
-            document.getElementById('modal-instructions').value = '';
-          
-            // Set section and category for reference
-            const modalSectionEl = document.getElementById('modal-section');
-            modalSectionEl.setAttribute('data-section', section);
-            modalSectionEl.setAttribute('data-category', selectedCategory);
-
-          // Set the default quantity to 1
-           document.getElementById('quantityInput').value = 1;
-          
-            // 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
+<!-- JavaScript -->
+<script>
+    // Show item details and fetch customization options
+    function showItemDetails(name, price, image, description, section, selectedCategory) {
+        document.getElementById('modal-name').innerText = name;
+        document.getElementById('modal-price').innerText = `$${price}`;
+        document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
+        document.getElementById('modal-description').innerText = description || 'No description available.';
+        document.getElementById('addons-list').innerHTML = 'Loading customization options...';
+        document.getElementById('modal-instructions').value = '';
+
+        const modalSectionEl = document.getElementById('modal-section');
+        modalSectionEl.setAttribute('data-section', section);
+        modalSectionEl.setAttribute('data-category', selectedCategory);
+
+         // Set the default quantity to 1
+             document.getElementById('quantityInput').value = 1;
         
-                    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);
+        // 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-group="${addon.name}" 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);
                     });
-                })
-                .catch(err => {
-                    console.error('Error fetching add-ons:', err);
-                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
+                    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>';
+            });
+    }
 
+    // Handle single-select/deselect logic for checkbox groups in all modals
+    document.addEventListener('click', function(event) {
+        if (event.target.classList.contains('addon-option')) {
+            handleAddonClick(event.target);
+        }
+    });
 
-  function filterMenu() {
+    // Handle checkbox selection logic
+    function handleAddonClick(checkbox) {
+        const groupName = checkbox.getAttribute('data-group');
+        const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides","Select Dip/Sauce","Extra Add-ons","Make it a Combo"].includes(groupName);
+        
+        // If it's not multi-select, uncheck all other checkboxes in the same group
+        if (!isMultiSelectGroup) {
+            const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
+            checkboxes.forEach(otherCheckbox => {
+                if (otherCheckbox !== checkbox) {
+                    otherCheckbox.checked = false;
+                }
+            });
+        }
+    }
+        function filterMenu() {
     let input = document.getElementById('searchBar').value.toLowerCase(); // Get the value from search bar
     let sections = document.querySelectorAll('h3'); // Select section headers
     let items = document.querySelectorAll('.menu-card'); // Select all items