<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
$pageTitle = "Your Cart";
include 'header.php';

$cart = $_SESSION['cart'] ?? [];
$total = 0;
foreach ($cart as $item) {
    $total += $item['price'] * $item['quantity'];
}
?>

<div class="container py-5">
    <div class="row mb-5 align-items-end">
        <div class="col-md-6">
            <h1 class="display-4 fw-bold">Your Cart</h1>
            <p class="text-muted mb-0">Review your safety essentials before checkout.</p>
        </div>
        <div class="col-md-6 text-md-end">
            <a href="/index.php#products" class="text-gold fw-bold text-decoration-none"><i class="bi bi-arrow-left me-2"></i> Continue Shopping</a>
        </div>
    </div>

    <?php if (empty($cart)): ?>
        <div class="text-center py-5 bg-light rounded-4 border-dashed">
            <div class="display-1 text-muted mb-4"><i class="bi bi-cart-x"></i></div>
            <h3 class="fw-bold">Your cart is empty</h3>
            <p class="text-muted mb-4 fs-5">It looks like you haven't added any safety essentials yet.</p>
            <a href="/index.php#products" class="btn btn-gold btn-lg px-5 rounded-pill">Browse Products</a>
        </div>
    <?php else: ?>
        <div class="row g-5">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-borderless align-middle mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th scope="col" class="py-3 ps-4 text-muted small text-uppercase fw-bold">Product</th>
                                        <th scope="col" class="py-3 text-muted small text-uppercase fw-bold text-center">Quantity</th>
                                        <th scope="col" class="py-3 text-muted small text-uppercase fw-bold text-end">Price</th>
                                        <th scope="col" class="py-3 pe-4"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($cart as $id => $item): ?>
                                    <tr class="border-bottom">
                                        <td class="py-4 ps-4">
                                            <div class="d-flex align-items-center">
                                                <img src="<?php echo htmlspecialchars($item['image']); ?>" alt="<?php echo htmlspecialchars($item['name']); ?>" class="rounded-3 me-3 border" style="width: 80px; height: 80px; object-fit: cover;">
                                                <div>
                                                    <h6 class="mb-1 fw-bold"><?php echo htmlspecialchars($item['name']); ?></h6>
                                                    <span class="text-muted small">$<?php echo number_format($item['price'], 2); ?> each</span>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="py-4 text-center">
                                            <div class="d-inline-flex align-items-center bg-light rounded-pill p-1">
                                                <button class="btn btn-sm btn-light rounded-circle" onclick="updateQuantity(<?php echo $id; ?>, <?php echo $item['quantity'] - 1; ?>)">
                                                    <i class="bi bi-dash"></i>
                                                </button>
                                                <span class="px-3 fw-bold"><?php echo $item['quantity']; ?></span>
                                                <button class="btn btn-sm btn-light rounded-circle" onclick="updateQuantity(<?php echo $id; ?>, <?php echo $item['quantity'] + 1; ?>)">
                                                    <i class="bi bi-plus"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <td class="py-4 text-end">
                                            <span class="fw-bold fs-5 text-charcoal">$<?php echo number_format($item['price'] * $item['quantity'], 2); ?></span>
                                        </td>
                                        <td class="py-4 pe-4 text-end">
                                            <button class="btn btn-link text-danger p-0 opacity-50 hover-opacity-100" onclick="removeFromCart(<?php echo $id; ?>)" title="Remove Item">
                                                <i class="bi bi-trash fs-5"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 bg-charcoal text-white">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4 text-gold">Order Summary</h5>
                        <div class="d-flex justify-content-between mb-3">
                            <span class="text-light opacity-75">Subtotal</span>
                            <span class="fw-bold">$<?php echo number_format($total, 2); ?></span>
                        </div>
                        <div class="d-flex justify-content-between mb-3">
                            <span class="text-light opacity-75">Shipping</span>
                            <span class="text-gold fw-bold">Free</span>
                        </div>
                        <div class="d-flex justify-content-between mb-3">
                            <span class="text-light opacity-75">Estimated Tax</span>
                            <span class="fw-bold">$0.00</span>
                        </div>
                        <hr class="my-4 opacity-25">
                        <div class="d-flex justify-content-between mb-5">
                            <span class="h4 fw-bold mb-0">Total</span>
                            <span class="h4 fw-bold text-gold mb-0">$<?php echo number_format($total, 2); ?></span>
                        </div>
                        <button class="btn btn-gold btn-lg w-100 rounded-pill py-3 fw-bold shadow" onclick="checkout()">Complete Order</button>
                        
                        <div class="mt-4 p-3 bg-white bg-opacity-10 rounded-3 small">
                            <div class="d-flex align-items-center mb-2">
                                <i class="bi bi-shield-check text-gold me-2"></i>
                                <span>ElderEase Secure Checkout</span>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-truck text-gold me-2"></i>
                                <span>Free shipping on all orders</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>
</div>

<style>
.hover-opacity-100:hover { opacity: 1 !important; }
.border-dashed { border: 2px dashed #dee2e6 !important; }
</style>

<script>
function updateQuantity(id, quantity) {
    const formData = new FormData();
    formData.append('id', id);
    formData.append('quantity', quantity);

    fetch('/api/cart.php?action=update', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    });
}

function removeFromCart(id) {
    const formData = new FormData();
    formData.append('id', id);

    fetch('/api/cart.php?action=remove', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    });
}

function checkout() {
    // In a real app, this would redirect to a checkout page or Stripe
    alert('Thank you for choosing ElderEase! In this demonstration version, checkout is simulated. We would normally take you to a secure payment page now.');
}
</script>

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