Update templates/menu.html

templates/menu.html

@@ -95,6 +95,14 @@
             justify-content: center;
             gap: 6px;
         }
+        .customisable-text {
+            color: #0FAA39;
+            font-size: 10px;
+            font-weight: 500;
+            margin: 0;
+            text-align: center;
+            line-height: 1;
+        }
         .btn-primary {
             font-size: 12px;
             font-weight: bold;
@@ -208,6 +216,9 @@
         .search-bar-container input::placeholder {
             color: #888;
         }
+        .search-bar-container input:focus {
+            border-bottom: 2px solid #FFA07A;
+        }
         .search-icon {
             position: absolute;
             left: 15px;
@@ -225,6 +236,136 @@
         .mic-icon.active {
             color: #007bff;
         }
+        /* Updated Addon Section */
+        .addon-section {
+            background-color: #fff;
+            border-radius: 10px;
+            margin-bottom: 15px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            transition: transform 0.2s ease;
+        }
+        .addon-section:hover {
+            transform: translateY(-2px);
+        }
+        .addon-section h6 {
+            margin: 0;
+            padding: 12px 15px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #fff;
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .addon-section h6::after {
+            content: '\25BC';
+            font-size: 0.9rem;
+            transition: transform 0.2s ease;
+        }
+        .addon-section.collapsed h6::after {
+            transform: rotate(180deg);
+        }
+        .addon-section .form-check {
+            display: flex;
+            flex-direction: row-reverse;
+            align-items: center;
+            justify-content: space-between;
+            margin: 10px 15px;
+            padding: 0;
+        }
+        .addon-section .form-check-input {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #6c757d;
+            border-radius: 4px;
+            background-color: #fff;
+            position: relative;
+            margin-left: 10px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .addon-section .form-check-input:checked {
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+        }
+        .addon-section .form-check-input:checked::before {
+            content: '\2713';
+            font-size: 12px;
+            position: absolute;
+            top: 2px;
+            left: 4px;
+            color: white;
+            animation: checkmark 0.2s ease-in-out;
+        }
+        .addon-section .form-check-input:hover {
+            transform: scale(1.1);
+            border-color: #0FAA39;
+        }
+        .addon-section .form-check-input:focus {
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(15, 170, 57, 0.2);
+        }
+        .addon-section .form-check-label {
+            font-size: 0.95rem;
+            color: #343a40;
+            cursor: pointer;
+            flex: 1;
+            padding: 5px 8px;
+            border-radius: 4px;
+            transition: background-color 0.2s ease;
+            text-align: left;
+        }
+        .addon-section .form-check-label:hover {
+            background-color: #e6f4ea;
+        }
+        .addon-section .form-check-label .extra-charge {
+            color: #FFA07A;
+            font-weight: 600;
+            margin-left: 8px;
+        }
+        .addon-options {
+            max-height: 500px;
+            opacity: 1;
+            overflow: hidden;
+            transition: max-height 0.3s ease, opacity 0.3s ease;
+        }
+        .addon-options.collapsed {
+            max-height: 0;
+            opacity: 0;
+        }
+        .addon-loading {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 15px;
+        }
+        .addon-loading::after {
+            content: '';
+            width: 20px;
+            height: 20px;
+            border: 3px solid #0FAA39;
+            border-top: 3px solid transparent;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes checkmark {
+            from { transform: scale(0); }
+            to { transform: scale(1); }
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
         form.text-center.mb-4 {
             display: flex;
             flex-direction: column;
@@ -268,7 +409,14 @@
         .modal-body #modal-description {
             font-size: 14px;
             color: #6c757d;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
+        }
+        .modal-body #modal-addons h5,
+        .modal-body #first-row h6 {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #343a40;
         }
         .modal-footer {
             display: flex;
@@ -496,6 +644,107 @@
             font-size: 12px;
             margin-left: 8px;
         }
+        /* Soft Drinks Modal Styles */
+        #softDrinkModal .modal-content {
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            animation: fadeIn 0.3s ease-in;
+        }
+        #softDrinkModal .modal-header {
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            color: white;
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+            padding: 12px 15px;
+        }
+        #softDrinkModal .modal-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+        #softDrinkModal .modal-body {
+            padding: 20px;
+            text-align: center;
+            background-color: #fff;
+        }
+        #softDrinkModal #soft-drink-img {
+            max-height: 150px;
+            width: 100%;
+            max-width: 150px;
+            object-fit: cover;
+            border-radius: 8px;
+            margin: 0 auto 15px;
+            display: block;
+        }
+        #softDrinkModal #soft-drink-name {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #333333;
+            margin-bottom: 5px;
+        }
+        #softDrinkModal #soft-drink-price {
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: #000000;
+            margin-bottom: 20px;
+        }
+        #softDrinkModal .quantity-selector {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        #softDrinkModal .quantity-selector .btn {
+            width: 40px;
+            height: 40px;
+            font-size: 1rem;
+            line-height: 40px;
+            border-radius: 8px;
+            background-color: #f8f9fa;
+            border: 1px solid #ced4da;
+            color: #333;
+            transition: background-color 0.2s ease, transform 0.1s ease;
+        }
+        #softDrinkModal .quantity-selector .btn:hover {
+            background-color: #e6f4ea;
+            transform: scale(1.05);
+        }
+        #softDrinkModal .quantity-selector .btn:active {
+            transform: scale(0.95);
+        }
+        #softDrinkModal .quantity-selector input {
+            width: 60px;
+            height: 40px;
+            text-align: center;
+            font-size: 1rem;
+            font-weight: bold;
+            border-radius: 8px;
+            border: 1px solid #ced4da;
+            background-color: #fff;
+        }
+        #softDrinkModal .modal-footer {
+            justify-content: center;
+            padding: 15px;
+            border-top: none;
+        }
+        #softDrinkModal .modal-footer .btn-primary {
+            width: 150px;
+            height: 45px;
+            font-size: 1rem;
+            border-radius: 8px;
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+            transition: background-color 0.2s ease, transform 0.1s ease;
+        }
+        #softDrinkModal .modal-footer .btn-primary:hover {
+            background-color: #0D9232;
+            transform: scale(1.05);
+        }
+        #softDrinkModal .modal-footer .btn-primary:active {
+            background-color: #0B7A29;
+            transform: scale(0.95);
+        }
+        /* Mobile-Specific Styles */
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -555,7 +804,7 @@
             }
             .modal-body {
                 max-height: 50vh;
-                padding: 8px;
+                padding: 10px;
             }
             .modal-body #modal-img {
                 max-height: 150px;
