BiryaniHubflaskhema6

Running

App Files Files Community

lokesh341 commited on Apr 18

Commit

6ec77cb

verified ·

1 Parent(s): 55bb9ef

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +352 -288

templates/menu.html CHANGED Viewed

@@ -15,6 +15,7 @@
         {% endfor %}
     {% endfor %}
     <style>
         body {
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
@@ -41,7 +42,6 @@
         }
         .menu-card.visible {
             opacity: 1;
-            /* NEW: Staggered animation for smoother loading */
             animation: fadeIn 0.3s ease-in-out;
         }
         .menu-card.highlighted {
@@ -550,7 +550,6 @@
             font-size: 1.2rem;
             color: #333;
         }
-        /* NEW: Toast Notification Styling */
         .toast-container {
             position: fixed;
             top: 20px;
@@ -569,7 +568,6 @@
         .toast.show {
             opacity: 1;
         }
-        /* NEW: Search Suggestions */
         .search-suggestions {
             position: absolute;
             top: 100%;
@@ -680,7 +678,6 @@
             height: 40px;
             text-align: center;
         }
-        /* NEW: Streamline modal-footer btn-primary */
         .modal-footer .btn-primary {
             background-color: #0FAA39;
             border-color: #0FAA39;
@@ -862,7 +859,6 @@
             font-size: 12px;
             margin-left: 8px;
         }
-        /* Mobile-Specific Styles */
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -1016,7 +1012,6 @@
                 font-size: 10px;
                 margin-left: 5px;
             }
-            /* Mobile-Specific Addon Styles */
             .addon-section {
                 margin-bottom: 10px;
             }
@@ -1045,7 +1040,6 @@
                 margin-left: 6px;
                 font-size: 0.8rem;
             }
-            /* Mobile-Specific Soft Drinks Modal Styles */
             #softDrinkModal .modal-dialog {
                 max-width: 90%;
             }
@@ -1097,7 +1091,6 @@
                 font-size: 1rem;
                 line-height: 28px;
             }
-            /* Mobile-Specific Toggle Styles */
             .toggle-container {
                 margin: 0 10px;
                 gap: 6px;
@@ -1125,7 +1118,6 @@
     </style>
 </head>
 <body>
-    <!-- NEW: Toast Container -->
     <div class="toast-container" id="toastContainer"></div>
     <div class="fixed-top-bar">
@@ -1143,29 +1135,29 @@
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off" aria-label="Search menu items">
             <i class="bi bi-search search-icon"></i>
             <i class="bi bi-mic mic-icon" id="micIcon" aria-label="Voice search"></i>
-            <!-- NEW: Search Suggestions -->
             <div class="search-suggestions" id="searchSuggestions"></div>
         </div>
     </div>
     <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">
             <input type="checkbox" id="veg-toggle" name="veg"
-                {% if selected_category == "Veg" %}checked{% endif %}
                 class="custom-toggle" onchange="handleToggle('veg')" aria-label="Filter vegetarian items">
             <label for="veg-toggle">Veg</label>
         </div>
         <div class="toggle-container">
-            <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
-                {% if selected_category == "Customized Dish" %}checked{% endif %}
                 class="custom-toggle" onchange="handleToggle('custom')" aria-label="Filter customized dishes">
             <label for="category-CustomizedDish">Customized Dish</label>
         </div>
     </form>
     <div class="container mt-4">
-        {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">
                 <h3>Create Your Custom Dish</h3>
                 <form method="POST" action="/customdish/generate_custom_dish">
@@ -1182,15 +1174,17 @@
                 </form>
             </div>
         {% else %}
             {% if ordered_menu.items()|length == 0 %}
-                <p>No menu items available for this category.</p>
             {% else %}
                 {% for section, items in ordered_menu.items() %}
                     <h3>{{ section }}</h3>
                     <div class="row">
                         {% for item in items %}
                             <div class="col-md-6 mb-4">
-                                <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}">
                                     <video
                                         class="card-img-top menu-video"
                                         muted
@@ -1220,7 +1214,8 @@
                                                      data-item-section="{{ item.Section__c | default(section) }}"
                                                      data-item-category="{{ selected_category }}"
                                                      data-item-description="{{ item.Description__c | default('No description') }}"
-                                                     data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
                                                     {% if item.Section__c == 'Soft Drinks' %}
                                                         <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)" aria-label="Add {{ item.Name | default('Unnamed Item') }} to cart">ADD</button>
                                                     {% else %}
