Update templates/cart.html

templates/cart.html

@@ -4,9 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Cart</title>
-    <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Bootstrap Icons -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <style>
         body {
@@ -14,15 +12,12 @@
             background-color: #fdf4e3;
             color: #333;
         }
-
-        /* Top orange bar */
         .top-bar {
             background-color: #FF6F3C;
             width: 100%;
             padding: 10px 15px;
             display: flex;
             align-items: center;
-            box-sizing: border-box;
         }
         .back-link {
             display: flex;
@@ -40,8 +35,6 @@
             font-weight: bold;
             font-size: 1rem;
         }
-
-        /* Title Styling */
         .order-heading {
             color: #000;
             font-size: 2.5rem;
@@ -49,7 +42,6 @@
             text-align: center;
             margin-top: 30px;
         }
-
         .cart-container {
             max-width: 768px;
             margin: 20px auto;
@@ -58,55 +50,26 @@
             border-radius: 10px;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
-        .cart-container2 {
-            background-color: #FFFFFF;
-            display: flex;
-            flex-direction: column;
-            padding: 10px;
-        }
         .cart-item {
             display: flex;
             align-items: flex-start;
             justify-content: space-between;
             border: 1px solid #fdf4e3;
-            padding: 30px 15px 15px;
+            padding: 15px;
             background-color: #fff;
-            box-sizing: border-box;
-            min-height: 100px;
-            position: relative;
             border-radius: 8px;
+            margin-bottom: 10px;
         }
         .remove-btn {
             border: none;
             background-color: transparent;
             cursor: pointer;
             font-size: 1.2rem;
-            margin-bottom: 10px;
-            transition: color 0.3s ease;
-            position: relative;
-            top: -35px;
-            left: 50px;
-        }
-        .remove-btn i {
             color: red;
         }
-        .remove-btn:hover {
-            color: black;
-            background-color: transparent;
-        }
-        .remove-btn:focus {
-            outline: none;
-            background-color: transparent;
-        }
-        .text-primary {
-            color: #2e7d32;
-            text-align: right;
-            font-weight: bold;
-            white-space: nowrap;
-        }
         .image-wrapper {
             width: 80px;
-            height: 80px !important;
+            height: 80px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -117,53 +80,22 @@
             object-fit: cover;
             border-radius: 5px;
             border: 1px solid #ffcc80;
-            margin: 0;
         }
         .cart-item img:hover {
             transform: scale(1.05);
         }
+        .cart-item-details {
+            flex: 1;
+            margin-left: 15px;
+        }
         .cart-item-title {
             font-size: 1.1rem;
             font-weight: bold;
         }
-        .checkout-button {
-            background-color: #A52A2A;
-            color: #ffffff;
-            padding: 12px;
-            border-radius: 8px;
-            border: none;
-            width: 100%;
-            font-size: 1rem;
-            cursor: pointer;
-            transition: background-color 0.3s, color 0.3s;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-        }
-        .checkout-button:hover {
-            background-color: #A52A2A;
-            color: #ffffff;
-        }
-        .add-back-button {
-            font-size: 1rem;
-            padding: 0;
-            width: 30px;
-            height: 30px;
-            background-color: #fff;
-            color: #0FAA39;
-            border: 2px solid #0FAA39;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-        }
-        .add-back-button:hover {
-            background-color: #0FAA39;
-            color: #fff;
-        }
-        .cart-item-details {
-            flex: 1;
-            margin-left: 15px;
+        .text-primary {
+            color: #2e7d32;
+            text-align: right;
+            font-weight: bold;
         }
         .cart-item-quantity {
             display: flex;
@@ -188,52 +120,12 @@
             margin: 0 5px;
         }
         .cart-summary {
-            position: relative;
             text-align: left;
             margin-top: 15px;
             padding: 20px;
             background-color: #fff;
             border-radius: 12px;
             border: 2px solid #fdf4e3;
-            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-        }
-        .cart-item-instructions {
-            word-wrap: break-word;
-            white-space: normal;
-            overflow: hidden;
-            max-width: 100%;
-            word-break: break-word;
-        }
-        .coupon-selection {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 1rem;
-            margin-bottom: 20px;
-            position: relative;
-        }
-        .coupon-selection label {
-            font-weight: bold;
-            color: black;
-        }
-        .coupon-selection a {
-            color: #007bff;
-            font-size: 1rem;
-            text-decoration: none;
-            text-align: right;
-        }
-        #couponDropdown {
-            width: 30%;
-            display: none;
-            background-color: #fff;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            margin-top: 10px;
-            margin-left: auto;
-            margin-right: 0;
-        }
-        #couponDropdown.show {
-            display: block;
         }
         .bill-details {
             display: grid;
@@ -259,287 +151,25 @@
             grid-template-columns: 1fr 1fr;
             font-weight: 600;
             font-size: 1.2rem;
-            margin-top: 10px;
-            margin-bottom: 10px;
-        }
-        .total-bill .label {
-            font-size: 1.1rem;
         }
         .total-bill .amount {
             text-align: right;
-            font-size: 1.1rem;
             color: #2e7d32;
         }
-        .cart-summary.has-dropdown {
-            margin-bottom: 80px;
-        }
-        .suggestion-section {
-            margin-top: 25px;
-            padding: 15px;
-            background-color: #fff;
-            border-radius: 10px;
-            border: 2px solid #fdf4e3;
-        }
-        .suggestion-items-container {
-            display: flex;
-            overflow-x: auto;
-            gap: 10px;
-            padding-bottom: 10px;
-            padding-top: 10px;
-        }
-        .suggestion-item {
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            flex-shrink: 0;
-            width: 160px;
-            padding: 10px;
-            border-radius: 8px;
-            background-color: #fff;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease;
-            margin-right: 10px;
-            position: relative;
-            text-align: left;
-            overflow: visible;
-            border: 2px solid #fdf4e3;
-        }
-        .suggestion-item:hover {
-            transform: scale(1.05);
-        }
-        .suggestion-item img {
-            width: 50px;
-            height: 50px;
-            object-fit: cover;
-            border-radius: 5px;
-            margin-right: 12px;
-        }
-        .suggestion-item div {
-            flex-grow: 1;
-            text-align: left;
-        }
-        .suggestion-items-container::-webkit-scrollbar {
-            height: 8px;
-        }
-        .suggestion-items-container::-webkit-scrollbar-thumb {
-            background-color: #fff;
-            border-radius: 4px;
-        }
-        .suggestion-items-container::-webkit-scrollbar-track {
-            background-color: #f1f1f1;
-        }
-        .cart-item-actions {
-            display: flex;
-            align-items: flex-start;
-            margin-left: auto;
-        }
-
-        /* Modal Styles */
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
-        }
-        .modal-content {
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 10px;
-            width: 90%;
-            max-width: 600px;
-            max-height: 80vh;
-            overflow-y: auto;
-            position: relative;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-        }
-        .modal-content h3 {
-            text-align: center;
-            margin-bottom: 20px;
-            color: #333;
-        }
-        .close-modal {
-            position: absolute;
-            top: 10px;
-            right: 15px;
-            font-size: 1.5rem;
-            cursor: pointer;
-            color: #333;
-        }
-        .menu-items-container {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            padding: 10px;
-        }
-        .menu-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: calc(50% - 10px);
-            padding: 10px;
+        .checkout-button {
+            background-color: #A52A2A;
+            color: #ffffff;
+            padding: 12px;
             border-radius: 8px;
-            background-color: #fff;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-            border: 2px solid #fdf4e3;
-            position: relative;
-            min-height: 70px;
-        }
-        .menu-item img {
-            width: 50px;
-            height: 50px;
-            object-fit: cover;
-            border-radius: 5px;
-            margin-right: 10px;
-            border: 1px solid #ffcc80;
-        }
-        .menu-item:hover img {
-            transform: scale(1.05);
-        }
-        .menu-item-details {
-            flex-grow: 1;
-            font-size: 0.9rem;
-        }
-        .menu-item-details strong {
-            font-size: 1rem;
-        }
-        .menu-item-details small {
-            display: block;
-            color: #666;
-            font-size: 0.8rem;
-        }
-        .quantity-selector {
-            display: none;
-            align-items: center;
-        }
-        .quantity-selector button {
-            width: 28px;
-            height: 28px;
             border: none;
-            background-color: #f0f0f0;
+            width: 100%;
             font-size: 1rem;
-            font-weight: bold;
             cursor: pointer;
-            border-radius: 4px;
-        }
-        .quantity-selector input {
-            width: 40px;
-            text-align: center;
-            border: none;
-            background-color: #f8f9fa;
-            font-size: 1rem;
-            margin: 0 5px;
-            border-radius: 4px;
-        }
-        .customization-section {
-            display: none;
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            background-color: #fff;
-            padding: 15px;
-            border-radius: 8px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            border: 2px solid #fdf4e3;
-            max-height: 300px;
-            overflow-y: auto;
-        }
-        .customization-section.show {
-            display: block;
-        }
-        .customization-section h4 {
-            font-size: 1.2rem;
-            margin-bottom: 10px;
-        }
-        .customization-section label {
-            display: block;
-            margin-bottom: 5px;
-            font-size: 0.9rem;
-        }
-        .customization-section textarea {
-            width: 100%;
-            height: 60px;
-            margin-top: 10px;
-            padding: 5px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            font-size: 0.9rem;
-        }
-        .customization-actions {
-            display: flex;
-            justify-content: space-between;
             margin-top: 15px;
         }
