Update templates/menu.html

templates/menu.html

@@ -115,46 +115,45 @@
             box-shadow: none;
             transform: scale(0.98);
         }
-        .side-cart-container {
+        .view-cart-container {
             position: fixed;
             bottom: 20px;
             right: 20px;
             z-index: 999;
-        }
-        .side-cart-button {
             display: flex;
             align-items: center;
-            justify-content: center;
-            width: 60px;
-            height: 60px;
+        }
+        .view-cart-button {
             background-color: #0FAA39;
-            border-radius: 50%;
+            color: #fff;
+            padding: 10px 20px;
+            border-radius: 30px;
+            font-size: 1rem;
+            font-weight: bold;
             text-decoration: none;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-            transition: background-color 0.3s ease, transform 0.2s ease;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
         }
-        .side-cart-button:hover {
+        .view-cart-button:hover {
             background-color: #109835;
-            transform: scale(1.1);
-        }
-        .cart-icon {
-            font-size: 24px;
+            text-decoration: none;
             color: #fff;
         }
-        .cart-count {
-            position: absolute;
-            top: -5px;
-            right: -5px;
-            background-color: #ff4d4d;
-            color: #fff;
-            font-size: 12px;
-            font-weight: bold;
-            width: 20px;
-            height: 20px;
+        .cart-icon-badge {
+            background-color: #fff;
+            color: #0FAA39;
             border-radius: 50%;
+            width: 24px;
+            height: 24px;
             display: flex;
             align-items: center;
             justify-content: center;
+            font-size: 12px;
+            font-weight: bold;
+            margin-left: 5px;
         }
         .avatar-dropdown-container {
             position: absolute;
@@ -657,20 +656,13 @@
                 height: 18px;
                 font-size: 9px;
             }
-            .side-cart-container {
-                bottom: 10px;
-                right: 10px;
-            }
-            .side-cart-button {
-                width: 50px;
-                height: 50px;
-            }
-            .cart-icon {
-                font-size: 20px;
+            .view-cart-button {
+                padding: 8px 16px;
+                font-size: 14px;
             }
-            .cart-count {
-                width: 18px;
-                height: 18px;
+            .cart-icon-badge {
+                width: 20px;
+                height: 20px;
                 font-size: 10px;
             }
         }
@@ -797,109 +789,11 @@
         {% endif %}
     </div>
 
-    <div class="side-cart-container">
-        <a href="{{ url_for('cart.cart') }}" class="side-cart-button" title="View Cart">
-            <i class="bi bi-cart3 cart-icon"></i>
-            <span class="cart-count" id="cart-count">0</span>
-        </a>
-    </div>
-
-    <form method="get" action="/menu" class="text-center mb-4" id="categoryForm">
-        <label class="form-label fw-bold">Select a Category:</label>
-        <div class="category-buttons">
-            {% for category in categories %}
-                <button type="button" class="category-button {% if selected_category == category %}selected{% endif %}" data-category="{{ category }}">{{ category }}</button>
-            {% endfor %}
-            <button type="button" class="category-button {% if selected_category == 'Customized Dish' %}selected{% endif %}" data-category="Customized Dish">Customized Dish</button>
-        </div>
-        <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
-    </form>
-
-    <div class="container mt-4">
-        {% if selected_category == "Customized Dish" %}
-            <div id="custom-dish-form" class="mt-4">
-                <h3>Create Your Custom Dish</h3>
-                <form method="POST" action="/customdish/generate_custom_dish">
-                    <div class="mb-3">
-                        <label for="custom-dish-name" class="form-label">Dish Name</label>
-                        <input type="text" class="form-control" id="custom-dish-name" name="name" required>
-                    </div>
-                    <div class="mb-3">
-                        <label for="custom-dish-description" class="form-label">Dish Description</label>
-                        <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
-                    </div>
-                    <button type="submit" class="btn btn-primary">Submit</button>
-                </form>
-            </div>
-        {% else %}
-            {% for section, items in ordered_menu.items() %}
-                <h3>{{ section }}</h3>
-                <div class="row">
-                    {% for item in items %}
-                        <div class="col-md-6 mb-4">
-                            <div class="card menu-card">
-                                <picture>
-                                    <source srcset="{{ item.Image1__c_webp if item.Image1__c_webp else item.Image1__c }}" type="image/webp">
-                                    <img src="{{ item.Image1__c }}"
-                                         srcset="{{ item.Image1__c }} 350w, {{ item.Image1__c_small if item.Image1__c_small else item.Image1__c }} 175w"
-                                         sizes="(max-width: 576px) 175px, 350px"
-                                         class="card-img-top menu-image"
-                                         alt="{{ item.Name }}"
-                                         width="350" height="200"
-                                         loading="lazy"
-                                         onerror="this.src='/static/placeholder.jpg';">
-                                </picture>
-                                <div class="addbutton">
-                                    <div class="card-body d-flex align-items-center justify-content-between">
-                                        <div>
-                                            <h5 class="card-title">{{ item.Name }}</h5>
-                                            <p class="card-text">${{ item.Price__c }}</p>
-                                        </div>
-                                        <div class="d-flex flex-column align-item-center justify-content-center">
-                                            <div class="button-container" data-item-name="{{ item.Name }}" data-item-price="{{ item.Price__c }}" data-item-image="{{ item.Image1__c }}" data-item-section="{{ item.Section__c }}" data-item-category="{{ selected_category }}">
-                                                {% if item.Section__c == 'Soft Drinks' %}
-                                                    <button class="btn btn-primary add-to-cart-btn" onclick="handleSoftDrinkAdd(this)">ADD</button>
-                                                    <div class="quantity-selector" style="display: none;">
-                                                        <button class="btn btn-outline-secondary decrease-btn" onclick="decreaseQuantity(this)">-</button>
-                                                        <select class="quantity-to-remove">
-                                                            {% for i in range(1, 21) %}
-                                                                <option value="{{ i }}">{{ i }}</option>
-                                                            {% endfor %}
-                                                        </select>
-                                                        <span class="quantity-display">0</span>
-                                                        <button class="btn btn-outline-secondary increase-btn" onclick="increaseQuantity(this)">+</button>
-                                                        <select class="quantity-to-add">
-                                                            {% for i in range(1, 21) %}
-                                                                <option value="{{ i }}">{{ i }}</option>
-                                                            {% endfor %}
-                                                        </select>
-                                                    </div>
-                                                {% else %}
-                                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                                                        onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
-                                                        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 %}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="toggle-details" data-item-name="{{ item.Name }}">Show Details</div>
-                                <div class="item-details" id="details-{{ item.Name | replace(' ', '-') }}"></div>
-                            </div>
-                        </div>
-                    {% endfor %}
-                </div>
-            {% endfor %}
-        {% endif %}
-    </div>
-
     <div class="view-cart-container">
         <a href="{{ url_for('cart.cart') }}" class="view-cart-button">
+            <i class="bi bi-cart"></i>
             View Cart
+            <span class="cart-icon-badge" id="cart-icon">0</span>
         </a>
     </div>
 
@@ -957,28 +851,30 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-
     <script>
-        // Menu items list for autocomplete
+        // Dynamically populate menuItems from ordered_menu
         const menuItems = [
-            "Veg Manchurian",
-            "Veg Biryani",
-            "Sukka Gosht (Goat)",
-            "Samosa",
-            "Roti",
-            "Prawn Fry",
-            "Paneer Butter Masala",
-            "Paneer Biryani",
-            "Onion Pakoda",
-            "Mutton Biryani",
-            "Fish Curry",
-            "Fiery Mango Glaze Chicken",
-            "Chilli Gobi",
-            "Chilli Chicken",
-            "Chicken Manchurian",
-            "Chicken Curry",
-            "Chicken Biryani",
-            "Channa Masala"
+            {% for section, items in ordered_menu.items() %}
+                {% for item in items %}
+                    "{{ item.Name }}",
+                {% endfor %}
+            {% endfor %}
+        ];
+
+        const ingredientsList = [
+            "Basmati Rice", "Bell Pepper", "Biryani Masala", "Butter", "Capsicum", "Cauliflower",
+            "Chickpea Flour (Besan)", "Chickpea Flour (for batter)", "Chickpeas (Channa)", "Chili Powder",
+            "Chili Sauce", "Coconut Milk", "Coriander Powder", "Cornflour", "Cream", "Cumin Powder",
+            "Cumin Seeds", "Curd (Yogurt)", "Curry Leaves", "Fish (e.g., King Fish or Salmon)",
+            "Fresh Coriander Leaves", "Garam Masala", "Garlic", "Ghee (Clarified Butter)", "Ginger",
+            "Ginger-Garlic Paste", "Goat Meat (Mutton)", "Green Chilies", "Honey",
+            "Kasuri Methi (dried fenugreek leaves)", "Lemon Juice", "Mango Puree", "Mint Leaves",
+            "Mixed Vegetables (Carrot, Peas, Potato, Cauliflower)", "Mixed Vegetables (Carrot, Peas, Potato)",
+            "Mustard Seeds", "Mutton (Goat Meat)", "Oil", "Oil (for frying)", "Onion",
+            "Paneer (Indian Cottage Cheese)", "Peas", "Potatoes", "Prawns", "Red Chili Powder",
+            "Rice Flour", "Saffron", "Salt", "Soy Sauce", "Spring Onion", "Tamarind (for sourness)",
+            "Tomato Ketchup", "Tomatoes", "Turmeric Powder", "Vinegar", "Water", "Wheat Flour (for dough)",
+            "Whole Wheat Flour", "Yogurt (Curd)"
         ];
 
         const menuItemDetails = {
@@ -1177,15 +1073,22 @@
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
                         const img = entry.target;
+                        const src = img.getAttribute('data-src');
+                        if (src && img.src !== src) {
+                            img.src = src;
+                        }
                         img.onload = () => img.classList.add('loaded');
-                        img.onerror = () => img.classList.add('loaded');
+                        img.onerror = () => {
+                            img.src = '/static/placeholder.jpg';
+                            img.classList.add('loaded');
+                        };
                         observer.unobserve(img);
                     }
                 });
             }, {
                 root: null,
-                rootMargin: '0px',
-                threshold: 0.1
+                rootMargin: '200px',
+                threshold: 0.01
             });
 
             menuCards.forEach(card => cardObserver.observe(card));
