Update templates/menu.html

templates/menu.html

@@ -242,16 +242,15 @@
         }
         .addon-section h6 {
             margin-bottom: 10px;
-            font-size: 1rem;
+            font-size: 1.1rem;
             font-weight: bold;
             color: #343a40;
         }
         .addon-section .form-check {
-            display: flex;
+            display: inline-flex;
             align-items: center;
             margin-left: 10px;
             color: #343a40;
-            justify-content: space-between;
         }
         .addon-section .form-check-input {
             -webkit-appearance: none;
@@ -278,7 +277,7 @@
             color: white;
         }
         .addon-section .form-check-label {
-            font-size: 0.9rem;
+            font-size: 16px;
             margin-left: 5px;
             margin-right: 15px;
             cursor: pointer;
@@ -349,8 +348,8 @@
         }
         .item-details .nutritional-info {
             display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
+            grid-template-columns: 1fr 1fr; /* Two equal columns */
+            gap: 10px; /* Space between columns */
             background-color: #e9ecef;
             padding: 10px;
             border-radius: 5px;
@@ -420,29 +419,6 @@
             font-size: 12px;
             padding: 0 5px;
         }
-        /* Portion and Spice Buttons */
-        .portion-btn, .spice-btn {
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            padding: 8px 15px;
-            font-size: 0.9rem;
-            background-color: #fff;
-            color: #333;
-            transition: background-color 0.3s, color 0.3s;
-        }
-        .portion-btn.active, .spice-btn.active {
-            background-color: #ff8c00;
-            color: #fff;
-            border-color: #ff8c00;
-        }
-        .portion-btn:hover, .spice-btn:hover {
-            background-color: #f0f0f0;
-        }
-        /* Spice Level Indicator in Header */
-        #spice-level-indicator {
-            font-size: 1rem;
-        }
-        /* Modal Scrolling */
         .modal-body {
             max-height: 60vh;
             overflow-y: auto;
@@ -665,38 +641,15 @@
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="itemModalLabel">
-                        <span id="modal-name"></span>
-                        <span id="spice-level-indicator" class="ms-2"></span>
-                    </h5>
+                    <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>
 
-                    <!-- Portion Size Selection -->
-                    <div class="mb-3">
-                        <h6>Choose Portion</h6>
-                        <div class="d-flex gap-2">
-                            <button type="button" class="btn portion-btn active" data-portion="Full" data-weight="400g">Full (400g)</button>
-                            <button type="button" class="btn portion-btn" data-portion="Half" data-weight="200g">Half (200g)</button>
-                        </div>
-                    </div>
-
-                    <!-- Spice Level Adjustment -->
-                    <div class="mb-3">
-                        <h6>Adjust Spice Level</h6>
-                        <div class="d-flex gap-2 flex-wrap">
-                            <button type="button" class="btn spice-btn" data-spice="Mild">Mild <span class="spice-icon">🌿</span></button>
-                            <button type="button" class="btn spice-btn active" data-spice="Medium">Medium <span class="spice-icon">🥵</span></button>
-                            <button type="button" class="btn spice-btn" data-spice="Hot">Hot <span class="spice-icon">🌶️🌶️</span></button>
-                            <button type="button" class="btn spice-btn" data-spice="Extra Hot">Extra Hot <span class="spice-icon">🌶️🌶️🌶️</span></button>
-                        </div>
-                    </div>
-
-                    <!-- Existing Add-ons Section -->
                     <div id="first-row">
                         <h6 id="first-row-title" style="display: none;">Customization Options</h6>
                         <div class="addon-section">
@@ -987,36 +940,6 @@
 
             document.getElementById('quantityInput').value = 1;
 
-            // Initialize Spice Level Indicator
-            const spiceLevelIndicator = document.getElementById('spice-level-indicator');
-            spiceLevelIndicator.innerText = '🥵'; // Default to Medium spice level
-
-            // Handle Portion Buttons
-            const portionButtons = document.querySelectorAll('.portion-btn');
-            portionButtons.forEach(btn => {
-                btn.addEventListener('click', function () {
-                    portionButtons.forEach(b => b.classList.remove('active'));
-                    this.classList.add('active');
-                });
-            });
-
-            // Handle Spice Buttons
-            const spiceButtons = document.querySelectorAll('.spice-btn');
-            spiceButtons.forEach(btn => {
-                btn.addEventListener('click', function () {
-                    spiceButtons.forEach(b => b.classList.remove('active'));
-                    this.classList.add('active');
-                    const spiceLevel = this.getAttribute('data-spice');
-                    const spiceIcons = {
-                        'Mild': '🌿',
-                        'Medium': '🥵',
-                        'Hot': '🌶️🌶️',
-                        'Extra Hot': '🌶️🌶️🌶️'
-                    };
-                    spiceLevelIndicator.innerText = spiceIcons[spiceLevel];
-                });
-            });
-
             const prepStyleOptions = document.getElementById('prep-style-options');
             const typeOptions = document.getElementById('type-options');
             const spiceLevelOptions = document.getElementById('spice-level-options');
@@ -1042,9 +965,11 @@
             addonsList.innerHTML = '';
 
             const dummySections = [
-                { name: "Beverages", options: ["Mango Lassi ($3.5)", "Sweet Lassi ($3)"] },
-                { name: "Desserts", options: ["Gulab Jamun ($4)", "Rasmalai ($4.5)"] },
-                { name: "ExtraSides", options: ["Naan ($2.5)", "Rice ($3)"] }
+                { name: "Beverages", options: ["Sprite ($3)", "Thums Up ($3)", "Virgin Mojito ($3)", "Lemonade ($3)", "Blue Lagoon Mocktail ($3)"] },
+                { name: "Sauces", options: ["Mint Chutney", "Tomato Sauce"] },
+                { name: "Extra Toppings", options: ["Cheese ($2)", "Olives ($1)", "Jalapenos ($1)", "Mushrooms ($2)", "Peppers ($1)"] },
+                { name: "Sides", options: ["Fries ($3)", "Salad ($2)", "Garlic Bread ($3)", "Onion Rings ($2)", "Coleslaw ($2)"] },
+                { name: "Desserts", options: ["Ice Cream ($3)", "Brownie ($3)", "Cheesecake ($4)", "Gulab Jamun ($3)", "Rasmalai ($4)"] }
             ];
 
             dummySections.forEach(addon => {
@@ -1217,7 +1142,7 @@
 
         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", "Beverages", "Desserts", "ExtraSides"].includes(groupName);
+            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"].includes(groupName);
 
             if (groupName.toLowerCase() === "spice level") {
                 const allSpiceLevelCheckboxes = document.querySelectorAll('.spice-level-option');
@@ -1271,4 +1196,385 @@
         document.getElementById('searchBar').addEventListener('keyup', debounce(filterMenu, 300));
 
         function addToCartFromModal() {
-            const itemName = document.getElementById('modal
+            const itemName = document.getElementById('modal-name').innerText;
+            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+
+            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');
+            if (!itemName || !itemPrice || !section || !itemImage) {
+                console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage});
+                return;
+            }
+           
+            let selectedAddOns = [];
+
+            const addonsListOptions = document.querySelectorAll('#addons-list .addon-option');
+            addonsListOptions.forEach(option => {
+                if (option.checked) {
+                    selectedAddOns.push({
+                        name: option.getAttribute('data-name') || 'Default Name',
+                        price: parseFloat(option.getAttribute('data-price') || 0)
+                    });
+                }
+            });
+
+            if (section.toLowerCase() === 'starters') {
+                const prepStyleOptions = Array.from(
+                    document.querySelectorAll('#prep-style-options input[type="checkbox"]:checked')
+                ).map(option => ({
+                    name: option.getAttribute('data-name') || 'Default Prep Style',
+                    price: 0
+                }));
+                const typeOptions = Array.from(
+                    document.querySelectorAll('#type-options input[type="checkbox"]:checked')
+                ).map(option => ({
+                    name: option.getAttribute('data-name') || 'Default Type',
+                    price: 0
+                }));
+                const spiceLevelOption = document.querySelector('#spice-level-options input[type="checkbox"].spice-level-option:checked');
+                const spiceLevelOptions = spiceLevelOption ? [{
+                    name: spiceLevelOption.getAttribute('data-name') || 'Default Spice Level',
+                    price: 0
+                }] : [];
+                selectedAddOns = [...selectedAddOns, ...prepStyleOptions, ...typeOptions, ...spiceLevelOptions];
+            }
+
+            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+            const instructions = document.getElementById('modal-instructions').value;
+
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: selectedCategory,
+                addons: selectedAddOns,
+                instructions: instructions,
+                quantity: quantity
+            };
+
+            fetch('/cart/add', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(cartPayload)
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.success) {
+                    alert('Item added to cart successfully!');
+                    updateCartUI(data.cart);
+                    const modal = document.getElementById('itemModal');
+                    const modalInstance = bootstrap.Modal.getInstance(modal);
+                    modalInstance.hide();
+                } else {
+                    console.error('Failed to add item to cart:', data.error);
+                    alert(data.error || 'Failed to add item to cart.');
+                }
+            })
+            .catch(err => {
+                console.error('Error adding item to cart:', err);
+                alert('An error occurred while adding the item to the cart: ' + err.message);
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                const modal = document.getElementById('itemModal');
+                const modalInstance = bootstrap.Modal.getInstance(modal);
+                modalInstance.hide();
+            });
+        }
+
+        function handleSoftDrinkAdd(button) {
+            const buttonContainer = button.closest('.button-container');
+            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
+            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
+            const quantityDisplay = quantitySelector.querySelector('.quantity-display');
+
+            addButton.style.display = 'none';
+            quantitySelector.style.display = 'flex';
+
+            const itemName = buttonContainer.getAttribute('data-item-name');
+            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
+            const itemImage = buttonContainer.getAttribute('data-item-image');
+            const section = buttonContainer.getAttribute('data-item-section');
+            const category = buttonContainer.getAttribute('data-item-category');
+
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: category,
+                addons: [],
+                instructions: '',
+                quantity: 1
+            };
+
+            fetch('/cart/add', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(cartPayload)
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.success) {
+                    alert('Item added to cart successfully!');
+                    updateCartUI(data.cart);
+                    quantityDisplay.innerText = 1;
+                } else {
+                    console.error('Failed to add item to cart:', data.error);
+                    alert(data.error || 'Failed to add item to cart.');
+                    addButton.style.display = 'block';
+                    quantitySelector.style.display = 'none';
+                }
+            })
+            .catch(err => {
+                console.error('Error adding item to cart:', err);
+                alert('An error occurred while adding the item to the cart: ' + err.message);
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                quantityDisplay.innerText = 1;
+            });
+        }
+
+        function increaseQuantity(button) {
+            const buttonContainer = button.closest('.button-container');
+            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
+            const quantityToAddSelect = buttonContainer.querySelector('.quantity-to-add');
+            const quantityToAdd = parseInt(quantityToAddSelect.value);
+            let currentQuantity = parseInt(quantityDisplay.innerText);
+
+            currentQuantity += quantityToAdd;
+            quantityDisplay.innerText = currentQuantity;
+
+            const itemName = buttonContainer.getAttribute('data-item-name');
+            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
+            const itemImage = buttonContainer.getAttribute('data-item-image');
+            const section = buttonContainer.getAttribute('data-item-section');
+            const category = buttonContainer.getAttribute('data-item-category');
+
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: category,
+                addons: [],
+                instructions: '',
+                quantity: quantityToAdd
+            };
+
+            button.disabled = true;
+
+            fetch('/cart/add', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(cartPayload)
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.success) {
+                    alert(`Added ${quantityToAdd} item(s) to cart successfully!`);
+                    updateCartUI(data.cart);
+                } else {
+                    console.error('Failed to add item to cart:', data.error);
+                    alert(data.error || 'Failed to add item to cart.');
+                    currentQuantity -= quantityToAdd;
+                    quantityDisplay.innerText = currentQuantity;
+                }
+            })
+            .catch(err => {
+                console.error('Error adding item to cart:', err);
+                alert('An error occurred while adding the item to the cart: ' + err.message);
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+            })
+            .finally(() => {
+                button.disabled = false;
+            });
+        }
+
+        function decreaseQuantity(button) {
+            const buttonContainer = button.closest('.button-container');
+            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
+            const quantityToRemoveSelect = buttonContainer.querySelector('.quantity-to-remove');
+            const quantityToRemove = parseInt(quantityToRemoveSelect.value);
+            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
+            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
+            let currentQuantity = parseInt(quantityDisplay.innerText);
+
+            if (currentQuantity <= quantityToRemove) {
+                const itemName = buttonContainer.getAttribute('data-item-name');
+                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&quantity=${currentQuantity}&instructions=&addons=[]`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                        addButton.style.display = 'block';
+                        quantitySelector.style.display = 'none';
+                        quantityDisplay.innerText = 0;
+                    } else {
+                        console.error('Failed to remove item from cart:', data.error);
+                        alert(data.error || 'Failed to remove item from cart.');
+                    }
+                })
+                .catch(err => {
+                    console.error('Error removing item from cart:', err);
+                    alert('An error occurred while removing the item from the cart: ' + err.message);
+                    const cart = removeFromCartLocalStorage(itemName, currentQuantity, '', []);
+                    updateCartUI(cart);
+                    addButton.style.display = 'block';
+                    quantitySelector.style.display = 'none';
+                    quantityDisplay.innerText = 0;
+                });
+            } else {
+                currentQuantity -= quantityToRemove;
+                quantityDisplay.innerText = currentQuantity;
+
+                const itemName = buttonContainer.getAttribute('data-item-name');
+                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&quantity=${quantityToRemove}&instructions=&addons=[]`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.success) {
+                        alert(`Removed ${quantityToRemove} item(s) from cart successfully!`);
+                        updateCartUI(data.cart);
+                    } else {
+                        console.error('Failed to remove item from cart:', data.error);
+                        alert(data.error || 'Failed to remove item from cart.');
+                        currentQuantity += quantityToRemove;
+                        quantityDisplay.innerText = currentQuantity;
+                    }
+                })
+                .catch(err => {
+                    console.error('Error removing item from cart:', err);
+                    alert('An error occurred while removing the item from the cart: ' + err.message);
+                    const cart = removeFromCartLocalStorage(itemName, quantityToRemove, '', []);
+                    updateCartUI(cart);
+                });
+            }
+        }
+
+        function updateCartUI(cart) {
+            if (!Array.isArray(cart)) {
+                console.error('Invalid cart data:', cart);
+                return;
+            }
+            const cartIcon = document.getElementById('cart-icon');
+            if (cartIcon) {
+                cartIcon.innerText = cart.length;
+            }
+
+            const buttonContainers = document.querySelectorAll('.button-container');
+            buttonContainers.forEach(container => {
+                const itemName = container.getAttribute('data-item-name');
+                const quantityDisplay = container.querySelector('.quantity-display');
+                const addButton = container.querySelector('.add-to-cart-btn');
+                const quantitySelector = container.querySelector('.quantity-selector');
+
+                const cartItem = cart.find(item => 
+                    item.itemName === itemName && 
+                    item.instructions === '' && 
+                    JSON.stringify(item.addons) === JSON.stringify([])
+                );
+                if (cartItem && cartItem.quantity > 0) {
+                    quantityDisplay.innerText = cartItem.quantity;
+                    addButton.style.display = 'none';
+                    quantitySelector.style.display = 'flex';
+                } else {
+                    quantityDisplay.innerText = 0;
+                    addButton.style.display = 'block';
+                    quantitySelector.style.display = 'none';
+                }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            const decreaseBtn = document.getElementById('decreaseQuantity');
+            const increaseBtn = document.getElementById('increaseQuantity');
+            const quantityInput = document.getElementById('quantityInput');
+
+            decreaseBtn.addEventListener('click', function () {
+                let currentQuantity = parseInt(quantityInput.value);
+                if (currentQuantity > 1) {
+                    currentQuantity--;
+                    quantityInput.value = currentQuantity;
+                }
+            });
+
+            increaseBtn.addEventListener('click', function () {
+                let currentQuantity = parseInt(quantityInput.value);
+                currentQuantity++;
+                quantityInput.value = currentQuantity;
+            });
+
+            fetch('/cart/get')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                    } else {
+                        console.error('Failed to fetch cart:', data.error);
+                        const cart = getCartLocalStorage();
+                        updateCartUI(cart);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error fetching cart:', err);
+                    const cart = getCartLocalStorage();
+                    updateCartUI(cart);
+                });
+        });
+    </script>
+</body>
+</html>