-        .customization-actions button {
-            padding: 8px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            width: 48%;
-            text-align: center;
-            font-size: 0.9rem;
-            color: #fff;
-        }
-        .add-to-cart-btn {
-            background-color: #A52A2A;
-        }
-        .cancel-customization-btn {
-            background-color: #6c757d;
-        }
-        .bill-item {
-            display: flex;
-            justify-content: space-between;
-            padding: 10px 0;
-            border-bottom: 1px solid #f0f0f0;
-        }
-        .bill-item-details {
-            flex: 1;
-        }
-        .bill-item-details small {
-            display: block;
-            color: #666;
-        }
-        .bill-item-price {
-            font-weight: bold;
-            color: #2e7d32;
-        }
-        .bill-summary {
-            margin-top: 20px;
-        }
-        .modal-actions {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 20px;
-        }
-        .action-btn {
-            padding: 10px;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            width: 48%;
-            text-align: center;
-            color: #fff;
-        }
-        .view-bill-btn {
-            background-color: #A52A2A;
-        }
-        .cancel-btn {
-            background-color: #6c757d;
-        }
-        .confirm-order-btn {
-            background-color: #A52A2A;
-        }
     </style>
 </head>
 <body>
-    <!-- Top Orange Label Bar -->
     <div class="top-bar">
         <a href="/menu" class="back-link">
             <span class="back-arrow">⟨</span>
