<?php
session_start();

// Initialize cart if not exists
if (!isset($_SESSION['cart'])) {
    $_SESSION['cart'] = [];
}

// Handle Order Placement simulation
$orderPlaced = false;
if (isset($_POST['place_order'])) {
    // Clear cart on successful order placement simulation
    $_SESSION['cart'] = [];
    $orderPlaced = true;
}

// Handle Delete Item
if (isset($_GET['action']) && $_GET['action'] == 'delete') {
    $deleteId = filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT);
    if ($deleteId && isset($_SESSION['cart'][$deleteId])) {
        unset($_SESSION['cart'][$deleteId]);
    }
    header("Location: cart.php");
    exit;
}

// Group cart items by Shop Name
$groupedCart = [];
foreach ($_SESSION['cart'] as $productId => $item) {
    $shopName = $item['shop_name'];
    $groupedCart[$shopName][] = $item;
}

// Calculate grand total and cart item counts
$grandTotal = 0;
$cartCount = 0;
foreach ($_SESSION['cart'] as $item) {
    $grandTotal += $item['price'] * $item['quantity'];
    $cartCount += $item['quantity'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart - Shopee Clone</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>

    <!-- Header Section -->
    <header class="bg-[#ee4d2d] text-white shadow-md sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
            <a href="index.php" class="flex items-center gap-2 text-2xl font-bold tracking-wider">
                <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24">
                    <path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2zm1 14.5h-2v-2h2v2zm0-4h-2V7.5h2V12.5z"/>
                </svg>
                <span>Shopee<span class="font-light text-orange-200">Market</span></span>
            </a>

            <div class="flex items-center gap-4">
                <a href="index.php" class="text-sm font-medium hover:underline">Continue Shopping</a>
                <a href="seller_dashboard.php" class="bg-orange-600 hover:bg-orange-700 text-white px-3 py-1.5 rounded text-xs font-semibold transition border border-orange-400">
                    Seller Centre
                </a>
            </div>
        </div>
    </header>

    <!-- Main Container -->
    <main class="max-w-4xl mx-auto px-4 py-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-[#ee4d2d]">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
            </svg>
            Shopping Cart
        </h2>

        <?php if ($orderPlaced): ?>
            <div class="bg-green-50 border border-green-300 text-green-800 p-6 rounded-lg shadow-sm text-center">
                <svg class="w-12 h-12 text-green-500 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <h3 class="text-lg font-bold mb-1">Order Placed Successfully!</h3>
                <p class="text-sm text-green-600 mb-4">Your order has been routed and grouped by shops for processing.</p>
                <a href="index.php" class="inline-block bg-[#ee4d2d] hover:bg-[#d83f20] text-white px-6 py-2 rounded text-sm font-semibold transition">
                    Keep Shopping
                </a>
            </div>
        <?php elseif (empty($groupedCart)): ?>
            <div class="bg-white p-12 rounded-lg text-center shadow-sm border border-gray-100">
                <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
                <h3 class="text-lg font-semibold text-gray-700 mb-1">Your cart is empty</h3>
                <p class="text-sm text-gray-400 mb-6">Looks like you haven't added anything to your cart yet.</p>
                <a href="index.php" class="inline-block bg-[#ee4d2d] hover:bg-[#d83f20] text-white px-6 py-2 rounded text-sm font-semibold transition">
                    Go Shopping
                </a>
            </div>
        <?php else: ?>
            <div class="flex flex-col gap-6">
                <!-- Grouped Items Loop -->
                <?php foreach ($groupedCart as $shopName => $items): ?>
                    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                        <!-- Shop Header -->
                        <div class="bg-gray-55 px-4 py-3 border-b border-gray-100 flex items-center gap-2">
                            <span class="text-sm font-bold text-gray-800 flex items-center gap-1.5">
                                🏪 <?= htmlspecialchars($shopName) ?>
                            </span>
                            <span class="text-xs text-gray-400 font-normal">| Verified Seller</span>
                        </div>

                        <!-- Shop Items -->
                        <div class="divide-y divide-gray-100">
                            <?php 
                            $shopSubtotal = 0; 
                            foreach ($items as $item): 
                                $itemSubtotal = $item['price'] * $item['quantity'];
                                $shopSubtotal += $itemSubtotal;
                            ?>
                                <div class="p-4 flex items-center justify-between gap-4">
                                    <div class="flex items-center gap-4">
                                        <img src="<?= htmlspecialchars($item['image']) ?>" alt="<?= htmlspecialchars($item['name']) ?>" class="w-16 h-16 object-cover rounded border border-gray-100">
                                        <div>
                                            <h4 class="text-sm text-gray-800 font-medium line-clamp-1"><?= htmlspecialchars($item['name']) ?></h4>
                                            <div class="text-xs text-gray-400 mt-1">Price: $<?= number_format($item['price'], 2) ?></div>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-6">
                                        <!-- Quantity -->
                                        <div class="text-sm font-medium text-gray-700">
                                            Qty: <span class="bg-gray-100 px-2 py-0.5 rounded text-xs"><?= $item['quantity'] ?></span>
                                        </div>
                                        <!-- Subtotal -->
                                        <div class="text-sm font-bold text-gray-800 min-w-[70px] text-right">
                                            $<?= number_format($itemSubtotal, 2) ?>
                                        </div>
                                        <!-- Delete Button -->
                                        <a href="cart.php?action=delete&id=<?= $item['id'] ?>" class="text-red-500 hover:text-red-700 transition">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <!-- Shop Summary -->
                        <div class="bg-gray-50/50 px-4 py-3 border-t border-gray-100 flex justify-between items-center text-sm">
                            <span class="text-gray-500">Shop Subtotal (<?= count($items) ?> items)</span>
                            <span class="font-bold text-[#ee4d2d]">$<?= number_format($shopSubtotal, 2) ?></span>
                        </div>
                    </div>
                <?php endforeach; ?>

                <!-- Grand Checkout Bar -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 flex flex-col sm:flex-row items-center justify-between gap-4 mt-4">
                    <div class="flex items-center gap-4">
                        <div class="text-gray-500 text-sm">Grand Total (<?= $cartCount ?> items):</div>
                        <div class="text-2xl font-black text-[#ee4d2d]">$<?= number_format($grandTotal, 2) ?></div>
                    </div>
                    <form method="POST" action="cart.php">
                        <button type="submit" name="place_order" class="bg-[#ee4d2d] hover:bg-[#d83f20] text-white px-8 py-3 rounded font-bold text-sm transition tracking-wider uppercase shadow-md hover:shadow-lg">
                            Place Order
                        </button>
                    </form>
                </div>
            </div>
        <?php endif; ?>
    </main>

    <!-- Footer -->
    <footer class="bg-white border-t border-gray-200 mt-20 py-8 text-center text-xs text-gray-500">
        <p>&copy; 2026 Shopee Clone. Pair programmed with Antigravity.</p>
    </footer>

</body>
</html>
