Update templates/menu.html

templates/menu.html

@@ -52,8 +52,6 @@
             opacity: 0;
             transition: opacity 0.5s ease-in-out, transform 0.2s ease;
             background-color: #000;
-            font-weight: bold;
-            border: none;
         }
         .menu-video.loaded {
             opacity: 1;
@@ -130,6 +128,13 @@
             border-color: #0D9232;
             transform: scale(1.05);
         }
+        .btn-primary:active,
+        .btn-primary:focus {
+            background-color: #0B7A29;
+            border-color: #0B7A29;
+            box-shadow: none;
+            transform: scale(0.98);
+        }
         .avatar-dropdown-container {
             position: absolute;
             right: 10px;
@@ -178,7 +183,7 @@
         .dropdown-menu .dropdown-item {
             padding: 10px 16px;
             text-decoration: none;
-            color: #2c2c2c;
+            color: #333;
             font-size: 14px;
             transition: background-color 0.2s ease;
             cursor: pointer;
@@ -212,8 +217,7 @@
             max-width: 90%;
             background-color: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            outline: none;
-            transition: box-shadow 0.3s ease;
+            border-radius: 25px;
         }
         .search-bar-container input {
             width: 100%;
@@ -222,14 +226,13 @@
             border-radius: 25px;
             border: none;
             background-color: transparent;
+            outline: none;
         }
         .search-bar-container input:focus {
             box-shadow: 0 4px 8px rgba(0,0,0,0.15);
         }
         .search-bar-container input::placeholder {
             color: #888;
-            font-size: 14px;
-            transition: background-color 0.2s ease;
         }
         .search-icon {
             position: absolute;
@@ -243,6 +246,7 @@
             font-size: 18px;
             color: #888;
             cursor: pointer;
+            transition: color 0.3s ease;
         }
         .mic-icon.active {
             color: #007bff;
@@ -268,9 +272,215 @@
             z-index: 1000;
             display: none;
         }
+        .autocomplete-suggestions .suggestion-item {
+            padding: 8px 15px;
+            cursor: pointer;
+            font-size: 14px;
+            color: #333;
+        }
         .autocomplete-suggestions .suggestion-item:hover {
             background-color: #f1f1f1;
         }
+        .addon-section {
+            background-color: #fff;
+            border: 2px solid #ffa500;
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 10px;
+        }
+        .addon-section h6 {
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #343a40;
+        }
+        .addon-section .form-check {
+            display: inline-flex;
+            align-items: center;
+            margin-left: 10px;
+            color: #343a40;
+        }
+        .addon-section .form-check-input {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #343a40;
+            border-radius: 5px;
+            background-color: #f0f0f0;
+            position: relative;
+            margin-right: 10px;
+        }
+        .addon-section .form-check-input:checked {
+            background-color: #006400;
+            border-color: #006400;
+        }
+        .addon-section .form-check-input:checked::before {
+            content: '\2713';
+            font-size: 14px;
+            position: absolute;
+            top: 3px;
+            left: 4px;
+            color: white;
+        }
+        .addon-section .form-check-label {
+            font-size: 16px;
+            margin-right: 15px;
+            cursor: pointer;
+        }
+        form.text-center.mb-4 {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 5px;
+        }
+        .modal-header {
+            padding: 10px 15px;
+        }
+        .modal-title {
+            font-size: 16px;
+            font-weight: bold;
+        }
+        .modal-body {
+            max-height: 60vh;
+            overflow-y: auto;
+            padding: 15px;
+            text-align: center;
+        }
+        .modal-body #avatar-modal-img {
+            max-width: 100%;
+            max-height: 400px;
+            object-fit: contain;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        .modal-body #modal-img {
+            max-height: 200px;
+            width: 100%;
+            object-fit: cover;
+            border-radius: 8px;
+            margin-bottom: 10px;
+        }
+        .modal-body #modal-name {
+            font-size: 20px;
+            font-weight: bold;
+            margin-bottom: 5px;
+            color: #333333;
+        }
+        .modal-body #modal-price {
+            font-size: 16px;
+            font-weight: 500;
+            color: #000000;
+            margin-bottom: 10px;
+        }
+        .modal-body #modal-description {
+            font-size: 14px;
+            color: #6c757d;
+            margin-bottom: 10px;
+        }
+        .modal-body .nutritional-info {
+            font-size: 12px;
+            color: #6c757d;
+            margin-bottom: 10px;
+        }
+        .modal-body #modal-addons h6 {
+            font-size: 14px;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        .modal-footer {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px;
+        }
+        .modal-footer .btn {
+            height: 40px;
+            padding: 0 15px;
+        }
+        .modal-footer .form-control {
+            width: 50px;
+            height: 40px;
+            text-align: center;
+        }
+        .modal-footer .btn-primary {
+            padding: 10px 20px;
+            width: auto;
+        }
+        .modal-footer .btn-outline-secondary {
+            width: 40px;
+        }
+        .item-details {
+            display: none;
+            padding: 15px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+            margin: 10px 15px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        .item-details.show {
+            display: block;
+        }
+        .item-details h6 {
+            color: #0FAA39;
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+            font-weight: bold;
+        }
+        .item-details p {
+            margin-bottom: 15px;
+            color: #555;
+            line-height: 1.5;
+            font-size: 0.9rem;
+        }
+        .toggle-details {
+            cursor: pointer;
+            color: #0FAA39;
+            font-size: 0.9rem;
+            padding: 5px 0;
+            transition: color 0.3s ease;
+        }
+        .toggle-details:hover {
+            color: #0D9232;
+            text-decoration: underline;
+        }
+        .category-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            justify-content: center;
+            margin-top: 10px;
+        }
+        .category-button {
+            background-color: #fff;
+            border: 2px solid #0FAA39;
+            color: #0FAA39;
+            padding: 5px 15px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .category-button.selected {
+            background-color: #0FAA39;
+            color: #fff;
+        }
+        .category-button:hover {
+            background-color: #e6f4ea;
+        }
+        .modal-body::-webkit-scrollbar {
+            width: 8px;
+        }
+        .modal-body::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        .modal-body::-webkit-scrollbar-thumb {
+            background: #0FAA39;
+            border-radius: 10px;
+        }
+        .modal-body::-webkit-scrollbar-thumb:hover {
+            background: #0D9232;
+        }
         #custom-dish-form {
             position: relative;
             padding: 20px;
@@ -306,7 +516,7 @@
         #custom-dish-form::-webkit-scrollbar-thumb:hover {
             background: #0D9232;
         }