@@ -547,161 +177,56 @@
         </a>
     </div>
 
-    <!-- Order History Title -->
     <div class="order-heading">Your Cart</div>
 
     <div class="container">
         <div class="cart-container">
-            <div class="cart-container2">
-                {% for item in cart_items %}
-                    <div class="cart-item">
-                        <div class="image-wrapper">
-                            <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+            {% for item in cart_items %}
+                <div class="cart-item">
+                    <div class="image-wrapper">
+                        <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+                    </div>
+                    <div class="cart-item-details">
+                        <div class="cart-item-title">{{ item.Name }}</div>
+                        <div class="cart-item-addons">
+                            <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
                         </div>
-                        <div class="cart-item-details">
-                            <div class="cart-item-title">{{ item.Name }}</div>
-                            <div class="cart-item-addons">
-                                <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
-                            </div>
-                            <div class="cart-item-instructions">
-                                <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
-                            </div>
-                            <div class="cart-item-quantity mt-2">
-                                <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
-                                <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
-                                <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
-                            </div>
+                        <div class="cart-item-instructions">
+                            <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
                         </div>
-                        <div class="cart-item-actions">
-                            <button type="button" class="btn btn-light text-dark remove-btn" onclick="removeItemFromCart('{{ item.Name }}')">
-                                <i class="bi bi-trash"></i>
-                            </button>
-                            <div class="text-primary">${{ item.Price__c }}</div>
+                        <div class="cart-item-quantity mt-2">
+                            <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
+                            <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
+                            <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
                         </div>
                     </div>
