Update templates/cart.html

templates/cart.html

@@ -7,50 +7,137 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-        body {
+      
+      body {
             font-family: Arial, sans-serif;
-            background-color: #f8f9fa;
+            background-color: #f3f4f6;
+            color: #333;
         }
         .cart-container {
             max-width: 768px;
             margin: 20px auto;
             padding: 15px;
-            background-color: #fff;
+            background-color: #fdf4e3;
             border-radius: 10px;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
+       .cart-container2 {
+         background-color: #fdf4e3;
+       }
+       
+        
         .cart-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            border-bottom: 1px solid #dee2e6;
-            padding: 10px 0;
-        }
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    border: 1px solid transparent; /* Set the border to transparent */
+    padding: 30px 15px 15px; 
+    background-color: #fff;/* Padding for the content */
+    box-sizing: border-box;
+    min-height: 100px;
+    position: relative; /* Make the cart item a reference for the absolute positioning of the remove icon */
+}
+
+.remove-btn {
+    border: none; /* Remove the border around the button */
+    background-color: transparent; /* Transparent background */
+    cursor: pointer; /* Change cursor to pointer */
+    font-size: 1.5rem; /* Adjust the size of the trash icon */
+    margin-bottom: 10px; /* Add space below the delete icon */
+    transition: color 0.3s ease; /* Smooth transition for icon color */
+    position: relative; /* Make it relative for movement */
+    top: -40px; /* Move the button 10px upwards */
+    left: 50px; /* Move the button 30px to the right */
+}
+/* Hover effect */
+.remove-btn:hover {
+    color: black; /* Change the icon color to black on hover */
+    background-color: transparent; /* Keep background transparent on hover */
+}
+/* Prevent background color on focus or click */
+.remove-btn:focus {
+    outline: none; /* Remove the outline */
+    background-color: transparent; /* Keep background transparent after clicking */
+}
+.text-primary {
+    color: #000 !important; /* Ensure the price is black */
+    text-align: right; /* Center-align the price */
+    white-space: nowrap; /* Prevent price text from wrapping */
+}
+/* Default for larger screens like desktops */
+.image-wrapper {
+    width: 80px;                     /* Width of the image container */
+    height: 140px !important;         /* Height of the image container */
+    display: flex;                   /* Flex container for the image */
+    align-items: flex-start;         /* Align the image at the top */
+    justify-content: center;         /* Center image horizontally if it has space */
+}
+
+/* Responsive for mobile devices */
+
+
         .cart-item img {
-            width: 70px;
-            height: 70px;
-            object-fit: cover;
-            border-radius: 5px;
+            width: 100%;                    /* Fill the image container */
+            height: auto !important;                   /* Maintain aspect ratio */
+            object-fit: contain; 
+            border-radius: 8px;            /* Optional: rounded corners */
+            transition: transform 0.3s;/* Ensure the full image is visible */
+           
+        }
+        .cart-item img:hover {
+            transform: scale(1.05);
+        }
+        .cart-item-title {
+            font-size: 1.1rem;
+            font-weight: 400;
         }
+        
+        .checkout-button {
+           background-color: #0FAA39; /* Green background */
+           color: #fff; /* White text */
+           padding: 12px;
+           border-radius: 8px;
+           border: none;
+           width: 100%;
+           font-size: 1.2rem;
+           cursor: pointer;
+           transition: background-color 0.3s, color 0.3s;
+       }
+       .checkout-button:hover {
+           background-color: #0FAA39; /* Keep the background green on hover */
+           color: #fff; /* Keep the text white on hover */
+       }
+        .add-back-button {
+            padding: 6px 20px;
+            font-size: 0.9rem;
+            border-radius: 20px;
+            border: 1px solid #fff;
+            background-color: #fff;
+            color: #0FAA39;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .add-back-button:hover {
+            background-color: #fff;
+            color: #0FAA39;
+        }
+        
         .cart-item-details {
             flex: 1;
             margin-left: 15px;
         }
-        .cart-item-title {
-            font-size: 1rem;
-            font-weight: bold;
-        }
+       
         .cart-item-quantity {
             display: flex;
             align-items: center;
             margin-top: 5px;
         }
         .cart-item-quantity button {
-            width: 30px;
-            height: 30px;
+            width: 24px;
+            height: 24px;
             border: none;
             background-color: #f0f0f0;
-            font-size: 1rem;
+            font-size: 0.8rem;
             font-weight: bold;
             cursor: pointer;
         }