-        #dishNameSuggestions {
+        #descriptionSuggestions {
             position: absolute;
             width: calc(100% - 30px);
             max-height: 200px;
@@ -318,12 +528,6 @@
             display: none;
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
         }
-        .selection-buttons .btn {
-            width: 100px;
-        }
-        .chat-bar {
-            margin-top: 20px;
-        }
         .bottom-action-bar {
             position: fixed;
             bottom: 0;
@@ -338,18 +542,34 @@
             z-index: 1000;
             max-width: 900px;
             margin: 0 auto;
-            text-align: center;
-            transition: transform 0.2s ease;
         }
-        .bottom-action-bar .btn:hover {
-            transform: scale(1.05);
+        .bottom-action-bar .btn {
+            flex: 1;
+            margin: 0 5px;
+            padding: 10px 15px;
+            border-radius: 8px;
+            font-weight: bold;
+            font-size: 16px;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
         .bottom-action-bar .btn-order-history {
             background-color: #FFA07A;
             border-color: #FFA07A;
-            font-size: 12px;
-            margin-left: 8px;
-            transition: all 0.3s ease;
+        }
+        .bottom-action-bar .btn-order-history:hover {
+            background-color: #FF8C61;
+            border-color: #FF8C61;
+        }
+        .bottom-action-bar .btn-view-cart {
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+        }
+        .bottom-action-bar .btn-view-cart:hover {
+            background-color: #0D9232;
+            border-color: #0D9232;
         }
         .cart-icon-badge {
             background-color: white;
@@ -387,6 +607,19 @@
             color: #ff4444;
             animation: pulse 1.5s infinite;
         }
+        .mic-popup-text {
+            font-size: 18px;
+            margin-bottom: 15px;
+        }
+        .mic-popup-cancel {
+            background-color: #ff4444;
+            color: white;
+            border: none;
+            padding: 8px 20px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-weight: bold;
+        }
         @keyframes pulse {
             0% { transform: scale(1); }
             50% { transform: scale(1.1); }
@@ -400,6 +633,15 @@
             .menu-card {
                 max-width: 100%;
             }
+            .bottom-action-bar .btn {
+                font-size: 14px;
+                padding: 8px 10px;
+            }
+            .cart-icon-badge {
+                width: 18px;
+                height: 18px;
+                font-size: 10px;
+            }
         }
     </style>
 </head>
@@ -453,45 +695,18 @@
         {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">
                 <h3>Create Your Custom Dish</h3>
-                <div class="selection-buttons mb-3">
-                    <button id="veg-btn" class="btn btn-outline-success me-2" aria-label="Select Vegetarian">Veg</button>
-                    <button id="non-veg-btn" class="btn btn-outline-danger" aria-label="Select Non-Vegetarian">Non-Veg</button>
-                </div>
-                <form id="customDishForm" role="form">
-                    <div class="mb-3 position-relative">
+                <form method="POST" action="/customdish/generate_custom_dish" id="customDishForm" role="form">
+                    <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 autocomplete="off" placeholder="e.g., Spicy Chicken Curry" aria-label="Custom Dish Name">
-                        <div id="dishNameSuggestions" class="autocomplete-suggestions"></div>
                     </div>
-                    <div class="mb-3">
-                        <label for="custom-dish-ingredients" class="form-label">Ingredients List</label>
-                        <textarea class="form-control" id="custom-dish-ingredients" name="ingredients" required rows="3" placeholder="e.g., Chicken, Tomatoes, Spices" aria-label="Ingredients List"></textarea>
-                    </div>
-                    <div class="mb-3">
+                    <div class="mb-3 position-relative">
                         <label for="custom-dish-description" class="form-label">Dish Description</label>
-                        <textarea class="form-control" id="custom-dish-description" name="description" required rows="3" placeholder="e.g., A spicy and flavorful chicken dish" aria-label="Dish Description"></textarea>
+                        <textarea class="form-control" id="custom-dish-description" name="description" required rows="3" placeholder="e.g., Chicken, Tomatoes, Spices" aria-label="Dish Description"></textarea>
+                        <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
                     </div>
-                    <div class="mb-3">
-                        <label for="custom-dish-price" class="form-label">Price ($)</label>
-                        <input type="number" class="form-control" id="custom-dish-price" name="price" step="0.01" min="0.01" required placeholder="e.g., 12.99" aria-label="Price">
-                    </div>
-                    <button type="submit" class="btn btn-primary" id="submitCustomDish" aria-label="Submit to Salesforce">Submit to Salesforce</button>
-                    <div id="form-feedback" class="mt-3" style="display: none; text-align: center;"></div>
+                    <button type="submit" class="btn btn-primary" aria-label="Submit Custom Dish">Submit Custom Dish</button>
                 </form>
-                <div id="item-details" class="mt-3" style="display: none; background: #f8f9fa; padding: 15px; border-radius: 8px;">
-                    <h4>Selected Item Details</h4>
-                    <p><strong>Name:</strong> <span id="detail-name"></span></p>
-                    <p><strong>Ingredients:</strong> <span id="detail-ingredients"></span></p>
-                    <p><strong>Description:</strong> <span id="detail-description"></span></p>
-                    <p><strong>Price:</strong> $<span id="detail-price"></span></p>
-                </div>
-                <div class="chat-bar mt-3">
-                    <div class="input-group">
-                        <input type="text" class="form-control" id="chat-input" placeholder="Type 'hi' or 'veg'/'non-veg'..." aria-label="Chat Input">
-                        <button class="btn btn-primary" id="send-btn" aria-label="Send Message">Send</button>
-                    </div>
-                    <div id="chat-feedback" class="mt-2" style="text-align: center;"></div>
-                </div>
             </div>
         {% else %}
             {% if ordered_menu.items()|length == 0 %}
@@ -680,25 +895,6 @@
         <button class="mic-popup-cancel" id="micPopupCancel" aria-label="Cancel Voice Search">Cancel</button>
     </div>
 
-    <!-- Confirmation Modal -->
-    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="confirmationModalLabel">Confirm Action</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <p id="confirmationMessage"></p>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Cancel">Cancel</button>
-                    <button type="button" class="btn btn-primary" id="confirmAction" aria-label="Confirm">Confirm</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         let isProcessingRequest = false;
@@ -718,22 +914,21 @@
             {% endfor %}
         ];
 
-        const dishDatabase = {
-            veg: {
-                "Aloo Paratha": { ingredients: "Wheat flour, potatoes, spices (cumin, coriander), ghee", description: "Stuffed potato flatbread cooked with ghee, a North Indian breakfast favorite.", price: 8.99 },
-                "Dosa": { ingredients: "Rice, urad dal, salt (fermented batter)", description: "Crispy South Indian crepe, typically served with sambar and chutney.", price: 8.99 },
-                "Dal Tadka": { ingredients: "Toor dal, garlic, cumin, ghee, tomatoes", description: "Tempered lentil dish with aromatic spices, a staple across India.", price: 7.99 },
-                "Pav Bhaji": { ingredients: "Mixed veggies (potatoes, peas, capsicum), butter, pav bread", description: "Mumbai's famous buttery vegetable mash with soft bread rolls.", price: 10.49 },
-                "Masala Dosa": { ingredients: "Dosa batter, potato filling, mustard seeds, curry leaves", description: "Crispy crepe stuffed with spiced potatoes, served with chutney.", price: 9.99 }
-            },
-            nonVeg: {
-                "Butter Chicken": { ingredients: "Chicken, tomato puree, butter, cream, garam masala", description: "Creamy Punjabi curry with tender chicken pieces in rich tomato sauce.", price: 15.99 },
-                "Biryani": { ingredients: "Basmati rice, meat (chicken/mutton), spices (saffron, bay leaf), yogurt, fried onions", description: "Fragrant layered rice dish with spiced meat, a celebration favorite.", price: 14.99 },
-                "Chicken Chettinad": { ingredients: "Chicken, coconut, black pepper, fennel, curry leaves", description: "Fiery Tamil Nadu chicken curry with aromatic spices and coconut.", price: 16.99 },
-                "Fish Curry": { ingredients: "Fish (pomfret/rohu), coconut milk, tamarind, curry leaves", description: "Goan/Kerala style fish in tangy coconut gravy with spices.", price: 17.99 },
-                "Tandoori Chicken": { ingredients: "Chicken, yogurt, red chili, tandoori masala, lemon", description: "Clay oven-roasted chicken marinated in yogurt and spices.", price: 15.99 }
-            }
-        };
+        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)"
+        ];
 
         function sanitizeInput(input) {
             const div = document.createElement('div');
@@ -769,17 +964,6 @@
             cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
         }
 
