Update templates/menu.html

templates/menu.html

@@ -8,10 +8,10 @@
     <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.jpg" as="image">
+    <link rel="preload" href="/static/placeholder.mp4" as="video">
     {% for section, items in ordered_menu.items() %}
         {% for item in items[:1] %}
-            <link rel="preload" href="{{ item.Image1__c }}" as="image" fetchpriority="high">
+            <link rel="preload" href="{{ item.Video1__c | default('/static/placeholder.mp4') }}" as="video" fetchpriority="high">
         {% endfor %}
     {% endfor %}
     <style>
@@ -22,6 +22,7 @@
             padding: 0;
             display: flex;
             flex-direction: column;
+            padding-bottom: 70px;
         }
         .container {
             max-width: 900px;
@@ -36,78 +37,38 @@
             flex-direction: column;
             opacity: 0;
             transition: opacity 0.3s ease-in-out;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
         .menu-card.visible {
             opacity: 1;
         }
-        
-        /* Video Container Styles */
-        .video-container {
-            position: relative;
-            width: 100%;
+        .menu-video {
             height: 200px;
-            overflow: hidden;
-            border-radius: 15px 15px 0 0;
-            background-color: #000;
-        }
-        
-        .video-container video {
             width: 100%;
-            height: 100%;
             object-fit: cover;
-            transition: opacity 0.5s ease;
-        }
-        
-        .video-container .video-placeholder {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: #f0f0f0;
-            color: #666;
-            font-size: 14px;
-        }
-        
-        .video-container .play-button {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 50px;
-            height: 50px;
-            background-color: rgba(0, 0, 0, 0.7);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            z-index: 10;
+            border-radius: 15px 15px 0 0;
             opacity: 0;
-            transition: opacity 0.3s ease;
+            transition: opacity 0.5s ease-in-out;
+            background-color: #000; /* Fallback color if video fails */
         }
-        
-        /* .video-container:hover .play-button {
+        .menu-video.loaded {
             opacity: 1;
         }
-        
-        .video-container .play-button i {
-            color: white;
-            font-size: 20px;
-            margin-left: 3px;
-        } */
-        
-        .card-title {
+        .menu-card:hover .menu-video {
+            opacity: 1;
+            transform: scale(1.05); /* Slight zoom effect on hover */
+        }
+        .menu-card .card-body .card-title {
             font-size: 1.2rem;
-            font-weight: bold;
+            font-weight: 600;
             margin: 10px 0;
+            color: #333333;
         }
-        .card-text {
+        .menu-card .card-body .card-text.price {
             font-size: 1rem;
-            color: #6c757d;
+            font-weight: 500;
+            color: #000000;
+            margin-bottom: 5px;
         }
         .addbutton .btn {
             background-color: #28a745;
@@ -164,53 +125,6 @@
             box-shadow: none;
             transform: scale(0.98);
         }
-        .view-cart-container {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 999;
-            display: flex;
-            align-items: center;
-        }
-        .view-cart-button {
-            background-color: #0FAA39;
-            color: #fff;
-            padding: 10px 20px;
-            border-radius: 30px;
-            font-size: 1rem;
-            font-weight: bold;
-            text-decoration: none;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-        }
-        .view-cart-button:hover {
-            background-color: #109835;
-            text-decoration: none;
-            color: #fff;
-            transform: scale(1.05);
-        }
-        .cart-icon-badge {
-            background-color: #fff;
-            color: #0FAA39;
-            border-radius: 50%;
-            width: 24px;
-            height: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-            font-weight: bold;
-            margin-left: 5px;
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-        .cart-icon-badge.active {
-            background-color: #ffcc00;
-            color: #0FAA39;
-        }
         .avatar-dropdown-container {
             position: absolute;
             right: 10px;
@@ -224,7 +138,7 @@
             width: 40px;
             height: 40px;
             border-radius: 50%;
-            background-color: #5bbfc1;
+            background-color: #007bff;
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -237,25 +151,28 @@
             position: absolute;
             right: 0;
             top: 100%;
-            background-color: #fff;
+            background-color: #fff8f0;
             border-radius: 5px;
             width: 220px;
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             display: none;
+            border: 1px solid #ffd8b1;
         }
         .dropdown-menu .dropdown-item {
             padding: 12px 16px;
             text-decoration: none;
             color: #333;
-            border-bottom: 1px solid #ddd;
+            border-bottom: 1px solid #ffd8b1;
             display: block;
             font-size: 15px;
+            transition: background-color 0.2s ease;
         }
         .dropdown-menu .dropdown-item:last-child {
             border-bottom: none;
         }
         .dropdown-menu .dropdown-item:hover {
-            background-color: #f1f1f1;
+            background-color: #ffe4c4;
+            color: #333;
         }
         .fixed-top-bar {
             position: relative;
@@ -280,10 +197,11 @@
             align-items: center;
             width: 300px;
             max-width: 90%;
+            position: relative;
         }
         .search-bar-container input {
             width: 100%;
-            padding: 8px 15px 8px 40px;
+            padding: 8px 40px 8px 40px;
             font-size: 16px;
             border-radius: 25px;
             border: none;
@@ -336,7 +254,7 @@
         }
         .addon-section {
             background-color: #fff;
-            border: 2px solid #6c757d;
+            border: 2px solid #ffa500;
             border-radius: 8px;
             padding: 12px;
             margin-bottom: 10px;
@@ -416,11 +334,12 @@
             font-weight: bold;
             text-align: center;
             margin-bottom: 5px;
+            color: #333333;
         }
         .modal-body #modal-price {
             font-size: 16px;
-            font-weight: bold;
-            color: #6c757d;
+            font-weight: 500;
+            color: #000000;
             text-align: center;
             margin-bottom: 10px;
         }
@@ -489,6 +408,7 @@
             font-size: 0.9rem;
             font-weight: bold;
             margin-bottom: 5px;
+            color: #333333;
         }
         .item-details p {
             font-size: 0.85rem;
@@ -585,6 +505,86 @@
         .modal-body::-webkit-scrollbar-thumb:hover {
             background: #0D9232;
         }
+        .btn-primary:disabled {
+            opacity: 0.65;
+            cursor: not-allowed;
+        }
+        .quantity-selector select {
+            width: 60px;
+            height: 35px;
+            padding: 5px;
+            border-radius: 5px;
+            border: 1px solid #ced4da;
+        }
+        #custom-dish-form {
+            position: relative;
+            padding-bottom: 80px;
+        }
+        #custom-dish-form .btn-primary {
+            position: absolute;
+            right: 15px;
+            bottom: 15px;
+            width: auto;
+            padding: 10px 20px;
+        }
+        .bottom-action-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: white;
+            padding: 10px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            max-width: 900px;
+            margin: 0 auto;
+        }
+        .bottom-action-bar .btn {
+            flex: 1;
+            margin: 0 5px;
+            padding: 10px 15px;
+            border-radius: 8px;
+            font-weight: bold;
+            font-size: 16px;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            min-width: 0;
+            white-space: nowrap;
+        }
+        .bottom-action-bar .btn-order-history {
+            background-color: #FFA07A;
+            border-color: #FFA07A;
+        }
+        .bottom-action-bar .btn-order-history:hover {
+            background-color: #FF8C61;
+            border-color: #FF8C61;
+        }
+        .bottom-action-bar .btn-view-cart {
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+        }
+        .bottom-action-bar .btn-view-cart:hover {
+            background-color: #0D9232;
+            border-color: #0D9232;
+        }
+        .cart-icon-badge {
+            background-color: white;
+            color: #0FAA39;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            margin-left: 8px;
+        }
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -598,7 +598,7 @@
                 transform: translateY(-50%);
             }
             .search-bar-container input {
-                padding: 6px 12px 6px 35px;
+                padding: 6px 35px 6px 35px;
                 font-size: 14px;
                 border-radius: 20px;
             }
