Update templates/menu.html

templates/menu.html

@@ -463,117 +463,140 @@ form.text-center.mb-4 {
 
     
 
-<!-- Modal HTML -->
-<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">
-                <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
-                <h5 id="modal-name" class="fw-bold text-center"></h5>
-                <p id="modal-price" class="text-muted text-center"></p>
-                <p id="modal-description" class="text-secondary"></p>
-
-                <div id="modal-addons" class="mt-4">
-                    <h6>Customization Options</h6>
-                    <div id="addons-list">Loading customization options...</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>
                 </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>
-                <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
-            </div>
-            <div class="modal-footer">
-                <div class="d-flex align-items-center">
-                    <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 class="modal-footer">
+                    <div class="d-flex align-items-center">
+    <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>
+
+                    <div>
+     <button class="add-to-cart-btn" onclick="addToCartFromModal()">Add items $<span id="totalAmountDisplay">0.00</span></button>
+</div>
+                    
                 </div>
-                <button class="add-to-cart-btn" onclick="addToCartFromModal()">
-                    Add items $<span id="totalAmountDisplay">0.00</span>
-                </button>
             </div>
         </div>
     </div>
 
+    <!-- JavaScript -->
     <script>
-        // Checkbox exclusivity logic (single-select per group, multi-select for specific groups)
-        document.addEventListener('change', function (e) {
-            if (e.target.matches('.addon-option')) {
-                const multiSelectGroups = ['ExtraAdd-ons']; // Sections allowing multiple selections
-                if (!multiSelectGroups.includes(e.target.name)) {
-                    document.querySelectorAll(`input[name="${e.target.name}"]`).forEach(checkbox => {
-                        if (checkbox !== e.target) checkbox.checked = false;
-                    });
-                }
-            }
-        });
-
-// Quantity management
-const decreaseBtn = document.getElementById('decreaseQuantity');
-const increaseBtn = document.getElementById('increaseQuantity');
-const quantityInput = document.getElementById('quantityInput');
-
-decreaseBtn.addEventListener('click', () => {
+        function changeQuantity(amount, itemId) {
+    let quantityInput = document.getElementById("quantity-" + itemId);
     let currentQuantity = parseInt(quantityInput.value);
-    if (currentQuantity > 1) quantityInput.value = currentQuantity - 1;
-});
-
-increaseBtn.addEventListener('click', () => {
-    quantityInput.value = parseInt(quantityInput.value) + 1;
-});
-
-// Add to Cart logic
-function addToCartFromModal() {
-    const cartPayload = {
-        itemName: document.getElementById('modal-name').innerText,
-        itemPrice: parseFloat(document.getElementById('modal-price').innerText.replace('$', '')),
-        itemImage: document.getElementById('modal-img').src,
-        section: document.getElementById('modal-section').getAttribute('data-section'),
-        category: document.getElementById('modal-section').getAttribute('data-category'),
-        addons: Array.from(document.querySelectorAll('#addons-list input:checked')).map(addon => ({
-            name: addon.getAttribute('data-name'),
-            price: parseFloat(addon.getAttribute('data-price')) || 0
-        })),
-        instructions: document.getElementById('modal-instructions').value,
-        quantity: parseInt(document.getElementById('quantityInput').value) || 1
-    };
+    let newQuantity = currentQuantity + amount;
 
-    fetch('/cart/add', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(cartPayload)
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            alert('Item added to cart successfully!');
-            bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
-        } else {
-            alert('Failed to add item to cart.');
-        }
-    })
-    .catch(err => {
-        console.error('Error:', err);
-        alert('An error occurred.');
-    });
-}
-
-// Reward points rounding
-function roundRewardPoints() {
-    const rewardPointsElement = document.getElementById('reward-points');
-    if (rewardPointsElement) {
-        const points = parseFloat(rewardPointsElement.innerText.trim());
-        if (!isNaN(points)) rewardPointsElement.innerText = points.toFixed(1);
+    if (newQuantity >= 1) {
+        quantityInput.value = newQuantity;
+        updateTotalAmount(itemId);
     }
 }
-window.onload = roundRewardPoints;
-</script>
+
+function updateTotalAmount(itemId) {
+    let quantity = parseInt(document.getElementById("quantity-" + itemId).value);
+    let price = parseFloat(document.getElementById("price-" + itemId).innerText); // Get price dynamically
+    let totalAmount = price * quantity;
+    
+    // Update the individual total amount display
+    document.getElementById("totalAmountDisplay-" + itemId).innerText = $${totalAmount.toFixed(2)};
+}
+
+function addToCartFromModal(itemId) {
+    let quantity = parseInt(document.getElementById("quantity-" + itemId).value);
+    let itemName = document.getElementById("name-" + itemId).innerText; // Get item name dynamically
+    let price = parseFloat(document.getElementById("price-" + itemId).innerText); // Get price dynamically
+    let totalAmount = price * quantity;
+
+    // Update the "Add to Cart" button with the correct total amount
+    document.getElementById("addToCartBtn-" + itemId).innerHTML = Add to Cart $${totalAmount.toFixed(2)};
+
+    alert(Added ${quantity} x ${itemName} ($${totalAmount.toFixed(2)}) to cart!);
+}
+        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);
+            // 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>';
+                });
+        }
 
         function filterMenu() {
     let input = document.getElementById('searchBar').value.toLowerCase(); // Get the value from search bar
@@ -757,4 +780,4 @@ function roundRewardPoints() {
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>