@@ -1219,7 +1122,6 @@
                 });
             });
 
-            // Autocomplete functionality
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
 
@@ -1230,7 +1132,7 @@
 
                 if (input) {
                     const filteredItems = menuItems.filter(item => 
-                        item.toLowerCase().startsWith(input)
+                        item.toLowerCase().includes(input)
                     );
                     if (filteredItems.length > 0) {
                         filteredItems.forEach(item => {
@@ -1247,6 +1149,7 @@
                         suggestionsContainer.style.display = 'block';
                     }
                 }
+                filterMenu();
             });
 
             document.addEventListener('click', function (event) {
@@ -1255,7 +1158,93 @@
                 }
             });
 
-            searchBar.addEventListener('keyup', debounce(filterMenu, 300));
+            const descriptionTextarea = document.getElementById('custom-dish-description');
+            const descriptionSuggestions = document.getElementById('descriptionSuggestions');
+
+            if (descriptionTextarea && descriptionSuggestions) {
+                let usedIngredients = new Set();
+
+                function updateUsedIngredients() {
+                    const inputText = descriptionTextarea.value.trim();
+                    usedIngredients.clear();
+                    if (inputText) {
+                        const words = inputText.split(/,\s*/).map(word => word.trim());
+                        words.forEach(word => {
+                            if (word && ingredientsList.includes(word)) {
+                                usedIngredients.add(word);
+                            }
+                        });
+                    }
+                }
+
+                descriptionTextarea.addEventListener('input', function () {
+                    const inputText = this.value.trim();
+                    const words = inputText.split(/,\s*/);
+                    const lastWord = words[words.length - 1].trim().toLowerCase();
+                    descriptionSuggestions.innerHTML = '';
+                    descriptionSuggestions.style.display = 'none';
+
+                    updateUsedIngredients();
+
+                    if (lastWord) {
+                        const filteredIngredients = ingredientsList.filter(ingredient =>
+                            ingredient.toLowerCase().includes(lastWord) && !usedIngredients.has(ingredient)
+                        );
+                        if (filteredIngredients.length > 0) {
+                            filteredIngredients.forEach(ingredient => {
+                                const suggestionDiv = document.createElement('div');
+                                suggestionDiv.classList.add('suggestion-item');
+                                suggestionDiv.innerText = ingredient;
+                                suggestionDiv.addEventListener('click', function () {
+                                    const currentValue = descriptionTextarea.value;
+                                    const lastCommaIndex = currentValue.lastIndexOf(',');
+                                    const baseText = lastCommaIndex !== -1 ? currentValue.substring(0, lastCommaIndex + 1) : '';
+                                    descriptionTextarea.value = baseText + (baseText ? ' ' : '') + ingredient + ', ';
+                                    descriptionSuggestions.style.display = 'none';
+                                    descriptionTextarea.focus();
+                                    updateUsedIngredients();
+                                });
+                                descriptionSuggestions.appendChild(suggestionDiv);
+                            });
+                            descriptionSuggestions.style.display = 'block';
+                        }
+                    }
+                });
+
+                document.addEventListener('click', function (event) {
+                    if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
+                        descriptionSuggestions.style.display = 'none';
+                    }
+                });
+            }
+
+            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);
+                });
+
+            const preloadedImages = document.querySelectorAll('link[rel="preload"]');
+            preloadedImages.forEach(link => {
+                const img = new Image();
+                img.src = link.href;
+            });
         });
 
         function debounce(func, wait) {
@@ -1266,6 +1255,48 @@
             };
         }
 
