<?php $__env->startSection('title', 'Shopping Cart'); ?>

<?php $__env->startPush('styles'); ?>
    <style>
        .cart-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
            gap: 24px;
            margin-top: 30px;
        }

        .cart-stack {
            display: grid;
            gap: 18px;
        }

        .cart-item {
            padding: 20px;
            display: grid;
            grid-template-columns: 130px minmax(0, 1fr);
            gap: 18px;
        }

        .cart-thumb {
            height: 130px;
            border-radius: 20px;
            background:
                radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 20%),
                linear-gradient(135deg, var(--accent), #2d2116);
        }

        .cart-head,
        .summary-row,
        .cart-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .cart-head {
            margin-bottom: 10px;
        }

        .cart-item h3 {
            margin: 0;
            font-size: 1.2rem;
        }

        .cart-actions {
            margin-top: 18px;
            flex-wrap: wrap;
        }

        .qty-form {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        input[type="number"] {
            width: 88px;
            padding: 12px 14px;
            border-radius: 999px;
            border: 1px solid rgba(123, 91, 47, 0.25);
            background: rgba(255, 255, 255, 0.7);
            font: inherit;
        }

        .summary-card {
            padding: 24px;
            position: sticky;
            top: 20px;
            height: fit-content;
        }

        .summary-card h2 {
            margin: 0 0 18px;
            font-size: 1.5rem;
        }

        .summary-row {
            padding: 12px 0;
            color: var(--muted);
            border-bottom: 1px solid rgba(123, 91, 47, 0.12);
        }

        .summary-total {
            color: var(--gold-deep);
            font-size: 1.5rem;
            font-weight: 700;
        }

        .empty {
            margin-top: 30px;
            padding: 30px;
            text-align: center;
            background: var(--card);
            border: 1px solid rgba(123, 91, 47, 0.16);
            border-radius: 24px;
            box-shadow: var(--shadow);
        }

        .danger-button {
            padding: 12px 18px;
            border-radius: 999px;
            color: #7c302f;
            background: rgba(162, 62, 71, 0.12);
        }

        @media (max-width: 960px) {
            .cart-layout {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) {
            .cart-item {
                grid-template-columns: 1fr;
            }
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
    <h2 class="section-title">Shopping Cart</h2>

    <?php if($items->isEmpty()): ?>
        <section class="empty">
            <h3>Your cart is empty</h3>
            <p class="meta-text">Start with one of the featured cultural pieces and it will appear here instantly.</p>
            <a class="button" href="<?php echo e(route('home')); ?>">Return to homepage</a>
        </section>
    <?php else: ?>
        <section class="cart-layout">
            <div class="cart-stack">
                <?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <article class="cart-item">
                        <div class="cart-thumb" style="--accent: <?php echo e($item['product']->accent); ?>"></div>

                        <div>
                            <div class="cart-head">
                                <div>
                                    <p class="meta-text"><?php echo e($item['product']->category); ?></p>
                                    <h3><?php echo e($item['product']->name); ?></h3>
                                </div>
                                <strong class="price">$<?php echo e(number_format($item['subtotal'], 2)); ?></strong>
                            </div>

                            <p class="meta-text"><?php echo e($item['product']->subtitle); ?></p>

                            <div class="cart-actions">
                                <form class="qty-form" action="<?php echo e(route('cart.update', $item['product'])); ?>" method="POST">
                                    <?php echo csrf_field(); ?>
                                    <?php echo method_field('PATCH'); ?>
                                    <label for="quantity-<?php echo e($item['product']->id); ?>">Qty</label>
                                    <input id="quantity-<?php echo e($item['product']->id); ?>" name="quantity" type="number" min="0" max="20" value="<?php echo e($item['quantity']); ?>">
                                    <button class="button" type="submit">Update</button>
                                </form>

                                <form action="<?php echo e(route('cart.destroy', $item['product'])); ?>" method="POST">
                                    <?php echo csrf_field(); ?>
                                    <?php echo method_field('DELETE'); ?>
                                    <button class="danger-button" type="submit">Remove</button>
                                </form>
                            </div>
                        </div>
                    </article>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <aside class="summary-card">
                <h2>Order Summary</h2>
                <div class="summary-row">
                    <span>Subtotal</span>
                    <span>$<?php echo e(number_format($subtotal, 2)); ?></span>
                </div>
                <div class="summary-row">
                    <span>Shipping</span>
                    <span>$<?php echo e(number_format($shipping, 2)); ?></span>
                </div>
                <div class="summary-row">
                    <span>Estimated tax</span>
                    <span>$<?php echo e(number_format($tax, 2)); ?></span>
                </div>
                <div class="summary-row">
                    <span>Total</span>
                    <span class="summary-total">$<?php echo e(number_format($total, 2)); ?></span>
                </div>
                <p class="meta-text">This demo keeps cart data in session storage, so the shopping flow works immediately before adding checkout and payment logic.</p>
                <p><a class="button" href="<?php echo e(route('checkout.index')); ?>">Proceed to checkout</a></p>
            </aside>
        </section>
    <?php endif; ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.store', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/gladwintan/Documents/New project/storefront/resources/views/storefront/cart.blade.php ENDPATH**/ ?>