@@ -727,19 +727,23 @@
                 height: 18px;
                 font-size: 9px;
             }
-            .view-cart-button {
-                padding: 8px 16px;
+            .quantity-selector select {
+                width: 50px;
+                height: 30px;
+                font-size: 12px;
+            }
+            .bottom-action-bar {
+                padding: 8px 10px;
+            }
+            .bottom-action-bar .btn {
+                padding: 8px 10px;
                 font-size: 14px;
             }
             .cart-icon-badge {
-                width: 20px;
-                height: 20px;
+                width: 18px;
+                height: 18px;
                 font-size: 10px;
-            }
-            
-            /* Mobile video adjustments */
-            .video-container {
-                height: 150px;
+                margin-left: 5px;
             }
         }
     </style>
@@ -790,93 +794,87 @@
                         <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
                         <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
                     </div>
-                    <button type="submit" class="btn btn-primary">Submit</button>
+                    <button type="submit" class="btn btn-primary">Submit Custom Dish</button>
                 </form>
             </div>
         {% else %}
-            {% for section, items in ordered_menu.items() %}
-                <h3>{{ section }}</h3>
-                <div class="row">
-                    {% for item in items %}
-                        <div class="col-md-6 mb-4">
-                            <div class="card menu-card">
-                                <div class="video-container">
+            {% 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">
                                     <video 
-                                        id="video-{{ loop.index }}" 
-                                        preload="metadata" 
-                                        poster="{{ item.Image1__c if item.Image1__c else '/static/placeholder.jpg' }}"
-                                        data-src="{{ item.Video1__c }}"
-                                        muted
-                                        loop
-                                    >
-                                        <source src="{{ item.Video1__c }}" type="video/mp4">
+                                        class="card-img-top menu-video" 
+                                        muted 
+                                        loop 
+                                        preload="auto" 
+                                        data-src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" 
+                                        poster="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
+                                        width="350" 
+                                        height="200" 
+                                        onmouseover="this.play()" 
+                                        onmouseout="this.pause(); this.currentTime = 0;" 
+                                        onerror="this.poster='/static/placeholder.jpg';">
+                                        <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
                                         Your browser does not support the video tag.
                                     </video>
-                                    {% if not item.Video1__c %}
-                                        <div class="video-placeholder">
-                                            No video available
-                                        </div>
-                                    {% endif %}
-                                    <div class="play-button" onclick="togglePlay(this)">
-                                        <i class="bi bi-play-fill"></i>
-                                    </div>
-                                </div>
-                                
-                                <div class="addbutton">
-                                    <div class="card-body d-flex align-items-center justify-content-between">
-                                        <div>
-                                            <h5 class="card-title">{{ item.Name }}</h5>
-                                            <p class="card-text">${{ item.Price__c }}</p>
-                                        </div>
-                                        <div class="d-flex flex-column align-item-center justify-content-center">
-                                            <div class="button-container" data-item-name="{{ item.Name }}" data-item-price="{{ item.Price__c }}" data-item-image="{{ item.Image1__c }}" data-item-section="{{ item.Section__c }}" data-item-category="{{ selected_category }}">
-                                                {% if item.Section__c == 'Soft Drinks' %}
-                                                    <button class="btn btn-primary add-to-cart-btn" onclick="handleSoftDrinkAdd(this)">ADD</button>
-                                                    <div class="quantity-selector" style="display: none;">
-                                                        <button class="btn btn-outline-secondary decrease-btn" onclick="decreaseQuantity(this)">-</button>
-                                                        <select class="quantity-to-remove">
-                                                            {% for i in range(1, 21) %}
-                                                                <option value="{{ i }}">{{ i }}</option>
-                                                            {% endfor %}
-                                                        </select>
-                                                        <span class="quantity-display">0</span>
-                                                        <button class="btn btn-outline-secondary increase-btn" onclick="increaseQuantity(this)">+</button>
-                                                        <select class="quantity-to-add">
-                                                            {% for i in range(1, 21) %}
-                                                                <option value="{{ i }}">{{ i }}</option>
-                                                            {% endfor %}
-                                                        </select>
-                                                    </div>
-                                                {% else %}
-                                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                                                        onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
-                                                        ADD
-                                                    </button>
-                                                {% endif %}
-                                                {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
-                                                    <span class="customisable-text">Customisable</span>
-                                                {% endif %}
+                                    <div class="addbutton">
+                                        <div class="card-body d-flex align-items-center justify-content-between">
+                                            <div>
+                                                <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
+                                                <p class="card-text">${{ item.Price__c | default('0.00') }}</p>
+                                            </div>
+                                            <div class="d-flex flex-column align-item-center justify-content-center">
+                                                <div class="button-container" 
+                                                     data-item-name="{{ item.Name | default('Unnamed Item') }}" 
+                                                     data-item-price="{{ item.Price__c | default('0.00') }}" 
+                                                     data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}" 
+                                                     data-item-section="{{ item.Section__c | default(section) }}" 
+                                                     data-item-category="{{ selected_category }}">
+                                                    {% if item.Section__c == 'Soft Drinks' %}
+                                                        <button class="btn btn-primary add-to-cart-btn" onclick="handleSoftDrinkAdd(this)">ADD</button>
+                                                        <div class="quantity-selector" style="display: none;">
+                                                            <button class="btn btn-outline-secondary decrease-btn" onclick="decreaseQuantity(this)">-</button>
+                                                            <span class="quantity-display">0</span>
+                                                            <button class="btn btn-outline-secondary increase-btn" onclick="increaseQuantity(this)">+</button>
+                                                        </div>
+                                                    {% else %}
+                                                        <button class="btn btn-primary" 
+                                                                data-bs-toggle="modal" 
+                                                                data-bs-target="#itemModal" 
+                                                                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>
+                                                    {% endif %}
+                                                    {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
+                                                        <span class="customisable-text">Customisable</span>
+                                                    {% endif %}
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
+                                    <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
+                                    <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}"></div>
                                 </div>
-                                <div class="toggle-details" data-item-name="{{ item.Name }}">Show Details</div>
-                                <div class="item-details" id="details-{{ item.Name | replace(' ', '-') }}"></div>
                             </div>
-                        </div>
-                    {% endfor %}
-                </div>
-            {% endfor %}
+                        {% endfor %}
+                    </div>
+                {% endfor %}
+            {% endif %}
         {% endif %}
     </div>
 
-    <div class="view-cart-container">
-        <a href="{{ url_for('cart.cart') }}" class="view-cart-button">
-            <i class="bi bi-cart"></i>
-            View Cart
-            <span id="cart-item-count" class="cart-icon-badge {% if cart_item_count > 0 %}active{% endif %}">
-                {{ cart_item_count if cart_item_count > 0 else '' }}
-            </span>
+    <div class="bottom-action-bar">
+        <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history">
+            <i class="bi bi-clock-history"></i> Order History
+        </a>
+        <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
+            <i class="bi bi-cart"></i> View Cart
+            <span class="cart-icon-badge" id="cart-item-count">0</span>
         </a>
     </div>
 
@@ -889,15 +887,10 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <!-- Item Image -->
                     <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
-                    <!-- Item Name -->
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
-                    <!-- Item Price -->
                     <p id="modal-price" class="text-muted text-center"></p>
-                    <!-- Item Description -->
                     <p id="modal-description" class="text-secondary"></p>
-                    <!-- Add-ons -->
                     <div id="modal-addons" class="modal-addons mt-4">
                         <h6>Customization Options</h6>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
@@ -908,53 +901,26 @@
                     </div>
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
                 </div>
-                <!-- Quantity Controls and Add to Cart Button -->
                 <div class="modal-footer d-flex align-items-center justify-content-between">
-                    <!-- Quantity Controls -->
                     <div class="d-flex align-items-center gap-2">
                         <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
                         <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
                         <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
                     </div>
-                    <!-- Add to Cart Button -->
                     <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                 </div>
             </div>
         </div>
     </div>
 
-
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        // Video Handling Functions
-        function togglePlay(button) {
-            const videoContainer = button.closest('.video-container');
-            const video = videoContainer.querySelector('video');
-            
-            if (video.paused) {
-                // Load video source if not already loaded
-                if (!video.src && video.dataset.src) {
-                    video.src = video.dataset.src;
-                }
-                video.play()
-                    .then(() => {
-                        button.innerHTML = '<i class="bi bi-pause-fill"></i>';
-                    })
-                    .catch(e => {
-                        console.log('Video play error:', e);
-                        // Show error to user if needed
-                    });
-            } else {
-                video.pause();
-                button.innerHTML = '<i class="bi bi-play-fill"></i>';
-            }
-        }
+        let isProcessingRequest = false;
 
-        // Dynamically populate menuItems from ordered_menu
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
-                    "{{ item.Name }}",
+                    "{{ item.Name | default('Unnamed Item') }}",
                 {% endfor %}
             {% endfor %}
         ];
