Update templates/menu.html

templates/menu.html

@@ -4,10 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Menu</title>
-    <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
-    <!-- Preload Critical Resources -->
     <link rel="preload" href="/static/placeholder.mp4" as="video">
     {% for section, items in ordered_menu.items() %}
         {% for item in items[:1] %}
@@ -15,8 +13,66 @@
         {% endfor %}
     {% endfor %}
     <style>
-        /* Existing styles remain unchanged */
-        /* ... (keeping all your existing CSS) ... */
+        body { padding-top: 70px; padding-bottom: 70px; }
+        .fixed-top-bar { position: fixed; top: 0; width: 100%; background: #fff; padding: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1000; }
+        .avatar-dropdown-container { position: relative; cursor: pointer; }
+        .avatar-icon { width: 40px; height: 40px; background-color: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
+        .dropdown-menu { display: none; position: absolute; top: 45px; left: 0; background: white; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1000; }
+        .dropdown-item { padding: 10px 20px; display: block; color: #333; text-decoration: none; }
+        .dropdown-item:hover { background: #f8f9fa; }
+        .search-bar-container { position: relative; width: 50%; }
+        .search-bar-container input { width: 100%; padding: 8px 40px 8px 40px; border-radius: 20px; border: 1px solid #ddd; }
+        .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #666; }
+        .mic-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #666; cursor: pointer; }
+        .bottom-action-bar { position: fixed; bottom: 0; width: 100%; background: #fff; padding: 10px; display: flex; justify-content: space-around; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); z-index: 1000; }
+        .btn-order-history, .btn-view-cart { background: #007bff; color: white; padding: 10px 20px; border-radius: 20px; text-decoration: none; display: flex; align-items: center; gap: 5px; }
+        .cart-icon-badge { background: #dc3545; color: white; border-radius: 50%; padding: 2px 8px; font-size: 12px; }
+        .menu-card { border: none; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: transform 0.3s; }
+        .menu-card.visible { transform: scale(1); opacity: 1; }
+        .menu-video { width: 100%; height: 200px; object-fit: cover; }
+        .menu-video.loaded { background: transparent; }
+        .card-body { padding: 15px; }
+        .addbutton { display: flex; justify-content: space-between; align-items: center; }
+        .button-container { position: relative; }
+        .customisable-text { font-size: 12px; color: #007bff; margin-top: 5px; }
+        .toggle-details { text-align: center; padding: 10px; background: #f8f9fa; cursor: pointer; border-top: 1px solid #ddd; }
+        .item-details { display: none; padding: 15px; background: #fff; }
+        .item-details.show { display: block; }
+        .modal-addons h5 { font-size: 16px; margin-bottom: 10px; }
+        .addon-section { margin-bottom: 15px; }
+        .addon-section h6 { font-size: 14px; margin-bottom: 5px; cursor: pointer; }
+        .addon-options { max-height: 150px; overflow-y: auto; }
+        .addon-options.collapsed { max-height: 0; overflow: hidden; }
+        .form-check { margin-bottom: 5px; }
+        .extra-charge { color: #dc3545; font-size: 12px; }
+        .quantity-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0; }
+        .quantity-controls .btn { background: #007bff; color: white; border: none; padding: 5px 15px; border-radius: 5px; }
+        .quantity-controls-footer { display: flex; gap: 10px; }
+        .quantity-controls-footer .btn { background: #007bff; color: white; border: none; padding: 5px 15px; border-radius: 5px; }
+        .chat-container { max-width: 600px; margin: 0 auto; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; }
+        .chat-header { background: #007bff; color: white; padding: 10px; text-align: center; font-size: 18px; }
+        .chat-messages { max-height: 400px; overflow-y: auto; padding: 10px; }
+        .bot-message, .user-message { margin: 5px 0; padding: 10px; border-radius: 10px; }
+        .bot-message { background: #f1f1f1; align-self: flex-start; }
+        .user-message { background: #007bff; color: white; align-self: flex-end; text-align: right; }
+        .chat-input { display: flex; padding: 10px; border-top: 1px solid #ddd; }
+        .chat-input input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 20px; margin-right: 10px; }
+        .chat-input button { background: #007bff; color: white; border: none; padding: 8px 15px; border-radius: 20px; }
+        .ingredients-list, .menu-items-list, .selected-ingredients, .selected-customization-ingredients, .cart-items { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
+        .ingredient-item, .menu-item, .cart-item { border: 1px solid #ddd; border-radius: 5px; padding: 10px; display: flex; flex-direction: column; align-items: center; width: 120px; }
+        .ingredient-item img, .menu-item img, .cart-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; }
+        .ingredient-item button, .menu-item button { background: #007bff; color: white; border: none; padding: 5px 10px; border-radius: 5px; margin-top: 5px; }
+        .selected-ingredients div, .selected-customization-ingredients div { display: flex; align-items: center; margin: 5px 0; }
+        .selected-customization-ingredients textarea { width: 100%; height: 60px; margin-top: 10px; }
+        .submit-button, .submit-cart-button, .submit-customization-button { background: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 5px; margin-top: 10px; }
+        .remove-button { background: #dc3545; color: white; border: none; padding: 2px 5px; border-radius: 5px; margin-left: 5px; }
+        .option-button { background: #007bff; color: white; border: none; padding: 5px 10px; border-radius: 5px; margin: 5px; }
+        .option-button.green { background: #28a745; }
+        .option-button.red { background: #dc3545; }
+        .toggle-container { display: inline-flex; align-items: center; margin: 0 10px; }
+        .custom-toggle { display: none; }
+        .custom-toggle + label { padding: 5px 10px; border: 1px solid #007bff; border-radius: 20px; cursor: pointer; transition: all 0.3s; }
+        .custom-toggle:checked + label { background: #007bff; color: white; }
     </style>
 </head>
 <body>
@@ -28,7 +84,7 @@
             <div class="dropdown-menu">
                 <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
                 <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
-                <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item">MY Summary</a>
+                <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item">My Summary</a>
                 <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
             </div>
         </div>
@@ -42,7 +98,6 @@
     <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
         <label class="form-label fw-bold">Filters:</label>
         <div class="toggle-container">
-            <!-- Veg Only Toggle -->
             <input type="checkbox" id="veg-toggle" name="veg"
                    {% if selected_category == "Veg" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('veg')"
@@ -50,7 +105,6 @@
             <label for="veg-toggle">Veg</label>
         </div>
         <div class="toggle-container">
-            <!-- Customized Dish Toggle -->
             <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
                    {% if selected_category == "Customized Dish" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('custom')"
@@ -64,11 +118,9 @@
             <div id="custom-dish-form" class="mt-4">
                 <div class="chat-container">
                     <div class="chat-header">🍳 Chef Bot</div>
-                    <div class="chat-messages" id="chatMessages">
-                        <!-- Initial message will be set by JavaScript based on session -->
-                    </div>
+                    <div class="chat-messages" id="chatMessages"></div>
                     <div class="chat-input">
-                        <input type="text" id="userInput" placeholder="Type your name or message...">
+                        <input type="text" id="userInput" placeholder="Type your message...">
                         <button onclick="sendMessage()">Send</button>
                     </div>
                 </div>
@@ -122,8 +174,8 @@
                                                                 onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
                                                             ADD
                                                         </button>
-                                                        {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' %}
-                                                            <span class="customisable-text">Customisable</span>
+                                                        {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized Dish' %}
+                                                            <span class="customisable-text">Customizable</span>
                                                         {% endif %}
                                                     {% endif %}
                                                 </div>
@@ -233,31 +285,7 @@
         let isProcessingRequest = false;
         let currentSoftDrinkButton = null;
         let baseItemPrice = 0;
-        const menuItems = [
-            {% for section, items in ordered_menu.items() %}
-                {% for item in items %}
-                    {
-                        name: "{{ item.Name | default('Unnamed Item') }}",
-                        section: "{{ item.Section__c | default(section) }}"
-                    },
-                {% 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)"
-        ];
+
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -273,33 +301,11 @@
             localStorage.setItem('cart', JSON.stringify(cart));
             return cart;
         }
-        function removeFromCartLocalStorage(itemName, quantityToRemove, instructions, addons) {
-            let cart = JSON.parse(localStorage.getItem('cart')) || [];
-            const itemIndex = cart.findIndex(item => 
-                item.itemName === itemName && 
-                item.instructions === instructions && 
-                JSON.stringify(item.addons) === JSON.stringify(addons)
-            );
-            if (itemIndex !== -1) {
-                if (quantityToRemove >= cart[itemIndex].quantity) {
-                    cart.splice(itemIndex, 1);
-                } else {
-                    cart[itemIndex].quantity -= quantityToRemove;
-                }
-            }
-            localStorage.setItem('cart', JSON.stringify(cart));
-            return cart;
-        }
+
         function getCartLocalStorage() {
             return JSON.parse(localStorage.getItem('cart')) || [];
         }
-        function debounce(func, wait) {
-            let timeout;
-            return function (...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), wait);
-            };
-        }
+
         function updateModalPrice() {
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
@@ -308,12 +314,14 @@
             const totalPrice = baseItemPrice + totalAddOnPrice;
             document.getElementById('modal-price').innerText = `$${totalPrice.toFixed(2)}`;
         }
+
         function updateSoftDrinkQuantity(delta) {
             const quantityInput = document.getElementById('soft-drink-quantity');
             let currentQuantity = parseInt(quantityInput.value) || 1;
             currentQuantity = Math.max(1, currentQuantity + delta);
             quantityInput.value = currentQuantity;
         }
+
         function showSoftDrinkModal(button) {
             currentSoftDrinkButton = button;
             const buttonContainer = button.closest('.button-container');
@@ -322,13 +330,14 @@
             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-price').textContent = `$${itemPrice}`;
             document.getElementById('soft-drink-quantity').value = '1';
             document.getElementById('soft-drink-image').src = itemImage || '/static/placeholder.jpg';
             
             const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
             modal.show();
         }
+
         function addSoftDrinkToCart() {
             if (!currentSoftDrinkButton) return;
             
@@ -354,9 +363,7 @@
             
             fetch('/cart/add', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(cartPayload)
             })
             .then(response => response.json())
@@ -381,6 +388,7 @@
                 modal.hide();
             });
         }
+
         function updateCartUI(cart) {
             if (!Array.isArray(cart)) {
                 console.error('Invalid cart data:', cart);
@@ -398,7 +406,7 @@
         }
 
         window.most_common_addons = {{ most_common_addons | tojson }};
-        console.log("Most common add-ons: ", window.most_common_addons);
+
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             baseItemPrice = parseFloat(price) || 0;
@@ -407,18 +415,16 @@
             modalImg.src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('addons-list').innerHTML = '';
-            document.getElementById('addons-list').classList.add('addon-loading');
             document.getElementById('modal-instructions').value = '';
             const modalSectionEl = document.getElementById('modal-section');
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
+
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
-                    addonsList.classList.remove('addon-loading');
-                    addonsList.innerHTML = '';
                     if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
                         return;
@@ -448,74 +454,20 @@
                         sectionDiv.appendChild(optionsContainer);
                         addonsList.appendChild(sectionDiv);
                     });
-                    const addonSections = addonsList.querySelectorAll('.addon-section');
-                    addonSections.forEach(section => {
-                        const title = section.querySelector('h6');
-                        const options = section.querySelector('.addon-options');
-                        title.addEventListener('click', () => {
-                            section.classList.toggle('collapsed');
-                            options.classList.toggle('collapsed');
-                        });
-                    });
                     document.querySelectorAll('.addon-option').forEach(checkbox => {
                         checkbox.addEventListener('change', updateModalPrice);
                     });
-                    document.querySelectorAll('.addon-option').forEach(checkbox => {
-                        checkbox.addEventListener('change', function () {
-                            const groupName = this.getAttribute('data-group');
-                            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"].includes(groupName);
-                            if (!isMultiSelectGroup && this.checked) {
-                                document.querySelectorAll(`.addon-option[data-group="${groupName}"]`).forEach(otherCheckbox => {
-                                    if (otherCheckbox !== this) {
-                                        otherCheckbox.checked = false;
-                                    }
-                                });
-                            }
-                        });
-                    });
-                    if (window.most_common_addons && window.most_common_addons.length > 0) {
-                        const checkboxes = document.querySelectorAll('.addon-option');
-                        const categorySelection = {
-                            "Select Spice Level": null,
-                            "Choose Spice Level": null,
-                            "Raita/Sides": [],
-                        };
-                        for (let spice of window.most_common_addons) {
-                            const isSpiceLevel = ["Mild", "Medium", "Spicy", "Extra Spicy"].includes(spice);
-                            if (isSpiceLevel) {
-                                checkboxes.forEach(checkbox => {
-                                    const checkboxName = checkbox.getAttribute('data-name').trim();
-                                    const checkboxGroup = checkbox.getAttribute('data-group');
-                                    if ((checkboxGroup === "Select Spice Level" || checkboxGroup === "Choose Spice Level") &&
-                                        checkboxName === spice && categorySelection[checkboxGroup] === null) {
-                                        console.log(`Pre-selecting highest-count spice level: ${checkboxName}`);
-                                        checkbox.checked = true;
-                                        categorySelection[checkboxGroup] = checkboxName;
-                                    }
-                                });
-                                if (categorySelection["Select Spice Level"] || categorySelection["Choose Spice Level"]) break;
-                            }
-                        }
-                        checkboxes.forEach(checkbox => {
-                            const checkboxName = checkbox.getAttribute('data-name').trim();
-                            const checkboxGroup = checkbox.getAttribute('data-group');
-                            if (checkboxGroup === "Raita/Sides" && window.most_common_addons.includes(checkboxName)) {
-                                console.log(`Pre-selecting add-on: ${checkboxName}`);
-                                checkbox.checked = true;
-                                categorySelection["Raita/Sides"].push(checkboxName);
-                            }
-                        });
-                    }
                 })
                 .catch(err => {
                     console.error('Error fetching add-ons:', err);
-                    document.getElementById('addons-list').classList.remove('addon-loading');
                     document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
         }
+
         function addToCartFromModal() {
             if (isProcessingRequest) return;
             isProcessingRequest = true;
+
             const modalSectionEl = document.getElementById('modal-section');
             const section = modalSectionEl.getAttribute('data-section');
             const selectedCategory = modalSectionEl.getAttribute('data-category');
@@ -530,12 +482,7 @@
                 name: addon.getAttribute('data-name'),
                 price: parseFloat(addon.getAttribute('data-price')) || 0
             }));
-            if (!itemName || isNaN(itemPrice) || !section || !itemImage || quantity < 1) {
-                console.error('Invalid cart item data:', { itemName, itemPrice, section, itemImage, quantity });
-                alert('Invalid item data. Please try again.');
-                isProcessingRequest = false;
-                return;
-            }
+
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
@@ -546,11 +493,10 @@
                 instructions: instructions,
                 quantity: quantity
             };
+
             fetch('/cart/add', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(cartPayload)
             })
             .then(response => response.json())
@@ -578,6 +524,7 @@
                 isProcessingRequest = false;
             });
         }
+
         function handleToggle(source) {
             const form = document.getElementById("filter-form");
             const veg = document.getElementById("veg-toggle");
@@ -591,9 +538,6 @@
                     veg.checked = false;
                 }
             }
-            if (!custom.checked && !veg.checked) {
-                custom.checked = false;
-            }
             form.submit();
         }
 
@@ -609,129 +553,14 @@
                     dropdownMenu.style.display = 'none';
                 }
             });
-            const dropdownItems = document.querySelectorAll('.dropdown-item');
-            dropdownItems.forEach(item => {
-                item.addEventListener('click', function () {
-                    dropdownMenu.style.display = 'none';
-                });
-            });
+
             const searchBar = document.getElementById('searchBar');
             searchBar.addEventListener('click', function () {
                 window.location.href = '/search';
             });
-            const selectedItem = localStorage.getItem('selectedItem');
-            if (selectedItem) {
-                try {
-                    const { name, section } = JSON.parse(selectedItem);
-                    const menuCards = document.querySelectorAll('.menu-card');
-                    let targetCard = null;
-                    let buttonContainer = null;
-                    menuCards.forEach(card => {
-                        const itemName = card.getAttribute('data-item-name');
-                        const itemSection = card.getAttribute('data-item-section');
-                        if (itemName === name && itemSection === section) {
-                            targetCard = card;
-                            buttonContainer = card.querySelector('.button-container');
-                            card.classList.add('highlighted');
-                            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                            const toggleLink = card.querySelector('.toggle-details');
-                            if (toggleLink) {
-                                toggleLink.click();
-                            }
-                        }
-                    });
-                    if (buttonContainer) {
-                        if (section === 'Soft Drinks') {
-                            showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                        } else {
-                            const name = buttonContainer.getAttribute('data-item-name');
-                            const price = buttonContainer.getAttribute('data-item-price');
-                            const image = buttonContainer.getAttribute('data-item-image2');
-                            const description = buttonContainer.getAttribute('data-item-description');
-                            const category = buttonContainer.getAttribute('data-item-category');
-                            showItemDetails(name, price, image, description, section, category);
-                            const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                            modal.show();
-                        }
-                    }
-                } catch (err) {
-                    console.error('Error parsing selected item:', err);
-                }
-                localStorage.removeItem('selectedItem');
-            }
-            const menuCards = document.querySelectorAll('.menu-card');
-            const menuVideos = document.querySelectorAll('.menu-video');
-            const cardObserver = new IntersectionObserver((entries, observer) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('visible');
-                        observer.unobserve(entry.target);
-                    }
-                });
-            }, {
-                root: null,
-                rootMargin: '0px',
-                threshold: 0.1
-            });
-            const videoObserver = new IntersectionObserver((entries, observer) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        const video = entry.target;
-                        const src = video.getAttribute('data-src');
-                        if (src && !video.querySelector('source[src="' + src + '"]')) {
-                            const nextSibling = video.nextElementSibling;
-                            if (nextSibling && nextSibling.tagName === 'SOURCE') {
-                                nextSibling.src = src;
-                            } else {
-                                const source = video.querySelector('source');
-                                if (source) {
-                                    source.src = src;
-                                }
-                            }
-                            video.load();
-                        }
-                        video.classList.add('loaded');
-                        observer.unobserve(video);
-                    }
-                });
-            }, {
-                root: null,
-                rootMargin: '200px',
-                threshold: 0.01
-            });
-            menuCards.forEach(card => cardObserver.observe(card));
-            menuVideos.forEach(video => videoObserver.observe(video));
-            const toggleLinks = document.querySelectorAll('.toggle-details');
-            toggleLinks.forEach(link => {
-                link.addEventListener('click', function () {
-                    const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
-                    const detailsDiv = document.getElementById(`details-${itemName}`);
-                    const isCurrentlyShown = detailsDiv.classList.contains('show');
-                    document.querySelectorAll('.item-details.show').forEach(otherDetails => {
-                        if (otherDetails !== detailsDiv) {
-                            otherDetails.classList.remove('show');
-                            const otherLink = document.querySelector(`.toggle-details[data-item-name="${otherDetails.id.replace('details-', '').replace(/-/g, ' ')}"]`);
-                            if (otherLink) {
-                                otherLink.innerText = 'Show Details';
-                            }
-                        }
-                    });
-                    if (!isCurrentlyShown) {
-                        detailsDiv.classList.add('show');
-                        this.innerText = 'Hide Details';
-                    } else {
-                        detailsDiv.classList.remove('show');
-                        this.innerText = 'Show Details';
-                    }
-                });
-            });
+
             fetch('/cart/get')
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    return response.json();
-                })
+                .then(response => response.json())
                 .then(data => {
                     if (data.success) {
                         updateCartUI(data.cart);
@@ -746,12 +575,7 @@
                     const cart = getCartLocalStorage();
                     updateCartUI(cart);
                 });
-            const preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
-            preloadedVideos.forEach(link => {
-                const video = document.createElement('video');
-                video.src = link.href;
-                video.preload = 'auto';
-            });
+
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
             const quantityInput = document.getElementById('quantityInput');
@@ -766,12 +590,13 @@
                 quantityInput.value = quantity;
             });
         });