@@ -576,6 +825,15 @@
                 font-size: 12px;
                 margin-bottom: 5px;
             }
+            .modal-body .nutritional-info {
+                font-size: 10px;
+                margin-bottom: 5px;
+            }
+            .modal-body #modal-addons h5,
+            .modal-body #first-row h6 {
+                font-size: 1rem;
+                margin-bottom: 10px;
+            }
             .modal-footer {
                 padding: 5px;
             }
@@ -606,6 +864,9 @@
                 width: 50px;
                 height: 25px;
             }
+            .customisable-text {
+                font-size: 8px;
+            }
             .button-container {
                 gap: 3px;
             }
@@ -644,6 +905,79 @@
                 font-size: 10px;
                 margin-left: 5px;
             }
+            /* Mobile-Specific Addon Styles */
+            .addon-section {
+                margin-bottom: 10px;
+            }
+            .addon-section h6 {
+                font-size: 1rem;
+                padding: 10px 12px;
+            }
+            .addon-section .form-check {
+                margin: 8px 12px;
+            }
+            .addon-section .form-check-input {
+                width: 18px;
+                height: 18px;
+                margin-left: 8px;
+            }
+            .addon-section .form-check-input:checked::before {
+                font-size: 10px;
+                top: 2px;
+                left: 3px;
+            }
+            .addon-section .form-check-label {
+                font-size: 0.85rem;
+                padding: 4px 6px;
+            }
+            .addon-section .form-check-label .extra-charge {
+                margin-left: 6px;
+                font-size: 0.8rem;
+            }
+            /* Mobile-Specific Soft Drinks Modal Styles */
+            #softDrinkModal .modal-content {
+                border-radius: 8px;
+            }
+            #softDrinkModal .modal-header {
+                padding: 10px 12px;
+            }
+            #softDrinkModal .modal-title {
+                font-size: 1rem;
+            }
+            #softDrinkModal .modal-body {
+                padding: 15px;
+            }
+            #softDrinkModal #soft-drink-img {
+                max-height: 120px;
+                max-width: 120px;
+                margin-bottom: 10px;
+            }
+            #softDrinkModal #soft-drink-name {
+                font-size: 1.3rem;
+            }
+            #softDrinkModal #soft-drink-price {
+                font-size: 1rem;
+                margin-bottom: 15px;
+            }
+            #softDrinkModal .quantity-selector .btn {
+                width: 35px;
+                height: 35px;
+                font-size: 0.9rem;
+                line-height: 35px;
+                border-radius: 6px;
+            }
+            #softDrinkModal .quantity-selector input {
+                width: 50px;
+                height: 35px;
+                font-size: 0.9rem;
+                border-radius: 6px;
+            }
+            #softDrinkModal .modal-footer .btn-primary {
+                width: 120px;
+                height: 40px;
+                font-size: 0.9rem;
+                border-radius: 6px;
+            }
         }
     </style>
 </head>