@@ -1076,7 +1042,7 @@
                 JSON.stringify(item.addons) === JSON.stringify(payload.addons)
             );
             if (existingItem) {
-                existingItem.quantity += payload.quantity;
+                existingItem.quantity = payload.quantity;
             } else {
                 cart.push(payload);
             }
@@ -1106,97 +1072,210 @@
             return JSON.parse(localStorage.getItem('cart')) || [];
         }
 
-        document.addEventListener('DOMContentLoaded', function () {
-            // Initialize video handling
-            const videoContainers = document.querySelectorAll('.video-container');
+        function debounce(func, wait) {
+            let timeout;
+            return function (...args) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(this, args), wait);
+            };
+        }
+
+        function handleSoftDrinkAdd(button) {
+            const buttonContainer = button.closest('.button-container');
+            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
+            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
+            const quantityDisplay = quantitySelector.querySelector('.quantity-display');
             
-            videoContainers.forEach(container => {
-                const video = container.querySelector('video');
-                
-                // Only load video when container is in viewport
-                const observer = new IntersectionObserver((entries) => {
-                    entries.forEach(entry => {
-                        if (entry.isIntersecting && video.dataset.src && !video.src) {
-                            video.src = video.dataset.src;
-                            observer.unobserve(entry.target);
-                        }
-                    });
-                }, {
-                    rootMargin: '200px',
-                    threshold: 0.1
-                });
-                
-                observer.observe(container);
+            addButton.style.display = 'none';
+            quantitySelector.style.display = 'flex';
+            
+            if (parseInt(quantityDisplay.innerText) === 0) {
+                quantityDisplay.innerText = '1';
+                updateCartQuantity(buttonContainer, 1);
+            }
+        }
+
+        function increaseQuantity(button) {
+            if (isProcessingRequest) return;
+            isProcessingRequest = true;
+
+            const buttonContainer = button.closest('.button-container');
+            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
+            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
+
+            if (currentQuantity < 10) {
+                const newQuantity = currentQuantity + 1;
+                quantityDisplay.innerText = newQuantity;
+                debouncedUpdateCart(buttonContainer, newQuantity);
+            } else {
+                console.log('Maximum quantity of 10 reached for Soft Drinks');
+                isProcessingRequest = false;
+            }
+        }
+
+        function decreaseQuantity(button) {
+            if (isProcessingRequest) return;
+            isProcessingRequest = true;
+
+            const buttonContainer = button.closest('.button-container');
+            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
+            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
+            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
+            const currentQuantity = parseInt(quantityDisplay.innerText) || 0;
+
+            if (currentQuantity <= 1) {
+                quantityDisplay.innerText = '0';
+                addButton.style.display = 'block';
+                quantitySelector.style.display = 'none';
+                updateCartQuantity(buttonContainer, 0);
+            } else {
+                const newQuantity = currentQuantity - 1;
+                quantityDisplay.innerText = newQuantity;
+                debouncedUpdateCart(buttonContainer, newQuantity);
+            }
+        }
+
+        function updateCartQuantity(buttonContainer, newQuantity) {
+            const itemName = buttonContainer.getAttribute('data-item-name');
+            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
+            const itemImage = buttonContainer.getAttribute('data-item-image');
+            const section = buttonContainer.getAttribute('data-item-section');
+            const selectedCategory = buttonContainer.getAttribute('data-item-category');
+
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: selectedCategory,
+                addons: [],
+                instructions: '',
+                quantity: newQuantity
+            };
 
-                // Handle hover play/pause
-                container.addEventListener('mouseenter', () => {
-                    if (video.src) {
-                        video.play().catch(e => console.log('Autoplay prevented:', e));
+            if (newQuantity > 0) {
+                fetch('/cart/add', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(cartPayload)
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                    } else {
+                        console.error('Failed to update cart:', data.error);
+                        const cart = addToCartLocalStorage(cartPayload);
+                        updateCartUI(cart);
                     }
+                })
+                .catch(err => {
+                    console.error('Error updating cart:', err);
+                    const cart = addToCartLocalStorage(cartPayload);
+                    updateCartUI(cart);
+                })
+                .finally(() => {
+                    isProcessingRequest = false;
                 });
-                
-                container.addEventListener('mouseleave', () => {
-                    if (!video.paused) {
-                        video.pause();
-                        const playButton = container.querySelector('.play-button');
-                        if (playButton) {
-                            playButton.innerHTML = '<i class="bi bi-play-fill"></i>';
-                        }
+            } else {
+                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&instructions=&addons=[]`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                    } else {
+                        console.error('Failed to remove item:', data.error);
+                        const cart = removeFromCartLocalStorage(itemName, 1, '', []);
+                        updateCartUI(cart);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error removing item:', err);
+                    const cart = removeFromCartLocalStorage(itemName, 1, '', []);
+                    updateCartUI(cart);
+                })
+                .finally(() => {
+                    isProcessingRequest = false;
                 });
+            }
+        }
+
+        const debouncedUpdateCart = debounce(updateCartQuantity, 300);
+
+        function updateCartUI(cart) {
+            if (!Array.isArray(cart)) {
+                console.error('Invalid cart data:', cart);
+                return;
+            }
+
+            let totalQuantity = 0;
+            cart.forEach(item => {
+                totalQuantity += item.quantity;
             });
 
-            // Initialize microphone for voice search
-            const micIcon = document.getElementById('micIcon');
-            if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
-                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-                const recognition = new SpeechRecognition();
-                recognition.lang = 'en-US';
-                recognition.onstart = () => micIcon.classList.add('active');
-                recognition.onresult = (event) => {
-                    const searchBar = document.getElementById('searchBar');
-                    searchBar.value = event.results[0][0].transcript.trim();
-                    filterMenu();
-                };
-                recognition.onend = () => micIcon.classList.remove('active');
-                recognition.onerror = (event) => {
-                    micIcon.classList.remove('active');
-                    console.error('Speech error:', event.error);
-                };
-                micIcon.addEventListener('click', () => {
-                    recognition.start();
-                });
-            } else {
-                micIcon.style.display = 'none';
+            const cartItemCount = document.getElementById('cart-item-count');
+            if (cartItemCount) {
+                cartItemCount.innerText = totalQuantity;
+                cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
             }
 
+            const buttonContainers = document.querySelectorAll('.button-container');
+            buttonContainers.forEach(container => {
+                const itemName = container.getAttribute('data-item-name');
+                const section = container.getAttribute('data-item-section');
+                const quantityDisplay = container.querySelector('.quantity-display');
+                const addButton = container.querySelector('.add-to-cart-btn');
+                const quantitySelector = container.querySelector('.quantity-selector');
+
+                const cartItem = cart.find(item => 
+                    item.itemName === itemName && 
+                    item.section === section &&
+                    item.instructions === '' && 
+                    JSON.stringify(item.addons) === JSON.stringify([])
+                );
+
+                if (cartItem && cartItem.quantity > 0) {
+                    quantityDisplay.innerText = cartItem.quantity;
+                    addButton.style.display = 'none';
+                    quantitySelector.style.display = 'flex';
+                } else {
+                    quantityDisplay.innerText = '0';
+                    addButton.style.display = 'block';
+                    quantitySelector.style.display = 'none';
+                }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
             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';
                 });
             });
-
             const menuCards = document.querySelectorAll('.menu-card');
             menuCards.forEach(card => {
                 const itemName = card.querySelector('.card-title').innerText;
                 const detailsDiv = card.querySelector('.item-details');
                 const detailsData = menuItemDetails[itemName];
-
                 if (detailsData) {
                     detailsDiv.innerHTML = `
                         <h6>Ingredients</h6>
@@ -1215,7 +1294,7 @@
                     detailsDiv.innerHTML = '<p>No details available for this item.</p>';
                 }
             });
-
+            const menuVideos = document.querySelectorAll('.menu-video');
             const cardObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
@@ -1228,9 +1307,27 @@
                 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 source = video.querySelector('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 () {
@@ -1240,16 +1337,13 @@
                     this.innerText = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show Details';
                 });
             });
-
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
-
             if (!selectedCategoryInput.value) {
                 selectedCategoryInput.value = "All";
                 document.querySelector('.category-button[data-category="All"]').classList.add('selected');
             }
-
             categoryButtons.forEach(button => {
                 button.addEventListener('click', function () {
                     categoryButtons.forEach(btn => btn.classList.remove('selected'));
@@ -1258,15 +1352,12 @@
                     categoryForm.submit();
                 });
             });
-
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
-
             searchBar.addEventListener('input', function () {
                 const input = this.value.trim().toLowerCase();
                 suggestionsContainer.innerHTML = '';
                 suggestionsContainer.style.display = 'none';
-
                 if (input) {
                     const filteredItems = menuItems.filter(item => 
                         item.toLowerCase().includes(input)
@@ -1288,19 +1379,15 @@
                 }
                 filterMenu();
             });
-
             document.addEventListener('click', function (event) {
                 if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
                     suggestionsContainer.style.display = 'none';
                 }
             });
-
             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();
@@ -1313,16 +1400,13 @@
                         });
                     }
                 }