-                {% else %}
-                    <p>No items in your cart.</p>
-                {% endfor %}
-            </div>
-
-            <!-- Suggestions Section -->
-            {% if suggestions %}
-                <div class="suggestion-section">
-                    <h5>Complete Your Meal</h5>
-                    <div class="suggestion-items-container">
-                        {% for suggestion in suggestions %}
-                            <div class="suggestion-item">
-                                <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                                <div>
-                                    <div>{{ suggestion.Name }}</div>
-                                    <div class="text-muted">${{ suggestion.Price__c }}</div>
-                                </div>
-                                <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}')">+</button>
-                            </div>
-                        {% endfor %}
+                    <div class="cart-item-actions">
+                        <button type="button" class="remove-btn" onclick="removeItemFromCart('{{ item.Name }}')">
+                            <i class="bi bi-trash"></i>
+                        </button>
+                        <div class="text-primary">${{ item.Price__c }}</div>
                     </div>
                 </div>
-            {% endif %}
+            {% else %}
+                <p>No items in your cart.</p>
+            {% endfor %}
 
-            <!-- Subtotal -->
             <div class="cart-summary">
-                {% if coupons %}
-                    <div class="coupon-selection d-flex justify-content-between align-items-center">
-                        <label class="text-dark font-weight-bold mb-0">Apply Coupon</label>
-                        <a href="javascript:void(0);" id="applyCouponLink" onclick="toggleCouponDropdown()" class="text-primary">+ Apply Coupon</a>
-                    </div>
-                    <select id="couponDropdown" class="form-select mt-2" style="display:none;" onchange="calculateDiscount()">
-                        <option value="">Select a coupon</option>
-                        {% for coupon in coupons %}
-                            <option value="{{ coupon }}">{{ coupon }}</option>
-                        {% endfor %}
-                    </select>
-                {% endif %}
-
-                <div class="bill-details">
-                    <div class="label">Cart Total</div>
-                    <div class="amount">${{ subtotal }}</div>
-                    <div class="label">Discount</div>
-                    <div class="amount" id="discountText">-${{ discount }}</div>
-                </div>
-
-                <div class="dotted-line"></div>
-
-                <div class="total-bill">
-                    <div class="label">To Pay</div>
-                    <div class="amount" id="totalBillText">${{ subtotal }}</div>
-                </div>
-                <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Anything Else Modal -->
-    <div class="modal" id="anythingElseModal">
-        <div class="modal-content">
-            <span class="close-modal" onclick="closeAnythingElseModal()">×</span>
-            <h3>Anything Else You Want?</h3>
-            <div class="menu-items-container" id="menuItems"></div>
-            <div class="modal-actions">
-                <button class="action-btn view-bill-btn" onclick="showBill()">View Bill</button>
-                <button class="action-btn cancel-btn" onclick="closeAnythingElseModal()">Cancel</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Bill Modal -->
-    <div class="modal" id="billModal">
-        <div class="modal-content">
-            <span class="close-modal" onclick="closeBillModal()">×</span>
-            <h3>Your Bill</h3>
-            <div id="billItems"></div>
-            <div class="bill-summary">
                 <div class="bill-details">
                     <div class="label">Subtotal</div>
-                    <div class="amount" id="billSubtotal">$0.00</div>
-                    <div class="label">Discount</div>
-                    <div class="amount" id="billDiscount">$0.00</div>
+                    <div class="amount">${{ subtotal }}</div>
                 </div>
                 <div class="dotted-line"></div>
                 <div class="total-bill">
                     <div class="label">Total</div>
-                    <div class="amount" id="billTotal">$0.00</div>
+                    <div class="amount">${{ subtotal }}</div>
                 </div>
-            </div>
-            <div class="modal-actions">
-                <button class="action-btn confirm-order-btn" onclick="submitOrder()">Confirm Order</button>
-                <button class="action-btn cancel-btn" onclick="closeBillModal()">Cancel</button>
+                <button class="checkout-button" onclick="proceedToBill()">Generate Bill</button>
             </div>
         </div>
     </div>
 
     <script>