@@ -1350,7 +1345,13 @@
                 {% for item in items %}
                     {
                         name: "{{ item.Name | default('Unnamed Item') }}",
-                        section: "{{ item.Section__c | default(section) }}"
                     },
                 {% endfor %}
             {% endfor %}
@@ -1382,7 +1383,6 @@
             };
         }
-        // NEW: Show Toast Notification
         function showToast(message) {
             const toastContainer = document.getElementById('toastContainer');
             const toast = document.createElement('div');
@@ -1555,7 +1555,6 @@
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
-            // NEW: Retry mechanism for add-ons
             let retryCount = 0;
             const maxRetries = 2;
             function fetchAddons() {
@@ -1709,7 +1708,7 @@
             });
         }
-        // === Filter Form ===
         function handleToggle(source) {
             const form = document.getElementById("filter-form");
             const veg = document.getElementById("veg-toggle");
@@ -1731,299 +1730,364 @@
                 }
             }
-            if (!custom.checked && !veg.checked) {
-                custom.checked = false;
-            }
             form.submit();
         }
-        // === Initialization ===
-        document.addEventListener('DOMContentLoaded', function () {
-            // Avatar Dropdown
-            const avatarContainer = document.querySelector('.avatar-dropdown-container');
-            const dropdownMenu = document.querySelector('.dropdown-menu');
-            avatarContainer.addEventListener('click', function (event) {
-                event.stopPropagation();
-                dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
-            });
-            document.addEventListener('click', function (event) {
-                if (!avatarContainer.contains(event.target)) {
-                    dropdownMenu.style.display = 'none';
-                }
-            });
-            const dropdownItems = document.querySelectorAll('.dropdown-item');
-            dropdownItems.forEach(item => {
-                item.addEventListener('click', function () {
-                    dropdownMenu.style.display = 'none';
                 });
-            });
-            // NEW: Search Bar with Client-Side Filtering
-            const searchBar = document.getElementById('searchBar');
-            const searchSuggestions = document.getElementById('searchSuggestions');
-            searchBar.addEventListener('input', debounce(function () {
-                const query = searchBar.value.trim().toLowerCase();
-                searchSuggestions.innerHTML = '';
-                searchSuggestions.style.display = 'none';
-                if (query.length > 0) {
-                    const filteredItems = menuItems.filter(item =>
-                        item.name.toLowerCase().includes(query) ||
-                        item.section.toLowerCase().includes(query)
-                    );
-                    if (filteredItems.length > 0) {
-                        filteredItems.forEach(item => {
-                            const suggestionDiv = document.createElement('div');
-                            suggestionDiv.classList.add('suggestion-item');
-                            suggestionDiv.innerText = `${item.name} (${item.section})`;
-                            suggestionDiv.addEventListener('click', () => {
-                                localStorage.setItem('selectedItem', JSON.stringify(item));
-                                window.location.reload();
-                            });
-                            searchSuggestions.appendChild(suggestionDiv);
-                        });
-                        searchSuggestions.style.display = 'block';
-                    }
-                }
-            }, 300));
-            searchBar.addEventListener('click', function (e) {
-                e.stopPropagation();
-                if (searchBar.value.trim()) {
-                    searchSuggestions.style.display = 'block';
-                }
-            });
-            document.addEventListener('click', function (e) {
-                if (!searchBar.contains(e.target) && !searchSuggestions.contains(e.target)) {
-                    searchSuggestions.style.display = 'none';
-                }
-            });
-            // Highlight Selected Item
-            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);
-                    showToast('Error loading selected item');
-                }
-                localStorage.removeItem('selectedItem');
             }
