@extends('frontendLayout')
@section('frontend_layout')

    @push('frontend_css')
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <title>{{ $product->product_title }} – {{ optional($product->shop)->name }}</title>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
        <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">

        <style>
            /* ── DESIGN TOKENS (same as shop landing) ── */
            :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;
            }

            /* ── BREADCRUMB ── */
            .breadcrumb-bar {
                background: var(--cream);
                border-bottom: 1px solid var(--border);
                padding: 12px 24px;
            }

            .breadcrumb-inner {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: .78rem;
                color: var(--muted);
                flex-wrap: wrap;
            }

            .breadcrumb-inner a {
                color: var(--muted);
                text-decoration: none;
                transition: color .2s;
            }

            .breadcrumb-inner a:hover {
                color: var(--ink);
            }

            .breadcrumb-sep {
                opacity: .4;
            }

            .breadcrumb-current {
                color: var(--ink);
                font-weight: 600;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 260px;
            }

            /* ── PAGE WRAPPER ── */
            .page-wrap {
                max-width: 1200px;
                margin: 0 auto;
                padding: 36px 24px 60px;
            }

            /* ── PRODUCT LAYOUT ── */
            .product-layout {
                display: grid;
                grid-template-columns: 1fr 440px;
                gap: 40px;
                align-items: start;
            }

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

            /* ── GALLERY ── */
            .gallery-sticky {
                position: sticky;
                top: 24px;
            }

            .main-image-wrap {
                position: relative;
                background: linear-gradient(180deg, #fffef9 0%, #f4efe8 100%);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                overflow: hidden;
                aspect-ratio: 4/3;
                display: grid;
                place-items: center;
                cursor: zoom-in;
            }

            .main-image {
                width: 100%;
                height: 100%;
                object-fit: contain;
                padding: 16px;
                display: block;
                transition: opacity .3s ease, transform .4s ease;
            }

            .main-image.switching {
                opacity: 0;
                transform: scale(1.03);
            }

            .img-badge {
                position: absolute;
                top: 14px;
                left: 14px;
                background: var(--accent);
                color: #fff;
                font-size: .7rem;
                font-weight: 700;
                padding: 4px 10px;
                border-radius: 999px;
                letter-spacing: .03em;
            }

            .img-zoom-hint {
                position: absolute;
                bottom: 12px;
                right: 12px;
                background: rgba(15, 15, 15, .55);
                color: #fff;
                font-size: .72rem;
                padding: 5px 10px;
                border-radius: 999px;
                backdrop-filter: blur(6px);
                display: flex;
                align-items: center;
                gap: 5px;
                pointer-events: none;
                opacity: 0;
                transition: opacity .3s;
            }

            .main-image-wrap:hover .img-zoom-hint {
                opacity: 1;
            }

            .zoom-lightbox {
                position: fixed;
                inset: 0;
                z-index: 200000;
                background: rgba(10, 10, 10, .86);
                display: none;
                align-items: center;
                justify-content: center;
                padding: 24px;
                cursor: zoom-out;
            }

            .zoom-lightbox.open {
                display: flex;
            }

            .zoom-lightbox-img {
                max-width: min(92vw, 1200px);
                max-height: 88vh;
                width: auto;
                height: auto;
                object-fit: contain;
                border-radius: 12px;
                background: #f6f1e9;
                box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
                padding: 14px;
                position: relative;
                z-index: 1;
            }

            .zoom-lightbox-close {
                position: absolute;
                top: 16px;
                right: 16px;
                width: 40px;
                height: 40px;
                border: 0;
                border-radius: 999px;
                background: rgba(255, 255, 255, .18);
                color: #fff;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 1.25rem;
                cursor: pointer;
                z-index: 2;
            }

            .zoom-lightbox-close:hover {
                background: rgba(255, 255, 255, .28);
            }

            /* ── THUMBNAILS ── */
            .thumbs-row {
                display: flex;
                gap: 10px;
                margin-top: 12px;
                flex-wrap: wrap;
            }

            .thumb {
                width: 72px;
                height: 72px;
                border-radius: 10px;
                object-fit: contain;
                background: #f3ede4;
                padding: 6px;
                border: 2px solid var(--border);
                cursor: pointer;
                transition: border-color .2s, transform .2s, box-shadow .2s;
                flex-shrink: 0;
            }

            .thumb:hover {
                transform: translateY(-2px);
                box-shadow: var(--shadow);
            }

            .thumb.active {
                border-color: var(--ink);
                box-shadow: 0 0 0 3px var(--accent-lt);
            }

            /* ── PRODUCT DETAILS PANEL ── */
            .product-panel {
                display: flex;
                flex-direction: column;
                gap: 24px;
            }

            .shop-pill {
                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;
                text-decoration: none;
                transition: background .2s;
                width: fit-content;
            }

            .shop-pill:hover {
                background: #eedad5;
                color: var(--accent);
            }

            .product-title {
                font-family: 'DM Serif Display', serif;
                font-size: 2rem;
                line-height: 1.2;
                letter-spacing: -.01em;
            }

            /* ── PRICE BLOCK ── */
            .price-block {
                display: flex;
                align-items: baseline;
                gap: 12px;
                flex-wrap: wrap;
            }

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

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

            .price-save-badge {
                background: #ecfdf5;
                color: var(--success);
                border: 1px solid #a7f3d0;
                border-radius: 8px;
                padding: 4px 10px;
                font-size: .78rem;
                font-weight: 700;
            }

            /* ── STOCK STATUS ── */
            .stock-row {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: .83rem;
            }

            .stock-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                flex-shrink: 0;
            }

            .stock-dot.in {
                background: var(--success);
            }

            .stock-dot.low {
                background: #d97706;
            }

            .stock-dot.out {
                background: #dc2626;
            }

            /* ── DIVIDER ── */
            .divider {
                height: 1px;
                background: var(--border);
            }

            /* ── ADD TO CART BOX ── */
            .atc-box {
                background: var(--cream);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                padding: 22px;
                display: flex;
                flex-direction: column;
                gap: 16px;
            }

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

            .qty-row {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .qty-stepper {
                display: flex;
                align-items: center;
                border: 1.5px solid var(--border);
                border-radius: 10px;
                overflow: hidden;
            }

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

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

            .qty-btn:disabled {
                opacity: .35;
                cursor: not-allowed;
            }

            .qty-val {
                font-size: .9rem;
                font-weight: 700;
                min-width: 42px;
                text-align: center;
                border-left: 1.5px solid var(--border);
                border-right: 1.5px solid var(--border);
                padding: 8px 0;
            }

            .qty-max-hint {
                font-size: .75rem;
                color: var(--muted);
            }

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

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

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

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

            .btn-atc.added {
                background: var(--success);
            }

            .btn-view-cart {
                width: 100%;
                padding: 11px;
                background: none;
                color: var(--ink);
                border: 1.5px solid var(--border);
                border-radius: 10px;
                font-family: 'Sora', sans-serif;
                font-size: .85rem;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                text-decoration: none;
                transition: border-color .2s, background .2s;
            }

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

            /* ── TRUST BADGES ── */
            .trust-row {
                display: flex;
                gap: 16px;
                flex-wrap: wrap;
            }

            .trust-item {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: .75rem;
                color: var(--muted);
            }

            .trust-item i {
                font-size: .9rem;
                color: var(--success);
            }

            /* ── PRODUCT META TABLE ── */
            .meta-table {
                width: 100%;
                border-collapse: collapse;
            }

            .meta-table tr+tr td {
                border-top: 1px solid var(--border);
            }

            .meta-table td {
                padding: 10px 0;
                font-size: .83rem;
                vertical-align: middle;
            }

            .meta-table td:first-child {
                color: var(--muted);
                width: 110px;
                font-weight: 600;
            }

            /* ── SECTION HEADING ── */
            .section-heading {
                font-family: 'DM Serif Display', serif;
                font-size: 1.5rem;
                margin-bottom: 20px;
            }

            /* ── RELATED PRODUCTS ── */
            .related-section {
                margin-top: 56px;
            }

            .related-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
            }

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

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

            .related-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
                gap: 18px;
            }

            .related-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;
                text-decoration: none;
                color: var(--ink);
            }

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

            .related-card img {
                width: 100%;
                height: 175px;
                object-fit: contain;
                background: linear-gradient(180deg, #fffef9 0%, #f4efe8 100%);
                padding: 12px;
                display: block;
            }

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

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

            .related-card-price {
                font-size: .95rem;
                font-weight: 700;
            }

            .related-card-offer {
                color: var(--success);
            }

            .related-card-original {
                font-size: .78rem;
                color: var(--muted);
                text-decoration: line-through;
            }

            /* ── TOAST (matches shop landing) ── */
            #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 ── */
            .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;
            }

            /* ── EMPTY RELATED ── */
            .no-related {
                grid-column: 1/-1;
                text-align: center;
                padding: 40px;
                color: var(--muted);
                font-size: .88rem;
                background: var(--cream);
                border: 1px solid var(--border);
                border-radius: var(--radius);
            }
        </style>
    @endpush

    {{-- <x-frontend.navbar :cart-count="$cartCount" :nav-shops="$navShops" /> --}}

    {{-- Flash --}}
    <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>

    @php
        /* ── Gallery ── */
        $gallery = collect([$productImage])
            ->merge(
                $product->images->map(
                    fn($img) => \Illuminate\Support\Str::startsWith($img->image_path, ['http://', 'https://'])
                        ? $img->image_path
                        : asset('storage/' . $img->image_path),
                ),
            )
            ->unique()
            ->values();

        /* ── Offer calc ── */
        $savePct = $hasOffer ? round((1 - $product->offer_price / $product->price) * 100) : 0;

        /* ── Stock state ── */
        $variantInventory = $product->variantInventory();
        $stockState = $product->stock <= 0 ? 'out' : ($product->stock <= 5 ? 'low' : 'in');
        $stockLabel =
            $product->stock <= 0
                ? 'Out of stock'
                : ($product->stock <= 5
                    ? "Only {$product->stock} left!"
                : "In stock ({$product->stock} available)"); @endphp {{-- ── BREADCRUMB ── --}} <div class="breadcrumb-bar">
        <div class="breadcrumb-inner">
            <a href="{{ route('storefront.home') }}"><i class="bi bi-house"></i> Home</a>
            <span class="breadcrumb-sep">/</span>
            @if ($product->shop)
                <a href="{{ route('storefront.shops.landing', $product->shop) }}">
                    {{ $product->shop->name }}
                </a>
                <span class="breadcrumb-sep">/</span>
            @endif
            <span class="breadcrumb-current">{{ $product->product_title }}</span>
        </div>
    </div>

    <div class="page-wrap">
        <div class="product-layout">

            {{-- ── LEFT: GALLERY ── --}}
            <div class="gallery-sticky">
                <div class="main-image-wrap" id="main-img-wrap">
                    <img id="mainImage" src="{{ $productImage }}" alt="{{ $product->product_title }}" class="main-image">
                    @if ($hasOffer)
                        <span class="img-badge">{{ $savePct }}% OFF</span>
                    @endif
                    <span class="img-zoom-hint">
                        <i class="bi bi-zoom-in"></i> Click to zoom
                    </span>
                </div>

                @if ($gallery->count() > 1)
                    <div class="thumbs-row">
                        @foreach ($gallery as $i => $thumb)
                            <img src="{{ $thumb }}" class="thumb {{ $i === 0 ? 'active' : '' }}"
                                onclick="switchImage(this)" alt="Product image {{ $i + 1 }}" loading="lazy">
                        @endforeach
                    </div>
                @endif

                <div class="zoom-lightbox" id="zoomLightbox" aria-hidden="true" role="dialog" aria-label="Image preview">
                    <button type="button" class="zoom-lightbox-close" id="zoomLightboxClose" aria-label="Close preview">
                        <i class="bi bi-x-lg"></i>
                    </button>
                    <img id="zoomLightboxImg" class="zoom-lightbox-img" src="{{ $productImage }}"
                        alt="{{ $product->product_title }} preview">
                </div>
            </div>

            {{-- ── RIGHT: DETAILS PANEL ── --}}
            <div class="product-panel">

                {{-- Shop pill --}}
                @if ($product->shop)
                    <a href="{{ route('storefront.shops.landing', $product->shop) }}" class="shop-pill">
                        <i class="bi bi-shop"></i>
                        {{ $product->shop->name }}
                    </a>
                @endif

                {{-- Title --}}
                <h1 class="product-title">{{ $product->product_title }}</h1>

                {{-- Price --}}
                <div class="price-block">
                    @if ($hasOffer)
                        <span class="price-main">{{ number_format((float) $product->offer_price, 0) }}৳</span>
                        <span class="price-original">{{ number_format((float) $product->price, 0) }}৳</span>
                        <span class="price-save-badge">Save {{ $savePct }}%</span>
                    @else
                        <span class="price-main">{{ number_format((float) $product->price, 0) }}৳</span>
                    @endif
                </div>

                {{-- Stock --}}
                <div class="stock-row">
                    <span class="stock-dot {{ $stockState }}"></span>
                    <span style="font-size:.83rem; font-weight:600;">{{ $stockLabel }}</span>
                </div>

                <div class="divider"></div>

                {{-- Add to Cart Box --}}
                <div class="atc-box">
                    @if ($variantInventory !== [])
                        <div style="display:flex; flex-direction:column; gap:10px;">
                            <span class="atc-label">Choose Variant</span>
                            <div style="display:flex; flex-wrap:wrap; gap:10px;">
                                @foreach ($variantInventory as $variant)
                                    <label class="variant-pill {{ $variant['is_available'] ? '' : 'disabled' }}"
                                        style="display:flex; flex-direction:column; gap:3px; border:1px solid var(--border); border-radius:12px; padding:10px 14px; cursor:{{ $variant['is_available'] ? 'pointer' : 'not-allowed' }}; opacity:{{ $variant['is_available'] ? '1' : '.55' }}; background:var(--cream); min-width:110px; position:relative;"
                                        data-variant-pill data-variant-key="{{ $variant['key'] }}">
                                        <input type="radio" name="variant_label" value="{{ $variant['label'] }}"
                                            data-stock="{{ $variant['stock'] }}" data-variant-key="{{ $variant['key'] }}"
                                            form="atc-form" style="display:none;"
                                            {{ $variant['is_available'] ? '' : 'disabled' }}>
                                        <span style="font-weight:600;">{{ $variant['label'] }}</span>
                                        <span class="qty-max-hint">{{ $variant['stock'] }} available</span>
                                        <span id="badge-{{ $variant['key'] }}"
                                            style="display:none; position:absolute; top:-8px; right:-6px; background:#2d7a4f; color:#fff; font-size:.62rem; font-weight:700; border-radius:99px; padding:2px 7px; line-height:1.5; white-space:nowrap;"></span>
                                    </label>
                                @endforeach
                            </div>
                            <span class="qty-max-hint" id="variant-stock-note">Select a variant to continue.</span>
                        </div>

                        <div class="divider"></div>
                    @endif

                    <span class="atc-label">Quantity</span>

                    <div class="qty-row">
                        <div class="qty-stepper">
                            <button type="button" class="qty-btn" id="qty-dec" onclick="adjustQty(-1)"
                                {{ $product->stock <= 0 ? 'disabled' : '' }}>−
                            </button>
                            <span class="qty-val" id="qty-display">1</span>
                            <button type="button" class="qty-btn" id="qty-inc" onclick="adjustQty(1)"
                                {{ $product->stock <= 0 ? 'disabled' : '' }}>+
                            </button>
                        </div>
                        <span class="qty-max-hint" id="qty-hint">
                            @if ($variantInventory !== [])
                                Select a variant
                            @elseif($product->stock > 0)
                                Max: {{ $product->stock }}
                            @endif
                        </span>
                    </div>

                    <form id="atc-form" method="POST" action="{{ route('storefront.cart.add', $product) }}"
                        onsubmit="handleAddToCart(event)">
                        @csrf
                        <input type="hidden" name="quantity" id="qty-input" value="1">

                        <button type="submit" class="btn-atc" id="atc-btn"
                            {{ $product->stock <= 0 || $variantInventory !== [] ? 'disabled' : '' }}>
                            <i class="bi bi-cart-plus"></i>
                            {{ $product->stock <= 0 ? 'Out of Stock' : 'Add to Cart' }} </button>
                    </form>

                    <a href="{{ route('storefront.cart') }}" class="btn-view-cart">
                        <i class="bi bi-bag"></i> View Cart
                    </a>

                    {{-- Trust badges --}}
                    <div class="trust-row">
                        <div class="trust-item">
                            <i class="bi bi-truck"></i>
                            <span>Fast delivery</span>
                        </div>
                        <div class="trust-item">
                            <i class="bi bi-shield-check"></i>
                            <span>Secure checkout</span>
                        </div>
                        <div class="trust-item">
                            <i class="bi bi-cash-coin"></i>
                            <span>Cash on delivery</span>
                        </div>
                    </div>
                </div>

                {{-- Meta table --}}
                <div class="divider"></div>
                <table class="meta-table">
                    <tr>
                        <td>Shop</td>
                        <td>
                            @if ($product->shop)
                                <a href="{{ route('storefront.shops.landing', $product->shop) }}"
                                    style="color:var(--ink); font-weight:600; text-decoration:none;">
                                    {{ $product->shop->name }}
                                </a>
                            @else
                                —
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td>Availability</td>
                        <td style="font-weight:600; color:{{ $stockState === 'out' ? '#dc2626' : 'var(--success)' }}">
                            {{ $stockLabel }}
                        </td>
                    </tr>
                    @if ($hasOffer && $product->offer_expiry_date)
                        <tr>
                            <td>Offer ends</td>
                            <td style="font-weight:600; color:var(--accent)">
                                {{ $product->offer_expiry_date->format('d M Y') }}
                            </td>
                        </tr>
                    @endif
                </table>

            </div>
        </div>

        {{-- ── RELATED PRODUCTS ── --}}
        <section class="related-section">
            <div class="related-header">
                <h2 class="section-heading">More from this shop</h2>
                @if ($product->shop)
                    <a href="{{ route('storefront.shops.landing', $product->shop) }}" class="btn-view-shop">
                        <i class="bi bi-shop"></i> View all products
                    </a>
                @endif
            </div>

            <div class="related-grid">
                @forelse($relatedProducts as $related)
                    @php
                        $rHasOffer =
                            !is_null($related->offer_price) &&
                            $related->offer_price < $related->price &&
                            (is_null($related->offer_expiry_date) || $related->offer_expiry_date->isFuture());

                        $rImage = $related->feature_image
                            ? (\Illuminate\Support\Str::startsWith($related->feature_image, ['http://', 'https://'])
                                ? $related->feature_image
                                : asset('storage/' . $related->feature_image))
                            : 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80';
                    @endphp

                    <a href="{{ route('storefront.products.show', $related) }}" class="related-card">
                        <img src="{{ $rImage }}" alt="{{ $related->product_title }}" loading="lazy">
                        <div class="related-card-body">
                            <div class="related-card-title">{{ $related->product_title }}</div>
                            <div style="display:flex; align-items:baseline; gap:8px;">
                                @if ($rHasOffer)
                                    <span class="related-card-price related-card-offer">
                                        {{ number_format((float) $related->offer_price, 0) }}৳
                                    </span>
                                    <span class="related-card-original">
                                        {{ number_format((float) $related->price, 0) }}৳
                                    </span>
                                @else
                                    <span class="related-card-price">
                                        {{ number_format((float) $related->price, 0) }}৳
                                    </span>
                                @endif
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="no-related">
                        <i class="bi bi-box-seam" style="font-size:1.8rem; display:block; margin-bottom:8px;"></i>
                        No related products found.
                    </div>
                @endforelse
            </div>
        </section>

    </div>

    {{-- Toast container --}}
    <div id="toast-container"></div>