@@ -62,52 +149,214 @@
             font-size: 1rem;
             margin: 0 5px;
         }
-        .cart-summary {
-            text-align: right;
-            margin-top: 15px;
-        }
-        .checkout-button {
-            background-color: #5bbfc1;
-            color: #fff;
-            padding: 10px;
-            border-radius: 5px;
-            border: none;
-            width: 100%;
-            font-size: 1.2rem;
-            cursor: pointer;
-            margin-top: 10px;
-        }
-        .suggestion-section {
-            margin-top: 20px;
-            padding: 15px;
-            background-color: #f8f9fa;
-            border-radius: 10px;
-        }
-        .suggestion-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 10px 0;
-        }
-        .suggestion-item img {
-            width: 50px;
-            height: 50px;
-            object-fit: cover;
-            border-radius: 5px;
-        }
-        .add-back-button {
-            padding: 5px 15px;
-            font-size: 0.9rem;
-            border-radius: 20px;
-            border: 1px solid #007bff;
-            color: #007bff;
-            background-color: #5bbfc1;
-            cursor: pointer;
-        }
-        .add-back-button:hover {
-            background-color: #4a5d68;
-            color: #fff;
-        }
+    /* Make the parent container position relative */
+.cart-summary {
+    position: relative; /* Make sure dropdown is positioned relative to this container */
+    text-align: left;
+    margin-top: 15px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 12px;
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+}
+/* Coupon Section styling */
+.coupon-selection {
+    display: flex; /* Use flexbox to align items */
+    justify-content: space-between; /* Space between the label and the link */
+    align-items: center;
+    font-size: 1rem;
+    margin-bottom: 20px; /* Add space below Apply Coupon section */
+    position: relative; /* Ensure dropdown is within this container */
+}
+/* Ensure the Apply Coupon label and link are aligned correctly */
+.coupon-selection label {
+    font-weight: bold;
+    color: black;
+}
+.coupon-selection a {
+    color: #007bff; /* Blue for the link */
+    font-size: 1rem;
+    text-decoration: none;
+    text-align: right;
+}
+/* Coupon Dropdown styling */
+#couponDropdown {
+    width: 30%; /* Set dropdown to 30% of the width */
+    display: none; /* Hidden by default */
+    background-color: #fff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
+    z-index: 10; /* Ensure it's above other content */
+    margin-top: 10px; /* Add space from the link */
+    margin-left: auto; /* Push it to the right side */
+    margin-right: 0; /* Ensure it doesn't overflow outside */
+}
+/* Show the dropdown when it's active */
+#couponDropdown.show {
+    display: block;
+}
+/* Ensure Apply Coupon section aligns correctly */
+.coupon-selection {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1rem;
+    margin-bottom: 20px; /* Add space below Apply Coupon section */
+}
+/* Apply Coupon link and label styles */
+.coupon-selection label {
+    font-weight: bold;
+    color: black;
+}
+.coupon-selection a {
+    color: #007bff; /* Blue for the link */
+    font-size: 1rem;
+    text-decoration: none;
+    text-align: right;
+}
+/* Bill details grid structure */
+.bill-details {
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* Two-column layout */
+    grid-gap: 10px;
+    margin-bottom: 10px;
+}
+/* Adjust label and amount for bill details */
+.bill-details .label {
+    font-weight: 600;
+    font-size: 1rem;
+}
+.bill-details .amount {
+    text-align: right;
+    font-weight: 600;
+    font-size: 1rem;
+}
+/* Divider line between bill sections */
+.dotted-line {
+    border-bottom: 2px dotted #ccc;
+    margin: 15px 0;
+}
+/* Total bill grid layout */
+.total-bill {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    font-weight: 600;
+    font-size: 1.2rem;
+    margin-top: 10px;
+    margin-bottom: 10px; /* Add 10px space between To Pay and Submit Button */
+}
+.total-bill .label {
+    font-size: 1.1rem;
+}
+.total-bill .amount {
+    text-align: right;
+    font-size: 1.1rem;
+    color: #000; /* Changed from green to black */
+}
+/* Margin to add space for dropdown when visible */
+.cart-summary.has-dropdown {
+    margin-bottom: 80px; /* Create space below the content when dropdown is visible */
+}
+.checkout-button {
+    background-color: #0FAA39;
+    color: #fff;
+    padding: 12px;
+    border-radius: 8px;
+    border: none;
+    height: 44px;
+    width: 100%;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+.suggestion-section {
+    margin-top: 25px;
+    padding: 15px;
+    background-color: #fff;
+    border-radius: 10px;
+}
+.suggestion-items-container {
+    display: flex;
+    overflow-x: auto; /* Horizontal scrolling */
+    gap: 10px; /* Space between items */
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
+/* Styling for the suggestion item card */
+.suggestion-item {
+    display: flex; /* Align items horizontally */
+    align-items: center; /* Center image and text vertically */
+    justify-content: flex-start; /* Align items to the start (left side) */
+    flex-shrink: 0;
+    width: 160px; /* Set fixed width for each suggestion item */
+    padding: 10px;
+    border-radius: 8px; /* Rounded corners */
+    background-color: #fff;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+    margin-right: 10px; /* Ensure there's space between the cards */
+    position: relative; /* For positioning the + icon */
+    text-align: left; /* Align text to the left */
+    overflow: visible; /* Allow the button to overflow outside */
+}
+.suggestion-item:hover {
+    transform: scale(1.05); /* Slight zoom effect on hover */
+}
+.suggestion-item img {
+    width: 50px; /* Set a fixed width for the image */
+    height: 50px; /* Set a fixed height for the image */
+    object-fit: cover; /* Ensure image fits correctly without distortion */
+    border-radius: 5px; /* Rounded corners for the image */
+    margin-right: 12px; /* Space between the image and text */
+}
+.suggestion-item div {
+    flex-grow: 1; /* Allow the text section to expand and fill available space */
+    text-align: left; /* Align text to the left */
+}
+/* Styling for the + symbol button (with green border, white background, and black text) */
+.add-back-button {
+    position: absolute;
+    top: -5px;
+    right: -10px;
+    font-size: 1rem; /* Smaller font size */
+    padding: 0; /* Remove padding */
+    width: 30px; /* Set fixed width */
+    height: 30px; /* Set fixed height */
+    background-color: #fff;
+    color: #0FAA39;
+    border: 2px solid #0FAA39;
+    border-radius: 0; /* Square shape */
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+    z-index: 2; /* Increased z-index to ensure it stays above the borders */
+}
+.add-back-button:hover {
+    background-color: #fff; /* Green background on hover */
+    color: #0FAA39; /* White color for the + symbol when hovered */
+    border-color: #0FAA39; /* Green border on hover */
+    z-index: 3; /* Ensure button stays on top when hovered */
+}
+/* Ensure the scroll container works fine */
+.suggestion-items-container::-webkit-scrollbar {
+    height: 8px; /* Height of the scrollbar */
+}
+.suggestion-items-container::-webkit-scrollbar-thumb {
+    background-color: #fff; /* Green color for scrollbar thumb */
+    border-radius: 4px;
+}
+.suggestion-items-container::-webkit-scrollbar-track {
+    background-color: #f1f1f1;
+}
+     
+.cart-item-actions {
+    display: flex; /* Use flexbox to align items horizontally */
+    align-items: flex-start; /* Align the price at the top of the cart item (like the item name) */
+    margin-left: auto; /* This will push the price to the right side of the cart item */
+}
+      
     </style>
 </head>
 <body>
@@ -117,81 +366,118 @@
                 <a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
             </div>
 
-            <h4 class="mb-4">Your Cart</h4>
+             <h4 class="mb-4 fw-bold">Your Cart</h4>
 
             <!-- Cart Items -->
-            {% for item in cart_items %}
-            <div class="cart-item">
-                <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                <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">
-                       <!-- Decrease button -->
-                       <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
-                       <!-- Quantity input field -->
-                       <input type="text" value="{{ item.Quantity__c }}" readonly data-item-name="{{ item.Name }}">
-                       <!-- Increase button -->
-                       <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
-                    </div>
-                </div>
-               <div class="cart-item-actions">
-                    <div class="text-primary">
-                        $<span class="base-price">{{ item.Price__c }}</span> 
+            <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';">
+                        </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>
+                        <div class="cart-item-actions">
+                            <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+
+                            <!-- Delete Button with Trash Icon and onclick handler -->
+                            <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" style="color: #000 !important;">
+                                $<span class="base-price">{{ item.Price__c }}</span>
+                            </div>
+                        </div>
                     </div>
-                    <button class="btn btn-danger btn-sm" onclick="removeItemFromCart('{{ item.Name }}')">Remove</button>
-                </div>
+                {% else %}
+                    <!-- Code to handle the case when cart_items is empty -->
+                    <p>No items in your cart.</p>
+                {% endfor %}
             </div>
-            {% else %}
-            <p class="text-center">Your cart is empty.</p>
-            {% endfor %}
 
             <!-- Suggestions Section -->
             {% if suggestions %}
             <div class="suggestion-section">
                 <h5>Complete Your Meal</h5>
-                {% 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 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>
+                        <!-- Replace add button with a cart icon -->
+                        <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">+</button>
+                        
+                           
                     </div>
-                    <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">Add</button>
+                    {% endfor %}
                 </div>
-                {% endfor %}
             </div>
+
             {% endif %}
 
             <!-- Subtotal -->
             <div class="cart-summary">
-                <p class="fw-bold">Subtotal: ${{ subtotal }}</p>
-                {% if coupons %}
-                    <div class="coupon-selection">
-                        <label>
-                            <input type="checkbox" id="couponCheckbox" onchange="toggleCouponDropdown()">
-                            Apply Coupon Code
-                        </label>
-                        <select id="couponDropdown" class="form-select mt-2" disabled onchange="calculateDiscount()">
-                            <option value="">Select a coupon</option>
-                            {% for coupon in coupons %}
-                                <option value="{{ coupon }}">{{ coupon }}</option>
-                           {% endfor %}
-                        </select>
-                    </div>
-                {% endif %}
-                <p class="fw-bold" id="discountText">Discount: $0</p>
-                <p class="fw-bold" id="totalBillText">Total Bill: ${{ subtotal }}</p>
+                  <!-- Coupon Section -->
+                      {% 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>
+
+                          <!-- Coupon Dropdown, positioned below Apply Coupon -->
+                          <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>
 
+
     <script>
         // Example function to handle the increase/decrease button clicks
         function updateQuantity(action, itemName, customerEmail) {
@@ -203,11 +489,13 @@
             } else if (action === 'decrease' && quantity > 1) {
                 quantity--;
             }
+
             // Validate quantity
             if (isNaN(quantity) || quantity < 1) {
                 alert("Invalid quantity!");
                 return;
             }
+
             // Send updated quantity to the server
             fetch('/cart/update_quantity', {
                 method: 'POST',
@@ -223,10 +511,12 @@
                     if (itemElement) {
                         let basePriceElement = itemElement.querySelector(".base-price");
                         let addonsPriceElement = itemElement.querySelector(".addons-price");
+
                         // Update the base price
                         if (basePriceElement) {
                             basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
                         }
+
                         // Update add-ons price if needed (optional)
                         if (addonsPriceElement && data.addons_price !== undefined) {
                             addonsPriceElement.innerText = data.addons_price.toFixed(2);
@@ -235,6 +525,7 @@
                         console.error(`Parent cart item element not found for item: ${itemName}`);
                     }
                     location.reload();
+
                     // Recalculate subtotal dynamically
                     
                 } else {
@@ -244,60 +535,51 @@
             .catch(err => console.error("Error:", err));
         }
         function toggleCouponDropdown() {
-            let couponCheckbox = document.getElementById('couponCheckbox');
             let couponDropdown = document.getElementById('couponDropdown');
-            // Enable or disable the dropdown based on checkbox status
-            couponDropdown.disabled = !couponCheckbox.checked;
-            // If unchecked, reset discount and total
-            if (!couponCheckbox.checked) {
-                document.getElementById("discountText").innerText = `Discount: $0`;
-                document.getElementById("totalBillText").innerText = `Total Bill: ${{ subtotal }}`;
+    
+            // Toggle the visibility of the coupon dropdown
+            if (couponDropdown.style.display === "none" || couponDropdown.style.display === "") {
+                couponDropdown.style.display = "block";
+            } else {
+                couponDropdown.style.display = "none";
             }
         }
+
+
         function calculateDiscount() {
-            let couponCheckbox = document.getElementById('couponCheckbox');
-            let couponDropdown = document.getElementById('couponDropdown');
-            let subtotal = parseFloat("{{ subtotal }}");
-            // If checkbox is selected
-            if (couponCheckbox.checked) {
-                let selectedCoupon = couponDropdown.value.trim();
-                if (!selectedCoupon || selectedCoupon.toLowerCase() === "none") {
-                    alert("Please select a valid coupon.");
-                    document.getElementById("discountText").innerText = `Discount: $0`;
-                    document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
-                    return;
-                }
-                
+            let couponDropdown = document.getElementById('couponDropdown'); // Get coupon dropdown
+            let selectedCoupon = couponDropdown.value.trim(); // Get the selected coupon value
+            let subtotal = parseFloat("{{ subtotal }}"); // Get the subtotal (from the backend)
+
+            // If a valid coupon is selected
+            if (selectedCoupon && selectedCoupon.toLowerCase() !== "none") {
                 // Apply 10% discount
                 let discount = subtotal * 0.10;
                 let total = subtotal - discount;
-                // Update UI
-                document.getElementById("discountText").innerText = `Discount: $${discount.toFixed(2)}`;
-                document.getElementById("totalBillText").innerText = `Total Bill: $${total.toFixed(2)}`;
+
+                // Update UI with discount and total bill
+                document.getElementById("discountText").innerText = `$${discount.toFixed(2)}`;
+                document.getElementById("totalBillText").innerText = `$${total.toFixed(2)}`;
             } else {
-                // If checkbox is not selected, reset discount
-                document.getElementById("discountText").innerText = `Discount: $0`;
-                document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
+                // If no coupon is selected or "None" is selected, reset the discount
+                document.getElementById("discountText").innerText = `$0.00`;
+                document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
             }
         }
+
+
+
         function proceedToOrder() {
-            let couponCheckbox = document.getElementById('couponCheckbox');
             let couponDropdown = document.getElementById('couponDropdown');
-            let selectedCoupon = ""; // Default to empty coupon
-            if (couponCheckbox && couponCheckbox.checked) {
-                if (couponDropdown) {
-                    selectedCoupon = couponDropdown.value.trim();
-                
-                    // Prevent checkout if no coupon is selected
-                    if (!selectedCoupon) {
-                        alert("Please select a valid coupon before proceeding.");
-                        return;
-                    }
-                } else {
-                    alert("Error: Coupon dropdown not found.");
-                    return;
-                }
+            let selectedCoupon = couponDropdown.value.trim(); // Get selected coupon from the dropdown
+    
+            // If no coupon is selected, alert the user
+            if (selectedCoupon === "None" || selectedCoupon === "Null") {
+                alert("Please select a valid coupon before proceeding.");
+                return;
             }
+
+            // Send the selected coupon to the backend for processing
             fetch('/checkout', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -307,13 +589,15 @@
             .then(data => {
                 if (data.success) {
                     alert(data.message);
-                    window.location.href = '/order';
+                    window.location.href = '/order';  // Redirect to order page
                 } else {
                     alert(data.error || data.message);
                 }
             })
             .catch(err => console.error('Error during checkout:', err));
         }
+
+
         function calculateSubtotal() {
             let subtotal = 0;
             document.querySelectorAll('.cart-item').forEach(item => {
@@ -322,6 +606,7 @@
                 const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
                 subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
             });
+
             // Update the subtotal in the HTML
             document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
             return subtotal;
@@ -401,7 +686,7 @@
         }
         function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
             const customerEmail = "{{ customer_email }}"; // Get customer email from session
-            // Create the data object to send to the server
+            // Create the data object to send to the ser        ver
             const data = {
                 item_name: itemName,
                 item_price: itemPrice,
@@ -430,6 +715,8 @@
             })
             .catch(err => console.error('Error adding item:', err));
         }
+
+
         
         
     </script>