-
                 descriptionTextarea.addEventListener('input', function () {
                     const inputText = this.value.trim();
                     const words = inputText.split(/,\s*/);
                     const lastWord = words[words.length - 1].trim().toLowerCase();
                     descriptionSuggestions.innerHTML = '';
                     descriptionSuggestions.style.display = 'none';
-
                     updateUsedIngredients();
-
                     if (lastWord) {
                         const filteredIngredients = ingredientsList.filter(ingredient =>
                             ingredient.toLowerCase().includes(lastWord) && !usedIngredients.has(ingredient)
@@ -1347,14 +1431,12 @@
                         }
                     }
                 });
-
                 document.addEventListener('click', function (event) {
                     if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
                         descriptionSuggestions.style.display = 'none';
                     }
                 });
             }
-
             fetch('/cart/get')
                 .then(response => {
                     if (!response.ok) {
@@ -1376,17 +1458,15 @@
                     const cart = getCartLocalStorage();
                     updateCartUI(cart);
                 });
-
-            const preloadedImages = document.querySelectorAll('link[rel="preload"]');
-            preloadedImages.forEach(link => {
-                const img = new Image();
-                img.src = link.href;
+            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');
-
             decreaseBtn.addEventListener('click', function () {
                 let currentQuantity = parseInt(quantityInput.value);
                 if (currentQuantity > 1) {
@@ -1394,32 +1474,43 @@
                     quantityInput.value = currentQuantity;
                 }
             });
-
             increaseBtn.addEventListener('click', function () {
                 let currentQuantity = parseInt(quantityInput.value);
                 currentQuantity++;
                 quantityInput.value = currentQuantity;
             });
-        });
 
-        function debounce(func, wait) {
-            let timeout;
-            return function (...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), wait);
-            };
-        }
+            const micIcon = document.getElementById('micIcon');
+            if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
+                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+                const recognition = new SpeechRecognition();
+                recognition.lang = 'en-US';
+                recognition.onstart = () => micIcon.classList.add('active');
+                recognition.onresult = (event) => {
+                    searchBar.value = event.results[0][0].transcript.trim();
+                    filterMenu();
+                };
+                recognition.onend = () => micIcon.classList.remove('active');
+                recognition.onerror = (event) => {
+                    micIcon.classList.remove('active');
+                    console.error('Speech error:', event.error);
+                };
+                micIcon.addEventListener('click', () => {
+                    recognition.start();
+                });
+            } else {
+                micIcon.style.display = 'none';
+            }
+        });
 
         function filterMenu() {
             const input = document.getElementById('searchBar').value.trim().toLowerCase();
             const sections = document.querySelectorAll('h3');
             const items = document.querySelectorAll('.menu-card');
             let matchedSections = new Set();
-
             items.forEach(item => {
                 const itemName = item.querySelector('.card-title').innerText.toLowerCase();
                 const itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
-
                 if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
                     item.style.display = 'block';
                     item.classList.add('visible');
@@ -1428,7 +1519,6 @@
                     item.style.display = 'none';
                 }
             });