@@ -743,6 +1077,9 @@
                                                                 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>
+                                                        {% endif %}
                                                     {% endif %}
                                                 </div>
                                             </div>
@@ -793,8 +1130,12 @@
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
+                    <div id="modal-addons" class="modal-addons mt-4">
+                        <h5>Customization Options</h5>
+                        <div id="addons-list" class="addons-container addon-loading"></div>
+                    </div>
                     <div class="mt-4">
-                        <h6>Custom Request</h6>
+                        <h6>Special Instructions</h6>
                         <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
                     </div>
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
@@ -820,18 +1161,18 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
+                    <img id="soft-drink-img" class="img-fluid rounded mb-3" alt="Soft Drink Image">
                     <div class="text-center mb-3">
                         <h5 id="soft-drink-name"></h5>
                         <p id="soft-drink-price"></p>
                     </div>
-                    <div class="d-flex justify-content-center align-items-center mb-4">
-                        <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease">-</button>
-                        <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly style="width: 60px;">
+                    <div class="quantity-selector">
+                        <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease">-1</button>
+                        <input type="text" class="form-control text-center" id="soft-drink-quantity" value="1" readonly>
                         <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase">+</button>
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                     <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()">Add to Cart</button>
                 </div>
             </div>
@@ -842,7 +1183,7 @@
     <script>
         let isProcessingRequest = false;
         let currentSoftDrinkButton = null;
-
+        let baseItemPrice = 0;
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
@@ -853,7 +1194,6 @@
                 {% endfor %}
             {% endfor %}
         ];
-
         const ingredientsList = [
             "Basmati Rice", "Bell Pepper", "Biryani Masala", "Butter", "Capsicum", "Cauliflower",
             "Chickpea Flour (Besan)", "Chickpea Flour (for batter)", "Chickpeas (Channa)", "Chili Powder",
@@ -869,12 +1209,12 @@
             "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 => 
                 item.itemName === payload.itemName && 
-                item.instructions === payload.instructions
+                item.instructions === payload.instructions && 
+                JSON.stringify(item.addons) === JSON.stringify(payload.addons)
             );
             if (existingItem) {
                 existingItem.quantity = payload.quantity;
@@ -884,12 +1224,12 @@
             localStorage.setItem('cart', JSON.stringify(cart));
             return cart;
         }
