@extends('frontendLayout')
@section('frontend_layout')
    @push('frontend_css')
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <title>{{ $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: contain;
                background: linear-gradient(180deg, #fffef9 0%, #f4efe8 100%);
                padding: 12px;
                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: 2px solid var(--ink);
                border-radius: 999px;
                overflow: hidden;
                background: #fff;
                flex-shrink: 0;
            }

            .qty-stepper.active {
                display: flex;
                animation: stepperPop .22s cubic-bezier(.34, 1.56, .64, 1) forwards;
            }

            @keyframes stepperPop {
                from {
                    transform: scale(.78);
                    opacity: 0;
                }

                to {
                    transform: scale(1);
                    opacity: 1;
                }
            }

            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }

            .qty-btn {
                background: none;
                border: none;
                padding: 7px 13px;
                font-size: 1.1rem;
                font-weight: 800;
                cursor: pointer;
                transition: background .15s;
                line-height: 1;
                color: var(--ink);
            }

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

            .qty-display {
                padding: 6px 8px;
                font-size: .9rem;
                font-weight: 800;
                min-width: 32px;
                text-align: center;
                border-left: 1.5px solid var(--border);
                border-right: 1.5px solid var(--border);
            }

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

            .btn-add:hover {
                background: #222;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
            }

            .btn-add:active {
                transform: translateY(0);
                box-shadow: none;
            }

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

            .btn-add.added {
                background: var(--success);
                pointer-events: none;
            }

            .btn-variant {
                background: transparent;
                color: var(--ink);
                border: 1.5px solid var(--border);
                border-radius: 10px;
                padding: 9px 11px;
                font-size: .78rem;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                text-decoration: none;
                transition: border-color .2s, background .2s;
                white-space: nowrap;
                flex-shrink: 0;
            }

            .btn-variant:hover {
                border-color: var(--ink);
                background: var(--paper);
                color: var(--ink);
            }

            .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: contain;
                background: #f3ede4;
                padding: 4px;
                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>
    @endpush

    {{-- ── FLASH MESSAGES ── --}}
    <div class="alert-bar">
        @if (session('success'))
            <div class="alert alert-success">
                <i class="bi bi-check-circle-fill"></i>{{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-error">
                <i class="bi bi-exclamation-circle-fill"></i>{{ session('error') }}
            </div>
        @endif
    </div>

    {{-- ── SHOP HERO ── --}}
    @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';
    @endphp

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

            {{-- Left: Shop Info --}}
            <div class="shop-info">
                <img src="{{ $logo }}" alt="{{ $shop->name }}" class="shop-logo">
                <div class="shop-meta">
                    <h1>{{ $shop->name }}</h1>
                    <p>{{ 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>
                            {{ $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>
    </div>

    {{-- ── MAIN CONTENT ── --}}
    <div style="max-width:1200px; margin:0 auto; padding:32px 24px;">

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

            <div class="products-grid" id="products">
                @forelse ($products as $product)
                    @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');
                    @endphp

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

                        <div class="product-card-body">
                            <div class="product-card-title">{{ $product->product_title }}</div>

                            <div class="product-card-price">
                                <span class="price-main">{{ number_format($displayPrice, 0) }}৳</span>
                                @if ($hasOffer)
                                    <span class="price-original">{{ number_format((float) $product->price, 0) }}৳</span>
                                    <span class="badge-offer">OFFER</span>
                                @endif
                            </div>

                            <div class="product-card-actions">
                                {{-- Qty stepper (hidden until item added) --}}
                                <div class="qty-stepper" id="stepper-{{ $product->id }}">
                                    <button class="qty-btn" onclick="changeQty({{ $product->id }}, 'decrease')">−</button>
                                    <span class="qty-display" id="qty-{{ $product->id }}">1</span>
                                    <button class="qty-btn" onclick="changeQty({{ $product->id }}, 'increase')">+</button>
                                </div>

                                @if ($product->hasVariantInventory())
                                    <a class="btn-variant"
                                        href="{{ route('storefront.products.show', $product) }}?return_to_shop=1"
                                        title="Choose a variant">
                                        <i class="bi bi-sliders"></i> Variants
                                    </a>
                                    <button class="btn-add" id="add-btn-{{ $product->id }}"
                                        onclick="addToCart({{ $product->id }})"
                                        data-original-content='<i class="bi bi-cart-plus"></i> Add'>
                                        <i class="bi bi-cart-plus"></i> Add
                                    </button>
                                @else
                                    <button class="btn-add" id="add-btn-{{ $product->id }}"
                                        onclick="addToCart({{ $product->id }})"
                                        data-original-content='<i class="bi bi-cart-plus"></i> Add to Cart'>
                                        <i class="bi bi-cart-plus"></i> Add to Cart
                                    </button>
                                @endif
                            </div>
                        </div>
                    </article>
                @empty
                    <p style="color:var(--muted); grid-column:1/-1;">No products available yet.</p>
                @endforelse
            </div>
        </section>
    </div>

    {{-- TOAST CONTAINER --}}
    <div id="toast-container"></div>

    @push('frontend_js')
        <script>
            // ─────────────────────────────────────────────
            // STATE
            // ─────────────────────────────────────────────
            const CSRF = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            // Boot cart from server session
            let cart = @json(array_values($cartItems));

            // Normalise to keyed map by cart item key for easy access
            let cartMap = {};
            cart.forEach(item => {
                const cartKey = item.cart_item_key || String(item.product_id);
                cartMap[cartKey] = {
                    ...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}`);
                if (!card || !btn) return;

                const url = card.dataset.addUrl;
                const productUrl = card.dataset.productUrl;
                const stock = parseInt(card.dataset.productStock || '0', 10);
                const hasVariants = card.dataset.hasVariants === 'true';
                const cartKey = String(productId);
                const originalContent = btn.dataset.originalContent || btn.innerHTML;

                if (hasVariants) {
                    window.location.href = productUrl + '?return_to_shop=1';
                    return;
                }

                if (stock <= 0) {
                    showToast('Out of stock. Please try again later.', 'error');
                    return;
                }

                if (cartMap[cartKey] && cartMap[cartKey].quantity >= stock) {
                    showToast('Cannot add more. Stock limit reached.', 'error');
                    return;
                }

                // ─ Loading state: inline spinner
                btn.classList.add('loading');
                btn.innerHTML =
                    '<span style="width:13px;height:13px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .55s linear infinite"></span>';

                let addedOk = false;

                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
                        })
                    });

                    let data = null;
                    const ct = res.headers.get('content-type');
                    if (ct && ct.includes('application/json')) data = await res.json();
                    if (!res.ok) throw new Error(data?.message || data?.error || 'Failed to add item');

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

                    if (cartMap[cartKey]) {
                        cartMap[cartKey].quantity = Math.min(cartMap[cartKey].quantity + 1, stock);
                    } else {
                        cartMap[cartKey] = {
                            cart_item_key: cartKey,
                            product_id: productId,
                            name,
                            unit_price: price,
                            quantity: 1,
                            stock,
                            image
                        };
                    }

                    addedOk = true;

                    // ─ Flash ✓ Added! on button, then morph into stepper
                    btn.classList.remove('loading');
                    btn.classList.add('added');
                    btn.innerHTML = '<i class="bi bi-check-lg"></i> Added!';
                    setTimeout(() => {
                        showStepper(productId, cartMap[cartKey].quantity);
                        btn.classList.remove('added');
                    }, 650);

                    renderSidebarCart();
                    showToast(`${name} added to cart successfully.`, 'success');

                } catch (err) {
                    console.error(err);
                    showToast(err.message || 'Could not add item. Try again.', 'error');
                } finally {
                    btn.classList.remove('loading');
                    if (!addedOk) btn.innerHTML = originalContent;
                }
            }

            // ─────────────────────────────────────────────
            // CHANGE QTY
            // ─────────────────────────────────────────────
            async function changeQty(productId, action, cartItemKey = null) {
                const key = cartItemKey || String(productId);
                if (!cartMap[key]) return;

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

                if (action === 'increase') {
                    if (prev >= stock) {
                        showToast('Requested quantity is not available in stock.', 'error');
                        return;
                    }
                    cartMap[key].quantity = Math.min(prev + 1, stock);
                } else {
                    cartMap[key].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,
                            cart_item_key: key,
                        })
                    }).catch(() => {});
                }

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

                renderSidebarCart();
            }

            // ─────────────────────────────────────────────
            // REMOVE FROM SIDEBAR
            // ─────────────────────────────────────────────
            function removeFromSidebar(productId, cartItemKey = null) {
                const key = cartItemKey || String(productId);
                if (!cartMap[key]) return;

                delete cartMap[key];

                // Hide stepper, restore Add button on card
                if (key === String(productId)) {
                    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;
            }
            // ─────────────────────────────────────────────


            // ─────────────────────────────────────────────
            // UPDATE NAV CART BADGE
            // ─────────────────────────────────────────────
            function updateNavCartBadge(count) {
                const badge = document.getElementById('nav-cart-badge');
                if (!badge) return;
                if (count > 0) {
                    badge.textContent = count > 99 ? '99+' : count;
                    badge.style.display = '';
                    badge.classList.remove('badge-pop');
                    void badge.offsetWidth; // reflow to restart animation
                    badge.classList.add('badge-pop');
                } else {
                    badge.style.display = 'none';
                }
            }

            // ─────────────────────────────────────────────
            // RENDER SIDEBAR CART
            // ─────────────────────────────────────────────
            function renderSidebarCart() {
                const items = Object.values(cartMap).filter(i => i.quantity > 0);
                let total = 0;
                let count = 0;

                items.forEach(item => {
                    total += item.unit_price * item.quantity;
                    count += item.quantity;
                });

                // Always update the navbar badge regardless of sidebar presence
                updateNavCartBadge(count);

                // Optional sidebar panel elements — only update if they exist in the DOM
                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 emptyState = document.getElementById('cart-empty-state');
                const totalEl = document.getElementById('sidebar-total');

                if (heroCount) heroCount.textContent = count;
                if (heroTotal) heroTotal.textContent = count;

                if (!list) return; // No sidebar panel on this page — badge already updated above

                list.querySelectorAll('.cart-item').forEach(el => el.remove());

                if (items.length === 0) {
                    if (emptyState) emptyState.style.display = '';
                    if (summaryRow) summaryRow.style.display = 'none';
                    if (placeBtn) placeBtn.disabled = true;
                    return;
                }

                if (emptyState) emptyState.style.display = 'none';

                items.forEach(item => {
                    const lineTotal = item.unit_price * 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>
                            ${item.variant_label ? `<div class="cart-item-price">Variant: ${item.variant_label}</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', '${item.cart_item_key || item.product_id}')">−</button>
                            <span class="ctrl-qty">${item.quantity}</span>
                            <button class="ctrl-btn" onclick="changeQty(${item.product_id}, 'increase', '${item.cart_item_key || item.product_id}')">+</button>
                            <button class="ctrl-btn" onclick="removeFromSidebar(${item.product_id}, '${item.cart_item_key || item.product_id}')" title="Remove">×</button>
                        </div>
                    `;
                    list.appendChild(div);
                });

                if (totalEl) totalEl.textContent = `${total.toFixed(0)}৳`;
                if (summaryRow) summaryRow.style.display = '';
                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 && (item.cart_item_key || String(item.product_id)) === String(item
                            .product_id)) {
                        showStepper(item.product_id, item.quantity);
                    }
                });
                renderSidebarCart();
            });

            // ─────────────────────────────────────────────
            // SCROLL TO SIDEBAR
            // ─────────────────────────────────────────────
            function scrollToSidebar() {
                document.getElementById('sidebar').scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        </script>
    @endpush

@endsection