Update templates/cart.html

templates/cart.html

@@ -6,358 +6,339 @@
     <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 {
+        body {
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
             color: #333;
-      }
-      .top-bar {
-          background-color: #FF6F3C;
-          width: 100%;
-          padding: 10px 15px;
-          display: flex;
-          align-items: center;
-          box-sizing: border-box;
-      }
-      .back-link {
-          display: flex;
-          align-items: center;
-          text-decoration: none;
-      }
-      .back-arrow {
-          font-size: 1.8rem;
-          color: #000;
-          font-weight: bold;
-      }
-      .back-label {
-          margin-left: 10px;
-          color: white;
-          font-weight: bold;
-          font-size: 1rem;
-      }
-      h1 {
-          color: #1C1C1C;
-          font-size: 1.2rem;
-          margin: 30px 0 15px;
-          text-align: center;
-      }
-      .order-heading {
-          color: #000;
-          font-size: 2.5rem;
-          font-weight: bold;
-          text-align: center;
-          margin-top: 30px;
-      }
-      .cart-container {
-          max-width: 768px;
-          margin: 20px auto;
-          padding: 15px;
-          background-color: #FFFFFF;
-          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;
-          background-color: #fff;
-          box-sizing: border-box;
-          min-height: 100px;
-          position: relative;
-          border-radius: 8px;
-      }
-      .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;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-      }
-      .cart-item img {
-          width: 70px;
-          height: 70px;
-          object-fit: cover;
-          border-radius: 5px;
-          border: 1px solid #ffcc80;
-          margin: 0;
-      }
-      .cart-item img:hover {
-          transform: scale(1.05);
-      }
-      .cart-item-title {
-          font-size: 1.1rem;
-          font-weight: bold;
-      }
-      .checkout-button {
-          background-color: #FF6F3C; /* Updated to vibrant orange */
-          color: #ffffff;
-          padding: 12px;
-          border-radius: 8px;
-          border: none;
-          width: 100%;
-          font-size: 1rem;
-          cursor: pointer;
-          transition: background-color 0.3s, color 0.3s;
-      }
-      .checkout-button:hover {
-          background-color: #E55A2A; /* Slightly darker orange on hover */
-          color: #ffffff;
-      }
-      .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-quantity {
-          display: flex;
-          align-items: center;
-          margin-top: 5px;
-      }
-      .cart-item-quantity button {
-          width: 24px;
-          height: 24px;
-          border: none;
-          background-color: #f0f0f0;
-          font-size: 0.8rem;
-          font-weight: bold;
-          cursor: pointer;
-      }
-      .cart-item-quantity input {
-          width: 40px;
-          text-align: center;
-          border: none;
-          background-color: #f8f9fa;
-          font-size: 1rem;
-          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;
-          grid-template-columns: 1fr 1fr;
-          grid-gap: 10px;
-          margin-bottom: 10px;
-      }
-      .bill-details .label {
-          font-weight: 600;
-          font-size: 1rem;
-      }
-      .bill-details .amount {
-          text-align: right;
-          font-weight: 600;
-          font-size: 1rem;
-      }
-      .dotted-line {
-          border-bottom: 2px dotted #ccc;
-          margin: 15px 0;
-      }
-      .total-bill {
-          display: grid;
-          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;
-      }
-      .add-back-button {
-          position: absolute;
-          top: -5px;
-          right: -10px;
-          font-size: 1rem;
-          padding: 0;
-          width: 30px;
-          height: 30px;
-          background-color: #fff;
-          color: #0FAA39;
-          border: 2px solid #0FAA39;
-          border-radius: 0;
-          cursor: pointer;
-          transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-          z-index: 2;
-      }
-      .add-back-button:hover {
-          background-color: #fff;
-          color: #0FAA39;
-          border-color: #0FAA39;
-          z-index: 3;
-      }
-      .suggestion-items-container::-webkit-scrollbar {
-          height: 8px;
-      }
-      .suggestion-items-container::-webkit-scrollb
-ar-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;
-      }
-      h4.mb-4.fw-bold {
-          text-align: center;
-          color: #FF5722;
-      }
-      .cart-container h4 {
-          text-align: center;
-          color: #FF5722;
-          font-weight: bold;
-      }
+        }
+
+        /* 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;
+            align-items: center;
+            text-decoration: none;
+        }
+        .back-arrow {
+            font-size: 1.8rem;
+            color: #000;
+            font-weight: bold;
+        }
+        .back-label {
+            margin-left: 10px;
+            color: white;
+            font-weight: bold;
+            font-size: 1rem;
+        }
+
+        /* Title Styling */
+        .order-heading {
+            color: #000;
+            font-size: 2.5rem;
+            font-weight: bold;
+            text-align: center;
+            margin-top: 30px;
+        }
+
+        .cart-container {
+            max-width: 768px;
+            margin: 20px auto;
+            padding: 15px;
+            background-color: #FFFFFF;
+            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;
+            background-color: #fff;
+            box-sizing: border-box;
+            min-height: 100px;
+            position: relative;
+            border-radius: 8px;
+        }
+        .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;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .cart-item img {
+            width: 70px;
+            height: 70px;
+            object-fit: cover;
+            border-radius: 5px;
+            border: 1px solid #ffcc80;
+            margin: 0;
+        }
+        .cart-item img:hover {
+            transform: scale(1.05);
+        }
+        .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 {
+            position: absolute;
+            top: -5px;
+            right: -10px;
+            font-size: 1rem;
+            padding: 0;
+            width: 30px;
+            height: 30px;
+            background-color: #fff;
+            color: #0FAA39;
+            border: 2px solid #0FAA39;
+            border-radius: 0;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+            z-index: 2;
+        }
+        .add-back-button:hover {
+            background-color: #fff;
+            color: #0FAA39;
+            border-color: #0FAA39;
+            z-index: 3;
+        }
+        .cart-item-details {
+            flex: 1;
+            margin-left: 15px;
+        }
+        .cart-item-quantity {
+            display: flex;
+            align-items: center;
+            margin-top: 5px;
+        }
+        .cart-item-quantity button {
+            width: 24px;
+            height: 24px;
+            border: none;
+            background-color: #f0f0f0;
+            font-size: 0.8rem;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .cart-item-quantity input {
+            width: 40px;
+            text-align: center;
+            border: none;
+            background-color: #f8f9fa;
+            font-size: 1rem;
+            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;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 10px;
+            margin-bottom: 10px;
+        }
+        .bill-details .label {
+            font-weight: 600;
+            font-size: 1rem;
+        }
+        .bill-details .amount {
+            text-align: right;
+            font-weight: 600;
+            font-size: 1rem;
+        }
+        .dotted-line {
+            border-bottom: 2px dotted #ccc;
+            margin: 15px 0;
+        }
+        .total-bill {
+            display: grid;
+            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;
+        }
     </style>
 </head>
 <body>
@@ -368,84 +349,87 @@ ar-thumb {
             <span class="back-label">Back to Menu</span>
         </a>
     </div>
-    <!-- Order History Title (centered and dark black) -->
-    <div class="order-heading">Your Cart</umt>
+
+    <!-- Order History Title -->
+    <div class="order-heading">Your Cart</div>
+
     <div class="container">
         <div class="cart-container">
-            <div style="text-align: right;"></div>
             <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 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-instructions">
-                            <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
+                        <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-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">
-                        <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 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>
                     </div>
-                </div>
                 {% else %}
-                <p>No items in your cart.</p>
+                    <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 }}', '{{ suggestion.Id }}')">+</button>
+                <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 }}', '{{ suggestion.Id }}')">+</button>
+                            </div>
+                        {% endfor %}
                     </div>