-            // Intersection Observers
-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');
-            // NEW: Enhanced error handling for invalid video sources
-            if (src && src !== '/static/placeholder.mp4') {
-                const source = video.querySelector('source');
-                if (source && !source.src) {
-                    source.src = src;
-                    video.load().catch(err => {
-                        console.error('Error loading video:', err);
-                        video.poster = '/static/placeholder.jpg';
                     });
                 }
-            } else {
-                video.poster = '/static/placeholder.jpg';
             }
-            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));
-// Toggle Details
-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';
-        }
-    });
-});
-// Custom Dish Form Suggestions
-const descriptionTextarea = document.getElementById('custom-dish-description');
-const descriptionSuggestions = document.getElementById('descriptionSuggestions');
-if (descriptionTextarea && descriptionSuggestions) {
-    let usedIngredients = new Set();
-    function updateUsedIngredients() {
-        const inputText = descriptionTextarea.value.trim();
-        usedIngredients.clear();
-        if (inputText) {
-            const words = inputText.split(/,\s*/).map(word => word.trim());
-            words.forEach(word => {
-                if (word && ingredientsList.includes(word)) {
-                    usedIngredients.add(word);
                 }
             });
-        }
-    }
-    // NEW: Debounced input handler for suggestions
-    const debouncedSuggestions = debounce(function () {
-        const inputText = descriptionTextarea.value.trim();
-        const words = inputText.split(/,\s*/);
-        const lastWord = words[words.length - 1].trim().toLowerCase();
-        descriptionSuggestions.innerHTML = '';
-        descriptionSuggestions.style.display = 'none';
-        updateUsedIngredients();
-        if (lastWord) {
-            const filteredIngredients = ingredientsList.filter(ingredient =>
-                ingredient.toLowerCase().includes(lastWord) && !usedIngredients.has(ingredient)
-            );
-            if (filteredIngredients.length > 0) {
-                filteredIngredients.forEach(ingredient => {
-                    const suggestionDiv = document.createElement('div');
-                    suggestionDiv.classList.add('suggestion-item');
-                    suggestionDiv.innerText = ingredient;
-                    suggestionDiv.addEventListener('click', function () {
-                        const currentValue = descriptionTextarea.value;
-                        const lastCommaIndex = currentValue.lastIndexOf(',');
-                        const baseText = lastCommaIndex !== -1 ? currentValue.substring(0, lastCommaIndex + 1) : '';
-                        descriptionTextarea.value = baseText + (baseText ? ' ' : '') + ingredient + ', ';
-                        descriptionSuggestions.style.display = 'none';
-                        descriptionTextarea.focus();
-                        updateUsedIngredients();
-                    });
-                    descriptionSuggestions.appendChild(suggestionDiv);
                 });
-                descriptionSuggestions.style.display = 'block';
             }
         }
-    }, 300);
-    descriptionTextarea.addEventListener('input', debouncedSuggestions);
-    document.addEventListener('click', function (event) {
-        if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
-            descriptionSuggestions.style.display = 'none';
-        }
-    });
-}
-// Fetch Initial Cart
-fetch('/cart/get')
-    .then(response => {
-        if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-        return response.json();
-    })
-    .then(data => {
-        if (data.success) {
-            updateCartUI(data.cart);
-        } else {
-            console.error('Failed to fetch cart:', data.error);
-            showToast('Failed to load cart');
-            const cart = getCartLocalStorage();
-            updateCartUI(cart);
-        }
-    })
-    .catch(err => {
-        console.error('Error fetching cart:', err);
-        showToast('Error loading cart');
-        const cart = getCartLocalStorage();
-        updateCartUI(cart);
-    });
-// NEW: Remove redundant video preloading (handled by <link rel="preload">)
-// const preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
-// preloadedVideos.forEach(link => {
-//     const video = document.createElement('video');
-//     video.src = link.href;
-//     video.preload = 'auto';
-// });
-// Quantity Controls for Item Modal
-const decreaseBtn = document.getElementById('decreaseQuantity');
-const increaseBtn = document.getElementById('increaseQuantity');
-const quantityInput = document.getElementById('quantityInput');
-decreaseBtn.addEventListener('click', function () {
-    let quantity = parseInt(quantityInput.value) || 1;
-    quantity = Math.max(1, quantity - 1);
-    quantityInput.value = quantity;
-});
-increaseBtn.addEventListener('click', function () {
-    let quantity = parseInt(quantityInput.value) || 1;
-    quantity += 1;
-    quantityInput.value = quantity;
-});
-// NEW: Keyboard Accessibility for Search Bar
-searchBar.addEventListener('keydown', function (e) {
-    if (e.key === 'Enter' && searchBar.value.trim()) {
-        window.location.href = '/search';
-    }
-});
-});
-</script>
 </body>