+
         let currentStep = 'greeting';
         let conversation = [];
         let selectedIngredients = [];
         let selectedMenuItem = null;
-        let cart = [];
         const userName = "{{ user_name }}";
+
         window.onload = function() {
             if (userName) {
                 conversation.push({ role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` });
@@ -785,29 +610,25 @@
                 displayConversation();
             }
         };
+
+        function displayConversation() {
+            const chatMessages = document.getElementById('chatMessages');
+            chatMessages.innerHTML = '';
+            conversation.forEach(msg => {
+                addMessage(msg.role, msg.message);
+            });
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+
         function addMessage(role, message) {
             const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found!');
-                return;
-            }
             const messageDiv = document.createElement('div');
             messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
             messageDiv.textContent = message;
             chatMessages.appendChild(messageDiv);
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
-        function displayConversation() {
-            const chatMessages = document.getElementById('chatMessages');
-            chatMessages.innerHTML = '';
-            conversation.forEach(msg => {
-                const messageDiv = document.createElement('div');
-                messageDiv.className = msg.role === 'bot' ? 'bot-message' : 'user-message';
-                messageDiv.textContent = msg.message;
-                chatMessages.appendChild(messageDiv);
-            });
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-        }
+
         function sendMessage() {
             const userInput = document.getElementById('userInput').value.trim();
             if (userInput) {
@@ -815,120 +636,135 @@
                 conversation.push({ role: 'user', message: userInput });
                 document.getElementById('userInput').value = '';
                 setTimeout(() => handleResponse(userInput), 500);
-            } else {
-                console.warn('Empty message!');
             }
         }
+
         function handleResponse(userInput) {
-            const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
             let botResponse = '';
             let options = [];
-            if (lastMessage.includes('non-vegetarian')) {
-                conversation.push({ role: 'user', message: 'Non-Vegetarian' });
-                console.log("Food preference selected: Non-Vegetarian");
-                botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
-                fetchIngredients('non-vegetarian');
-                return;
+            const lastMessage = userInput.toLowerCase();
+
+            if (currentStep === 'greeting' && !userName) {
+                currentStep = 'food_type';
+                botResponse = `Nice to meet you, ${userInput}! 😊 What type of food would you prefer?`;
+                options = [
+                    { text: 'Vegetarian', class: 'green' },
+                    { text: 'Non-Vegetarian', class: 'red' }
+                ];
             } else if (lastMessage.includes('vegetarian')) {
-                conversation.push({ role: 'user', message: 'Vegetarian' });
-                console.log("Food preference selected: Vegetarian");
+                currentStep = 'ingredients';
                 botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:';
                 fetchIngredients('vegetarian');
                 return;
-            } else if (lastMessage.includes('chicken') || lastMessage.includes('beef') || lastMessage.includes('lamb')) {
-                conversation.push({ role: 'user', message: lastMessage });
-                console.log(`Non-veg option selected: ${lastMessage}`);
-                botResponse = `Great! Here are some ${lastMessage} ingredients available:`;
-                fetchIngredients(lastMessage.toLowerCase());
+            } else if (lastMessage.includes('non-vegetarian')) {
+                currentStep = 'ingredients';
+                botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
+                fetchIngredients('non-vegetarian');
                 return;
             } else if (lastMessage.includes('yes') && selectedMenuItem) {
+                currentStep = 'customize';
                 botResponse = 'Here are some ingredients to customize your dish:';
-                handleYesResponse();
+                fetchIngredientsForCustomization('both');
                 return;
             } else if (lastMessage.includes('no') && selectedMenuItem) {
                 submitCustomizationIngredients();
                 return;
-            } else if (lastMessage.includes('yes') && currentStep === 'post_cart') {
-                botResponse = `Let's get started again! What type of food would you prefer this time?`;
-                options = [
-                    { text: 'Vegetarian', class: 'green' },
-                    { text: 'Non-Vegetarian', class: 'red' }
-                ];
-                currentStep = 'food_type';
-                addMessage('bot', botResponse);
-                displayOptions(options);
-                return;
-            } else if (lastMessage.includes('non-vegetarian') && currentStep === 'food_type') {
-                conversation.push({ role: 'user', message: 'Non-Vegetarian' });
-                console.log("Food preference selected: Non-Vegetarian");
-                botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
-                fetchIngredients('non-vegetarian');
-                return;
-            } else if (lastMessage.includes('vegetarian') && currentStep === 'food_type') {
-                conversation.push({ role: 'user', message: 'Vegetarian' });
-                console.log("Food preference selected: Vegetarian");
-                botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:';
-                fetchIngredients('vegetarian');
-                return;
-            } else if (lastMessage.includes('no') && currentStep === 'post_cart') {
-                addMessage('bot', 'Awesome! 🧾 Here’s your final cart:');
-                displayCart();
-                addMessage('bot', 'Thank you for your order! 👨‍🍳🍲');
-                currentStep = 'end';
-                return;
             }
+
             addMessage('bot', botResponse);
             if (options.length > 0) {
                 displayOptions(options);
             }
-            displayCart();
         }
-        function handleYesResponse() {
-            if (!selectedMenuItem) {
-                addMessage('bot', 'No dish selected. Please choose a dish first.');
-                return;
-            }
-            const botResponse = `Here is your selected dish: ${selectedMenuItem.name}`;
-            addMessage('bot', botResponse);
-            const chatMessages = document.getElementById('chatMessages');
-            const menuItemDiv = document.createElement('div');
-            menuItemDiv.className = 'menu-item';
-            const img = document.createElement('img');
-            img.src = selectedMenuItem.image_url || 'https://via.placeholder.com/120';
-            img.alt = selectedMenuItem.name;
-            const name = document.createElement('div');
-            name.textContent = selectedMenuItem.name;
-            menuItemDiv.appendChild(img);
-            menuItemDiv.appendChild(name);
-            chatMessages.appendChild(menuItemDiv);
-            fetchIngredientsForCustomization('both');
+
+        function fetchIngredients(foodPreference) {
+            fetch('/get_ingredients', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ dietary_preference: foodPreference })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    addMessage('bot', `Error: ${data.error}`);
+                } else {
+                    const ingredients = data.ingredients || [];
+                    displayIngredientsList(ingredients);
+                }
+            })
+            .catch(error => {
+                addMessage('bot', `Error fetching ingredients: ${error.message}`);
+            });
         }
