templates/cart.html

<!-- Updated Apply Coupon Section -->
<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" 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

        if (customerEmail) {
            fetch(`/get_coupon_codes?email=${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');
                            option.value = coupon.Coupon_Code__c;
                            option.textContent = coupon.Coupon_Code__c;
                            couponSelect.appendChild(option);
                        });
                    } else {
                        document.getElementById('coupon-message').innerText = "No active coupons found for your account.";
                        document.getElementById('coupon-message').style.color = "red";
                    }
                })
                .catch(error => {
                    console.error('Error fetching coupon codes:', error);
                });
        }
    });

    // 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');

        if (couponCode) {
            fetch('/apply_coupon', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ coupon_code: couponCode, subtotal: subtotal })
            })
            .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';
                } else {
                    couponMessage.innerText = data.message;
                    couponMessage.style.color = 'red';
                }
            })
            .catch(error => {
                console.error('Error applying coupon:', error);
                couponMessage.innerText = 'Error applying coupon.';
                couponMessage.style.color = 'red';
            });
        } else {
            couponMessage.innerText = 'Please select a coupon code.';
            couponMessage.style.color = 'red';
        }
    }

    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>