Update templates/menu.html

templates/menu.html

@@ -9,317 +9,547 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <style>
         body {
-            font-family: 'Poppins', sans-serif;
-            background-color: #f8f1e9;
+            font-family: Arial, sans-serif;
+            background-color: #fdf4e3;
             margin: 0;
             padding: 0;
+            min-height: 100vh;
             display: flex;
             flex-direction: column;
         }
-        .container {
-            max-width: 1000px;
-            padding: 20px;
-        }
-        h1 {
-            font-weight: 600;
-            color: #2c2c2c;
-            margin-bottom: 30px;
+
+        .fixed-top-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 60px;
+            background-color: #FF6B35;
+            color: white;
+            padding: 10px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            z-index: 1000;
         }
-        h3 {
-            font-weight: 500;
-            color: #444;
-            margin-top: 20px;
+
+        .search-bar-container {
+            position: relative;
+            width: 300px;
         }
-        .menu-card {
+
+        .search-bar-container input {
+            width: 100%;
+            padding: 8px 8px 8px 35px;
             border-radius: 20px;
-            overflow: hidden;
+            border: none;
+        }
+
+        .search-icon {
+            position: absolute;
+            left: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 18px;
+            color: #888;
+        }
+
+        .avatar-dropdown-container {
+            position: relative;
+        }
+
+        .avatar-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #5bbfc1;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 20px;
+            font-weight: bold;
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            right: 0;
+            top: 100%;
             background-color: #fff;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            transition: transform 0.2s ease-in-out;
+            border-radius: 5px;
+            width: 200px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            display: none;
+        }
+
+        .avatar-dropdown-container:hover .dropdown-menu {
+            display: block;
+        }
+
+        .dropdown-menu .dropdown-item {
+            padding: 10px 15px;
+            text-decoration: none;
+            color: #333;
+            border-bottom: 1px solid #ddd;
+            display: block;
+        }
+
+        .dropdown-menu .dropdown-item:last-child {
+            border-bottom: none;
+        }
+
+        .dropdown-menu .dropdown-item:hover {
+            background-color: #f1f1f1;
+        }
+
+        .container {
+            max-width: 900px;
+            margin-top: 80px; /* Space for fixed header */
+            padding: 20px;
         }
-        .menu-card:hover {
-            transform: translateY(-5px);
+
+        .menu-card {
+            max-width: 350px;
+            border-radius: 15px;
+            background-color: #fff;
+            margin: 0 auto 20px;
         }
+
         .menu-image {
-            height: 180px;
+            height: 200px;
             width: 100%;
             object-fit: cover;
-            border-radius: 20px 20px 0 0;
-        }
-        .card-body {
-            padding: 15px;
+            border-radius: 15px 15px 0 0;
         }
+
         .card-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-            color: #333;
-            margin-bottom: 5px;
+            font-size: 1.2rem;
+            font-weight: bold;
+            margin: 10px 0;
         }
+
         .card-text {
             font-size: 1rem;
-            color: #e67e22;
-            font-weight: 500;
-            margin-bottom: 10px;
+            color: #6c757d;
         }
+
         .btn-primary {
-            font-size: 14px;
-            font-weight: 600;
-            border-radius: 8px;
-            padding: 8px 20px;
-            background-color: #e67e22;
-            border-color: #e67e22;
-            transition: background-color 0.3s ease;
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+            font-size: 13px;
+            font-weight: bold;
+            border-radius: 5px;
+            width: 100px;
         }
+
         .btn-primary:hover {
-            background-color: #d35400;
-            border-color: #d35400;
-        }
-        .btn-primary:active,
-        .btn-primary:focus {
-            background-color: #d35400;
-            border-color: #d35400;
-            box-shadow: none;
-        }
-        .customizable-label {
-            font-size: 0.85rem;
-            color: #888;
-            font-style: italic;
+            background-color: #109835;
+            border-color: #109835;
         }
+
         .view-cart-container {
             position: fixed;
             bottom: 20px;
             right: 20px;
             z-index: 999;
         }
+
         .view-cart-button {
-            background-color: #e67e22;
+            background-color: #0FAA39;
             color: #fff;
-            padding: 12px 25px;
-            border-radius: 50px;
+            padding: 10px 20px;
+            border-radius: 30px;
             font-size: 1rem;
-            font-weight: 600;
+            font-weight: bold;
             text-decoration: none;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background-color 0.3s ease;
-        }
+            box-shadow: 0px ව
+
         .view-cart-button:hover {
-            background-color: #d35400;
+            background-color: #109835;
             text-decoration: none;
+            color: #fff;
         }
-        /* Modal Styling */
-        .modal-content {
-            border-radius: 15px;
-            padding: 20px;
-        }
-        .modal-header {
-            border-bottom: none;
-            padding-bottom: 0;
+
+        .form-check {
+            display: inline-flex;
+            align-items: center;
+            margin: 0 15px 10px 0;
         }
-        .modal-title {
-            font-size: 1.3rem;
-            font-weight: 600;
-            color: #333;
+
+        .custom-radio {
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #4CAF50;
+            border-radius: 50%;
+            margin-right: 8px;
+            cursor: pointer;
+            position: relative;
         }
-        .modal-body img {
-            width: 100%;
-            height: 200px;
-            object-fit: cover;
-            border-radius: 10px;
-            margin-bottom: 15px;
+
+        .custom-radio:checked {
+            background-color: #4CAF50;
         }
-        .modal-body p {
-            font-size: 0.95rem;
-            color: #666;
+
+        .form-check-label {
+            font-size: 16px;
         }
-        .modal-body h6 {
-            font-size: 1rem;
-            font-weight: 600;
-            color: #333;
-            margin-top: 15px;
+
+        .addon-section {
+            background-color: #fff;
+            border: 2px solid #6c757d;
+            border-radius: 8px;
+            padding: 12px;
             margin-bottom: 10px;
         }
-        .modal-body .form-check-label {
-            font-size: 0.9rem;
-            color: #555;
+
+        .addon-section h6 {
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #343a40;
         }
-        .modal-body .form-check-input {
+
+        .addon-section .form-check-input {
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #343a40;
+            border-radius: 5px;
+            background-color: #f0f0f0;
             margin-right: 10px;
         }
-        .modal-body .price {
-            font-size: 0.85rem;
-            color: #e67e22;
-            font-weight: 500;
-            margin-left: 5px;
-        }
-        .modal-body textarea {
-            width: 100%;
-            border-radius: 8px;
-            border: 1px solid #ddd;
-            padding: 10px;
-            font-size: 0.9rem;
-            resize: none;
+
+        .addon-section .form-check-input:checked {
+            background-color: #006400;
+            border-color: #006400;
         }
+
         .modal-footer {
-            border-top: none;
-            padding-top: 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
-        .modal-footer .btn {
-            background-color: #e67e22;
-            border-color: #e67e22;
-            font-weight: 600;
-            border-radius: 8px;
-            padding: 10px 20px;
+
+        .modal-footer .d-flex {
+            gap: 10px;
+        }
+
+        .modal-footer .form-control {
+            width: 50px;
+            height: 40px;
+            text-align: center;
         }
-        .modal-footer .btn:hover {
-            background-color: #d35400;
-            border-color: #d35400;
+
+        .modal-footer .btn-primary {
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+            padding: 10px 20px;
         }
     </style>
 </head>
 <body>
-    <div class="container mt-4">
-        <h1 class="text-center">Menu</h1>
-        <!-- Display menu items -->
+    <div class="fixed-top-bar">
+        <div class="search-bar-container">
+            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
+            <i class="bi bi-search search-icon"></i>
+        </div>
+        <div class="avatar-dropdown-container">
+            <div class="avatar-icon">
+                <span>{{ first_letter }}</span>
+            </div>
+            <div class="dropdown-menu">
+                <a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
+                <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
+                <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <form method="get" action="/menu" class="text-center mb-4">
+            <label class="form-label fw-bold">Select a Category:</label>
+            <div>
+                {% for category in categories %}
+                <div class="form-check form-check-inline">
+                    <input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" 
+                        class="custom-radio" {% if selected_category == category %}checked{% endif %} 
+                        onchange="this.form.submit()">
+                    <label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
+                </div>
+                {% endfor %}
+                <div class="form-check form-check-inline">
+                    <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" 
+                        class="custom-radio" {% if selected_category == "Customized Dish" %}checked{% endif %} 
+                        onchange="this.form.submit()">
+                    <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
+                </div>
+            </div>
+        </form>
+
+        {% if selected_category == "Customized Dish" %}
+        <div id="custom-dish-form" class="mt-4">
+            <h3>Create Your Custom Dish</h3>
+            <form method="POST" action="/generate_custom_dish">
+                <div class="mb-3">
+                    <label for="custom-dish-name" class="form-label">Dish Name</label>
+                    <input type="text" class="form-control" id="custom-dish-name" name="name" required>
+                </div>
+                <div class="mb-3">
+                    <label for="custom-dish-description" class="form-label">Dish Description</label>
+                    <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
+                </div>
+                <button type="submit" class="btn btn-primary">Submit</button>
+            </form>
+        </div>
+        {% else %}
+        <h1 class="text-center mb-4">Menu</h1>
         {% 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">
-                            <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                            <div class="card-body">
-                                <h5 class="card-title">{{ item.Name }}</h5>
-                                <p class="card-text">${{ item.Price__c }}</p>
-                                <div class="menu-item-wrapper d-flex justify-content-between align-items-center">
-                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
-                                        onclick="showItemDetails('{{ item.Name }}', '{{ item.Price_c }}', '{{ item.Image2c }}', '{{ item.Descriptionc }}', '{{ item.Section_c }}', '{{ selected_category }}')">
-                                        Add
-                                    </button>
-                                    <span class="customizable-label">Customizable</span>
-                                </div>
-                            </div>
-                        </div>
+        <h3>{{ section }}</h3>
+        <div class="row">
+            {% for item in items %}
+            <div class="col-md-6 mb-4">
+                <div class="card menu-card">
+                    <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" 
+                        onerror="this.src='/static/placeholder.jpg';">
+                    <div class="card-body">
+                        <h5 class="card-title">{{ item.Name }}</h5>
+                        <p class="card-text">${{ item.Price__c }}</p>
+                        <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>
                     </div>
-                {% endfor %}
+                </div>
             </div>
+            {% endfor %}
+        </div>
         {% endfor %}
+        {% endif %}
+    </div>
+
+    <div class="view-cart-container">
+        <a href="/cart" class="view-cart-button">View Cart</a>
     </div>
 
-    <!-- Modal for Item Details -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg">
+        <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="modal-name"></h5>
+                    <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="modal-img" src="" alt="Item Image">
-                    <p id="modal-description"></p>
-                    <h6 id="modal-price"></h6>
-
-                    <!-- Customization Options -->
-                    <h6>Choose Oil/Ghee Preference</h6>
-                    <div class="d-flex flex-wrap">
-                        <div class="form-check me-3">
-                            <input class="form-check-input" type="radio" name="oilPreference" id="ghee">
-                            <label class="form-check-label" for="ghee">Ghee</label>
-                        </div>
-                        <div class="form-check me-3">
-                            <input class="form-check-input" type="radio" name="oilPreference" id="butter">
-                            <label class="form-check-label" for="butter">Butter</label>
-                        </div>
-                        <div class="form-check me-3">
-                            <input class="form-check-input" type="radio" name="oilPreference" id="mustardOil">
-                            <label class="form-check-label" for="mustardOil">Mustard Oil</label>
-                        </div>
-                        <div class="form-check">
-                            <input class="form-check-input" type="radio" name="oilPreference" id="oliveOil">
-                            <label class="form-check-label" for="oliveOil">Olive Oil</label>
-                        </div>
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" 
+                        style="max-height: 200px; object-fit: cover;">
+                    <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="mt-4">
+                        <h6>Customization Options</h6>
+                        <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
-
-                    <h6>Extra Add-ons</h6>
-                    <div class="d-flex flex-wrap">
-                        <div class="form-check me-3">
-                            <input class="form-check-input" type="checkbox" id="extraPaneer">
-                            <label class="form-check-label" for="extraPaneer">Extra Paneer <span class="price">($2)</span></label>
-                        </div>
-                        <div class="form-check me-3">
-                            <input class="form-check-input" type="checkbox" id="extraButter">
-                            <label class="form-check-label" for="extraButter">Extra Butter <span class="price">($2)</span></label>
-                        </div>
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="extraCream">
-                            <label class="form-check-label" for="extraCream">Extra Cream <span class="price">($2)</span></label>
-                        </div>
-                    </div>
-
-                    <h6>Accompaniments</h6>
-                    <div class="d-flex flex-wrap">
-                        <div class="form-check me-3">
-                            <input class="form-check-input" type="checkbox" id="butterRoti">
-                            <label class="form-check-label" for="butterRoti">Butter Roti <span class="price">($1)</span></label>
-                        </div>
-                        <div class="form-check me-3">
-                            <input class="form-check-input" type="checkbox" id="jeeraRice">
-                            <label class="form-check-label" for="jeeraRice">Jeera Rice <span class="price">($1)</span></label>
-                        </div>
-                        <div class="form-check me-3">
-                            <input class="form-check-input" type="checkbox" id="plainRice">
-                            <label class="form-check-label" for="plainRice">Plain Rice <span class="price">($1)</span></label>
-                        </div>
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="bagaraRice">
-                            <label class="form-check-label" for="bagaraRice">Bagara Rice <span class="price">($1)</span></label>
-                        </div>
-                    </div>
-
-                    <h6>Special Request</h6>
-                    <textarea rows="3" placeholder="Enter any special instructions here..."></textarea>
-
-                    <!-- Spice Level (Optional) -->
-                    <h6>Spice Level</h6>
-                    <div class="d-flex">
-                        <div class="form-check me-3">
-                            <input class="form-check-input" type="radio" name="spiceLevel" id="mild">
-                            <label class="form-check-label" for="mild">Mild</label>
-                        </div>
-                        <div class="form-check me-3">
-                            <input class="form-check-input" type="radio" name="spiceLevel" id="medium">
-                            <label class="form-check-label" for="medium">Medium</label>
-                        </div>
-                        <div class="form-check">
-                            <input class="form-check-input" type="radio" name="spiceLevel" id="spicy">
-                            <label class="form-check-label" for="spicy">Spicy</label>
-                        </div>
+                    <div class="mt-4">
+                        <h6>Custom Request</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>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-primary">Add to Cart</button>
+                    <div class="d-flex align-items-center">
+                        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
+                        <input type="text" class="form-control" id="quantityInput" value="1" readonly>
+                        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
+                    </div>
+                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="view-cart-container">
-        <a href="/cart" class="view-cart-button">
-            View Cart
-        </a>
-    </div>
-
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script>
+        // Your JavaScript remains the same
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = '$' + price;
+            document.getElementById('modal-price').innerText = `$${price}`;
             document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
+            document.getElementById('addons-list').innerHTML = 'Loading customization options...';
+            document.getElementById('modal-instructions').value = '';
+            document.getElementById('quantityInput').value = 1;
+
+            const modalSectionEl = document.getElementById('modal-section');
+            modalSectionEl.setAttribute('data-section', section);
+            modalSectionEl.setAttribute('data-category', selectedCategory);
+
+            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>';
+                        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');
+                        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}">
+                                <label class="form-check-label" for="${optionId}">
+                                    ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
+                                </label>
+                            `;
+                            optionsContainer.appendChild(listItem);
+                        });
+                        sectionDiv.appendChild(optionsContainer);
+                        addonsList.appendChild(sectionDiv);
+                    });
+                })
+                .catch(err => {
+                    console.error('Error fetching add-ons:', err);
+                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
+                });
         }
-    </script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+        document.addEventListener('click', function(event) {
+            if (event.target.classList.contains('addon-option')) {
+                handleAddonClick(event.target);
+            }
+        });
+
+        function handleAddonClick(checkbox) {
+            const groupName = checkbox.getAttribute('data-group');
+            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", 
+                "Extra Add-ons", "Make it a Combo"].includes(groupName);
+            
+            if (!isMultiSelectGroup) {
+                const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
+                checkboxes.forEach(otherCheckbox => {
+                    if (otherCheckbox !== checkbox) {
+                        otherCheckbox.checked = false;
+                    }
+                });
+            }
+        }
+
+        function filterMenu() {
+            let input = document.getElementById('searchBar').value.toLowerCase();
+            let sections = document.querySelectorAll('h3');
+            let items = document.querySelectorAll('.menu-card');
+            let matchedSections = new Set();
+            
+            items.forEach(item => {
+                let itemName = item.querySelector('.card-title').innerText.toLowerCase();
+                let itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
+                
+                if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
+                    item.style.display = 'block';
+                    matchedSections.add(item.closest('.row'));
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+            
+            sections.forEach(section => {
+                let sectionRow = section.nextElementSibling;
+                if (matchedSections.has(sectionRow)) {
+                    section.style.display = 'block';
+                    sectionRow.style.display = 'flex';
+                } else {
+                    section.style.display = 'none';
+                    sectionRow.style.display = 'none';
+                }
+            });
+        }
+
+        function addToCartFromModal() {
+            const itemName = document.getElementById('modal-name').innerText;
+            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            const itemImage = document.getElementById('modal-img').src;
+            const modalSectionEl = document.getElementById('modal-section');
+            const section = modalSectionEl.getAttribute('data-section');
+            const selectedCategory = modalSectionEl.getAttribute('data-category');
+            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+            const instructions = document.getElementById('modal-instructions').value;
+
+            if (isNaN(itemPrice)) {
+                alert('Invalid price for the item.');
+                return;
+            }
+
+            let 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)
+            }));
+
+            const cartPayload = {
+                itemName,
+                itemPrice,
+                itemImage,
+                section,
+                category: selectedCategory,
+                addons: selectedAddOns,
+                instructions,
+                quantity
+            };
+
+            fetch('/cart/add', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(cartPayload)
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('Item added to cart successfully!');
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+                    modal.hide();
+                } else {
+                    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.');
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            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) {
+                    quantityInput.value = currentQuantity - 1;
+                }
+            });
+
+            increaseBtn.addEventListener('click', function () {
+                let currentQuantity = parseInt(quantityInput.value);
+                quantityInput.value = currentQuantity + 1;
+            });
+        });
+    </script>
 </body>
 </html>