Update templates/cart.html

templates/cart.html

@@ -288,17 +288,18 @@
                 {% if coupons %}
                     <div class="coupon-selection">
                         <label>
-                            <input type="checkbox" id="couponCheckbox" onchange="toggleCouponDropdown()">
-                            Apply Coupon Code
+                            Apply Coupon
+                            <a href="javascript:void(0);" id="applyCouponLink" onclick="toggleCouponDropdown()"> + Apply Coupon</a>
                         </label>
-                        <select id="couponDropdown" class="form-select mt-2" disabled onchange="calculateDiscount()">
+                        <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 %}
+                            {% endfor %}
                         </select>
                     </div>
                 {% endif %}
+
                 <div class="bill-details">
                     <div class="label">Cart Total</div>
                     <div class="amount">${{ subtotal }}</div>
@@ -379,51 +380,34 @@
             .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
+            couponDropdown.style.display = couponDropdown.style.display === "none" ? "block" : "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;
-                }
-
-                
-
-                // Apply 10% discount
-                let discount = subtotal * 0.10;
-                let total = subtotal - discount;
+            // If a coupon is selected
+            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;
+            }
 
-                // Update UI
-                document.getElementById("discountText").innerText = `$${discount.toFixed(2)}`;
-                document.getElementById("totalBillText").innerText = `$${total.toFixed(2)}`;
+            // Apply a 10% discount (or your desired logic here)
+            let discount = subtotal * 0.10;
+            let total = subtotal - discount;
 
-            } else {
-                // If checkbox is not selected, reset discount
-                document.getElementById("discountText").innerText = `$0`;
-                document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
-            }
+            // Update the UI with discount and new total
+            document.getElementById("discountText").innerText = `$${discount.toFixed(2)}`;
+            document.getElementById("totalBillText").innerText = `$${total.toFixed(2)}`;
         }
 
+
         function proceedToOrder() {
             let couponCheckbox = document.getElementById('couponCheckbox');
             let couponDropdown = document.getElementById('couponDropdown');