+        function filterMenu() {
+            const input = document.getElementById('searchBar').value.trim().toLowerCase();
+            const sections = document.querySelectorAll('h3');
+            const items = document.querySelectorAll('.menu-card');
+            let matchedSections = new Set();
+
+            items.forEach(item => {
+                const itemName = item.querySelector('.card-title').innerText.toLowerCase();
+                const itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
+
+                if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
+                    item.style.display = 'block';
+                    item.classList.add('visible');
+                    matchedSections.add(item.closest('.row'));
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+
+            sections.forEach(section => {
+                const sectionRow = section.nextElementSibling;
+                if (matchedSections.has(sectionRow)) {
+                    section.style.display = 'block';
+                    sectionRow.style.display = 'flex';
+                } else {
+                    section.style.display = 'none';
+                    sectionRow.style.display = 'none';
+                }
+            });
+
+            if (!input) {
+                sections.forEach(section => {
+                    section.style.display = 'block';
+                    section.nextElementSibling.style.display = 'flex';
+                });
+                items.forEach(item => {
+                    item.style.display = 'block';
+                    item.classList.add('visible');
+                });
+            }
+        }
+
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
@@ -1514,37 +1545,6 @@
             }
         }
 
-        function filterMenu() {
-            let input = document.getElementById('searchBar').value.toLowerCase();
-            let sections = document.querySelectorAll('h3');
-            let items = document.querySelectorAll('.menu-card');
-            let matchedSections = new Set();
-            
-            items.forEach(item => {
-                let itemName = item.querySelector('.card-title').innerText.toLowerCase();
-                let itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
-                
-                if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
-                    item.style.display = 'block';
-                    item.classList.add('visible');
-                    matchedSections.add(item.closest('.row'));
-                } else {
-                    item.style.display = 'none';
-                }
-            });
-            
-            sections.forEach(section => {
-                let sectionRow = section.nextElementSibling;
-                if (matchedSections.has(sectionRow)) {
-                    section.style.display = 'block';
-                    sectionRow.style.display = 'flex';
-                } else {
-                    section.style.display = 'none';
-                    sectionRow.style.display = 'none';
-                }
-            });
-        }
-
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
             let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