-
-        function removeFromCartLocalStorage(itemName, quantityToRemove, instructions) {
+        function removeFromCartLocalStorage(itemName, quantityToRemove, instructions, addons) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const itemIndex = cart.findIndex(item => 
                 item.itemName === itemName && 
-                item.instructions === instructions
+                item.instructions === instructions && 
+                JSON.stringify(item.addons) === JSON.stringify(addons)
             );
             if (itemIndex !== -1) {
                 if (quantityToRemove >= cart[itemIndex].quantity) {
@@ -901,11 +1241,9 @@
             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) {
@@ -913,21 +1251,29 @@
                 timeout = setTimeout(() => func.apply(this, args), wait);
             };
         }
-
+        function updateModalPrice() {
+            const selectedAddOns = Array.from(
+                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
+            ).map(addon => parseFloat(addon.getAttribute('data-price')) || 0);
+            const totalAddOnPrice = selectedAddOns.reduce((sum, price) => sum + price, 0);
+            const totalPrice = baseItemPrice + totalAddOnPrice;
+            document.getElementById('modal-price').innerText = `$${totalPrice.toFixed(2)}`;
+        }
         function showSoftDrinkModal(button) {
             currentSoftDrinkButton = button;
             const buttonContainer = button.closest('.button-container');
             const itemName = buttonContainer.getAttribute('data-item-name');
             const itemPrice = buttonContainer.getAttribute('data-item-price');
+            const itemImage = buttonContainer.getAttribute('data-item-image');
             
             document.getElementById('soft-drink-name').textContent = itemName;
             document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
             document.getElementById('soft-drink-quantity').value = '1';
+            document.getElementById('soft-drink-img').src = itemImage || '/static/placeholder.jpg';
             
             const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
             modal.show();
         }
-
         function addSoftDrinkToCart() {
             if (!currentSoftDrinkButton) return;
             
@@ -946,6 +1292,7 @@
                 itemImage: itemImage,
                 section: section,
                 category: selectedCategory,
+                addons: [],
                 instructions: '',
                 quantity: quantity
             };
@@ -979,42 +1326,115 @@
                 modal.hide();
             });
         }
-
         function updateCartUI(cart) {
             if (!Array.isArray(cart)) {
                 console.error('Invalid cart data:', cart);
                 return;
             }
-
             let totalQuantity = 0;
             cart.forEach(item => {
                 totalQuantity += item.quantity;
             });
-
             const cartItemCount = document.getElementById('cart-item-count');
             if (cartItemCount) {
                 cartItemCount.innerText = totalQuantity;
                 cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
             }
         }
-
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `$${price}`;
+            baseItemPrice = parseFloat(price) || 0;
+            document.getElementById('modal-price').innerText = `$${baseItemPrice.toFixed(2)}`;
             const modalImg = document.getElementById('modal-img');
             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;
+                    }
+
+                    data.addons.forEach(addon => {
+                        const sectionDiv = document.createElement('div');
+                        sectionDiv.classList.add('addon-section');
+                        const title = document.createElement('h6');
+                        title.innerText = addon.name;
+                        sectionDiv.appendChild(title);
+                        const optionsContainer = document.createElement('div');
+                        optionsContainer.classList.add('addon-options');
+
+                        addon.options.forEach((option, index) => {
+                            const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
+                            const listItem = document.createElement('div');
+                            listItem.classList.add('form-check');
+                            listItem.innerHTML = `
+                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
+                                       data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}"
+                                       aria-label="Select ${option} for ${addon.name}">
+                                <label class="form-check-label" for="${optionId}">
+                                    ${option} ${addon.extra_charge ? `<span class="extra-charge">($${addon.extra_charge_amount.toFixed(2)})</span>` : ''}
+                                </label>
+                            `;
+                            optionsContainer.appendChild(listItem);
+                        });
+
+                        sectionDiv.appendChild(optionsContainer);
+                        addonsList.appendChild(sectionDiv);
+                    });
+
+                    // Add collapsible behavior
+                    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');
+                        });
+                    });
+
+                    // Update price on addon selection
+                    document.querySelectorAll('.addon-option').forEach(checkbox => {
+                        checkbox.addEventListener('change', updateModalPrice);
+                    });
+
+                    // Handle single-select groups
+                    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;
+                                    }
+                                });
+                            }
+                        });
+                    });
+                })
+                .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');
@@ -1023,24 +1443,28 @@
             const itemImage = document.getElementById('modal-img').src;
             const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
             const instructions = document.getElementById('modal-instructions').value;