-        function showConfirmation(message, callback) {
-            document.getElementById('confirmationMessage').textContent = message;
-            const confirmBtn = document.getElementById('confirmAction');
-            confirmBtn.onclick = function() {
-                callback();
-                bootstrap.Modal.getInstance(document.getElementById('confirmationModal')).hide();
-            };
-            const modal = new bootstrap.Modal(document.getElementById('confirmationModal'));
-            modal.show();
-        }
-
         function showSoftDrinkModal(button) {
             currentSoftDrinkButton = button;
             const buttonContainer = button.closest('.button-container');
@@ -795,11 +979,13 @@
         }
 
         function addSoftDrinkToCart() {
-            if (!currentSoftDrinkButton) return;
+            if (!currentSoftDrinkButton || isProcessingRequest) return;
+            isProcessingRequest = true;
             const buttonContainer = currentSoftDrinkButton.closest('.button-container');
             const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
             if (quantity < 1 || quantity > 99) {
                 alert('Quantity must be between 1 and 99.');
+                isProcessingRequest = false;
                 return;
             }
             const itemName = sanitizeInput(buttonContainer.getAttribute('data-item-name'));
@@ -838,6 +1024,9 @@
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
                 bootstrap.Modal.getInstance(document.getElementById('softDrinkModal')).hide();
+            })
+            .finally(() => {
+                isProcessingRequest = false;
             });
         }
 