-
             sections.forEach(section => {
                 const sectionRow = section.nextElementSibling;
                 if (matchedSections.has(sectionRow)) {
@@ -1439,7 +1529,6 @@
                     sectionRow.style.display = 'none';
                 }
             });
-
             if (!input) {
                 sections.forEach(section => {
                     section.style.display = 'block';
@@ -1456,22 +1545,8 @@
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
             const modalImg = document.getElementById('modal-img');
-            if (section.toLowerCase() === 'soft drinks') {
-                modalImg.style.display = 'none';
-            } else {
-                modalImg.style.display = 'block';
-                modalImg.src = image || '/static/placeholder.jpg';
-            }
+            modalImg.src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
-            const nutritionalInfoEl = document.getElementById('modal-nutritional-info');
-            const itemDetails = menuItemDetails[name];
-            if (itemDetails && itemDetails.nutritionalInfo) {
-                const { calories, protein, carbs, fats, fiber, sugar } = itemDetails.nutritionalInfo;
-                nutritionalInfoEl.innerText = `[Energy: ${calories} kcal, Protein: ${protein}g, Carbohydrates: ${carbs}g, Fiber: ${fiber}g, Fat: ${fats}g, Sugar: ${sugar}g]`;
-            } else {
-                nutritionalInfoEl.innerText = '[No nutritional info available.]';
-            }
-
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
             const modalSectionEl = document.getElementById('modal-section');
@@ -1479,148 +1554,28 @@
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
 
-            const prepStyleOptions = document.getElementById('prep-style-options');
-            const typeOptions = document.getElementById('type-options');
-            const spiceLevelOptions = document.getElementById('spice-level-options');
-            const firstRow = document.getElementById('first-row');
-            const firstRowTitle = document.getElementById('first-row-title');
-            const addonsTitle = document.getElementById('addons-title');
-
-            prepStyleOptions.innerHTML = '';
-            typeOptions.innerHTML = '';
-            spiceLevelOptions.innerHTML = '';
-
-            if (section.toLowerCase() === 'starters') {
-                firstRow.style.display = 'block';
-                firstRowTitle.style.display = 'block';
-                addonsTitle.style.display = 'none';
-            } else {
-                firstRow.style.display = 'none';
-                firstRowTitle.style.display = 'none';
-                addonsTitle.style.display = 'block';
-            }
-
-            const addonsList = document.getElementById('addons-list');
-            addonsList.innerHTML = '';
-            const dummySections = [
-                { name: "Beverages", options: ["Sprite ($3)", "Thums Up ($3)", "Virgin Mojito ($3)", "Lemonade ($3)", "Blue Lagoon Mocktail ($3)"] },
-                { name: "Sauces", options: ["Mint Chutney", "Tomato Sauce"] },
-                { name: "Extra Toppings", options: ["Cheese ($2)", "Olives ($1)", "Jalapenos ($1)", "Mushrooms ($2)", "Peppers ($1)"] },
-                { name: "Sides", options: ["Fries ($3)", "Salad ($2)", "Garlic Bread ($3)", "Onion Rings ($2)", "Coleslaw ($2)"] },
-                { name: "Desserts", options: ["Ice Cream ($3)", "Brownie ($3)", "Cheesecake ($4)", "Gulab Jamun ($3)", "Rasmalai ($4)"] }
-            ];
-
-            dummySections.forEach(addon => {
-                const sectionDiv = document.createElement('div');
-                sectionDiv.classList.add('addon-section');
-                sectionDiv.setAttribute('data-addon-name', addon.name);
-
-                const title = document.createElement('h6');
-                title.innerText = addon.name;
-                sectionDiv.appendChild(title);
-
-                const optionsContainer = document.createElement('div');
-                addon.options.forEach((option, index) => {
-                    const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
-                    const listItem = document.createElement('div');
-                    listItem.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="0">
-                        <label class="form-check-label" for="${optionId}">
-                            ${option}
-                        </label>
-                    `;
-                    optionsContainer.appendChild(listItem);
-                });
-                sectionDiv.appendChild(optionsContainer);
-                addonsList.appendChild(sectionDiv);
-            });
-
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
                     addonsList.innerHTML = '';
-
                     if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
-                        addonsTitle.style.display = 'none';
                         return;
                     }
-
-                    if (section.toLowerCase() === 'starters') {
-                        data.addons.forEach(addon => {
-                            if (addon.name.toLowerCase() === "choose preparation style") {
-                                addon.options.forEach(option => {
-                                    const optionId = `addon-prep-style-${option}`;
-                                    const optionHTML = `
-                                        <div class="form-check">
-                                            <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Choose Preparation Style">
-                                            <label class="form-check-label" for="${optionId}">
-                                                ${option}
-                                            </label>
-                                        </div>
-                                    `;
-                                    prepStyleOptions.innerHTML += optionHTML;
-                                });
-                            }
-                            if (addon.name.toLowerCase() === "type") {
-                                addon.options.forEach(option => {
-                                    const optionId = `addon-type-${option}`;
-                                    const optionHTML = `
-                                        <div class="form-check">
-                                            <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Type">
-                                            <label class="form-check-label" for="${optionId}">
-                                                ${option}
-                                            </label>
-                                        </div>
-                                    `;
-                                    typeOptions.innerHTML += optionHTML;
-                                });
-                            }
-                            if (addon.name.toLowerCase() === "spice level") {
-                                addon.options.forEach(option => {
-                                    const optionId = `addon-spice-level-${option}`;
-                                    const optionHTML = `
-                                        <div class="form-check">
-                                            <input type="checkbox" class="form-check-input spice-level-option" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
-                                            <label class="form-check-label" for="${optionId}">
-                                                ${option}
-                                            </label>
-                                        </div>
-                                    `;
-                                    spiceLevelOptions.innerHTML += optionHTML;
-                                });
-                            }
-                        });
-                    }
-
                     data.addons.forEach(addon => {
-                        if (section.toLowerCase() === 'starters' && 
-                            (addon.name.toLowerCase() === "type" || 
-                             addon.name.toLowerCase() === "spice level" || 
-                             addon.name.toLowerCase() === "choose preparation style")) {
-                            return;
-                        }
-
                         const sectionDiv = document.createElement('div');
                         sectionDiv.classList.add('addon-section');
-                        sectionDiv.setAttribute('data-addon-name', addon.name);
-
                         const title = document.createElement('h6');
                         title.innerText = addon.name;
                         sectionDiv.appendChild(title);
-
                         const optionsContainer = document.createElement('div');
                         addon.options.forEach((option, index) => {
                             const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
                             const listItem = document.createElement('div');
                             listItem.classList.add('form-check');
-
                             listItem.innerHTML = `
-                                <input type="checkbox" class="form-check-input ${addon.name.toLowerCase() === 'spice level' ? 'spice-level-option' : 'addon-option'}" id="${optionId}" value="${option}"
+                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
                                        data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
                                 <label class="form-check-label" for="${optionId}">
                                     ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
@@ -1631,66 +1586,23 @@
                         sectionDiv.appendChild(optionsContainer);
                         addonsList.appendChild(sectionDiv);
                     });
-
-                    const startersOrder = [
-                        "Select Dip/Sauce",
-                        "Extra Add-ons",
-                        "Make it a Combo"
-                    ];
-
-                    const desiredOrder = [
-                        "Spice Level",
-                        "Choose Preparation Style",
-                        "Select Dip/Sauce",
-                        "Extra Add-ons",
-                        "Make it a Combo",
-                        "Type"
-                    ];
-
-                    const orderToUse = section.toLowerCase() === 'starters' ? startersOrder : desiredOrder;
-
-                    const sections = Array.from(addonsList.children);
-                    addonsList.innerHTML = '';
-
-                    orderToUse.forEach(sectionName => {
-                        const section = sections.find(s => s.getAttribute('data-addon-name') === sectionName);
-                        if (section) {
-                            addonsList.appendChild(section);
-                        }
-                    });
-
-                    sections.forEach(section => {
-                        if (!orderToUse.includes(section.getAttribute('data-addon-name'))) {
-                            addonsList.appendChild(section);
-                        }
-                    });
                 })
                 .catch(err => {
                     console.error('Error fetching add-ons:', err);
                     document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
-                    addonsTitle.style.display = 'none';
                 });
         }
 
         document.addEventListener('click', function(event) {
-            if (event.target.classList.contains('spice-level-option') || event.target.classList.contains('addon-option')) {
+            if (event.target.classList.contains('addon-option')) {
                 handleAddonClick(event.target);
             }
         });
 
         function handleAddonClick(checkbox) {
             const groupName = checkbox.getAttribute('data-group');
-            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"].includes(groupName);
-
-            if (groupName.toLowerCase() === "spice level") {
-                const allSpiceLevelCheckboxes = document.querySelectorAll('.spice-level-option');
-                allSpiceLevelCheckboxes.forEach(otherCheckbox => {
-                    if (otherCheckbox !== checkbox) {
-                        otherCheckbox.checked = false;
-                    }
-                });
-            }
-            else if (!isMultiSelectGroup) {
+            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo"].includes(groupName);
+            if (!isMultiSelectGroup) {
                 const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
                 checkboxes.forEach(otherCheckbox => {
                     if (otherCheckbox !== checkbox) {
@@ -1712,45 +1624,17 @@
             const section = modalSectionEl.getAttribute('data-section');
             const selectedCategory = modalSectionEl.getAttribute('data-category');
             if (!itemName || !itemPrice || !section || !itemImage) {
-                console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage});
+                console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage });
                 return;
             }
-           
-            let selectedAddOns = [];
-            const addonsListOptions = document.querySelectorAll('#addons-list .addon-option');
-            addonsListOptions.forEach(option => {
-                if (option.checked) {
-                    selectedAddOns.push({
-                        name: option.getAttribute('data-name') || 'Default Name',
-                        price: parseFloat(option.getAttribute('data-price') || 0)
-                    });
-                }
-            });
-
-            if (section.toLowerCase() === 'starters') {
-                const prepStyleOptions = Array.from(
-                    document.querySelectorAll('#prep-style-options input[type="checkbox"]:checked')
-                ).map(option => ({
-                    name: option.getAttribute('data-name') || 'Default Prep Style',
-                    price: 0
-                }));
-                const typeOptions = Array.from(
-                    document.querySelectorAll('#type-options input[type="checkbox"]:checked')
-                ).map(option => ({
-                    name: option.getAttribute('data-name') || 'Default Type',
-                    price: 0
-                }));
-                const spiceLevelOption = document.querySelector('#spice-level-options input[type="checkbox"].spice-level-option:checked');
-                const spiceLevelOptions = spiceLevelOption ? [{
-                    name: spiceLevelOption.getAttribute('data-name') || 'Default Spice Level',
-                    price: 0
-                }] : [];
-                selectedAddOns = [...selectedAddOns, ...prepStyleOptions, ...typeOptions, ...spiceLevelOptions];
-            }
-
+            const selectedAddOns = Array.from(
+                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
+            ).map(addon => ({
+                name: addon.getAttribute('data-name') || 'Default Name',
+                price: parseFloat(addon.getAttribute('data-price') || 0)
+            }));
             const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
             const instructions = document.getElementById('modal-instructions').value;
-
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
@@ -1761,76 +1645,7 @@
                 instructions: instructions,
                 quantity: quantity
             };
-
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-                return response.json();
-            })
-            .then(data => {
-                if (data.success) {
-                    alert('Item added to cart successfully!');
-                    updateCartUI(data.cart);
-                    const modal = document.getElementById('itemModal');
-                    const modalInstance = bootstrap.Modal.getInstance(modal);
-                    modalInstance.hide();
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart.');
-                }
-            })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                alert('An error occurred while adding the item to the cart: ' + err.message);
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-                const modal = document.getElementById('itemModal');
-                const modalInstance = bootstrap.Modal.getInstance(modal);
-                modalInstance.hide();
-            });
-        }
-
-        function handleSoftDrinkAdd(button) {
-            const buttonContainer = button.closest('.button-container');
-            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
-            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
-            const quantityDisplay = quantitySelector.querySelector('.quantity-display');
-            const quantityToAddSelect = quantitySelector.querySelector('.quantity-to-add');
-            const quantityToAdd = parseInt(quantityToAddSelect.value);
-            const itemName = buttonContainer.getAttribute('data-item-name');
-            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
-            const itemImage = buttonContainer.getAttribute('data-item-image');
-            const section = buttonContainer.getAttribute('data-item-section');
-            const selectedCategory = buttonContainer.getAttribute('data-item-category');
-
-            addButton.style.display = 'none';
-            quantitySelector.style.display = 'flex';
-
-            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
-            currentQuantity += quantityToAdd;
-            quantityDisplay.innerText = currentQuantity;
-
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
-                addons: [],
-                instructions: '',
-                quantity: quantityToAdd
-            };
-
-            button.disabled = true;
-
+            
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -1838,75 +1653,8 @@
                 },
                 body: JSON.stringify(cartPayload)
             })