-</html>

         {% endfor %}
     {% endfor %}
     <style>
+        /* Same styles as previous response */
         body {
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
         }
         .menu-card.visible {
             opacity: 1;
             animation: fadeIn 0.3s ease-in-out;
         }
         .menu-card.highlighted {
             font-size: 1.2rem;
             color: #333;
         }
         .toast-container {
             position: fixed;
             top: 20px;
         .toast.show {
             opacity: 1;
         }
         .search-suggestions {
             position: absolute;
             top: 100%;
             height: 40px;
             text-align: center;
         }
         .modal-footer .btn-primary {
             background-color: #0FAA39;
             border-color: #0FAA39;
             font-size: 12px;
             margin-left: 8px;
         }
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
                 font-size: 10px;
                 margin-left: 5px;
             }
             .addon-section {
                 margin-bottom: 10px;
             }
                 margin-left: 6px;
                 font-size: 0.8rem;
             }
             #softDrinkModal .modal-dialog {
                 max-width: 90%;
             }
                 font-size: 1rem;
                 line-height: 28px;
             }
             .toggle-container {
                 margin: 0 10px;
                 gap: 6px;
     </style>
 </head>
 <body>
     <div class="toast-container" id="toastContainer"></div>
     <div class="fixed-top-bar">
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off" aria-label="Search menu items">
             <i class="bi bi-search search-icon"></i>
             <i class="bi bi-mic mic-icon" id="micIcon" aria-label="Voice search"></i>
             <div class="search-suggestions" id="searchSuggestions"></div>
         </div>
     </div>
+    <!-- NEW: Updated Filter Form -->
     <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">
             <input type="checkbox" id="veg-toggle" name="veg"
+                {% if veg_filter %}checked{% endif %}
                 class="custom-toggle" onchange="handleToggle('veg')" aria-label="Filter vegetarian items">
             <label for="veg-toggle">Veg</label>
         </div>
         <div class="toggle-container">
+            <input type="checkbox" id="category-CustomizedDish" name="custom"
+                {% if custom_filter %}checked{% endif %}
                 class="custom-toggle" onchange="handleToggle('custom')" aria-label="Filter customized dishes">
             <label for="category-CustomizedDish">Customized Dish</label>
         </div>
     </form>
     <div class="container mt-4">
+        {% if custom_filter %}
             <div id="custom-dish-form" class="mt-4">
                 <h3>Create Your Custom Dish</h3>
                 <form method="POST" action="/customdish/generate_custom_dish">
                 </form>
             </div>
         {% else %}
+            <!-- NEW: Enhanced Empty State Handling -->
             {% if ordered_menu.items()|length == 0 %}
+                <p id="no-items-message">No menu items available for this filter. Please try adjusting the filters or contact support.</p>
+                <div id="client-side-menu" class="row"></div>
             {% else %}
                 {% for section, items in ordered_menu.items() %}
                     <h3>{{ section }}</h3>
                     <div class="row">
                         {% for item in items %}
                             <div class="col-md-6 mb-4">
+                                <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}" data-is-veg="{{ item.IsVeg__c | default('false') | lower }}">
                                     <video
                                         class="card-img-top menu-video"
                                         muted
                                                      data-item-section="{{ item.Section__c | default(section) }}"
                                                      data-item-category="{{ selected_category }}"
                                                      data-item-description="{{ item.Description__c | default('No description') }}"