@@ -905,6 +1094,12 @@
             avatarUpload.addEventListener('change', function(event) {
                 const file = event.target.files[0];
                 if (file) {
+                    const maxSize = 15 * 1024 * 1024; // 15MB
+                    if (file.size > maxSize) {
+                        alert('Image size must not exceed 15MB.');
+                        this.value = '';
+                        return;
+                    }
                     const reader = new FileReader();
                     reader.onload = function(e) {
                         const base64Image = e.target.result;
@@ -925,10 +1120,21 @@
                                 saveAvatar(data.image);
                                 ensureAvatarOptions();
                                 dropdownMenu.style.display = 'none';
+                            } else {
+                                throw new Error(data.error || 'Upload failed');
                             }
                         })
                         .catch(error => {
-                            alert('Error uploading image.');
+                            alert('Error uploading image. Using default as fallback.');
+                            const img = document.createElement('img');
+                            img.src = '/static/default-avatar.jpg';
+                            img.alt = 'User Avatar';
+                            img.className = 'avatar-image';
+                            avatarIcon.innerHTML = '';
+                            avatarIcon.appendChild(img);
+                            saveAvatar('/static/default-avatar.jpg');
+                            ensureAvatarOptions();
+                            dropdownMenu.style.display = 'none';
                         });
                     };
                     reader.readAsDataURL(file);