-            .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) {
-                    alert(`Added ${quantityToAdd} item(s) to cart successfully!`);
-                    updateCartUI(data.cart);
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart.');
-                    currentQuantity -= quantityToAdd;
-                    quantityDisplay.innerText = currentQuantity;
-                }
-            })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                alert('An error occurred while adding the item to the cart: ' + err.message);
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-            })
-            .finally(() => {
-                button.disabled = false;
-            });
-        }
-
-        function increaseQuantity(button) {
-            const buttonContainer = button.closest('.button-container');
-            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
-            const quantityToAddSelect = buttonContainer.querySelector('.quantity-to-add');
-            const quantityToAdd = parseInt(quantityToAddSelect.value);
-            const itemName = buttonContainer.getAttribute('data-item-name');
-            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
-            const itemImage = buttonContainer.getAttribute('data-item-image');
-            const section = buttonContainer.getAttribute('data-item-section');
-            const selectedCategory = buttonContainer.getAttribute('data-item-category');
-
-            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
-            currentQuantity += quantityToAdd;
-            quantityDisplay.innerText = currentQuantity;
-
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
-                addons: [],
-                instructions: '',
-                quantity: quantityToAdd
-            };
-
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-                return response.json();
-            })
-            
-then(data => {
                 if (data.success) {
                     alert('Item added to cart successfully!');
                     updateCartUI(data.cart);