-
+            const selectedAddOns = Array.from(
+                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
+            ).map(addon => ({
+                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,
                 itemImage: itemImage,
                 section: section,
                 category: selectedCategory,
+                addons: selectedAddOns,
                 instructions: instructions,
                 quantity: quantity
             };
-
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -1073,7 +1497,6 @@
                 isProcessingRequest = false;
             });
         }
-
         document.addEventListener('DOMContentLoaded', function () {
             // Avatar Dropdown
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
@@ -1093,13 +1516,11 @@
                     dropdownMenu.style.display = 'none';
                 });
             });
-
             // Navigate to search page on search bar click
             const searchBar = document.getElementById('searchBar');
             searchBar.addEventListener('click', function () {
                 window.location.href = '/search';
             });
-
             // Auto-open modal for selected item
             const selectedItem = localStorage.getItem('selectedItem');
             if (selectedItem) {
@@ -1108,7 +1529,6 @@
                     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');
@@ -1123,7 +1543,6 @@
                             }
                         }
                     });
-
                     if (buttonContainer) {
                         if (section === 'Soft Drinks') {
                             showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
@@ -1143,7 +1562,6 @@
                 }
                 localStorage.removeItem('selectedItem');
             }
-
             // Lazy Loading for Cards and Videos
             const menuCards = document.querySelectorAll('.menu-card');
             const menuVideos = document.querySelectorAll('.menu-video');
@@ -1180,7 +1598,6 @@
             });
             menuCards.forEach(card => cardObserver.observe(card));
             menuVideos.forEach(video => videoObserver.observe(video));
-
             // Toggle Details
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {
@@ -1188,7 +1605,6 @@
                     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');
@@ -1198,7 +1614,6 @@
                             }
                         }
                     });
-
                     if (!isCurrentlyShown) {
                         detailsDiv.classList.add('show');
                         this.innerText = 'Hide Details';
@@ -1208,7 +1623,6 @@
                     }
                 });
             });
-
             // Category Selection
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
@@ -1225,7 +1639,6 @@
                     categoryForm.submit();
                 });
             });
-
             // Custom Dish Form Suggestions
             const descriptionTextarea = document.getElementById('custom-dish-description');
             const descriptionSuggestions = document.getElementById('descriptionSuggestions');
@@ -1280,7 +1693,6 @@
                     }
                 });
             }
-
             // Fetch Cart
             fetch('/cart/get')
                 .then(response => {
@@ -1303,7 +1715,6 @@
                     const cart = getCartLocalStorage();
                     updateCartUI(cart);
                 });
-
             // Preload Videos
             const preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
             preloadedVideos.forEach(link => {
@@ -1311,7 +1722,6 @@
                 video.src = link.href;
                 video.preload = 'auto';
             });
-
             // Quantity Controls for Item Modal
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
@@ -1330,7 +1740,6 @@
                     quantityInput.value = currentQuantity;
                 }
             });
-
             // Soft Drinks Modal Quantity Controls
             const softDrinkDecreaseBtn = document.getElementById('soft-drink-decrease');
             const softDrinkIncreaseBtn = document.getElementById('soft-drink-increase');
@@ -1351,7 +1760,6 @@
                     softDrinkQuantityInput.value = currentQuantity;
                 }
             });
-
             // Voice Recognition
             const micIcon = document.getElementById('micIcon');
             if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {