{% include 'public_header.html' %}
<style>
    /* Existing CSS */
    :root {
        --primary-color: #2563eb;
        --secondary-color: #1e40af;
        --accent-color: #3b82f6;
        --text-dark: #1f2937;
        --text-light: #6b7280;
        --bg-light: #f3f4f6;
        --white: #ffffff;
    }

    body {
        font-family: 'Inter', sans-serif;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        color: var(--text-dark);
        line-height: 1.6;
    }

    .main-container {
        min-height: 100vh;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 2rem;
    }

    .content-wrapper {
        display: flex;
        max-width: 1400px;
        width: 100%;
        background: var(--white);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Product Section */
    .product-section {
        flex: 1;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        padding: 3rem;
        position: relative;
    }

    .login-section {
        flex: 1;
        padding: 3rem;
        background: var(--white);
    }

    /* Cart Section Styles */
    .cart-section {
        flex: 1;
        padding: 3rem;
        background: var(--bg-light);
        max-width: 400px;
        border-radius: 12px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        margin-right: 20px;
    }

    .cart-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding: 0.75rem;
        background: var(--white);
        border-radius: 10px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .cart-item img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        margin-right: 1rem;
        border-radius: 8px;
    }

    .cart-item-details {
        flex: 1;
    }

    .cart-item-price {
        font-weight: bold;
        color: var(--text-dark);
    }

    .remove-btn {
        background: none;
        border: none;
        color: #ff4d4d;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .cart-total {
        margin-top: 2rem;
        text-align: right;
        font-weight: 600;
        font-size: 1.25rem;
    }
    
    /* Other Styles for the page remain same as previously defined */

</style>

<div class="main-container">
    <!-- Cart Section on the Left -->
    <section class="cart-section">
        <h2>Shopping Cart</h2>
        <div id="cart-container">
            <!-- Cart items will be populated here dynamically -->
        </div>
        <div class="cart-total">
            Total: ₹<span id="total-amount">0</span>
        </div>
    </section>

    <div class="content-wrapper">
        

        <!-- Login Section -->
        <section class="login-section">
            <!-- Login Section remains same -->
        </section>
    </div>
</div>

<script>
    // Function to display all cart items
    function displayCart() {
        const cartContainer = document.getElementById('cart-container');
        const cart = JSON.parse(sessionStorage.getItem('cart')) || [];
        cartContainer.innerHTML = '';  // Clear the existing cart items
        let totalAmount = 0;

        cart.forEach((item, index) => {
            const cartItemDiv = document.createElement('div');
            cartItemDiv.classList.add('cart-item');
            cartItemDiv.innerHTML = `
                <img src="${item.productImage}" alt="${item.productName}">
                <div class="cart-item-details">
                    <p>${item.productName}</p>
                    <p class="cart-item-price">₹ ${item.productPrice}</p>
                </div>
                <button class="remove-btn" onclick="removeFromCart(${index})">&times;</button>
            `;
            cartContainer.appendChild(cartItemDiv);
            totalAmount += parseFloat(item.productPrice);
        });

        document.getElementById('total-amount').innerText = totalAmount.toFixed(2);
    }

    // Function to remove product from cart
    function removeFromCart(index) {
        let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
        cart.splice(index, 1);  // Remove the item at the specified index
        sessionStorage.setItem('cart', JSON.stringify(cart));  // Update session storage
        displayCart();  // Re-render the cart after removal
    }

    // Initial call to display the cart when page loads
    displayCart();
    
    // Get product details from the URL and update the UI
    function getQueryParams() {
        const params = {};
        const queryString = window.location.search.substring(1);
        const regex = /([^&=]+)=([^&]*)/g;
        let m;

        while (m = regex.exec(queryString)) {
            params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
        }
        return params;
    }

    const params = getQueryParams();
    
    if (params.product_id && params.product_name && params.product_price && params.pro_image) {
        const productNameElement = document.getElementById('product-name');
        productNameElement.textContent = decodeURIComponent(params.product_name);
        
        const productPriceElement = document.getElementById('product-price');
        productPriceElement.textContent = params.product_price;
        
        const productImageElement = document.getElementById('pro-image');
        if (params.pro_image) {
            productImageElement.src = decodeURIComponent(params.pro_image);
        }
        
        const registerLink = document.getElementById('register-link');
        let registerUrl = `/accounts/register?product_id=${params.product_id}&product_name=${encodeURIComponent(params.product_name)}&product_price=${params.product_price}`;
        if (params.pro_image) {
            registerUrl += `&pro_image=${encodeURIComponent(params.pro_image)}`;
        }
        registerLink.href = registerUrl;
    }
</script>

{% include 'public_footer.html' %}