+
         function fetchIngredientsForCustomization(foodPreference) {
             fetch('/get_ingredients', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ dietary_preference: foodPreference })
             })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
-                    } else {
-                        const ingredients = data.ingredients || [];
-                        addMessage('bot', 'Please select ingredients to customize:');
-                        displayCustomizationIngredients(ingredients);
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    addMessage('bot', `Error: ${data.error}`);
+                } else {
+                    const ingredients = data.ingredients || [];
+                    addMessage('bot', 'Please select ingredients to customize:');
+                    displayCustomizationIngredients(ingredients);
+                }
+            })
+            .catch(error => {
+                addMessage('bot', `Error fetching ingredients: ${error.message}`);
+            });
+        }
+
+        function displayIngredientsList(ingredients) {
+            const chatMessages = document.getElementById('chatMessages');
+            let ingredientsList = document.querySelector('.ingredients-list');
+            if (!ingredientsList) {
+                ingredientsList = document.createElement('div');
+                ingredientsList.className = 'ingredients-list';
+                chatMessages.appendChild(ingredientsList);
+            } else {
+                ingredientsList.innerHTML = '';
+            }
+
+            ingredients.forEach(ingredient => {
+                const item = document.createElement('div');
+                item.className = 'ingredient-item';
+                const img = document.createElement('img');
+                img.src = ingredient.image_url || 'https://via.placeholder.com/120';
+                img.alt = ingredient.name;
+                const name = document.createElement('div');
+                name.textContent = ingredient.name;
+                const button = document.createElement('button');
+                button.textContent = 'Add';
+                button.onclick = () => {
+                    if (!selectedIngredients.some(i => i.name === ingredient.name)) {
+                        selectedIngredients.push(ingredient);
+                        displaySelectedIngredients();
                     }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
-                });
+                };
+                item.appendChild(img);
+                item.appendChild(name);
+                item.appendChild(button);
+                ingredientsList.appendChild(item);
+            });
+
+            if (selectedIngredients.length > 0) {
+                let submitButton = document.querySelector('.submit-button');
+                if (!submitButton) {
+                    submitButton = document.createElement('button');
+                    submitButton.className = 'submit-button';
+                    submitButton.textContent = 'Submit Ingredients';
+                    submitButton.onclick = submitIngredients;
+                    chatMessages.appendChild(submitButton);
+                }
+            }
         }
