Update templates/cart.html

templates/cart.html

@@ -75,22 +75,12 @@
             color: #fff;
             padding: 5px 20px;
             font-size: 1rem;
-            font-weight: bold;
             cursor: pointer;
             border-radius: 5px;
-            border: none; 
-            transition: background-color 0.3s ease, transform 0.2s ease;
         }
         .apply-button:disabled {
             background-color: #6c757d;
-            cursor: not-allowed;
-        }
-
-        .apply-button:hover {
-            background-color: #218838; /* Darker green on hover */
-            transform: scale(1.05); /* Slightly enlarge the button when hovered */
         }
-
         .checkout-button {
             background-color: #007bff;
             color: #fff;
@@ -118,12 +108,6 @@
                 <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">
                         <button onclick="updateQuantity('decrease', '{{ item.Name }}')">-</button>
                         <input type="text" value="{{ item.Quantity__c }}" readonly>
@@ -139,58 +123,52 @@
             </div>
             {% endfor %}
 
-            <div class="apply-coupon">
-              <label for="coupon-code">Coupon Code:</label>
-              <select id="coupon-code" name="coupon_code">
-                  <option value="">Select a coupon code</option>
-                  {% for coupon in coupon_codes %}
-                  <option value="{{ coupon.Coupon_Code__c }}">{{ coupon.Coupon_Code__c }}</option>
-                  {% endfor %}
-              </select>
-              <button type="button" class="apply-button" onclick="applyCoupon()">Apply Coupon</button>
-              <p id="coupon-message" class="coupon-message"></p>
-          </div>
-          
-          <!-- Subtotal -->
-          <div class="cart-summary">
-              <p id="subtotal-text" class="fw-bold">Subtotal: ${{ subtotal }}</p>
-              <p id="discount-text" class="fw-bold">Discount: $0.00</p>
-              <p id="total-text" class="fw-bold">Total: ${{ subtotal }}</p> <!-- The final total after discount -->
-              <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
-          </div>
-          
-    <script>
-    // Fetch coupon codes automatically when the page loads
-    document.addEventListener("DOMContentLoaded", function() {
-        const customerEmail = "{{ customer_email }}"; // The email stored in the session
+            <!-- Coupon Code Section -->
+            <div class="coupon-section">
+                <select id="couponCode" class="form-control" style="width: 70%;"></select>
+                <button class="apply-button" onclick="applyCoupon()">Apply Coupon</button>
+            </div>
+
+            <div class="error-message" id="couponError"></div>
+
+            <!-- Cart Summary -->
+            <div class="cart-summary">
+                <p><strong>Subtotal: </strong><span id="subtotal">${{ subtotal }}</span></p>
+                <p><strong>Discount: </strong><span id="discount">0.00</span></p>
+                <p><strong>Total: </strong><span id="total">$<span id="total-price">{{ total_price }}</span></span></p>
+            </div>
 
-        if (customerEmail) {
-            fetch(/get_coupon_codes?email=${customerEmail})
+            <!-- Checkout Button -->
+            <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
+        </div>
+    </div>
+
+    <script>
+        // Fetch the coupon codes related to the logged-in user and populate the dropdown
+        document.addEventListener("DOMContentLoaded", function() {
+            const customerEmail = "{{ customer_email }}"; // Assuming email is passed to the template
+            
+            fetch(`/get_coupons/${customerEmail}`)
                 .then(response => response.json())
                 .then(data => {
-                    if (data.success && data.coupon_codes) {
-                        const couponSelect = document.getElementById('coupon-code');
-                        data.coupon_codes.forEach(coupon => {
-                            const option = document.createElement('option');
+                    if (data.success) {
+                        let couponDropdown = document.getElementById("couponCode");
+                        data.coupons.forEach(coupon => {
+                            let option = document.createElement("option");
                             option.value = coupon.Coupon_Code__c;
-                            option.textContent = coupon.Coupon_Code__c;
-                            couponSelect.appendChild(option);
+                            option.text = coupon.Coupon_Code__c;
+                            couponDropdown.appendChild(option);
                         });
                     } else {
-                        document.getElementById('coupon-message').innerText = "No active coupons found for your account.";
-                        document.getElementById('coupon-message').style.color = "red";
+                        document.getElementById('couponError').innerText = "No coupons available.";
                     }
                 })
-                .catch(error => {
-                    console.error('Error fetching coupon codes:', error);
-                });
-        }
-    });
-
+                .catch(error => console.error("Error fetching coupons:", error));
+        });
 
         // Update item quantity
         function updateQuantity(action, itemName) {
-            let quantityInput = document.querySelector(input[data-item-name="${itemName}"]);
+            let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
             let quantity = parseInt(quantityInput.value);
             if (action === 'increase') {
                 quantity++;
@@ -205,60 +183,55 @@
             updateCart(itemName, quantity);
         }
 
-        // Apply coupon and discount
-    function applyCoupon() {
-        const couponCode = document.getElementById('coupon-code').value;
-        const subtotal = parseFloat(document.getElementById('subtotal-text').innerText.replace('Subtotal: $', ''));
-        const couponMessage = document.getElementById('coupon-message');
+        // Apply coupon
+        function applyCoupon() {
+            let couponCode = document.getElementById('couponCode').value;
+            if (!couponCode) {
+                document.getElementById('couponError').innerText = "Please select a coupon.";
+                return;
+            }
 
-        if (couponCode) {
-            fetch('/apply_coupon', {
+            fetch(`/apply_coupon`, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ coupon_code: couponCode, subtotal: subtotal })
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ coupon_code: couponCode })
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    const discount = data.discount;
-                    const totalPrice = subtotal - discount;
-                    document.getElementById('discount-text').innerText = Discount: $${discount.toFixed(2)};
-                    document.getElementById('total-text').innerText = Total: $${totalPrice.toFixed(2)};
-                    couponMessage.innerText = Coupon applied! You saved $${discount.toFixed(2)};
-                    couponMessage.style.color = 'green';
+                    let discount = data.discount;
+                    document.getElementById('discount').innerText = discount.toFixed(2);
+                    let subtotal = parseFloat(document.getElementById('subtotal').innerText.replace('$', ''));
+                    let total = subtotal - discount;
+                    document.getElementById('total-price').innerText = total.toFixed(2);
+                    document.getElementById('couponError').innerText = `Coupon applied! You saved $${discount.toFixed(2)}`;
                 } else {
-                    couponMessage.innerText = data.message;
-                    couponMessage.style.color = 'red';
+                    document.getElementById('couponError').innerText = "Invalid coupon code.";
                 }
             })
-            .catch(error => {
-                console.error('Error applying coupon:', error);
-                couponMessage.innerText = 'Error applying coupon.';
-                couponMessage.style.color = 'red';
+            .catch(error => console.error("Error applying coupon:", error));
+        }
+
+        // Update the cart prices based on the quantity changes
+        function updateCart(itemName, quantity) {
+            let price = parseFloat(document.querySelector(`.item[data-item-name="${itemName}"] .item-price`).innerText.replace('$', ''));
+            let newPrice = price * quantity;
+            document.querySelector(`.item[data-item-name="${itemName}"] .item-price`).innerText = newPrice.toFixed(2);
+            // Update subtotal and total
+            let subtotal = 0;
+            document.querySelectorAll('.item').forEach(item => {
+                subtotal += parseFloat(item.querySelector('.item-price').innerText.replace('$', ''));
             });
-        } else {
-            couponMessage.innerText = 'Please select a coupon code.';
-            couponMessage.style.color = 'red';
+            document.getElementById('subtotal').innerText = "$" + subtotal.toFixed(2);
+            let discount = parseFloat(document.getElementById('discount').innerText);
+            let total = subtotal - discount;
+            document.getElementById('total-price').innerText = total.toFixed(2);
         }
-    }
 
-    function proceedToOrder() {
-        fetch('/checkout', {
-            method: 'POST',
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                alert(data.message);
-                window.location.href = '/order'; // Redirect to menu or order confirmation page
-            } else {
-                alert(data.error || data.message);
-            }
-        })
-        .catch(err => console.error('Error during checkout:', err));
-    }
-</script>
+        // Proceed to the order summary page
+        function proceedToOrder() {
+            window.location.href = '/order_summary'; // Redirect to order summary page
+        }
+    </script>
 </body>
-</html>
+</html>