@@ -937,23 +1143,23 @@
 
             function addDeleteListener(deleteElement) {
                 deleteElement.addEventListener('click', function() {
-                    showConfirmation('Are you sure you want to delete your avatar?', function() {
-                        fetch('/delete_avatar', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' }
-                        })
-                        .then(response => response.json())
-                        .then(data => {
-                            if (data.success) {
-                                clearAvatar();
-                                dropdownMenu.style.display = 'none';
-                            }
-                        })
-                        .catch(error => {
-                            alert('Error deleting image. Cleared locally.');
+                    fetch('/delete_avatar', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' }
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
                             clearAvatar();
                             dropdownMenu.style.display = 'none';
-                        });
+                        } else {
+                            throw new Error(data.error || 'Delete failed');
+                        }
+                    })
+                    .catch(error => {
+                        alert('Error deleting image. Cleared locally.');
+                        clearAvatar();
+                        dropdownMenu.style.display = 'none';
                     });
                 });
             }
@@ -1065,12 +1271,14 @@
                             suggestionDiv.addEventListener('click', function() {
                                 searchBar.value = item;
                                 suggestionsContainer.style.display = 'none';
+                                filterMenu();
                             });
                             suggestionsContainer.appendChild(suggestionDiv);
                         });
                         suggestionsContainer.style.display = 'block';
                     }
                 }