-        let currentCart = null;
-        let menuItems = [];
-        let selectedItem = null;
-        let availableAddOns = [];
-
-        // Fetch add-ons when the modal is opened
-        function fetchAddOns() {
-            return fetch('/cart/fetch_add_ons', {
-                method: 'GET',
-                headers: { 'Content-Type': 'application/json' }
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    availableAddOns = data.add_ons;
-                } else {
-                    console.error('Error fetching add-ons:', data.error);
-                    availableAddOns = [];
-                }
-            })
-            .catch(err => {
-                console.error('Error fetching add-ons:', err);
-                availableAddOns = [];
-            });
-        }
-
         function updateQuantity(action, itemName, customerEmail) {
             let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
             let quantity = parseInt(quantityInput.value);
@@ -723,13 +248,6 @@
             .then(data => {
                 if (data.success) {
                     quantityInput.value = quantity;
-                    let itemElement = quantityInput.closest(".cart-item");
-                    if (itemElement) {
-                        let basePriceElement = itemElement.querySelector(".text-primary");
-                        if (basePriceElement && data.new_item_price) {
-                            basePriceElement.innerText = `$${data.new_item_price.toFixed(2)}`;
-                        }
-                    }
                     location.reload();
                 } else {
                     alert("Error updating quantity: " + data.error);
@@ -738,288 +256,6 @@
             .catch(err => console.error("Error:", err));
         }
 
-        function toggleCouponDropdown() {
-            let couponDropdown = document.getElementById('couponDropdown');
-            if (couponDropdown.style.display === "none" || couponDropdown.style.display === "") {
-                couponDropdown.style.display = "block";
-            } else {
-                couponDropdown.style.display = "none";
-            }
-        }
-
-        function calculateDiscount() {
-            let couponDropdown = document.getElementById('couponDropdown');
-            let selectedCoupon = couponDropdown.value.trim();
-            let subtotal = parseFloat("{{ subtotal }}");
-            if (selectedCoupon && selectedCoupon.toLowerCase() !== "none") {
-                let discount = subtotal * 0.10;
-                let total = subtotal - discount;
-                document.getElementById("discountText").innerText = `$${discount.toFixed(2)}`;
-                document.getElementById("totalBillText").innerText = `$${total.toFixed(2)}`;
-            } else {
-                document.getElementById("discountText").innerText = `$0.00`;
-                document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
-            }
-        }
-
-        function proceedToOrder() {
-            let couponDropdown = document.getElementById('couponDropdown');
-            let selectedCoupon = "";
-            if (couponDropdown) {
-                selectedCoupon = couponDropdown.value ? couponDropdown.value.trim() : "";
-            }
-            if (selectedCoupon === "" || selectedCoupon === "None" || selectedCoupon === "Null") {
-                selectedCoupon = null;
-            }
-            // Fetch add-ons before displaying the modal
-            fetchAddOns().then(() => {
-                fetch('/cart/checkout', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ selectedCoupon: selectedCoupon })
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        currentCart = data.cart;
-                        menuItems = data.menu_items;
-                        displayAnythingElse();
-                    } else {
-                        alert(data.error || data.message);
-                    }
-                })
-                .catch(err => {
-                    console.error('Error during checkout:', err);
-                    alert('An error occurred. Please try again.');
-                });
-            });
-        }
-
-        function displayAnythingElse() {
-            const menuItemsContainer = document.getElementById('menuItems');
-            menuItemsContainer.innerHTML = '';
-            menuItems.forEach(item => {
-                const itemElement = document.createElement('div');
-                itemElement.className = 'menu-item';
-                itemElement.innerHTML = `
-                    <img src="${item.Image1__c}" alt="${item.Name}" onerror="this.src='/static/placeholder.jpg';">
-                    <div class="menu-item-details">
-                        <strong>${item.Name}</strong>
-                        <small>${item.Veg_NonVeg__c} | ${item.Section__c}</small>
-                        <small>$${item.Price__c.toFixed(2)}</small>
-                    </div>
-                    <button class="add-back-button" onclick="showQuantitySelector('${item.Name}', ${item.Price__c}, '${item.Image1__c}', this)">+</button>
-                    <div class="quantity-selector" data-item-name="${item.Name}">
-                        <button onclick="updateMenuItemQuantity('${item.Name}', 'decrease')">-</button>
-                        <input type="text" value="1" readonly data-item-name="${item.Name}">
-                        <button onclick="updateMenuItemQuantity('${item.Name}', 'increase')">+</button>
-                    </div>
-                    <div class="customization-section" data-item-name="${item.Name}">
-                        <h4>Customize ${item.Name}</h4>
-                        <div id="addOns-${item.Name}">
-                            <!-- Add-ons will be populated dynamically -->
-                        </div>
-                        <div>
-                            <strong>Special Instructions</strong>
-                            <textarea placeholder="e.g., Less spicy"></textarea>
-                        </div>
-                        <div class="customization-actions">
-                            <button class="add-to-cart-btn" onclick="addToCartWithCustomizations('${item.Name}', ${item.Price__c}, '${item.Image1__c}')">Add to Cart</button>
-                            <button class="cancel-customization-btn" onclick="cancelCustomization('${item.Name}')">Cancel</button>
-                        </div>
-                    </div>
-                `;
-                menuItemsContainer.appendChild(itemElement);
-                // Populate add-ons for this item
-                const addOnsContainer = document.getElementById(`addOns-${item.Name}`);
-                addOnsContainer.innerHTML = `
-                    <strong>Add-Ons</strong>
-                    ${availableAddOns.length > 0 ? availableAddOns.map(addon => `
-                        <label>
-                            <input type="checkbox" value="${addon.name}" data-price="${addon.price}">
-                            ${addon.name}
-                        </label>
-                    `).join('') : '<p>No add-ons available</p>'}
-                `;
-            });
-            document.getElementById('anythingElseModal').style.display = 'flex';
-        }
-
-        function showQuantitySelector(itemName, itemPrice, itemImage, buttonElement) {
-            // Hide all quantity selectors and customization sections
-            document.querySelectorAll('.quantity-selector').forEach(selector => {
-                selector.style.display = 'none';
-                selector.querySelector('input').value = 1; // Reset quantity
-            });
-            document.querySelectorAll('.customization-section').forEach(section => {
-                section.classList.remove('show');
-                section.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
-                    checkbox.checked = false; // Reset add-ons
-                });
-                section.querySelector('textarea').value = ''; // Reset instructions
-            });
-            document.querySelectorAll('.add-back-button').forEach(btn => {
-                btn.style.display = 'inline-block';
-            });
-
-            // Show quantity selector and customization for the clicked item
-            const quantitySelector = buttonElement.nextElementSibling;
-            quantitySelector.style.display = 'flex';
-            buttonElement.style.display = 'none';
-
-            const customizationSection = quantitySelector.nextElementSibling;
-            customizationSection.classList.add('show');
-
-            selectedItem = { name: itemName, price: itemPrice, image: itemImage };
-        }
-
-        function updateMenuItemQuantity(itemName, action) {
-            const quantityInput = document.querySelector(`.quantity-selector[data-item-name="${itemName}"] input`);
-            let quantity = parseInt(quantityInput.value);
-            if (action === 'increase') {
-                quantity++;
-            } else if (action === 'decrease' && quantity > 1) {
-                quantity--;
-            }
-            if (isNaN(quantity) || quantity < 1) {
-                quantity = 1;
-            }
-            quantityInput.value = quantity;
-        }
-
-        function cancelCustomization(itemName) {
-            const quantitySelector = document.querySelector(`.quantity-selector[data-item-name="${itemName}"]`);
-            const customizationSection = quantitySelector.nextElementSibling;
-            const addButton = quantitySelector.previousElementSibling;
-
-            // Reset quantity
-            quantitySelector.querySelector('input').value = 1;
-            // Hide quantity selector and customization section
-            quantitySelector.style.display = 'none';
-            customizationSection.classList.remove('show');
-            // Show add button
-            addButton.style.display = 'inline-block';
-            // Reset add-ons and instructions
-            customizationSection.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
-                checkbox.checked = false;
-            });
-            customizationSection.querySelector('textarea').value = '';
-        }
-
-        function addToCartWithCustomizations(itemName, itemPrice, itemImage) {
-            const quantitySelector = document.querySelector(`.quantity-selector[data-item-name="${itemName}"]`);
-            const quantity = parseInt(quantitySelector.querySelector('input').value);
-            if (isNaN(quantity) || quantity < 1) {
-                alert('Invalid quantity!');
-                return;
-            }
-            const customizationSection = document.querySelector(`.customization-section[data-item-name="${itemName}"]`);
-            const addOns = Array.from(customizationSection.querySelectorAll('input[type="checkbox"]:checked')).map(checkbox => checkbox.value);
-            const instructions = customizationSection.querySelector('textarea').value.trim();
-            const customerEmail = "{{ customer_email }}";
-
-            const data = {
-                item_name: itemName,
-                item_price: itemPrice,
-                item_image: itemImage,
-                addons: addOns,
-                instructions: instructions,
-                customer_email: customerEmail,
-                quantity: quantity
-            };
-
-            fetch('/cart/add_suggestion_to_cart', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Item added to cart!');
-                    location.reload();
-                } else {
-                    alert('Error adding item to cart: ' + data.error);
-                }
-            })
-            .catch(err => {
-                console.error('Error adding item:', err);
-                alert('An error occurred while adding the item to the cart.');
-            });
-        }
-
-        function closeAnythingElseModal() {
-            document.getElementById('anythingElseModal').style.display = 'none';
-            // Reset all quantity selectors and customization sections
-            document.querySelectorAll('.quantity-selector').forEach(selector => {
-                selector.style.display = 'none';
-                selector.querySelector('input').value = 1;
-            });
-            document.querySelectorAll('.customization-section').forEach(section => {
-                section.classList.remove('show');
-                section.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
-                    checkbox.checked = false;
-                });
-                section.querySelector('textarea').value = '';
-            });
-            document.querySelectorAll('.add-back-button').forEach(btn => {
-                btn.style.display = 'inline-block';
-            });
-        }
-
-        function showBill() {
-            closeAnythingElseModal();
-            const billItemsContainer = document.getElementById('billItems');
-            billItemsContainer.innerHTML = '';
-            currentCart.items.forEach(item => {
-                const itemElement = document.createElement('div');
-                itemElement.className = 'bill-item';
-                itemElement.innerHTML = `
-                    <div class="bill-item-details">
-                        <strong>${item.name} x${item.quantity}</strong>
-                        <small>Add-ons: ${item.addons}</small>
-                        <small>Instructions: ${item.instructions}</small>
-                    </div>
-                    <div class="bill-item-price">$${item.price.toFixed(2)}</div>
-                `;
-                billItemsContainer.appendChild(itemElement);
-            });
-            document.getElementById('billSubtotal').innerText = `$${currentCart.subtotal.toFixed(2)}`;
-            document.getElementById('billDiscount').innerText = `$${currentCart.discount.toFixed(2)}`;
-            document.getElementById('billTotal').innerText = `$${currentCart.total.toFixed(2)}`;
-            document.getElementById('billModal').style.display = 'flex';
-        }
-
-        function closeBillModal() {
-            document.getElementById('billModal').style.display = 'none';
-            currentCart = null;
-        }
-
-        function submitOrder() {
-            if (!currentCart) {
-                alert('No cart data available.');
-                return;
-            }
-            fetch('/cart/submit_order', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ cart: currentCart })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert(data.message);
-                    window.location.href = '/order';
-                } else {
-                    alert(data.error || data.message);
-                }
-            })
-            .catch(err => {
-                console.error('Error during order submission:', err);
-                alert('An error occurred during order submission. Please try again.');
-            });
-        }
-
         function removeItemFromCart(itemName) {
             fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
                 method: 'POST',
@@ -1037,32 +273,8 @@
             .catch(err => console.error('Error removing item:', err));
         }
 
-        function addToCartSuggestion(itemName, itemPrice, itemImage) {
-            const customerEmail = "{{ customer_email }}";
-            const data = {
-                item_name: itemName,
-                item_price: itemPrice,
-                item_image: itemImage,
-                addons: [],
-                instructions: "",
-                customer_email: customerEmail,
-                quantity: 1
-            };
-            fetch('/cart/add_suggestion_to_cart', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Item added to cart!');
-                    location.reload();
-                } else {
-                    alert('Error adding item to cart: ' + data.error);
-                }
-            })
-            .catch(err => console.error('Error adding item:', err));
+        function proceedToBill() {
+            window.location.href = '/bill';
         }
     </script>
 </body>