Update templates/menu.html

templates/menu.html

@@ -15,7 +15,6 @@
         {% endfor %}
     {% endfor %}
     <style>
-        /* Existing styles remain unchanged */
         body {
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
@@ -1001,7 +1000,9 @@
                                             <div>
                                                 <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
                                                 <p class="card-text price">${{ item.Price__c | default('0.00') }}</p>
-                                                <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
+                                                {% if item.Section__c != 'Soft Drinks' %}
+                                                    <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
+                                                {% endif %}
                                             </div>
                                             <div class="d-flex flex-column align-item-center justify-content-center">
                                                 <div class="button-container" 
@@ -1010,12 +1011,16 @@
                                                      data-item-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
                                                      data-item-section="{{ item.Section__c | default(section) }}" 
                                                      data-item-category="{{ selected_category }}">
-                                                    <button class="btn btn-primary" 
-                                                            data-bs-toggle="modal" 
-                                                            data-bs-target="#itemModal" 
-                                                            onclick="showItemDetails('{{ item.Name | default('Unnamed Item') | e }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') | e }}', '{{ item.IngredientsInfo__c | default('Not specified') | e }}', '{{ item.NutritionalInfo__c | default('Not available') | e }}', '{{ item.Allergens__c | default('None listed') | e }}', '{{ item.Section__c | default(section) | e }}', '{{ selected_category | e }}')">
-                                                        ADD
-                                                    </button>
+                                                    {% if item.Section__c == 'Soft Drinks' %}
+                                                        <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
+                                                    {% else %}
+                                                        <button class="btn btn-primary" 
+                                                                data-bs-toggle="modal" 
+                                                                data-bs-target="#itemModal" 
+                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') | e }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') | e }}', '{{ item.IngredientsInfo__c | default('Not specified') | e }}', '{{ item.NutritionalInfo__c | default('Not available') | e }}', '{{ item.Allergens__c | default('None listed') | e }}', '{{ item.Section__c | default(section) | e }}', '{{ selected_category | e }}')">
+                                                            ADD
+                                                        </button>
+                                                    {% endif %}
                                                     {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c != 'Soft Drinks' %}
                                                         <span class="customisable-text">Customisable</span>
                                                     {% endif %}
@@ -1023,16 +1028,18 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
-                                        <h6>Description</h6>
-                                        <p>{{ item.Description__c | default('No description available') }}</p>
-                                        <h6>Ingredients Info</h6>
-                                        <p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
-                                        <h6>Nutritional Info</h6>
-                                        <p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
-                                        <h6>Allergens</h6>
-                                        <p>{{ item.Allergens__c | default('None listed') }}</p>
-                                    </div>
+                                    {% if item.Section__c != 'Soft Drinks' %}
+                                        <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
+                                            <h6>Description</h6>
+                                            <p>{{ item.Description__c | default('No description available') }}</p>
+                                            <h6>Ingredients Info</h6>
+                                            <p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
+                                            <h6>Nutritional Info</h6>
+ север    <p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
+                                            <h6>Allergens</h6>
+                                            <p>{{ item.Allergens__c | default('None listed') }}</p>
+                                        </div>
+                                    {% endif %}
                                 </div>
                             </div>
                         {% endfor %}
@@ -1110,6 +1117,35 @@
         </div>
     </div>
 
+    <!-- Modal for Soft Drinks Quantity Selection -->
+    <div class="modal fade" id="softDrinkModal" tabindex="-1" aria-labelledby="softDrinkModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content" style="border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
+                <div class="modal-header" style="background: linear-gradient(45deg, #0FAA39, #0D9232); color: white; border-radius: 15px 15px 0 0;">
+                    <h5 class="modal-title" id="softDrinkModalLabel">Select Your Drink</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body" style="padding: 20px;">
+                    <div class="text-center mb-4">
+                        <img id="soft-drink-image" class="img-fluid rounded mb-3" alt="Soft Drink Image" style="max-height: 150px; width: auto; object-fit: contain;">
+                        <h5 id="soft-drink-name" class="fw-bold" style="color: #333;"></h5>
+                        <p id="soft-drink-price" class="text-muted" style="font-size: 1.1rem;"></p>
+                    </div>
+                    <div class="d-flex justify-content-center align-items-center mb-4">
+                        <div class="quantity-selector" style="background-color: #f8f9fa; padding: 10px; border-radius: 10px;">
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease" style="width: 40px; height: 40px;">-</button>
+                            <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly style="width: 60px; font-weight: bold; font-size: 1.1rem;">
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase" style="width: 40px; height: 40px;">+</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer" style="border-top: none; padding: 0 20px 20px 20px; justify-content: center;">
+                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" style="width: 200px; padding: 12px; font-size: 1.1rem; background-color: #0FAA39; border-color: #0FAA39;">Add to Cart</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Mic Popup -->
     <div class="mic-popup" id="micPopup">
         <div class="mic-popup-icon">
@@ -1127,6 +1163,7 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         let isProcessingRequest = false;
+        let currentSoftDrinkButton = null;
 
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
@@ -1204,6 +1241,79 @@
             };
         }
 
