<div class="container py-4">
    <h3 class="fw-bold mb-4"><i class="bi bi-cart3 text-primary me-2"></i>ตะกร้าสินค้า</h3>

    <?php if (empty($items)): ?>
        <div class="card border-0 shadow-sm p-5 text-center">
            <i class="bi bi-cart-x text-muted display-1 mb-3"></i>
            <h5>ตะกร้าสินค้าของคุณยังว่างเปล่า</h5>
            <p class="text-muted">เลือกซื้อสินค้าที่คุณถูกใจและเพิ่มลงในตะกร้าเลย</p>
            <div class="mt-3">
                <a href="<?= APP_URL ?>/products" class="btn btn-primary px-4 py-2 rounded-pill fw-bold">เลือกซื้อสินค้า</a>
            </div>
        </div>
    <?php else: ?>
        <div class="row g-4">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm rounded-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-4">สินค้า</th>
                                    <th>ราคา</th>
                                    <th style="width: 130px;">จำนวน</th>
                                    <th>ราคารวม</th>
                                    <th class="text-end pe-4">จัดการ</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($items as $item): ?>
                                    <?php 
                                    $imgSrc = !empty($item['product']['primary_image']) 
                                        ? APP_URL . '/public/' . ltrim($item['product']['primary_image'], '/') 
                                        : 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=150&q=80';
                                    ?>
                                    <tr>
                                        <td class="ps-4">
                                            <div class="d-flex align-items-center gap-3">
                                                <img src="<?= $imgSrc ?>" alt="<?= Security::e($item['product']['title']) ?>" class="rounded border object-fit-cover shadow-sm" style="width: 64px; height: 64px;" onerror="this.src='https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=150&q=80'">
                                                <div>
                                                    <h6 class="fw-bold mb-1"><a href="<?= APP_URL ?>/product/<?= $item['product']['slug'] ?>" class="text-decoration-none text-dark"><?= Security::e($item['product']['title']) ?></a></h6>
                                                    <span class="badge bg-light text-secondary border"><?= Security::e($item['variant_info']) ?></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fw-semibold">฿<?= number_format($item['price'], 2) ?></td>
                                        <td>
                                            <form action="<?= APP_URL ?>/cart/update" method="POST" class="d-flex align-items-center gap-1">
                                                <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
                                                <input type="hidden" name="key" value="<?= $item['key'] ?>">
                                                <input type="number" name="quantity" value="<?= $item['quantity'] ?>" min="1" class="form-control form-control-sm text-center" onchange="this.form.submit()">
                                            </form>
                                        </td>
                                        <td class="fw-bold text-primary">฿<?= number_format($item['subtotal'], 2) ?></td>
                                        <td class="text-end pe-4">
                                            <form action="<?= APP_URL ?>/cart/remove" method="POST">
                                                <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
                                                <input type="hidden" name="key" value="<?= $item['key'] ?>">
                                                <button type="submit" class="btn btn-outline-danger btn-sm rounded-circle"><i class="bi bi-trash"></i></button>
                                            </form>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Cart Summary Sidebar -->
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm rounded-3 p-4">
                    <h5 class="fw-bold mb-3">สรุปคำสั่งซื้อ</h5>
                    <hr>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-secondary">ยอดรวมสินค้า</span>
                        <span class="fw-bold">฿<?= number_format($total, 2) ?></span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-secondary">ค่าจัดส่ง</span>
                        <span class="text-success fw-bold">ฟรี</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between fs-5 fw-bold mb-4">
                        <span>ยอดชำระสุทธิ</span>
                        <span class="text-primary">฿<?= number_format($total, 2) ?></span>
                    </div>

                    <a href="<?= APP_URL ?>/checkout" class="btn btn-primary btn-lg w-100 fw-bold rounded-pill shadow-sm">ดำเนินการสั่งซื้อ (Checkout)</a>
                </div>
            </div>
        </div>
    <?php endif; ?>
</div>