+                                                     data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}"
+                                                     data-is-veg="{{ item.IsVeg__c | default('false') | lower }}">
                                                     {% if item.Section__c == 'Soft Drinks' %}
                                                         <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)" aria-label="Add {{ item.Name | default('Unnamed Item') }} to cart">ADD</button>
                                                     {% else %}
                 {% for item in items %}
                     {
                         name: "{{ item.Name | default('Unnamed Item') }}",
+                        section: "{{ item.Section__c | default(section) }}",
+                        isVeg: {{ item.IsVeg__c | default('false') | lower }},
+                        price: "{{ item.Price__c | default('0.00') }}",
+                        image: "{{ item.Image1__c | default('/static/placeholder.jpg') }}",
+                        image2: "{{ item.Image2__c | default(item.Image1__c) }}",
+                        description: "{{ item.Description__c | default('No description') }}",
+                        video: "{{ item.Video1__c | default('/static/placeholder.mp4') }}"
                     },
                 {% endfor %}
             {% endfor %}
             };
         }
         function showToast(message) {
             const toastContainer = document.getElementById('toastContainer');
             const toast = document.createElement('div');
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
             let retryCount = 0;
             const maxRetries = 2;
             function fetchAddons() {
             });
         }
+        // NEW: Updated Filter Form Logic
         function handleToggle(source) {
             const form = document.getElementById("filter-form");
             const veg = document.getElementById("veg-toggle");
                 }
             }
+            // NEW: Log query parameters for debugging
+            const params = new URLSearchParams();
+            if (veg.checked) params.set('veg', 'on');
+            if (custom.checked) params.set('custom', 'on');
+            console.log('Filter form submitting with:', params.toString());
             form.submit();
         }
+        // NEW: Client-Side Filtering for Veg
+        function applyClientSideVegFilter() {
+            const noItemsMessage = document.getElementById('no-items-message');
+            const clientSideMenu = document.getElementById('client-side-menu');
+            if (!noItemsMessage || !clientSideMenu) return;
+            const vegItems = menuItems.filter(item => item.isVeg === true);
+            if (vegItems.length > 0) {
+                noItemsMessage.innerText = 'Showing vegetarian items (client-side)';
+                clientSideMenu.innerHTML = '';
+                const sections = [...new Set(vegItems.map(item => item.section))];
+                sections.forEach(section => {
+                    const sectionItems = vegItems.filter(item => item.section === section);
+                    const sectionDiv = document.createElement('div');
+                    sectionDiv.innerHTML = `<h3>${section}</h3>`;
+                    const rowDiv = document.createElement('div');
+                    rowDiv.classList.add('row');
+                    sectionItems.forEach(item => {
+                        const itemDiv = document.createElement('div');
+                        itemDiv.classList.add('col-md-6', 'mb-4');
+                        itemDiv.innerHTML = `
+                            <div class="card menu-card" data-item-name="${item.name}" data-item-section="${item.section}" data-is-veg="${item.isVeg}">
+                                <video
+                                    class="card-img-top menu-video"
+                                    muted
+                                    loop
+                                    preload="auto"
+                                    data-src="${item.video}"
+                                    poster="${item.image}"
+                                    width="350"
+                                    height="200"
+                                    onmouseover="this.play()"
+                                    onmouseout="this.pause(); this.currentTime = 0;"
+                                    onerror="this.poster='/static/placeholder.jpg';">
+                                    <source src="${item.video}" type="video/mp4">
+                                    Your browser does not support the video tag.
+                                </video>
+                                <div class="addbutton">
+                                    <div class="card-body d-flex align-items-center justify-content-between">
+                                        <div>
+                                            <h5 class="card-title">${item.name}</h5>
+                                            <p class="card-text price">$${item.price}</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-items-center justify-content-center
+                                        <div class="button-container"
+                                             data-item-name="${item.name}"
+                                             data-item-price="${item.price}"
+                                             data-item-image="${item.image}"
+                                             data-item-section="${item.section}"
+                                             data-item-category="Veg"
+                                             data-item-description="${item.description}"
+                                             data-item-image2="${item.image2}"
+                                             data-is-veg="${item.isVeg}">
+                                            <button class="btn btn-primary"
+                                                    data-bs-toggle="modal"
+                                                    data-bs-target="#itemModal"
+                                                    onclick="showItemDetails('${item.name}', '${item.price}', '${item.image2}', '${item.description}', '${item.section}', 'Veg')"
+                                                    aria-label="Customize ${item.name}">
+                                                ADD
+                                            </button>
+                                                                                       ${item.section !== 'Apetizer' && item.section !== 'Customized Dish' ? '<span class="customisable-text">Customisable</span>' : ''}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="toggle-details" data-item-name="${item.name}" role="button" aria-label="Toggle details for ${item.name}">Show Details</div>
+                                <div class="item-details" id="details-${item.name.replace(/ /g, '-')}">
+                                    <h6>Description</h6>
+                                    <p>${item.description}</p>
+                                    <!-- NEW: Placeholder for ingredients and nutritional info -->
+                                    <h6>Ingredients</h6>
+                                    <p>Not specified</p>
+                                    <h6>Nutritional Info</h6>
+                                    <p class="nutritional-info">Not available</p>
+                                    <h6>Allergens</h6>
+                                    <p>None listed</p>
+                                </div>
+                            </div>
+                        `;
+                        rowDiv.appendChild(itemDiv);
+                    });
+                    sectionDiv.appendChild(rowDiv);
+                    clientSideMenu.appendChild(sectionDiv);
                 });
+                // NEW: Re-apply Intersection Observers for client-side rendered cards
+                const newMenuCards = clientSideMenu.querySelectorAll('.menu-card');
+                const newMenuVideos = clientSideMenu.querySelectorAll('.menu-video');
+                newMenuCards.forEach(card => cardObserver.observe(card));
+                newMenuVideos.forEach(video => videoObserver.observe(video));
+                // NEW: Re-apply toggle details listeners
+                const newToggleLinks = clientSideMenu.querySelectorAll('.toggle-details');
+                newToggleLinks.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';
                         }
+                    });
+                });
+            } else {
+                noItemsMessage.innerText = 'No vegetarian items available. Please try adjusting the filters or contact support.';
             }
