Update templates/menu.html

templates/menu.html

@@ -522,26 +522,33 @@ form.text-center.mb-4 {
 
     <!-- JavaScript -->
    <script>
+    <script>
     function showItemDetails(name, price, image, description, section, selectedCategory) {
+        console.log("showItemDetails called with:", {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);
+
+        console.log("Fetching customization options for item:", name);
         
         // Fetch customization options based on the section
         fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
             .then(response => response.json())
             .then(data => {
+                console.log("Customization options fetched:", 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;
@@ -585,12 +592,14 @@ form.text-center.mb-4 {
         let sections = document.querySelectorAll('h3'); // Select section headers
         let items = document.querySelectorAll('.menu-card'); // Select all items
         let matchedSections = new Set(); // Store matched sections
-        
+
+        console.log("Filtering menu with input:", input);
+
         // Hide all items initially
         items.forEach(item => {
             let itemName = item.querySelector('.card-title').innerText.toLowerCase(); // Get item name
             let itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase(); // Get section name
-            
+
             // If search matches item name or section, show the item
             if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
                 item.style.display = 'block';  // Show item if it matches search
@@ -599,7 +608,7 @@ form.text-center.mb-4 {
                 item.style.display = 'none'; // Hide item if not matched
             }
         });
-        
+
         // Show or hide sections based on matched items
         sections.forEach(section => {
             let sectionRow = section.nextElementSibling; // The row containing items
@@ -616,18 +625,14 @@ form.text-center.mb-4 {
     function addToCartFromModal() {
         const itemName = document.getElementById('modal-name').innerText;
         let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
-
-        // Validate item price
-        if (isNaN(itemPrice)) {
-            alert('Invalid price for the item. Please check the item details.');
-            return;
-        }
-
         const itemImage = document.getElementById('modal-img').src;
         const modalSectionEl = document.getElementById('modal-section');
         const section = modalSectionEl.getAttribute('data-section');
         const selectedCategory = modalSectionEl.getAttribute('data-category');
-        
+        const quantity = parseInt(document.getElementById('quantityInput').value) || 1; // Default to 1 if invalid
+
+        console.log("Adding to cart with data:", { itemName, itemPrice, itemImage, section, selectedCategory, quantity });
+
         if (!itemName || !itemPrice || !section || !itemImage) {
             console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage });
             return;
@@ -641,10 +646,6 @@ form.text-center.mb-4 {
             price: parseFloat(addon.getAttribute('data-price') || 0)
         }));
 
-        // Get the selected quantity
-        const quantity = parseInt(document.getElementById('quantityInput').value) || 1; // Default to 1 if invalid
-        const instructions = document.getElementById('modal-instructions').value;
-
         // Prepare data for the cart
         const cartPayload = {
             itemName: itemName,
@@ -653,10 +654,12 @@ form.text-center.mb-4 {
             section: section,
             category: selectedCategory,
             addons: selectedAddOns,
-            instructions: instructions,
-            quantity: quantity // Include the quantity
+            quantity: quantity, // Include the quantity
+            instructions: document.getElementById('modal-instructions').value
         };
 
+        console.log("Cart Payload:", cartPayload);
+
         // Send the cart data to the server
         fetch('/cart/add', {
             method: 'POST',
@@ -667,6 +670,7 @@ form.text-center.mb-4 {
         })
         .then(response => response.json())
         .then(data => {
+            console.log("Response from server:", data);
             if (data.success) {
                 alert('Item added to cart successfully!');
                 updateCartUI(data.cart); // Update cart UI after adding an item
@@ -684,6 +688,8 @@ form.text-center.mb-4 {
     }
 
     function updateCartUI(cart) {
+        console.log("Updating cart UI with cart data:", cart);
+
         if (!Array.isArray(cart)) {
             console.error('Invalid cart data:', cart);
             return;
@@ -693,24 +699,6 @@ form.text-center.mb-4 {
         cartIcon.innerText = cart.length;  // Assuming cart is an array of items
     }
 
-    function updateCartDisplay(cart) {
-        if (!Array.isArray(cart)) {
-            console.error('Invalid cart data:', cart);
-            return;
-        }
-
-        const cartCountElement = document.getElementById('cart-count');
-        cartCountElement.innerText = cart.length;  // Update cart item count
-        
-        const successNotification = document.createElement('div');
-        successNotification.classList.add('success-notification');
-        successNotification.innerText = 'Item added to cart!';
-        document.body.appendChild(successNotification);
-        setTimeout(() => {
-            successNotification.remove(); // Remove success notification after a few seconds
-        }, 2000);
-    }
-
     document.addEventListener('DOMContentLoaded', function () {
         // Get references to the quantity buttons and the input field
         const decreaseBtn = document.getElementById('decreaseQuantity');
@@ -724,6 +712,7 @@ form.text-center.mb-4 {
                 currentQuantity--;
                 quantityInput.value = currentQuantity;
             }
+            console.log("Decreased quantity:", quantityInput.value);
         });
 
         // Add event listener to increase button
@@ -731,6 +720,7 @@ form.text-center.mb-4 {
             let currentQuantity = parseInt(quantityInput.value);
             currentQuantity++;
             quantityInput.value = currentQuantity;
+            console.log("Increased quantity:", quantityInput.value);
         });
     });