@@ -1645,30 +1645,37 @@
 
         function handleSoftDrinkAdd(button) {
             const buttonContainer = button.closest('.button-container');
-            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
             const quantitySelector = buttonContainer.querySelector('.quantity-selector');
+            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
             const quantityDisplay = quantitySelector.querySelector('.quantity-display');
-
-            addButton.style.display = 'none';
-            quantitySelector.style.display = 'flex';
-
+            const quantityToAddSelect = quantitySelector.querySelector('.quantity-to-add');
+            const quantityToAdd = parseInt(quantityToAddSelect.value);
             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 selectedCategory = buttonContainer.getAttribute('data-item-category');
+
+            addButton.style.display = 'none';
+            quantitySelector.style.display = 'flex';
+
+            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
+            currentQuantity += quantityToAdd;
+            quantityDisplay.innerText = currentQuantity;
 
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
                 itemImage: itemImage,
                 section: section,
-                category: category,
+                category: selectedCategory,
                 addons: [],
                 instructions: '',
-                quantity: 1
+                quantity: quantityToAdd
             };
 
+            button.disabled = true;
+
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -1684,14 +1691,13 @@
             })
             .then(data => {
                 if (data.success) {
-                    alert('Item added to cart successfully!');
+                    alert(`Added ${quantityToAdd} item(s) 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';
+                    currentQuantity -= quantityToAdd;
+                    quantityDisplay.innerText = currentQuantity;
                 }
             })
             .catch(err => {
@@ -1699,7 +1705,9 @@
                 alert('An error occurred while adding the item to the cart: ' + err.message);
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
-                quantityDisplay.innerText = 1;
+            })
+            .finally(() => {
+                button.disabled = false;
             });
         }
 
@@ -1708,30 +1716,27 @@
             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 selectedCategory = buttonContainer.getAttribute('data-item-category');
+
+            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
+            currentQuantity += quantityToAdd;
+            quantityDisplay.innerText = currentQuantity;
 
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
                 itemImage: itemImage,
                 section: section,
-                category: category,
+                category: selectedCategory,
                 addons: [],
                 instructions: '',
                 quantity: quantityToAdd
             };
 
-            button.disabled = true;
-
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -1761,9 +1766,6 @@
                 alert('An error occurred while adding the item to the cart: ' + err.message);
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
-            })
-            .finally(() => {
-                button.disabled = false;
             });
         }
 
@@ -1852,9 +1854,15 @@
                 console.error('Invalid cart data:', cart);
                 return;
             }
+            
+            // Calculate total items in cart
+            const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
+            
+            // Update cart icon badge
             const cartIcon = document.getElementById('cart-icon');
             if (cartIcon) {
-                cartIcon.innerText = cart.length;
+                cartIcon.innerText = totalItems;
+                cartIcon.style.display = totalItems > 0 ? 'flex' : 'none';
             }
 
             const buttonContainers = document.querySelectorAll('.button-container');