+        }
+        // NEW: Apply client-side filter if no items are returned
+        if (document.getElementById('no-items-message')) {
+            applyClientSideVegFilter();
         }
+        // === Search Functionality ===
+        const searchBar = document.getElementById('searchBar');
+        const searchSuggestions = document.getElementById('searchSuggestions');
+        const debouncedSearch = debounce(function () {
+            const query = searchBar.value.trim().toLowerCase();
+            searchSuggestions.innerHTML = '';
+            searchSuggestions.style.display = 'none';
+            if (query.length >= 2) {
+                const filteredItems = menuItems.filter(item =>
+                    item.name.toLowerCase().includes(query) ||
+                    item.section.toLowerCase().includes(query) ||
+                    item.description.toLowerCase().includes(query)
+                );
+                if (filteredItems.length > 0) {
+                    filteredItems.forEach(item => {
+                        const suggestionDiv = document.createElement('div');
+                        suggestionDiv.classList.add('suggestion-item');
+                        suggestionDiv.innerText = item.name;
+                        suggestionDiv.addEventListener('click', () => {
+                            searchBar.value = item.name;
+                            searchSuggestions.style.display = 'none';
+                            window.location.href = '/search';
+                        });
+                        searchSuggestions.appendChild(suggestionDiv);
                     });
+                    searchSuggestions.style.display = 'block';
                 }
             }
+        }, 300);
+        searchBar.addEventListener('input', debouncedSearch);
+        document.addEventListener('click', function (event) {
+            if (!searchBar.contains(event.target) && !searchSuggestions.contains(event.target)) {
+                searchSuggestions.style.display = 'none';
+            }
+        });
+        // === Dropdown Menu ===
+        const avatarIcon = document.querySelector('.avatar-icon');
+        const dropdownMenu = document.querySelector('.dropdown-menu');
+        avatarIcon.addEventListener('click', function () {
+            dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+        });
+        document.addEventListener('click', function (event) {
+            if (!avatarIcon.contains(event.target) && !dropdownMenu.contains(event.target)) {
+                dropdownMenu.style.display = 'none';
             }
         });