-                    {% endfor %}
                 </div>
-            </div>
             {% endif %}
+
             <!-- 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>
+                    <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>
@@ -454,8 +438,8 @@ ar-thumb {
             </div>
         </div>
     </div>
+
     <script>
-        // Update quantity
         function updateQuantity(action, itemName, customerEmail) {
             let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
             let quantity = parseInt(quantityInput.value);
@@ -479,9 +463,9 @@ ar-thumb {
                     quantityInput.value = quantity;
                     let itemElement = quantityInput.closest(".cart-item");
                     if (itemElement) {
-                        let basePriceElement = itemElement.querySelector(".base-price");
-                        if (basePriceElement) {
-                            basePriceElement.innerText = data.new_item_price.toFixed(2);
+                        let basePriceElement = itemElement.querySelector(".text-primary");
+                        if (basePriceElement && data.new_item_price) {
+                            basePriceElement.innerText = `$${data.new_item_price.toFixed(2)}`;
                         }
                     }
                     location.reload();
@@ -491,12 +475,16 @@ ar-thumb {
             })
             .catch(err => console.error("Error:", err));
         }
-        // Toggle coupon dropdown
+
         function toggleCouponDropdown() {
             let couponDropdown = document.getElementById('couponDropdown');
-            couponDropdown.style.display = couponDropdown.style.display === "none" || couponDropdown.style.display === "" ? "block" : "none";
+            if (couponDropdown.style.display === "none" || couponDropdown.style.display === "") {
+                couponDropdown.style.display = "block";
+            } else {
+                couponDropdown.style.display = "none";
+            }
         }
-        // Calculate discount
+
         function calculateDiscount() {
             let couponDropdown = document.getElementById('couponDropdown');
             let selectedCoupon = couponDropdown.value.trim();
@@ -511,38 +499,36 @@ ar-thumb {
                 document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
             }
         }
-        // Proceed to Order
+
         function proceedToOrder() {
             let couponDropdown = document.getElementById('couponDropdown');
-            let selectedCoupon = couponDropdown && couponDropdown.value ? couponDropdown.value.trim() : null;
-            if (selectedCoupon === "" || selectedCoupon.toLowerCase() === "none") {
+            let selectedCoupon = "";
+            if (couponDropdown) {
+                selectedCoupon = couponDropdown.value ? couponDropdown.value.trim() : "";
+            }
+            if (selectedCoupon === "" || selectedCoupon === "None" || selectedCoupon === "Null") {
                 selectedCoupon = null;
             }
-            fetch('/checkout', {
+            fetch('/cart/checkout', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ selectedCoupon: selectedCoupon })
             })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-                return response.json();
-            })
+            .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    alert(data.message || "Order processed successfully!");
+                    alert(data.message);
                     window.location.href = '/order';
                 } else {
-                    alert(data.error || "Failed to process order. Please try again.");
+                    alert(data.error || data.message);
                 }
             })
             .catch(err => {
                 console.error('Error during checkout:', err);
-                alert("An error occurred while processing your order. Please try again.");
+                alert('An error occurred during checkout. Please try again.');
             });
         }
-        // Remove item from cart
+
         function removeItemFromCart(itemName) {
             fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
                 method: 'POST',
@@ -559,7 +545,7 @@ ar-thumb {
             })
             .catch(err => console.error('Error removing item:', err));
         }
-        // Add suggestion to cart
+
         function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
             const customerEmail = "{{ customer_email }}";
             const data = {
@@ -582,7 +568,7 @@ ar-thumb {
                     alert('Item added to cart!');
                     location.reload();
                 } else {
-                    alert('Error adding item to cart: ' + data.error);
+            alert('Error adding item to cart: ' + data.error);
                 }
             })
             .catch(err => console.error('Error adding item:', err));