<?php
$page_title = "Sacred Basket — GyaniGuru by JMC";
include 'includes/header.php';
?>
<style>
    .qty-control { display: flex; align-items: center; border: 1px solid var(--cream-dark); border-radius: 8px; overflow: hidden; width: fit-content; }
    .qty-btn { background: var(--cream); border: none; padding: 5px 12px; cursor: pointer; transition: 0.2s; color: var(--maroon); font-weight: bold; }
    .qty-btn:hover { background: var(--gold); color: white; }
    .qty-input { width: 45px; text-align: center; border: none; background: transparent; font-weight: 600; color: var(--text-dark); -moz-appearance: textfield; }
    .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .cart-item-img { width: 70px; height: 95px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .cart-empty { text-align: center; padding: 100px 0; color: var(--text-light); }
    .cart-empty i { font-size: 5rem; color: var(--cream-dark); margin-bottom: 25px; display: block; opacity: 0.5; }
    .table-custom thead { background: var(--cream); border-bottom: 2px solid var(--cream-dark); }
    .table-custom th { color: var(--maroon); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.85rem; padding: 15px; }
    .table-custom td { padding: 20px 15px; vertical-align: middle; color: var(--text-dark); border-bottom: 1px solid var(--warm-white); }
</style>

<div class="page-header py-5" style="background: var(--gradient-divine); border-bottom: 2px solid var(--gold); color: white;">
    <div class="container d-flex justify-content-between align-items-center py-2">
        <div>
            <h1 class="font-cinzel m-0 text-white">Sacred Basket</h1>
            <p class="m-0" style="color: var(--gold-light); opacity: 0.8;">Review your items before proceeding to checkout</p>
        </div>
        <div class="checkout-steps d-none d-md-flex align-items-center gap-3">
            <span class="badge rounded-pill bg-gold text-dark px-4 py-2" style="font-weight: 700;">1. CART</span>
            <i class="bi bi-chevron-right" style="color: var(--gold); opacity: 0.5;"></i>
            <span style="color: rgba(255,255,255,0.4); font-size: 0.85rem; font-weight: 600;">2. ADDRESS</span>
            <i class="bi bi-chevron-right" style="color: var(--gold); opacity: 0.3;"></i>
            <span style="color: rgba(255,255,255,0.4); font-size: 0.85rem; font-weight: 600;">3. PAYMENT</span>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="row g-5">
        <!-- Cart Table Area -->
        <div class="col-lg-8">
            <div class="bg-white rounded shadow-sm overflow-hidden mb-4" style="border: 1px solid var(--cream-dark)">
                <div class="table-responsive">
                    <table class="table table-custom mb-0">
                        <thead>
                            <tr>
                                <th>DIVINE WORK</th>
                                <th>PRICE</th>
                                <th>QUANTITY</th>
                                <th>TOTAL</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="cartBody">
                            <!-- Populated by JS -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="d-flex justify-content-between align-items-center">
                <a href="shop.php" class="btn btn-outline-gold px-4" style="color: var(--gerua-dark); border-radius: 50px;">
                    <i class="bi bi-arrow-left me-2"></i> CONTINUE SHOPPING
                </a>
                <button onclick="clearCart()" class="btn btn-sm text-danger text-decoration-none fw-bold" style="font-size: 0.8rem;">
                    <i class="bi bi-trash3 me-1"></i> EMPTY BASKET
                </button>
            </div>
        </div>

        <!-- Summary -->
        <div class="col-lg-4">
            <div class="bg-white p-4 rounded shadow-sm" style="border: 1px solid var(--cream-dark); position: sticky; top: 120px;">
                <h5 class="font-cinzel mb-4" style="color: var(--maroon); border-bottom: 2px solid var(--gold); padding-bottom: 15px;">Order Summary</h5>
                
                <div class="d-flex justify-content-between mb-3">
                    <span style="color: var(--text-medium)">Items Count</span>
                    <span id="summaryItems" class="fw-bold" style="color: var(--text-dark)">0</span>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <span style="color: var(--text-medium)">Subtotal</span>
                    <span id="summarySubtotal" class="fw-bold" style="color: var(--text-dark)">₹0</span>
                </div>
                <div class="d-flex justify-content-between mb-3">
                    <span style="color: var(--text-medium)">Shipping Fee</span>
                    <span id="summaryShipping" style="color: #27ae60; font-weight: 700;">FREE</span>
                </div>
                
                <hr style="border-color: var(--cream-dark)">
                
                <div class="d-flex justify-content-between mb-4">
                    <span class="h5 m-0 fw-bold" style="color: var(--maroon)">Grand Total</span>
                    <span id="summaryTotal" class="h5 m-0 fw-bold" style="color: var(--maroon)">₹0</span>
                </div>

                <?php 
                $checkout_link = $is_logged_in ? 'checkout.php' : 'login.php?redirect=checkout.php';
                ?>
                <a href="<?php echo $checkout_link; ?>" class="btn btn-saffron w-100 py-3 mb-3 shadow" id="checkoutBtn">
                    PROCEED TO CHECKOUT <i class="bi bi-shield-lock ms-2"></i>
                </a>
                
                <div class="p-3 rounded" style="background: var(--warm-white); border: 1px solid var(--cream-dark)">
                    <div class="d-flex align-items-center gap-3 mb-2" style="font-size: 0.85rem; color: var(--text-medium)">
                        <i class="bi bi-patch-check-fill" style="color: #27ae60"></i>
                        <span>Secure SSL encrypted payment</span>
                    </div>
                    <div class="d-flex align-items-center gap-3" style="font-size: 0.85rem; color: var(--text-medium)">
                        <i class="bi bi-truck" style="color: var(--gerua)"></i>
                        <span>Estimated delivery: 3-5 divine days</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', renderCart);

    function renderCart() {
        const cartBody = document.getElementById('cartBody');
        const cart = JSON.parse(localStorage.getItem('gg_cart') || '[]');
        
        if (cart.length === 0) {
            cartBody.innerHTML = `<tr><td colspan="5" class="cart-empty">
                <i class="bi bi-bag-plus"></i>
                <h3 class="font-cinzel" style="color: var(--maroon)">Basket is Empty</h3>
                <p>Your search for divine wisdom awaits. Start adding books!</p>
                <a href="shop.php" class="btn btn-saffron mt-3 px-5">BROWSE BOOKS</a>
            </td></tr>`;
            document.getElementById('checkoutBtn').classList.add('disabled');
            document.getElementById('checkoutBtn').style.opacity = '0.5';
        } else {
            cartBody.innerHTML = cart.map(item => `
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-3">
                            <img src="${item.image}" class="cart-item-img" alt="${item.title}" onerror="this.src='images/placeholder.png'">
                            <div>
                                <div class="fw-bold" style="color: var(--text-dark); font-size:1rem">${item.title}</div>
                                <div style="color: var(--text-light); font-size: 0.8rem">by ${item.author}</div>
                            </div>
                        </div>
                    </td>
                    <td class="fw-bold" style="color: var(--text-dark)">₹${item.price}</td>
                    <td>
                        <div class="qty-control">
                            <button class="qty-btn" onclick="updateQty(${item.id}, -1)">−</button>
                            <input type="number" class="qty-input" value="${item.qty}" readonly>
                            <button class="qty-btn" onclick="updateQty(${item.id}, 1)">+</button>
                        </div>
                    </td>
                    <td class="fw-bold" style="color: var(--maroon); font-size: 1.1rem">₹${(item.price * item.qty).toLocaleString()}</td>
                    <td>
                        <button onclick="removeItem(${item.id})" class="btn btn-sm text-danger" title="Remove"><i class="bi bi-trash3"></i></button>
                    </td>
                </tr>
            `).join('');
            document.getElementById('checkoutBtn').classList.remove('disabled');
            document.getElementById('checkoutBtn').style.opacity = '1';
        }
        updateSummary();
    }

    function updateQty(id, delta) {
        let cart = JSON.parse(localStorage.getItem('gg_cart') || '[]');
        const idx = cart.findIndex(i => i.id == id);
        if (idx > -1) {
            cart[idx].qty = Math.max(1, cart[idx].qty + delta);
            localStorage.setItem('gg_cart', JSON.stringify(cart));
            renderCart();
            if(window.updateCartBadge) updateCartBadge();
        }
    }

    function removeItem(id) {
        let cart = JSON.parse(localStorage.getItem('gg_cart') || '[]');
        cart = cart.filter(i => i.id != id);
        localStorage.setItem('gg_cart', JSON.stringify(cart));
        renderCart();
        if(window.updateCartBadge) updateCartBadge();
    }

    function clearCart() {
        if(confirm('Are you sure you want to empty your basket?')) {
            localStorage.setItem('gg_cart', '[]');
            renderCart();
            if(window.updateCartBadge) updateCartBadge();
        }
    }

    function updateSummary() {
        const cart = JSON.parse(localStorage.getItem('gg_cart') || '[]');
        let subtotal = cart.reduce((s, i) => s + (i.price * i.qty), 0);
        let items = cart.reduce((s, i) => s + i.qty, 0);
        let shipping = (subtotal >= 999 || subtotal === 0) ? 0 : 80;
        
        document.getElementById('summaryItems').textContent = items;
        document.getElementById('summarySubtotal').textContent = '₹' + subtotal.toLocaleString();
        const shipEl = document.getElementById('summaryShipping');
        if (shipping === 0) {
            shipEl.textContent = 'FREE';
            shipEl.style.color = '#27ae60';
        } else {
            shipEl.textContent = '₹' + shipping;
            shipEl.style.color = 'var(--text-medium)';
        }
        document.getElementById('summaryTotal').textContent = '₹' + (subtotal + shipping).toLocaleString();
    }
</script>

<?php include 'includes/footer.php'; ?>