checkout.html

  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkout ASA</title>
    <link rel="stylesheet" href="styles/home.css">
</head>
<body>
    <header>
        <h1>ASA Checkout</h1>
    </header>

    <div class="cart-items" id="cart-items">
        <!-- Cart items will be dynamically loaded here -->
    </div>

    <footer>
        <p>&copy; 2025 ASA</p>
        <div class="checkout-button" onclick="processCheckout()">Confirm and Checkout</div>
    </footer>

    <script>
        // Load cart items from localStorage
        function loadCart() {
            const cart = JSON.parse(localStorage.getItem('cart')) || [];
            const cartItemsContainer = document.getElementById('cart-items');
            cartItemsContainer.innerHTML = '';

            if (cart.length === 0) {
                cartItemsContainer.innerHTML = '<p>Your cart is empty!</p>';
            }

            cart.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.classList.add('cart-item');
                itemDiv.innerHTML = `
                    <img src="${item.img}" alt="${item.name}">
                    <div>
                        <h3>${item.name}</h3>
                        <p>$${item.price}</p>
                        <p>Quantity: ${item.quantity}</p>
                    </div>
                `;
                cartItemsContainer.appendChild(itemDiv);
            });

            console.log("Cart loaded: ", cart);  // Log the cart details
        }

        async function processCheckout() {
            const cart = JSON.parse(localStorage.getItem('cart')) || [];
            const user = await getUserInfo();  // Get user info from session

            // If the user is not logged in
            if (!user) {
                alert("Please log in first.");
                return;
            }

            // Log the checkout details for debugging
            console.log("Proceeding with checkout...");
            console.log("User ID: ", user.user_id);
            console.log("Cart Details: ", cart);

            try {
                const response = await fetch('/api/checkout', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',