<?php $__env->startSection('frontend_layout'); ?>
    <?php $__env->startPush('frontend_css'); ?>
        <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>" />
        <title><?php echo e($shop->name); ?></title>

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link
            href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap"
            rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />



        <style>
            :root {
                --ink: #0f0f0f;
                --paper: #f7f5f0;
                --cream: #fffef9;
                --accent: #c8543a;
                --accent-lt: #f3e8e4;
                --muted: #7a7570;
                --border: #e2ddd7;
                --success: #2d7a4f;
                --radius: 14px;
                --shadow: 0 4px 24px rgba(15, 15, 15, .08);
                --shadow-lg: 0 12px 48px rgba(15, 15, 15, .14);
            }

            *,
            *::before,
            *::after {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            body {
                font-family: 'Sora', sans-serif;
                background: var(--paper);
                color: var(--ink);
                min-height: 100vh;
            }

            /* ── SHOP HERO ── */
            .shop-hero {
                background: linear-gradient(135deg, #fffef9 0%, #f7f5f0 100%);
                border-bottom: 1px solid var(--border);
                padding: 42px 24px;
            }

            .shop-hero-inner {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 24px;
                flex-wrap: wrap;
            }

            .shop-info {
                display: flex;
                align-items: center;
                gap: 18px;
            }

            .shop-logo {
                width: 92px;
                height: 92px;
                border-radius: 18px;
                object-fit: cover;
                border: 3px solid var(--border);
                box-shadow: var(--shadow);
                flex-shrink: 0;
            }

            .shop-meta h1 {
                font-family: 'DM Serif Display', serif;
                font-size: 2rem;
                margin-bottom: 6px;
            }

            .shop-meta p {
                color: var(--muted);
                font-size: .9rem;
                margin-bottom: 10px;
            }

            .shop-badges {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

            .badge-count {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                background: var(--accent-lt);
                color: var(--accent);
                border-radius: 999px;
                padding: 5px 12px;
                font-size: .75rem;
                font-weight: 600;
            }

            /* ── HERO CART PANEL ── */
            .hero-cart-panel {
                flex-shrink: 0;
            }

            .hero-cart-box {
                width: 260px;
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(12px);
                border: 1px solid var(--border);
                border-radius: 16px;
                padding: 16px;
                box-shadow: var(--shadow);
            }

            .hero-cart-header {
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 700;
                margin-bottom: 10px;
            }

            .cart-pill-count {
                margin-left: auto;
                background: var(--ink);
                color: #fff;
                font-size: .75rem;
                padding: 2px 8px;
                border-radius: 999px;
            }

            .hero-cart-text {
                font-size: .85rem;
                color: var(--muted);
                margin-bottom: 12px;
            }

            .hero-qty-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }

            .hero-qty-btn {
                width: 38px;
                height: 38px;
                border-radius: 10px;
                border: 1px solid var(--border);
                background: var(--paper);
                cursor: pointer;
                transition: .2s;
            }

            .hero-qty-btn:hover {
                background: #fff;
                border-color: var(--muted);
            }

            .hero-qty-info {
                font-size: .8rem;
                color: var(--ink);
            }

            .hero-cart-footer {
                margin-top: 12px;
            }

            .hero-cart-btn {
                width: 100%;
                background: var(--accent);
                color: #fff;
                border: none;
                border-radius: 10px;
                padding: 10px;
                font-weight: 700;
                font-size: .85rem;
                cursor: pointer;
                transition: .2s;
            }

            .hero-cart-btn:hover {
                background: #b34530;
            }

            /* ── PAGE LAYOUT ── */
            .page-body {
                max-width: 1200px;
                margin: 0 auto;
                padding: 32px 24px;
                display: grid;
                grid-template-columns: 1fr 340px;
                gap: 28px;
                align-items: start;
            }

            @media (max-width: 900px) {
                .page-body {
                    grid-template-columns: 1fr;
                }

                .sidebar {
                    order: -1;
                }
            }

            /* ── SECTION HEADER ── */
            .section-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
            }

            .section-title {
                font-family: 'DM Serif Display', serif;
                font-size: 1.4rem;
            }

            /* ── PRODUCT GRID ── */
            .products-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                gap: 18px;
            }

            .product-card {
                background: var(--cream);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                overflow: hidden;
                display: flex;
                flex-direction: column;
                transition: box-shadow .25s, transform .25s;
            }

            .product-card:hover {
                box-shadow: var(--shadow-lg);
                transform: translateY(-3px);
            }

            .product-card-img {
                width: 100%;
                height: 185px;
                object-fit: cover;
                display: block;
            }

            .product-card-body {
                padding: 14px;
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .product-card-title {
                font-size: .88rem;
                font-weight: 600;
                line-height: 1.4;
            }

            .product-card-price {
                display: flex;
                align-items: baseline;
                gap: 6px;
            }

            .price-main {
                font-size: 1.05rem;
                font-weight: 700;
                color: var(--ink);
            }

            .price-original {
                font-size: .8rem;
                color: var(--muted);
                text-decoration: line-through;
            }

            .badge-offer {
                background: var(--accent);
                color: #fff;
                border-radius: 5px;
                padding: 2px 7px;
                font-size: .7rem;
                font-weight: 700;
            }

            .product-card-actions {
                display: flex;
                gap: 8px;
                margin-top: auto;
            }

            /* ── QTY STEPPER ── */
            .qty-stepper {
                display: none;
                align-items: center;
                gap: 0;
                border: 1.5px solid var(--ink);
                border-radius: 8px;
                overflow: hidden;
            }

            .qty-stepper.active {
                display: flex;
            }

            .qty-btn {
                background: none;
                border: none;
                padding: 5px 10px;
                font-size: 1rem;
                font-weight: 700;
                cursor: pointer;
                transition: background .15s;
                line-height: 1;
            }

            .qty-btn:hover {
                background: var(--paper);
            }

            .qty-display {
                padding: 5px 10px;
                font-size: .88rem;
                font-weight: 700;
                min-width: 36px;
                text-align: center;
            }

            .btn-add {
                flex: 1;
                background: var(--ink);
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 8px 14px;
                font-size: .8rem;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
                transition: background .2s;
            }

            .btn-add:hover {
                background: #2c2c2c;
            }

            .btn-add.loading {
                opacity: .7;
                pointer-events: none;
            }

            .btn-view {
                background: none;
                border: 1.5px solid var(--border);
                border-radius: 8px;
                padding: 8px 12px;
                font-size: .8rem;
                font-weight: 500;
                color: var(--ink);
                text-decoration: none;
                display: flex;
                align-items: center;
                transition: border-color .2s, background .2s;
            }

            .btn-view:hover {
                background: var(--paper);
                border-color: var(--muted);
            }

            /* ── SIDEBAR ── */
            .sidebar {
                display: flex;
                flex-direction: column;
                gap: 18px;
                position: sticky;
                top: 78px;
            }

            .sidebar-card {
                background: var(--cream);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                padding: 22px;
            }

            .sidebar-card h2 {
                font-family: 'DM Serif Display', serif;
                font-size: 1.1rem;
                margin-bottom: 16px;
                padding-bottom: 12px;
                border-bottom: 1px solid var(--border);
            }

            /* ── CART LIST ── */
            .cart-items-list {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .cart-item {
                display: flex;
                align-items: center;
                gap: 10px;
                animation: slideIn .25s ease;
            }

            @keyframes slideIn {
                from {
                    opacity: 0;
                    transform: translateX(8px);
                }

                to {
                    opacity: 1;
                    transform: none;
                }
            }

            .cart-item-img {
                width: 48px;
                height: 48px;
                border-radius: 8px;
                object-fit: cover;
                border: 1px solid var(--border);
                flex-shrink: 0;
            }

            .cart-item-info {
                flex: 1;
                min-width: 0;
            }

            .cart-item-name {
                font-size: .8rem;
                font-weight: 600;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .cart-item-price {
                font-size: .75rem;
                color: var(--muted);
            }

            .cart-item-qty-ctrl {
                display: flex;
                align-items: center;
                gap: 4px;
            }

            .ctrl-btn {
                width: 24px;
                height: 24px;
                border-radius: 6px;
                border: 1.5px solid var(--border);
                background: none;
                font-size: .85rem;
                font-weight: 700;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background .15s;
            }

            .ctrl-btn:hover {
                background: var(--paper);
            }

            .ctrl-qty {
                font-size: .8rem;
                font-weight: 700;
                min-width: 20px;
                text-align: center;
            }

            .cart-empty {
                text-align: center;
                padding: 24px 0;
                color: var(--muted);
                font-size: .88rem;
            }

            .cart-empty i {
                font-size: 2rem;
                display: block;
                margin-bottom: 8px;
            }

            .cart-summary-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 0 0;
                border-top: 1px solid var(--border);
                margin-top: 12px;
                font-weight: 700;
                font-size: .95rem;
            }

            /* ── CHECKOUT FORM ── */
            .form-group {
                display: flex;
                flex-direction: column;
                gap: 5px;
                margin-bottom: 12px;
            }

            .form-group label {
                font-size: .78rem;
                font-weight: 600;
                color: var(--muted);
                text-transform: uppercase;
                letter-spacing: .04em;
            }

            .form-control {
                border: 1.5px solid var(--border);
                border-radius: 9px;
                padding: 9px 13px;
                font-size: .85rem;
                font-family: inherit;
                background: var(--paper);
                color: var(--ink);
                outline: none;
                transition: border-color .2s;
                width: 100%;
            }

            .form-control:focus {
                border-color: var(--ink);
            }

            textarea.form-control {
                resize: vertical;
                min-height: 64px;
            }

            .btn-checkout {
                width: 100%;
                padding: 12px;
                background: var(--accent);
                color: #fff;
                border: none;
                border-radius: 10px;
                font-size: .9rem;
                font-weight: 700;
                font-family: inherit;
                cursor: pointer;
                transition: background .2s, transform .1s;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }

            .btn-checkout:hover {
                background: #b34530;
            }

            .btn-checkout:active {
                transform: scale(.98);
            }

            .btn-checkout:disabled {
                opacity: .6;
                pointer-events: none;
            }

            /* ── TOAST ── */
            #toast-container {
                position: fixed;
                bottom: 28px;
                right: 24px;
                z-index: 9999;
                display: flex;
                flex-direction: column;
                gap: 10px;
                pointer-events: none;
            }

            .toast {
                background: var(--ink);
                color: #fff;
                border-radius: 12px;
                padding: 14px 20px;
                font-size: .86rem;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 10px;
                box-shadow: var(--shadow-lg);
                min-width: 240px;
                max-width: 340px;
                pointer-events: all;
                animation: toastIn .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
            }

            .toast.toast-success {
                background: #1a3a2a;
                border-left: 4px solid #4ade80;
            }

            .toast.toast-error {
                background: #3a1a1a;
                border-left: 4px solid var(--accent);
            }

            .toast.toast-out {
                animation: toastOut .3s ease forwards;
            }

            @keyframes toastIn {
                from {
                    opacity: 0;
                    transform: translateY(20px) scale(.94);
                }

                to {
                    opacity: 1;
                    transform: none;
                }
            }

            @keyframes toastOut {
                from {
                    opacity: 1;
                    transform: none;
                }

                to {
                    opacity: 0;
                    transform: translateY(12px);
                }
            }

            .toast-icon {
                font-size: 1.1rem;
                flex-shrink: 0;
            }

            /* ── FLASH MESSAGES ── */
            .alert-bar {
                max-width: 1200px;
                margin: 16px auto 0;
                padding: 0 24px;
            }

            .alert {
                border-radius: 10px;
                padding: 12px 18px;
                font-size: .86rem;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .alert-success {
                background: #ecfdf5;
                color: var(--success);
                border: 1px solid #a7f3d0;
            }

            .alert-error {
                background: #fef2f2;
                color: #b91c1c;
                border: 1px solid #fecaca;
            }
        </style>
    <?php $__env->stopPush(); ?>

    
    <div class="alert-bar">
        <?php if(session('success')): ?>
            <div class="alert alert-success">
                <i class="bi bi-check-circle-fill"></i><?php echo e(session('success')); ?>

            </div>
        <?php endif; ?>
        <?php if(session('error')): ?>
            <div class="alert alert-error">
                <i class="bi bi-exclamation-circle-fill"></i><?php echo e(session('error')); ?>

            </div>
        <?php endif; ?>
    </div>

    
    <?php
        $logo = $shop->logo
            ? (\Illuminate\Support\Str::startsWith($shop->logo, ['http://', 'https://'])
                ? $shop->logo
                : asset('storage/' . $shop->logo))
            : 'https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=200&q=80';
    ?>

    <div class="shop-hero">
        <div class="shop-hero-inner">

            
            <div class="shop-info">
                <img src="<?php echo e($logo); ?>" alt="<?php echo e($shop->name); ?>" class="shop-logo">
                <div class="shop-meta">
                    <h1><?php echo e($shop->name); ?></h1>
                    <p><?php echo e(data_get($shop->contact, 'address', 'Quality products · Fast delivery · Trusted seller')); ?></p>
                    <div class="shop-badges">
                        <span class="badge-count">
                            <i class="bi bi-box-seam"></i>
                            <?php echo e($products->count()); ?> products
                        </span>
                        <span class="badge-count">
                            <i class="bi bi-truck"></i>
                            Fast Delivery
                        </span>
                        <span class="badge-count">
                            <i class="bi bi-shield-check"></i>
                            Trusted Seller
                        </span>
                    </div>
                </div>
            </div>

            
            <div class="hero-cart-panel">
                <div class="hero-cart-box">
                    <div class="hero-cart-header">
                        <i class="bi bi-cart3"></i>
                        <span>Your Cart</span>
                        
                        <span class="cart-pill-count" id="hero-cart-count"><?php echo e($cartItemsCount); ?></span>
                    </div>
                    <div class="hero-cart-body">
                        <p class="hero-cart-text">Quick checkout available</p>
                        <div class="hero-qty-row">
                            <button class="hero-qty-btn" onclick="scrollToSidebar()">
                                <i class="bi bi-arrow-down"></i>
                            </button>
                            <span class="hero-qty-info">
                                Items in cart: <b id="hero-cart-total"><?php echo e($cartItemsCount); ?></b>
                            </span>
                        </div>
                    </div>
                    <div class="hero-cart-footer">
                        <button class="hero-cart-btn" onclick="scrollToSidebar()">
                            <i class="bi bi-bag-check"></i>
                            Go to Checkout
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    
    <div class="page-body">

        
        <section>
            <div class="section-header">
                <h2 class="section-title">Products</h2>
            </div>

            <div class="products-grid" id="products">
                <?php $__empty_1 = true; $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <?php
                        $hasOffer =
                            !is_null($product->offer_price) &&
                            $product->offer_price < $product->price &&
                            (is_null($product->offer_expiry_date) || $product->offer_expiry_date->isFuture());

                        $displayPrice = $hasOffer ? (float) $product->offer_price : (float) $product->price;

                        $featureImage = $product->feature_image
                            ? (\Illuminate\Support\Str::startsWith($product->feature_image, ['http://', 'https://'])
                                ? $product->feature_image
                                : asset('storage/' . $product->feature_image))
                            : null;

                        $gallery = optional($product->images->first())->image_path;
                        $galleryUrl = $gallery
                            ? (\Illuminate\Support\Str::startsWith($gallery, ['http://', 'https://'])
                                ? $gallery
                                : asset('storage/' . $gallery))
                            : null;

                        $image =
                            $featureImage ?:
                            ($galleryUrl ?:
                            'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80');
                    ?>

                    <article class="product-card" data-product-id="<?php echo e($product->id); ?>"
                        data-product-name="<?php echo e($product->product_title); ?>" data-product-price="<?php echo e($displayPrice); ?>"
                        data-product-regular="<?php echo e((float) $product->price); ?>"
                        data-product-offer="<?php echo e($hasOffer ? (float) $product->offer_price : ''); ?>"
                        data-product-stock="<?php echo e((int) $product->stock); ?>" data-product-image="<?php echo e($image); ?>"
                        data-has-offer="<?php echo e($hasOffer ? 'true' : 'false'); ?>"
                        data-add-url="<?php echo e(route('storefront.cart.add', $product)); ?>"
                        data-update-url="<?php echo e(route('storefront.cart.quantity', $product)); ?>">
                        <a href="<?php echo e(route('storefront.products.show', $product)); ?>">
                            <img src="<?php echo e($image); ?>" alt="<?php echo e($product->product_title); ?>" class="product-card-img"
                                loading="lazy">
                        </a>

                        <div class="product-card-body">
                            <div class="product-card-title"><?php echo e($product->product_title); ?></div>

                            <div class="product-card-price">
                                <span class="price-main"><?php echo e(number_format($displayPrice, 0)); ?>৳</span>
                                <?php if($hasOffer): ?>
                                    <span class="price-original"><?php echo e(number_format((float) $product->price, 0)); ?>৳</span>
                                    <span class="badge-offer">OFFER</span>
                                <?php endif; ?>
                            </div>

                            <div class="product-card-actions">
                                
                                <div class="qty-stepper" id="stepper-<?php echo e($product->id); ?>">
                                    <button class="qty-btn" onclick="changeQty(<?php echo e($product->id); ?>, 'decrease')">−</button>
                                    <span class="qty-display" id="qty-<?php echo e($product->id); ?>">1</span>
                                    <button class="qty-btn" onclick="changeQty(<?php echo e($product->id); ?>, 'increase')">+</button>
                                </div>

                                <button class="btn-add" id="add-btn-<?php echo e($product->id); ?>"
                                    onclick="addToCart(<?php echo e($product->id); ?>)">
                                    <i class="bi bi-cart-plus"></i> Add
                                </button>

                                <a href="<?php echo e(route('storefront.products.show', $product)); ?>" class="btn-view">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </div>
                        </div>
                    </article>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <p style="color:var(--muted); grid-column:1/-1;">No products available yet.</p>
                <?php endif; ?>
            </div>
        </section>

        
        <aside class="sidebar" id="sidebar">

            
            <div class="sidebar-card">
                <h2><i class="bi bi-bag" style="font-size:.95rem;margin-right:6px;"></i>Your Cart</h2>

                <div class="cart-items-list" id="sidebar-cart-list">
                    <div class="cart-empty" id="cart-empty-state">
                        <i class="bi bi-bag-x"></i>
                        Your cart is empty
                    </div>
                </div>

                <div class="cart-summary-row" id="cart-summary-row" style="display:none;">
                    <span>Total</span>
                    <span id="sidebar-total">0৳</span>
                </div>

                <a href="<?php echo e(route('storefront.cart')); ?>" class="btn-view"
                    style="width:100%;justify-content:center;margin-top:12px;border-radius:10px;padding:10px;">
                    <i class="bi bi-bag-check me-1"></i> View Full Cart
                </a>
            </div>

            
            <div class="sidebar-card" id="checkout-section">
                <h2><i class="bi bi-lightning-charge" style="font-size:.95rem;margin-right:6px;"></i>Quick Checkout</h2>
                <p style="font-size:.8rem;color:var(--muted);margin-bottom:16px;">
                    Cash on Delivery — no prepayment needed.
                </p>

                <form id="checkout-form" method="POST" action="<?php echo e(route('storefront.checkout.cod')); ?>">
                    <?php echo csrf_field(); ?>
                    <div class="form-group">
                        <label>Your Name</label>
                        <input type="text" name="customer_name" class="form-control" placeholder="Full name"
                            required>
                    </div>
                    <div class="form-group">
                        <label>Phone</label>
                        <input type="text" name="phone" class="form-control" placeholder="01XXXXXXXXX" required>
                    </div>
                    <div class="form-group">
                        <label>Delivery Address</label>
                        <textarea name="address" class="form-control" placeholder="Street, area, city" required></textarea>
                    </div>
                    <div class="form-group">
                        <label>Note (optional)</label>
                        <textarea name="notes" class="form-control" placeholder="Any special instructions"></textarea>
                    </div>
                    <button type="submit" class="btn-checkout" id="place-order-btn" disabled>
                        <i class="bi bi-check2-circle"></i> Place COD Order
                    </button>
                </form>
            </div>

        </aside>
    </div>

    
    <div id="toast-container"></div>

    <?php $__env->startPush('frontend_js'); ?>
        <script>
            // ─────────────────────────────────────────────
            // STATE
            // ─────────────────────────────────────────────
            const CSRF = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            // Boot cart from server session
            let cart = <?php echo json_encode(array_values($cartItems), 15, 512) ?>;

            // Normalise to keyed map by product_id for easy access
            let cartMap = {};
            cart.forEach(item => {
                cartMap[item.product_id] = {
                    ...item
                };
            });

            // ─────────────────────────────────────────────
            // TOAST
            // ─────────────────────────────────────────────
            function showToast(msg, type = 'success') {
                const container = document.getElementById('toast-container');
                const el = document.createElement('div');
                el.className = `toast toast-${type}`;
                el.innerHTML = `<span class="toast-icon">${type === 'success' ? '✓' : '✕'}</span><span>${msg}</span>`;
                container.appendChild(el);
                setTimeout(() => {
                    el.classList.add('toast-out');
                    setTimeout(() => el.remove(), 320);
                }, 2800);
            }

            // ─────────────────────────────────────────────
            // ADD TO CART (AJAX)
            // ─────────────────────────────────────────────
            async function addToCart(productId) {
                const card = document.querySelector(`[data-product-id="${productId}"]`);
                const btn = document.getElementById(`add-btn-${productId}`);
                const url = card.dataset.addUrl;
                const stock = parseInt(card.dataset.productStock || '0', 10);

                if (stock <= 0) {
                    showToast('Requested quantity is not available in stock.', 'error');
                    return;
                }

                if (cartMap[productId] && cartMap[productId].quantity >= stock) {
                    showToast('Requested quantity is not available in stock.', 'error');
                    return;
                }

                btn.classList.add('loading');
                btn.innerHTML = '<i class="bi bi-hourglass-split"></i>';

                try {
                    const res = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-CSRF-TOKEN': CSRF,
                            'Accept': 'application/json'
                        },
                        body: new URLSearchParams({
                            _token: CSRF,
                            quantity: 1
                        })
                    });

                    // ❗ ALWAYS TRY JSON FIRST
                    let data = null;
                    const contentType = res.headers.get('content-type');

                    if (contentType && contentType.includes('application/json')) {
                        data = await res.json();
                    }

                    // ❌ HARD FAIL CHECK
                    if (!res.ok) {
                        throw new Error(data?.message || 'Server error');
                    }

                    // Optional: backend message support
                    if (data && data.success === false) {
                        throw new Error(data.message || 'Failed to add item');
                    }

                    const name = card.dataset.productName;
                    const price = parseFloat(card.dataset.productPrice);
                    const image = card.dataset.productImage;

                    // ✅ SAFE CART UPDATE
                    if (cartMap[productId]) {
                        cartMap[productId].quantity = Math.min(cartMap[productId].quantity + 1, stock);
                    } else {
                        cartMap[productId] = {
                            product_id: productId,
                            name,
                            unit_price: price,
                            quantity: 1,
                            stock,
                            image,
                        };
                    }

                    showStepper(productId, cartMap[productId].quantity);
                    renderSidebarCart();

                    showToast(`"${name}" added to cart!`, 'success');

                } catch (err) {
                    console.error(err);
                    showToast(err.message || 'Could not add item', 'error');
                }

                btn.classList.remove('loading');
                btn.innerHTML = '<i class="bi bi-cart-plus"></i> Add';
            }

            // ─────────────────────────────────────────────
            // CHANGE QTY
            // ─────────────────────────────────────────────
            async function changeQty(productId, action) {
                if (!cartMap[productId]) return;

                const card = document.querySelector(`[data-product-id="${productId}"]`);
                const url = card?.dataset.updateUrl;
                const stock = cartMap[productId].stock || 99;
                const prev = cartMap[productId].quantity;

                if (action === 'increase') {
                    if (prev >= stock) {
                        showToast('Requested quantity is not available in stock.', 'error');
                        return;
                    }
                    cartMap[productId].quantity = Math.min(prev + 1, stock);
                } else {
                    cartMap[productId].quantity = Math.max(prev - 1, 1);
                }

                // Fire-and-forget server sync
                if (url) {
                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-CSRF-TOKEN': CSRF
                        },
                        body: new URLSearchParams({
                            _token: CSRF,
                            action
                        })
                    }).catch(() => {});
                }

                // Update stepper on card
                const qtyEl = document.getElementById(`qty-${productId}`);
                if (qtyEl) qtyEl.textContent = cartMap[productId].quantity;

                renderSidebarCart();
            }

            // ─────────────────────────────────────────────
            // REMOVE FROM SIDEBAR
            // ─────────────────────────────────────────────
            function removeFromSidebar(productId) {
                if (!cartMap[productId]) return;

                const card = document.querySelector(`[data-product-id="${productId}"]`);
                delete cartMap[productId];

                // Hide stepper, restore Add button on card
                const stepper = document.getElementById(`stepper-${productId}`);
                const btn = document.getElementById(`add-btn-${productId}`);
                if (stepper) stepper.classList.remove('active');
                if (btn) btn.style.display = '';

                renderSidebarCart();
                showToast('Item removed from cart.', 'success');
            }

            // ─────────────────────────────────────────────
            // STEPPER VISIBILITY
            // ─────────────────────────────────────────────
            function showStepper(productId, qty) {
                const stepper = document.getElementById(`stepper-${productId}`);
                const btn = document.getElementById(`add-btn-${productId}`);
                const qtyEl = document.getElementById(`qty-${productId}`);

                if (stepper) stepper.classList.add('active');
                if (btn) btn.style.display = 'none';
                if (qtyEl) qtyEl.textContent = qty;
            }
            // ─────────────────────────────────────────────


            // ─────────────────────────────────────────────
            // RENDER SIDEBAR CART
            // ─────────────────────────────────────────────
            function renderSidebarCart() {
                const list = document.getElementById('sidebar-cart-list');
                const summaryRow = document.getElementById('cart-summary-row');
                const placeBtn = document.getElementById('place-order-btn');
                const heroCount = document.getElementById('hero-cart-count');
                const heroTotal = document.getElementById('hero-cart-total');

                const items = Object.values(cartMap).filter(i => i.quantity > 0);
                let total = 0;
                let count = 0;

                // Clear only dynamic items, not the empty-state element
                list.querySelectorAll('.cart-item').forEach(el => el.remove());

                if (items.length === 0) {
                    document.getElementById('cart-empty-state').style.display = '';
                    summaryRow.style.display = 'none';
                    if (heroCount) heroCount.textContent = 0;
                    if (heroTotal) heroTotal.textContent = 0;
                    if (placeBtn) placeBtn.disabled = true;
                    return;
                }

                document.getElementById('cart-empty-state').style.display = 'none';

                items.forEach(item => {
                    const lineTotal = item.unit_price * item.quantity;
                    total += lineTotal;
                    count += item.quantity;

                    const div = document.createElement('div');
                    div.className = 'cart-item';
                    div.innerHTML = `
                        <img src="${item.image}" class="cart-item-img" alt="${item.name}">
                        <div class="cart-item-info">
                            <div class="cart-item-name">${item.name}</div>
                            <div class="cart-item-price">
                                ${item.unit_price.toFixed(0)}৳ × ${item.quantity}
                                = <strong>${lineTotal.toFixed(0)}৳</strong>
                            </div>
                        </div>
                        <div class="cart-item-qty-ctrl">
                            <button class="ctrl-btn" onclick="changeQty(${item.product_id},'decrease')">−</button>
                            <span class="ctrl-qty">${item.quantity}</span>
                            <button class="ctrl-btn" onclick="changeQty(${item.product_id},'increase')">+</button>
                            <button class="ctrl-btn" onclick="removeFromSidebar(${item.product_id})" title="Remove">×</button>
                        </div>
                    `;
                    list.appendChild(div);
                });

                document.getElementById('sidebar-total').textContent = `${total.toFixed(0)}৳`;
                summaryRow.style.display = '';
                if (heroCount) heroCount.textContent = count;
                if (heroTotal) heroTotal.textContent = count;
                if (placeBtn) placeBtn.disabled = false;
            }

            // ─────────────────────────────────────────────
            // INIT — restore steppers for items already in cart
            // ─────────────────────────────────────────────
            document.addEventListener('DOMContentLoaded', () => {
                Object.values(cartMap).forEach(item => {
                    if (item.quantity > 0) {
                        showStepper(item.product_id, item.quantity);
                    }
                });
                renderSidebarCart();
            });

            // ─────────────────────────────────────────────
            // SCROLL TO SIDEBAR
            // ─────────────────────────────────────────────
            function scrollToSidebar() {
                document.getElementById('sidebar').scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        </script>
    <?php $__env->stopPush(); ?>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('frontendLayout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\Abdur Rahman\Desktop\faa\resources\views\frontend\shop-landing.blade.php ENDPATH**/ ?>