+
         function displayCustomizationIngredients(ingredients) {
             const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for customization ingredients!');
-                return;
-            }
             let ingredientsList = document.querySelector('.customization-ingredients-list');
             if (!ingredientsList) {
                 ingredientsList = document.createElement('div');
@@ -937,6 +773,7 @@
             } else {
                 ingredientsList.innerHTML = '';
             }
+
             ingredients.forEach(ingredient => {
                 const item = document.createElement('div');
                 item.className = 'ingredient-item';
@@ -948,7 +785,7 @@
                 const button = document.createElement('button');
                 button.textContent = 'Add';
                 button.onclick = () => {
-                    if (!selectedIngredients.some(item => item.name === ingredient.name)) {
+                    if (!selectedIngredients.some(i => i.name === ingredient.name)) {
                         selectedIngredients.push({ name: ingredient.name, image_url: ingredient.image_url });
                         displaySelectedCustomizationIngredients();
                     }
@@ -958,14 +795,38 @@
                 item.appendChild(button);
                 ingredientsList.appendChild(item);
             });
+
             displaySelectedCustomizationIngredients();
         }
-        function displaySelectedCustomizationIngredients() {
+
+        function displaySelectedIngredients() {
             const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for selected customization ingredients!');
-                return;
+            let selectedArea = document.querySelector('.selected-ingredients');
+            if (!selectedArea) {
+                selectedArea = document.createElement('div');
+                selectedArea.className = 'selected-ingredients';
+                chatMessages.appendChild(selectedArea);
+            } else {
+                selectedArea.innerHTML = '';
             }
+
+            selectedIngredients.forEach(ingredient => {
+                const div = document.createElement('div');
+                div.textContent = ingredient.name;
+                const removeButton = document.createElement('button');
+                removeButton.textContent = 'X';
+                removeButton.className = 'remove-button';
+                removeButton.onclick = () => {
+                    selectedIngredients = selectedIngredients.filter(i => i.name !== ingredient.name);
+                    displaySelectedIngredients();
+                };
+                div.appendChild(removeButton);
+                selectedArea.appendChild(div);
+            });
+        }
+
+        function displaySelectedCustomizationIngredients() {
+            const chatMessages = document.getElementById('chatMessages');
             let selectedArea = document.querySelector('.selected-customization-ingredients');
             if (!selectedArea) {
                 selectedArea = document.createElement('div');
@@ -974,31 +835,28 @@
             } else {
                 selectedArea.innerHTML = '';
             }
+
             const selectedIngredientsText = selectedIngredients.length > 0
-                ? `${selectedMenuItem.name} with ${selectedIngredients.map(ingredient => ingredient.name).join(', ')}`
+                ? `${selectedMenuItem.name} with ${selectedIngredients.map(i => i.name).join(', ')}`
                 : selectedMenuItem.name;
             const ingredientsDiv = document.createElement('div');
             ingredientsDiv.textContent = selectedIngredientsText;
             selectedArea.appendChild(ingredientsDiv);
+
             selectedIngredients.forEach(ingredient => {
                 const div = document.createElement('div');
                 div.textContent = ingredient.name;
                 const removeButton = document.createElement('button');
                 removeButton.textContent = 'X';
-                removeButton.style.marginLeft = '5px';
-                removeButton.style.padding = '2px 5px';
-                removeButton.style.backgroundColor = '#dc3545';
-                removeButton.style.color = '#ffffff';
-                removeButton.style.border = 'none';
-                removeButton.style.borderRadius = '4px';
-                removeButton.style.cursor = 'pointer';
+                removeButton.className = 'remove-button';
                 removeButton.onclick = () => {
-                    selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
+                    selectedIngredients = selectedIngredients.filter(i => i.name !== ingredient.name);
                     displaySelectedCustomizationIngredients();
                 };
                 div.appendChild(removeButton);
                 selectedArea.appendChild(div);
             });
+
             if (!document.querySelector('.submit-customization-button')) {
                 const textarea = document.createElement('textarea');
                 textarea.placeholder = 'Enter any special instructions...';
@@ -1010,18 +868,85 @@
                 selectedArea.appendChild(submitButton);
             }
         }
+
+        function submitIngredients() {
+            if (selectedIngredients.length === 0) {
+                addMessage('bot', 'No ingredients selected. Please choose some ingredients.');
+                return;
+            }
+            const ingredientNames = selectedIngredients.map(i => i.name.toLowerCase()).join(' ');
+            fetchMenuItems({ ingredient_names: ingredientNames });
+        }
+
+        function fetchMenuItems(params) {
+            fetch('/get_menu_items', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(params)
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    addMessage('bot', `Error: ${data.error}`);
+                } else {
+                    const menuItems = data.menu_items || [];
+                    addMessage('bot', 'Here are some dishes based on your selection:');
+                    displayMenuItems(menuItems);
+                }
+            })
+            .catch(error => {
+                addMessage('bot', `Error fetching menu items: ${error.message}`);
+            });
+        }
+
+        function displayMenuItems(menuItems) {
+            const chatMessages = document.getElementById('chatMessages');
+            let menuItemsList = document.querySelector('.menu-items-list');
+            if (!menuItemsList) {
+                menuItemsList = document.createElement('div');
+                menuItemsList.className = 'menu-items-list';
+                chatMessages.appendChild(menuItemsList);
+            } else {
+                menuItemsList.innerHTML = '';
+            }
+
+            menuItems.forEach(item => {
+                const menuItem = document.createElement('div');
+                menuItem.className = 'menu-item';
+                const img = document.createElement('img');
+                img.src = item.image_url || 'https://via.placeholder.com/120';
+                img.alt = item.name;
+                const name = document.createElement('div');
+                name.textContent = item.name;
+                const button = document.createElement('button');
+                button.textContent = 'Select';
+                button.onclick = () => {
+                    selectedMenuItem = item;
+                    addMessage('bot', `Great selection! Would you like to customize your dish further?`);
+                    displayOptions([
+                        { text: 'Yes', class: 'green' },
+                        { text: 'No', class: 'red' }
+                    ]);
+                };
+                menuItem.appendChild(img);
+                menuItem.appendChild(name);
+                menuItem.appendChild(button);
+                menuItemsList.appendChild(menuItem);
+            });
+        }
+
         function submitCustomizationIngredients() {
             if (!selectedMenuItem) {
                 addMessage('bot', 'No dish selected. Please choose a dish first.');
                 return;
             }
-        
+
             const textarea = document.querySelector('.selected-customization-ingredients textarea');
             const instructions = textarea ? textarea.value.trim() : '';
-            const ingredientsList = selectedIngredients.map(ingredient => ingredient.name).join(', ');
-            const itemPrice = 10.00; // Fixed price for custom dishes; adjust as needed
+            const ingredientsList = selectedIngredients.map(i => i.name).join(', ');
+            const itemPrice = 10.00; // Fixed price for custom dishes
             const itemImage = selectedMenuItem.image_url || 'https://via.placeholder.com/120';
-        
+
             const customDishPayload = {
                 menu_item: selectedMenuItem,
                 ingredients: selectedIngredients,
@@ -1029,8 +954,8 @@
                 itemPrice: itemPrice,
                 itemImage: itemImage
             };
-        
-            // First, store the custom dish in Salesforce
+
+            // Save the custom dish in Salesforce
             fetch('/menu/save_custom_dish', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -1041,7 +966,8 @@
                 if (!data.success) {
                     throw new Error(data.error || 'Failed to save custom dish');
                 }
-                // After saving, add to cart
+
+                // Add to cart
                 const cartPayload = {
                     itemName: selectedMenuItem.name,
                     itemPrice: itemPrice,
@@ -1053,6 +979,7 @@
                     quantity: 1,
                     ingredients: ingredientsList
                 };
+
                 return fetch('/cart/add', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -1064,8 +991,7 @@
                 if (data.success) {
                     addMessage('bot', 'Customization submitted successfully! Item added to cart.');
                     updateCartUI(data.cart);
-                    currentStep = 'post_cart';
-                    // Redirect to the menu page to see the custom dish
+                    // Redirect to menu page to see the custom dish
                     window.location.href = '/menu?category=Customized+Dish';
                 } else {
                     throw new Error(data.error || 'Failed to add item to cart');
@@ -1075,263 +1001,9 @@
                 addMessage('bot', `Error: ${error.message}`);
             });
         }
-        function fetchIngredients(foodPreference) {
-            fetch('/get_ingredients', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ dietary_preference: foodPreference })
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
-                    } else {
-                        const ingredients = data.ingredients || [];
-                        addMessage('bot', 'Please select ingredients:');
-                        displayIngredientsList(ingredients);
-                        displaySelectedIngredients();
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
-                });
-        }
-        function fetchMenuItems(params) {
-            fetch('/get_menu_items', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(params)
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
-                    } else {
-                        const menuItems = data.menu_items || [];
-                        addMessage('bot', 'Here are some dishes based on your selection:');
-                        displayMenuItems(menuItems);
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
-                });
-        }
-        function displayIngredientsList(ingredients) {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for ingredients!');
-                return;
-            }
-            let ingredientsList = document.querySelector('.ingredients-list');
-            if (!ingredientsList) {
-                ingredientsList = document.createElement('div');
-                ingredientsList.className = 'ingredients-list';
-                chatMessages.appendChild(ingredientsList);
-            } else {
-                ingredientsList.innerHTML = '';
-            }
-            ingredients.forEach(ingredient => {
-                const item = document.createElement('div');
-                item.className = 'ingredient-item';
-                const img = document.createElement('img');
-                img.src = ingredient.image_url || 'https://via.placeholder.com/120';
-                img.alt = ingredient.name;
-                const name = document.createElement('div');
-                name.textContent = ingredient.name;
-                const button = document.createElement('button');
-                button.textContent = 'Add';
-                button.onclick = () => {
-                    if (!selectedIngredients.some(item => item.name === ingredient.name)) {
-                        selectedIngredients.push(ingredient);
-                        displaySelectedIngredients();
-                    }
-                };
-                item.appendChild(img);
-                item.appendChild(name);
-                item.appendChild(button);
-                ingredientsList.appendChild(item);
-            });
-        }
-        function displayMenuItems(menuItems) {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for menu items!');
-                return;
-            }
-            let menuItemsList = document.querySelector('.menu-items-list');
-            if (!menuItemsList) {
-                menuItemsList = document.createElement('div');
-                menuItemsList.className = 'menu-items-list';
-                chatMessages.appendChild(menuItemsList);
-            } else {
-                menuItemsList.innerHTML = '';
-            }
-            menuItems.forEach(item => {
-                const menuItem = document.createElement('div');
-                menuItem.className = 'menu-item';
-                const img = document.createElement('img');
-                img.src = item.image_url || 'https://via.placeholder.com/120';
-                img.alt = item.name;
-                const name = document.createElement('div');
-                name.textContent = item.name;
-                const button = document.createElement('button');
-                button.textContent = 'Add to Cart';
-                button.onclick = () => {
-                    selectedMenuItem = item;
-                    addMessage('bot', `World-class selection! Would you like to customize your dish further?`);
-                    const options = [
-                        { text: 'Yes', class: 'green' },
-                        { text: 'No', class: 'red' }
-                    ];
-                    displayOptions(options);
-                };
-                menuItem.appendChild(img);
-                menuItem.appendChild(name);
-                menuItem.appendChild(button);
-                menuItemsList.appendChild(menuItem);
-            });
-        }
-        function displaySelectedIngredients() {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for selected ingredients!');
-                return;
-            }
-            let selectedArea = document.querySelector('.selected-ingredients');
-            if (!selectedArea) {
-                selectedArea = document.createElement('div');
-                selectedArea.className = 'selected-ingredients';
-                chatMessages.appendChild(selectedArea);
-            } else {
-                selectedArea.innerHTML = '';
-            }
-            selectedIngredients.forEach(ingredient => {
-                const div = document.createElement('div');
-                div.textContent = ingredient.name;
-                const removeButton = document.createElement('button');
-                removeButton.textContent = 'X';
-                removeButton.style.marginLeft = '5px';
-                removeButton.style.padding = '2px 5px';
-                removeButton.style.backgroundColor = '#dc3545';
-                removeButton.style.color = '#ffffff';
-                removeButton.style.border = 'none';
-                removeButton.style.borderRadius = '4px';
-                removeButton.style.cursor = 'pointer';
-                removeButton.onclick = () => {
-                    selectedIngredients = selectedIngredients.filter(item => item.name !== ingredient.name);
-                    displaySelectedIngredients();
-                };
-                div.appendChild(removeButton);
-                selectedArea.appendChild(div);
-            });
-            if (selectedIngredients.length > 0) {
-                let submitButton = document.querySelector('.submit-button');
-                if (!submitButton) {
-                    submitButton = document.createElement('button');
-                    submitButton.className = 'submit-button';
-                    submitButton.textContent = 'Submit Ingredients';
-                    submitButton.onclick = submitIngredients;
-                    chatMessages.appendChild(submitButton);
-                }
-            }
-        }
-        function submitIngredients() {
-            if (selectedIngredients.length === 0) {
-                addMessage('bot', 'No ingredients selected. Please choose some ingredients.');
-                return;
-            }
-            const ingredientNames = selectedIngredients.map(ingredient => ingredient.name.toLowerCase()).join(' ');
-            fetchMenuItems({ ingredient_names: ingredientNames });
-        }
-        function addToCart(item) {
-            cart.push(item);
-            console.log('Cart:', cart);
-            displayCart();
-        }
-        function displayCart() {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for cart!');
-                return;
-            }
-            let cartArea = document.querySelector('.cart-items');
-            if (!cartArea) {
-                cartArea = document.createElement('div');
-                cartArea.className = 'cart-items';
-                chatMessages.appendChild(cartArea);
-            } else {
-                cartArea.innerHTML = '';
-            }
-            if (cart.length > 0) {
-                const label = document.createElement('div');
-                label.textContent = 'Cart:';
-                cartArea.appendChild(label);
-                cart.forEach((item, index) => {
-                    const itemDiv = document.createElement('div');
-                    itemDiv.className = 'cart-item';
-                    const img = document.createElement('img');
-                    img.src = item.image_url || 'https://via.placeholder.com/30';
-                    img.alt = item.name;
-                    const name = document.createElement('div');
-                    const text = item.instructions
-                        ? `${item.name} (${item.instructions})`
-                        : item.name;
-                    name.textContent = item.ingredients.length > 0
-                        ? `${text} with ${item.ingredients.map(i => i.name).join(', ')}`
-                        : text;
-                    const removeButton = document.createElement('button');
-                    removeButton.className = 'remove-button';
-                    removeButton.textContent = 'X';
-                    removeButton.onclick = () => {
-                        cart.splice(index, 1);
-                        displayCart();
-                    };
-                    itemDiv.appendChild(img);
-                    itemDiv.appendChild(name);
-                    itemDiv.appendChild(removeButton);
-                    cartArea.appendChild(itemDiv);
-                });
-                let submitCartButton = document.querySelector('.submit-cart-button');
-                if (!submitCartButton) {
-                    submitCartButton = document.createElement('button');
-                    submitCartButton.className = 'submit-cart-button';
-                    submitCartButton.textContent = 'Submit Cart';
-                    submitCartButton.onclick = submitCart;
-                    cartArea.appendChild(submitCartButton);
-                }
-            }
-        }
-        function submitCart() {
-            if (cart.length === 0) {
-                addMessage('bot', 'Your cart is empty!');
-                return;
-            }
-            fetch('/submit_customization_ingredients', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ items: cart })
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        addMessage('bot', 'Cart submitted successfully!');
-                        cart = [];
-                        displayCart();
-                    } else {
-                        addMessage('bot', `Error submitting cart: ${data.error}`);
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error submitting cart: ${error.message}`);
-                });
-        }
+
         function displayOptions(options) {
             const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for options!');
-                return;
-            }
-            console.log('Displaying options:', options);
             options.forEach(opt => {
                 const button = document.createElement('button');
                 button.textContent = opt.text;
@@ -1339,14 +1011,11 @@
                 button.onclick = () => {
                     addMessage('user', opt.text);
                     conversation.push({ role: 'user', message: opt.text });
-                    console.log(`User selected option: ${opt.text}`);
-                    setTimeout(() => handleResponse(opt.text), 500);
+                    handleResponse(opt.text);
                 };
                 chatMessages.appendChild(button);
             });
-            chatMessages.appendChild(document.createElement('br'));
             chatMessages.scrollTop = chatMessages.scrollHeight;
-            console.log('Options displayed');
         }
 
         document.getElementById('userInput').addEventListener('keypress', function(e) {
@@ -1354,7 +1023,6 @@
                 sendMessage();
             }
         });
-        console.log('Script loaded successfully');
     </script>
 </body>
 </html>