+        // === Intersection Observers ===
+        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 && src !== '/static/placeholder.mp4') {
+                        const source = video.querySelector('source');
+                        if (source && !source.src) {
+                            source.src = src;
+                            video.load().catch(err => {
+                                console.error('Error loading video:', err);
+                                video.poster = '/static/placeholder.jpg';
+                            });
+                        }
+                    } else {
+                        video.poster = '/static/placeholder.jpg';
+                    }
+                    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));
+        // === Toggle Details ===
+        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';
+                }
+            });
+        });
+        // === Custom Dish Form Suggestions ===
+        const descriptionTextarea = document.getElementById('custom-dish-description');
+        const descriptionSuggestions = document.getElementById('descriptionSuggestions');
+        if (descriptionTextarea && descriptionSuggestions) {
+            let usedIngredients = new Set();
+            function updateUsedIngredients() {
+                const inputText = descriptionTextarea.value.trim();
+                usedIngredients.clear();
+                if (inputText) {
+                    const words = inputText.split(/,\s*/).map(word => word.trim());
+                    words.forEach(word => {
+                        if (word && ingredientsList.includes(word)) {
+                            usedIngredients.add(word);
+                        }
+                    });
+                }
             }
+            const debouncedSuggestions = debounce(function () {
+                const inputText = descriptionTextarea.value.trim();
+                const words = inputText.split(/,\s*/);
+                const lastWord = words[words.length - 1].trim().toLowerCase();
+                descriptionSuggestions.innerHTML = '';
+                descriptionSuggestions.style.display = 'none';
+                updateUsedIngredients();
+                if (lastWord) {
+                    const filteredIngredients = ingredientsList.filter(ingredient =>
+                        ingredient.toLowerCase().includes(lastWord) && !usedIngredients.has(ingredient)
+                    );
+                    if (filteredIngredients.length > 0) {
+                        filteredIngredients.forEach(ingredient => {
+                            const suggestionDiv = document.createElement('div');
+                            suggestionDiv.classList.add('suggestion-item');
+                            suggestionDiv.innerText = ingredient;
+                            suggestionDiv.addEventListener('click', function () {
+                                const currentValue = descriptionTextarea.value;
+                                const lastCommaIndex = currentValue.lastIndexOf(',');
+                                const baseText = lastCommaIndex !== -1 ? currentValue.substring(0, lastCommaIndex + 1) : '';
+                                descriptionTextarea.value = baseText + (baseText ? ' ' : '') + ingredient + ', ';
+                                descriptionSuggestions.style.display = 'none';
+                                descriptionTextarea.focus();
+                                updateUsedIngredients();
+                            });
+                            descriptionSuggestions.appendChild(suggestionDiv);
+                        });
+                        descriptionSuggestions.style.display = 'block';
+                    }
+                }
+            }, 300);
+            descriptionTextarea.addEventListener('input', debouncedSuggestions);
+            document.addEventListener('click', function (event) {
+                if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
+                    descriptionSuggestions.style.display = 'none';
+                }
+            });
         }
+        // === Fetch Initial Cart ===
+        fetch('/cart/get')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.success) {
+                    updateCartUI(data.cart);
+                } else {
+                    console.error('Failed to fetch cart:', data.error);
+                    showToast('Failed to load cart');
+                    const cart = getCartLocalStorage();
+                    updateCartUI(cart);
+                }
+            })
+            .catch(err => {
+                console.error('Error fetching cart:', err);
+                showToast('Error loading cart');
+                const cart = getCartLocalStorage();
+                updateCartUI(cart);
+            });
+        // === Quantity Controls for Item Modal ===
+        const decreaseBtn = document.getElementById('decreaseQuantity');
+        const increaseBtn = document.getElementById('increaseQuantity');
+        const quantityInput = document.getElementById('quantityInput');
+        decreaseBtn.addEventListener('click', function () {
+            let quantity = parseInt(quantityInput.value) || 1;
+            quantity = Math.max(1, quantity - 1);
+            quantityInput.value = quantity;
+        });
+        increaseBtn.addEventListener('click', function () {
+            let quantity = parseInt(quantityInput.value) || 1;
+            quantity += 1;
+            quantityInput.value = quantity;
+        });
+        // === Keyboard Accessibility for Search Bar ===
+        searchBar.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' && searchBar.value.trim()) {
+                window.location.href = '/search';
+            }
+        });
+    });
+    </script>
 </body>
+</html>