+                filterMenu();
             });
             document.addEventListener('click', function(event) {
                 if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
@@ -1080,181 +1288,85 @@
 
             const customDishForm = document.getElementById('customDishForm');
             if (customDishForm) {
-                const dishNameInput = document.getElementById('custom-dish-name');
-                const dishIngredients = document.getElementById('custom-dish-ingredients');
-                const dishDescription = document.getElementById('custom-dish-description');
-                const dishPrice = document.getElementById('custom-dish-price');
-                const dishSuggestions = document.getElementById('dishNameSuggestions');
-                const formFeedback = document.getElementById('form-feedback');
-                const chatInput = document.getElementById('chat-input');
-                const sendBtn = document.getElementById('send-btn');
-                const chatFeedback = document.getElementById('chat-feedback');
-                const vegBtn = document.getElementById('veg-btn');
-                const nonVegBtn = document.getElementById('non-veg-btn');
-                const itemDetails = document.getElementById('item-details');
-                let filterType = 'all';
+                const descriptionTextarea = document.getElementById('custom-dish-description');
+                const descriptionSuggestions = document.getElementById('descriptionSuggestions');
+                let usedIngredients = new Set();
 
-                function showItemDetails(dish) {
-                    if (dish) {
-                        itemDetails.style.display = 'block';
-                        document.getElementById('detail-name').textContent = dish;
-                        document.getElementById('detail-ingredients').textContent = (dishDatabase.veg[dish] || dishDatabase.nonVeg[dish]).ingredients;
-                        document.getElementById('detail-description').textContent = (dishDatabase.veg[dish] || dishDatabase.nonVeg[dish]).description;
-                        document.getElementById('detail-price').textContent = (dishDatabase.veg[dish] || dishDatabase.nonVeg[dish]).price.toFixed(2);
-                    } else {
-                        itemDetails.style.display = 'none';
+                function updateUsedIngredients() {
+                    const inputText = descriptionTextarea.value.trim();
+                    usedIngredients.clear();
+                    if (inputText) {
+                        const words = inputText.split(/,\s*/).map(word => word.trim());
+                        words.forEach(word => {
+                            if (ingredientsList.includes(word)) {
+                                usedIngredients.add(word);
+                            }
+                        });
                     }
                 }
 
-                function updateSuggestions(input) {
-                    const sanitizedInput = sanitizeInput(input.trim().toLowerCase());
-                    dishSuggestions.innerHTML = '';
-                    dishSuggestions.style.display = 'none';
-                    if (sanitizedInput.length > 0) {
-                        let matches = [];
-                        if (filterType === 'veg') {
-                            matches = Object.keys(dishDatabase.veg).filter(dish => dish.toLowerCase().includes(sanitizedInput));
-                        } else if (filterType === 'non-veg') {
-                            matches = Object.keys(dishDatabase.nonVeg).filter(dish => dish.toLowerCase().includes(sanitizedInput));
-                        } else {
-                            matches = [...Object.keys(dishDatabase.veg), ...Object.keys(dishDatabase.nonVeg)].filter(dish => dish.toLowerCase().includes(sanitizedInput));
-                        }
-                        if (matches.length > 0) {
-                            matches.slice(0, 5).forEach(dish => {
-                                const suggestion = document.createElement('div');
-                                suggestion.classList.add('suggestion-item');
-                                suggestion.textContent = dish;
-                                suggestion.addEventListener('click', function() {
-                                    dishNameInput.value = dish;
-                                    const dishData = dishDatabase.veg[dish] || dishDatabase.nonVeg[dish];
-                                    if (dishData) {
-                                        dishIngredients.value = dishData.ingredients;
-                                        dishDescription.value = dishData.description;
-                                        dishPrice.value = dishData.price.toFixed(2);
-                                        showItemDetails(dish);
-                                    }
-                                    dishSuggestions.style.display = 'none';
+                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.textContent = 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();
                                 });
-                                dishSuggestions.appendChild(suggestion);
+                                descriptionSuggestions.appendChild(suggestionDiv);
                             });
-                            dishSuggestions.style.display = 'block';
+                            descriptionSuggestions.style.display = 'block';
                         }
                     }
-                }
-
-                dishNameInput.addEventListener('input', function() {
-                    updateSuggestions(this.value);
-                });
-
-                document.addEventListener('click', function(e) {
-                    if (e.target !== dishNameInput && !dishSuggestions.contains(e.target)) {
-                        dishSuggestions.style.display = 'none';
-                    }
                 });
 
-                vegBtn.addEventListener('click', function() {
-                    filterType = 'veg';
-                    vegBtn.classList.remove('btn-outline-success');
-                    vegBtn.classList.add('btn-success');
-                    nonVegBtn.classList.remove('btn-danger');
-                    nonVegBtn.classList.add('btn-outline-danger');
-                    updateSuggestions(dishNameInput.value);
-                });
-
-                nonVegBtn.addEventListener('click', function() {
-                    filterType = 'non-veg';
-                    nonVegBtn.classList.remove('btn-outline-danger');
-                    nonVegBtn.classList.add('btn-danger');
-                    vegBtn.classList.remove('btn-success');
-                    vegBtn.classList.add('btn-outline-success');
-                    updateSuggestions(dishNameInput.value);
-                });
-
-                sendBtn.addEventListener('click', function() {
-                    const input = sanitizeInput(chatInput.value.trim().toLowerCase());
-                    chatFeedback.innerHTML = '';
-                    if (input === 'hi') {
-                        fetch('/salesforce/get_customer_name', {
-                            method: 'GET',
-                            headers: { 'Content-Type': 'application/json' }
-                        })
-                        .then(response => response.json())
-                        .then(data => {
-                            const customerName = data.name || 'Customer';
-                            chatFeedback.innerHTML = `Welcome ${customerName}!`;
-                            chatFeedback.className = 'text-success';
-                        })
-                        .catch(() => {
-                            chatFeedback.innerHTML = 'Welcome Guest!';
-                            chatFeedback.className = 'text-success';
-                        });
-                    } else if (input === 'veg') {
-                        filterType = 'veg';
-                        vegBtn.click();
-                        chatFeedback.innerHTML = 'Showing vegetarian items.';
-                        chatFeedback.className = 'text-success';
-                    } else if (input === 'non-veg' || input === 'non veg') {
-                        filterType = 'non-veg';
-                        nonVegBtn.click();
-                        chatFeedback.innerHTML = 'Showing non-vegetarian items.';
-                        chatFeedback.className = 'text-success';
-                    } else {
-                        chatFeedback.innerHTML = 'Please type "hi", "veg", or "non-veg".';
-                        chatFeedback.className = 'text-danger';
+                document.addEventListener('click', function(event) {
+                    if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
+                        descriptionSuggestions.style.display = 'none';
                     }
-                    chatInput.value = '';
                 });
 
                 customDishForm.addEventListener('submit', function(event) {
                     event.preventDefault();
-                    formFeedback.style.display = 'none';
-                    formFeedback.innerHTML = '';
-                    const dishName = sanitizeInput(dishNameInput.value.trim());
-                    const ingredients = sanitizeInput(dishIngredients.value.trim());
-                    const description = sanitizeInput(dishDescription.value.trim());
-                    const price = parseFloat(dishPrice.value);
-                    if (!dishName || !ingredients || !description || isNaN(price) || price <= 0) {
-                        formFeedback.innerHTML = 'Please fill all fields with valid data.';
-                        formFeedback.className = 'text-danger';
-                        formFeedback.style.display = 'block';
+                    const dishName = sanitizeInput(document.getElementById('custom-dish-name').value.trim());
+                    const description = sanitizeInput(descriptionTextarea.value.trim());
+                    if (!dishName || !description) {
+                        alert('Please fill in both the dish name and description.');
                         return;
                     }
-                    const submitBtn = document.getElementById('submitCustomDish');
-                    submitBtn.disabled = true;
-                    submitBtn.innerText = 'Submitting...';
-                    const formData = {
-                        name: dishName,
-                        ingredients: ingredients,
-                        description: description,
-                        price: price,
-                        type: filterType === 'veg' ? 'Vegetarian' : 'Non-Vegetarian'
-                    };
-                    fetch('/salesforce/submit_custom_dish', {
+                    fetch('/customdish/generate_custom_dish', {
                         method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(formData)
+                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                        body: new URLSearchParams({ 'name': dishName, 'description': description })
                     })
                     .then(response => response.json())
                     .then(data => {
                         if (data.success) {
-                            formFeedback.innerHTML = 'Custom dish submitted successfully!';
-                            formFeedback.className = 'text-success';
-                            formFeedback.style.display = 'block';
-                            customDishForm.reset();
-                            itemDetails.style.display = 'none';
-                            setTimeout(() => window.location.reload(), 1500);
+                            alert('Custom dish submitted successfully!');
+                            window.location.reload();
                         } else {
                             throw new Error(data.error || 'Submission failed');
                         }
                     })
                     .catch(error => {
-                        formFeedback.innerHTML = `Error: ${error.message}. Please try again.`;
-                        formFeedback.className = 'text-danger';
-                        formFeedback.style.display = 'block';
-                    })
-                    .finally(() => {
-                        submitBtn.disabled = false;
-                        submitBtn.innerText = 'Submit to Salesforce';
+                        alert(`Error submitting custom dish: ${error.message}`);
                     });
                 });
             }
@@ -1269,7 +1381,7 @@
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                 const recognition = new SpeechRecognition();
                 recognition.continuous = false;
-                recognition.interimResults = false;
+                recognition.interimResults = true;
                 recognition.lang = 'en-US';
 
                 micIcon.addEventListener('click', function() {
@@ -1283,14 +1395,25 @@
                 };
 
                 recognition.onresult = function(event) {
-                    const transcript = event.results[0][0].transcript.trim().toLowerCase();
-                    micPopupText.textContent = `You said: "${transcript}"`;
-                    setTimeout(() => {
+                    let interimTranscript = '';
+                    let finalTranscript = '';
+                    for (let i = event.resultIndex; i < event.results.length; i++) {
+                        const transcript = event.results[i][0].transcript;
+                        if (event.results[i].isFinal) {
+                            finalTranscript += transcript;
+                        } else {
+                            interimTranscript += transcript;
+                        }
+                    }
+                    if (interimTranscript) {
+                        micPopupText.textContent = interimTranscript;
+                    }
+                    if (finalTranscript) {
+                        searchBar.value = sanitizeInput(finalTranscript.trim());
+                        filterMenu();
                         micPopup.classList.remove('active');
-                        searchBar.value = transcript;
-                        performSearch(transcript);
                         micIcon.classList.remove('active');
-                    }, 1000);
+                    }
                 };
 
                 recognition.onerror = function(event) {
@@ -1321,25 +1444,6 @@
                 micUnsupported.style.display = 'block';
             }
 
-            function performSearch(query) {
-                const lowerQuery = query.toLowerCase();
-                const matchingSection = sections.find(section => section.toLowerCase().includes(lowerQuery));
-                if (matchingSection) {
-                    selectedCategoryInput.value = matchingSection;
-                    categoryForm.submit();
-                } else {
-                    const matchingItem = menuItems.find(item => item.toLowerCase().includes(lowerQuery));
-                    if (matchingItem) {
-                        const itemCard = document.querySelector(`[data-item-name="${matchingItem}"]`);
-                        if (itemCard) {
-                            itemCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                        }
-                    } else {
-                        alert('No matching items or sections found.');
-                    }
-                }
-            }
-
             document.getElementById('increaseQuantity').addEventListener('click', function() {
                 let quantity = parseInt(document.getElementById('quantityInput').value);
                 if (quantity < 99) document.getElementById('quantityInput').value = quantity + 1;
@@ -1362,18 +1466,67 @@
 
             const initialCart = getCartLocalStorage();
             updateCartUI(initialCart);
+
+            fetch('/cart/get')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                    }
+                })
+                .catch(() => {
+                    updateCartUI(initialCart);
+                });
         });
 
-        function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, category) {
+        function filterMenu() {
+            const input = sanitizeInput(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.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, ingredients, nutrition, allergens, section, selectedCategory) {
             document.getElementById('modal-name').textContent = name;
             document.getElementById('modal-price').textContent = `$${price}`;
-            document.getElementById('modal-img').src = image;
-            document.getElementById('modal-description').textContent = description;
-            document.getElementById('modal-ingredients').textContent = ingredients;
-            document.getElementById('modal-nutrition').textContent = nutrition;
-            document.getElementById('modal-allergens').textContent = allergens;
+            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
+            document.getElementById('modal-description').textContent = description || 'No description available.';
+            document.getElementById('modal-ingredients').textContent = ingredients || 'Not specified';
+            document.getElementById('modal-nutrition').textContent = nutrition || 'Not available';
+            document.getElementById('modal-allergens').textContent = allergens || 'None listed';
             document.getElementById('modal-section').dataset.section = section;
-            document.getElementById('modal-section').dataset.category = category;
+            document.getElementById('modal-section').dataset.category = selectedCategory;
             document.getElementById('quantityInput').value = '1';
             document.getElementById('modal-instructions').value = '';
             fetchAddons(name, section);
@@ -1382,38 +1535,58 @@
         function fetchAddons(itemName, section) {
             const addonsList = document.getElementById('addons-list');
             addonsList.innerHTML = 'Loading customization options...';
-            fetch(`/menu/addons?item_name=${encodeURIComponent(itemName)}&section=${encodeURIComponent(section)}`)
+            fetch(`/api/addons?item_name=${encodeURIComponent(itemName)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
                     addonsList.innerHTML = '';
-                    if (data.addons && data.addons.length > 0) {
-                        data.addons.forEach(addon => {
-                            const addonDiv = document.createElement('div');
-                            addonDiv.className = 'addon-section mb-3';
-                            addonDiv.innerHTML = `
-                                <h6>${addon.name}</h6>
-                                ${addon.options.map(option => `
-                                    <div class="form-check">
-                                        <input class="form-check-input" type="${addon.type === 'single' ? 'radio' : 'checkbox'}" 
-                                               name="${addon.name}" id="${option.id}" value="${option.name}" 
-                                               data-price="${option.price}">
-                                        <label class="form-check-label" for="${option.id}">
-                                            ${option.name} ${option.price > 0 ? '(+$' + option.price.toFixed(2) + ')' : ''}
-                                        </label>
-                                    </div>
-                                `).join('')}
-                            `;
-                            addonsList.appendChild(addonDiv);
-                        });
-                    } else {
+                    if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
+                        return;
                     }
+                    data.addons.forEach(addon => {
+                        const sectionDiv = document.createElement('div');
+                        sectionDiv.className = 'addon-section';
+                        sectionDiv.innerHTML = `<h6>${addon.name}</h6>`;
+                        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.className = 'form-check';
+                            listItem.innerHTML = `
+                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
+                                       data-name="${option}" data-group="${addon.name}" 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(error => {
+                .catch(() => {
                     addonsList.innerHTML = '<p>Error loading customization options.</p>';
                 });
         }
 
+        document.addEventListener('click', function(event) {
+            if (event.target.classList.contains('addon-option')) {
+                handleAddonClick(event.target);
+            }
+        });
+
+        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}"]`);
+            if (!isMultiSelectGroup) {
+                checkboxes.forEach(cb => {
+                    if (cb !== checkbox) cb.checked = false;
+                });
+            }
+        }
+
         function addToCartFromModal() {
             if (isProcessingRequest) return;
             isProcessingRequest = true;
@@ -1429,13 +1602,10 @@
                 isProcessingRequest = false;
                 return;
             }
-            const addons = [];
-            document.querySelectorAll('#addons-list .form-check-input:checked').forEach(input => {
-                const addonName = input.getAttribute('name');
-                const optionName = input.value;
-                const optionPrice = parseFloat(input.getAttribute('data-price')) || 0;
-                addons.push({ addonName, optionName, optionPrice });
-            });
+            const addons = Array.from(document.querySelectorAll('.addon-option:checked')).map(cb => ({
+                name: cb.getAttribute('data-name'),
+                price: parseFloat(cb.getAttribute('data-price') || 0)
+            }));
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,