+        function showSoftDrinkModal(button) {
+            currentSoftDrinkButton = button;
+            const buttonContainer = button.closest('.button-container');
+            const itemName = sanitizeInput(buttonContainer.getAttribute('data-item-name'));
+            const itemPrice = buttonContainer.getAttribute('data-item-price');
+            const itemImage = buttonContainer.getAttribute('data-item-image');
+            
+            document.getElementById('soft-drink-name').textContent = itemName;
+            document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
+            document.getElementById('soft-drink-quantity').value = '1';
+            const softDrinkImage = document.getElementById('soft-drink-image');
+            softDrinkImage.src = itemImage || '/static/placeholder.jpg';
+            
+            const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
+            modal.show();
+        }
+
+        function addSoftDrinkToCart() {
+            if (!currentSoftDrinkButton) return;
+            
+            const buttonContainer = currentSoftDrinkButton.closest('.button-container');
+            const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
+            
+            const itemName = sanitizeInput(buttonContainer.getAttribute('data-item-name'));
+            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
+            const itemImage = buttonContainer.getAttribute('data-item-image');
+            const section = sanitizeInput(buttonContainer.getAttribute('data-item-section'));
+            const selectedCategory = sanitizeInput(buttonContainer.getAttribute('data-item-category'));
+            
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: selectedCategory,
+                addons: [],
+                instructions: '',
+                quantity: quantity
+            };
+            
+            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!');
+                    updateCartUI(data.cart);
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                    modal.hide();
+                } else {
+                    console.error('Failed to add item to cart:', data.error);
+                    alert(data.error || 'Failed to add item to cart. Using local storage as fallback.');
+                    const cart = addToCartLocalStorage(cartPayload);
+                    updateCartUI(cart);
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                    modal.hide();
+                }
+            })
+            .catch(err => {
+                console.error('Error adding item to cart:', err);
+                alert('Error adding item to cart. Using local storage as fallback.');
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                modal.hide();
+            });
+        }
+
         function updateCartUI(cart) {
             if (!Array.isArray(cart)) {
                 console.error('Invalid cart data:', cart);
@@ -1242,31 +1352,36 @@
 
                             const addButton = itemElement.querySelector('.btn-primary');
                             const buttonContainer = addButton.closest('.button-container');
-                            const name = buttonContainer.getAttribute('data-item-name');
-                            const price = buttonContainer.getAttribute('data-item-price');
-                            const image = buttonContainer.getAttribute('data-item-image');
-                            const category = buttonContainer.getAttribute('data-item-category');
                             const section = buttonContainer.getAttribute('data-item-section');
-                            
-                            const description = itemElement.querySelector('.item-details h6:contains("Description") + p')?.textContent || 'No description available';
-                            const ingredients = itemElement.querySelector('.item-details h6:contains("Ingredients Info") + p')?.textContent || 'Not specified';
-                            const nutrition = itemElement.querySelector('.item-details h6:contains("Nutritional Info") + p')?.textContent || 'Not available';
-                            const allergens = itemElement.querySelector('.item-details h6:contains("Allergens") + p')?.textContent || 'None listed';
-                            
-                            showItemDetails(
-                                name,
-                                price,
-                                image,
-                                description,
-                                ingredients,
-                                nutrition,
-                                allergens,
-                                section,
-                                category
-                            );
-                            
-                            const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                            modal.show();
+
+                            if (section === 'Soft Drinks') {
+                                showSoftDrinkModal(addButton);
+                            } else {
+                                const name = buttonContainer.getAttribute('data-item-name');
+                                const price = buttonContainer.getAttribute('data-item-price');
+                                const image = buttonContainer.getAttribute('data-item-image');
+                                const category = buttonContainer.getAttribute('data-item-category');
+                                
+                                const description = itemElement.querySelector('.item-details h6:contains("Description") + p')?.textContent || 'No description available';
+                                const ingredients = itemElement.querySelector('.item-details h6:contains("Ingredients Info") + p')?.textContent || 'Not specified';
+                                const nutrition = itemElement.querySelector('.item-details h6:contains("Nutritional Info") + p')?.textContent || 'Not available';
+                                const allergens = itemElement.querySelector('.item-details h6:contains("Allergens") + p')?.textContent || 'None listed';
+                                
+                                showItemDetails(
+                                    name,
+                                    price,
+                                    image,
+                                    description,
+                                    ingredients,
+                                    nutrition,
+                                    allergens,
+                                    section,
+                                    category
+                                );
+                                
+                                const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                modal.show();
+                            }
                         }
                         
                         sessionStorage.removeItem('highlightItem');
@@ -1657,6 +1772,18 @@
                 quantityInput.value = qty + 1;
             });
 
+            const softDrinkDecreaseBtn = document.getElementById('soft-drink-decrease');
+            const softDrinkIncreaseBtn = document.getElementById('soft-drink-increase');
+            const softDrinkQuantityInput = document.getElementById('soft-drink-quantity');
+            softDrinkDecreaseBtn.addEventListener('click', function() {
+                let qty = parseInt(softDrinkQuantityInput.value);
+                if (qty > 1) softDrinkQuantityInput.value = qty - 1;
+            });
+            softDrinkIncreaseBtn.addEventListener('click', function() {
+                let qty = parseInt(softDrinkQuantityInput.value);
+                if (qty < 1000) softDrinkQuantityInput.value = qty + 1;
+            });
+
             const micIcon = document.getElementById('micIcon');
             const micUnsupported = document.getElementById('micUnsupported');
             const micPopup = document.getElementById('micPopup');
@@ -1826,8 +1953,7 @@
                 handleAddonClick(event.target);
             }
         });
-
-        function handleAddonClick(checkbox) {
+            function handleAddonClick(checkbox) {
             const groupName = checkbox.getAttribute('data-group');
             const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it"].includes(groupName);
             const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
@@ -1898,4 +2024,5 @@
         }
     </script>
 </body>
-</html>
+</html>
+