@endsection

@push('frontend_js')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // ── QTY STEPPER ──
        const DEFAULT_MAX_QTY = {{ max(1, (int) $product->stock) }};
        const HAS_VARIANTS = {{ $variantInventory !== [] ? 'true' : 'false' }};
        let maxQty = HAS_VARIANTS ? 1 : DEFAULT_MAX_QTY;
        let qty = 1;

        function syncQtyControls() {
            document.getElementById('qty-display').textContent = qty;
            document.getElementById('qty-input').value = qty;
            document.getElementById('qty-dec').disabled = qty <= 1 || (HAS_VARIANTS && !document.querySelector(
                'input[name="variant_label"]:checked'));
            document.getElementById('qty-inc').disabled = qty >= maxQty || (HAS_VARIANTS && !document.querySelector(
                'input[name="variant_label"]:checked'));
            document.getElementById('qty-hint').textContent = HAS_VARIANTS ?
                (document.querySelector('input[name="variant_label"]:checked') ? `Max: ${maxQty}` : 'Select a variant') :
                `Max: ${maxQty}`;
        }

        function adjustQty(delta) {
            qty = Math.min(Math.max(qty + delta, 1), maxQty);
            // Remember this qty for the currently selected variant
            const checked = document.querySelector('input[name="variant_label"]:checked');
            if (checked && checked.dataset.variantKey) {
                variantQtyMap[checked.dataset.variantKey] = qty;
            }
            syncQtyControls();
        }

        // Per-variant qty memory: remembers qty the user set for each variant
        const variantQtyMap = {};

        function selectVariant(input) {
            document.querySelectorAll('[data-variant-pill]').forEach(pill => {
                pill.style.borderColor = 'var(--border)';
                pill.style.boxShadow = 'none';
            });

            const selectedPill = input.closest('[data-variant-pill]');
            if (selectedPill) {
                selectedPill.style.borderColor = 'var(--accent)';
                selectedPill.style.boxShadow = '0 0 0 3px var(--accent-lt)';
            }

            const vKey = input.dataset.variantKey;
            maxQty = Math.max(1, parseInt(input.dataset.stock || '1', 10));
            // Restore remembered qty for this variant, or default to 1
            qty = Math.min(variantQtyMap[vKey] || 1, maxQty);

            const note = document.getElementById('variant-stock-note');
            if (note) {
                note.textContent = `${input.value}: ${maxQty} available`;
            }

            const addButton = document.getElementById('atc-btn');
            if (addButton) {
                addButton.disabled = maxQty < 1;
            }

            syncQtyControls();
        }

        document.querySelectorAll('input[type="radio"][name="variant_label"]').forEach(input => {
            input.addEventListener('change', function() {
                selectVariant(this);
            });
        });

        syncQtyControls();

        // ── VARIANT IN-CART BADGE TRACKING ──
        const CURRENT_PRODUCT_ID = {{ (int) $product->id }};
        const variantCartCounts = {};

        function updateVariantBadge(variantKey, totalQty) {
            const badge = document.getElementById('badge-' + variantKey);
            if (!badge) return;
            if (totalQty > 0) {
                badge.textContent = 'In cart: ' + totalQty;
                badge.style.display = 'inline-block';
            } else {
                badge.style.display = 'none';
            }
        }

        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;
                badge.classList.add('badge-pop');
            } else {
                badge.style.display = 'none';
            }
        }

        function syncCartUI(cartItems) {
            const items = Array.isArray(cartItems) ? cartItems : [];
            const navCount = items.reduce((sum, item) => sum + Number(item.quantity || 0), 0);
            updateNavCartBadge(navCount);

            Object.keys(variantCartCounts).forEach(key => delete variantCartCounts[key]);

            items.forEach(item => {
                if (Number(item.product_id) !== CURRENT_PRODUCT_ID || !item.variant_key) return;
                const key = String(item.variant_key);
                variantCartCounts[key] = (variantCartCounts[key] || 0) + Number(item.quantity || 0);
            });

            document.querySelectorAll('[data-variant-key]').forEach(el => {
                const key = el.dataset.variantKey;
                if (!key) return;
                updateVariantBadge(key, variantCartCounts[key] || 0);
            });
        }

        // ── ADD TO CART (AJAX) ──
        const CSRF = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const BOOT_CART = @json(array_values((array) session('cart', [])));
        syncCartUI(BOOT_CART);

        async function handleAddToCart(e) {
            e.preventDefault();
            const btn = document.getElementById('atc-btn');
            const form = document.getElementById('atc-form');

            // ✓ Validate variant selection if needed
            if (HAS_VARIANTS && !document.querySelector('input[name="variant_label"]:checked')) {
                showToast('Please select a product variant.', 'error');
                return;
            }

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

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

                const payload = await res.json().catch(() => ({}));

                // ✓ Check actual response status
                if (!res.ok) {
                    const errMsg = payload?.message || payload?.error || 'Failed to add to cart';
                    throw new Error(errMsg);
                }

                // ✓ Success response
                btn.classList.remove('loading');
                btn.classList.add('added');
                const selectedVariant = document.querySelector('input[name="variant_label"]:checked');
                const variantName = selectedVariant ? ` (${selectedVariant.value})` : '';
                const addedVarKey = selectedVariant ? selectedVariant.dataset.variantKey : null;
                const addedQty = qty;
                btn.innerHTML = '<i class="bi bi-check-lg"></i> Added!';
                showToast(`"{{ addslashes($product->product_title) }}"${variantName} ×${addedQty} added to cart!`,
                    'success');

                if (Array.isArray(payload.cart)) {
                    syncCartUI(payload.cart);
                } else {
                    const currentBadge = document.getElementById('nav-cart-badge');
                    const fallbackCount = Number(currentBadge?.textContent || 0) + addedQty;
                    updateNavCartBadge(fallbackCount);
                }

                // ✓ Always reset form so user can immediately add another variant
                setTimeout(() => {
                    // Deselect all variant pills
                    document.querySelectorAll('input[type="radio"][name="variant_label"]').forEach(r => r
                        .checked = false);
                    document.querySelectorAll('[data-variant-pill]').forEach(pill => {
                        pill.style.borderColor = 'var(--border)';
                        pill.style.boxShadow = 'none';
                    });
                    // Clear this variant's qty memory so next selection starts fresh at 1
                    if (addedVarKey) delete variantQtyMap[addedVarKey];
                    // Reset qty
                    qty = 1;
                    maxQty = HAS_VARIANTS ? 1 : DEFAULT_MAX_QTY;
                    // Reset note
                    const note = document.getElementById('variant-stock-note');
                    if (note) note.textContent = 'Select a variant to continue.';
                    // Reset button
                    btn.classList.remove('added');
                    btn.innerHTML = '<i class="bi bi-cart-plus"></i> Add to Cart';
                    btn.disabled = true; // wait for next variant selection
                    syncQtyControls();
                }, 1000);
            } catch (error) {
                btn.classList.remove('loading');
                btn.innerHTML = '<i class="bi bi-cart-plus"></i> Add to Cart';
                showToast(error.message || 'Could not add item. Please try again.', 'error');
            }
        }

        // ── IMAGE GALLERY ──
        function switchImage(thumb) {
            const main = document.getElementById('mainImage');
            main.classList.add('switching');

            setTimeout(() => {
                main.src = thumb.src;
                main.classList.remove('switching');
            }, 180);

            document.querySelectorAll('.thumb').forEach(t => t.classList.remove('active'));
            thumb.classList.add('active');

            const zoomImg = document.getElementById('zoomLightboxImg');
            if (zoomImg) zoomImg.src = thumb.src;
        }

        // ── IMAGE LIGHTBOX ──
        (function initImageLightbox() {
            const wrap = document.getElementById('main-img-wrap');
            const main = document.getElementById('mainImage');
            const lightbox = document.getElementById('zoomLightbox');
            const lightboxImg = document.getElementById('zoomLightboxImg');
            const closeBtn = document.getElementById('zoomLightboxClose');

            if (!wrap || !main || !lightbox || !lightboxImg || !closeBtn) return;

            if (!lightbox.dataset.portalReady) {
                document.body.appendChild(lightbox);
                lightbox.dataset.portalReady = 'true';
            }

            function openLightbox() {
                lightboxImg.src = main.src;
                lightbox.classList.add('open');
                lightbox.setAttribute('aria-hidden', 'false');
                document.body.style.overflow = 'hidden';
            }

            function closeLightbox() {
                lightbox.classList.remove('open');
                lightbox.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = '';
            }

            wrap.addEventListener('click', openLightbox);
            closeBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                closeLightbox();
            });

            lightbox.addEventListener('click', function(e) {
                if (e.target === lightbox || e.target === lightboxImg) {
                    closeLightbox();
                }
            });

            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && lightbox.classList.contains('open')) {
                    closeLightbox();
                }
            });
        })();

        // ── 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);
        }
    </script>
@endpush