<?php $__env->startSection('frontend_layout'); ?>

    <?php $__env->startPush('frontend_css'); ?>
        <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>" />
        <title><?php echo e($product->product_title); ?> – <?php echo e(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: var(--cream);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                overflow: hidden;
                aspect-ratio: 4/3;
            }

            .main-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                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;
            }

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

            .thumb {
                width: 72px;
                height: 72px;
                border-radius: 10px;
                object-fit: cover;
                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: cover;
                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>
    <?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
        /* ── 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)"); ?>  <div class="breadcrumb-bar">
        <div class="breadcrumb-inner">
            <a href="<?php echo e(route('storefront.home')); ?>"><i class="bi bi-house"></i> Home</a>
            <span class="breadcrumb-sep">/</span>
            <?php if($product->shop): ?>
                <a href="<?php echo e(route('storefront.shops.landing', $product->shop)); ?>">
                    <?php echo e($product->shop->name); ?>

                </a>
                <span class="breadcrumb-sep">/</span>
            <?php endif; ?>
            <span class="breadcrumb-current"><?php echo e($product->product_title); ?></span>
        </div>
    </div>

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

            
            <div class="gallery-sticky">
                <div class="main-image-wrap" id="main-img-wrap">
                    <img id="mainImage" src="<?php echo e($productImage); ?>" alt="<?php echo e($product->product_title); ?>" class="main-image">
                    <?php if($hasOffer): ?>
                        <span class="img-badge"><?php echo e($savePct); ?>% OFF</span>
                    <?php endif; ?>
                    <span class="img-zoom-hint">
                        <i class="bi bi-zoom-in"></i> Click to zoom
                    </span>
                </div>

                <?php if($gallery->count() > 1): ?>
                    <div class="thumbs-row">
                        <?php $__currentLoopData = $gallery; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $thumb): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <img src="<?php echo e($thumb); ?>" class="thumb <?php echo e($i === 0 ? 'active' : ''); ?>"
                                onclick="switchImage(this)" alt="Product image <?php echo e($i + 1); ?>" loading="lazy">
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php endif; ?>
            </div>

            
            <div class="product-panel">

                
                <?php if($product->shop): ?>
                    <a href="<?php echo e(route('storefront.shops.landing', $product->shop)); ?>" class="shop-pill">
                        <i class="bi bi-shop"></i>
                        <?php echo e($product->shop->name); ?>

                    </a>
                <?php endif; ?>

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

                
                <div class="price-block">
                    <?php if($hasOffer): ?>
                        <span class="price-main"><?php echo e(number_format((float) $product->offer_price, 0)); ?>৳</span>
                        <span class="price-original"><?php echo e(number_format((float) $product->price, 0)); ?>৳</span>
                        <span class="price-save-badge">Save <?php echo e($savePct); ?>%</span>
                    <?php else: ?>
                        <span class="price-main"><?php echo e(number_format((float) $product->price, 0)); ?>৳</span>
                    <?php endif; ?>
                </div>

                
                <div class="stock-row">
                    <span class="stock-dot <?php echo e($stockState); ?>"></span>
                    <span style="font-size:.83rem; font-weight:600;"><?php echo e($stockLabel); ?></span>
                </div>

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

                
                <div class="atc-box">
                    <?php 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;">
                                <?php $__currentLoopData = $variantInventory; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $variant): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <label class="variant-pill <?php echo e($variant['is_available'] ? '' : 'disabled'); ?>"
                                        style="display:flex; flex-direction:column; gap:3px; border:1px solid var(--border); border-radius:12px; padding:10px 14px; cursor:<?php echo e($variant['is_available'] ? 'pointer' : 'not-allowed'); ?>; opacity:<?php echo e($variant['is_available'] ? '1' : '.55'); ?>; background:var(--cream); min-width:110px; position:relative;"
                                        data-variant-pill data-variant-key="<?php echo e($variant['key']); ?>">
                                        <input type="radio" name="variant_label" value="<?php echo e($variant['label']); ?>"
                                            data-stock="<?php echo e($variant['stock']); ?>" data-variant-key="<?php echo e($variant['key']); ?>"
                                            form="atc-form" style="display:none;"
                                            <?php echo e($variant['is_available'] ? '' : 'disabled'); ?>>
                                        <span style="font-weight:600;"><?php echo e($variant['label']); ?></span>
                                        <span class="qty-max-hint"><?php echo e($variant['stock']); ?> available</span>
                                        <span id="badge-<?php echo e($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>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                            <span class="qty-max-hint" id="variant-stock-note">Select a variant to continue.</span>
                        </div>

                        <div class="divider"></div>
                    <?php endif; ?>

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

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

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

                    <form id="atc-form" method="POST" action="<?php echo e(route('storefront.cart.add', $product)); ?>"
                        onsubmit="handleAddToCart(event)">
                        <?php echo csrf_field(); ?>
                        <input type="hidden" name="quantity" id="qty-input" value="1">
                        <input type="hidden" name="variant_label" id="variant-label-input" value="">

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

                    <a href="<?php echo e(route('storefront.cart')); ?>" class="btn-view-cart">
                        <i class="bi bi-bag"></i> View Cart
                    </a>

                    
                    <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>

                
                <div class="divider"></div>
                <table class="meta-table">
                    <tr>
                        <td>Shop</td>
                        <td>
                            <?php if($product->shop): ?>
                                <a href="<?php echo e(route('storefront.shops.landing', $product->shop)); ?>"
                                    style="color:var(--ink); font-weight:600; text-decoration:none;">
                                    <?php echo e($product->shop->name); ?>

                                </a>
                            <?php else: ?>
                                —
                            <?php endif; ?>
                        </td>
                    </tr>
                    <tr>
                        <td>Availability</td>
                        <td style="font-weight:600; color:<?php echo e($stockState === 'out' ? '#dc2626' : 'var(--success)'); ?>">
                            <?php echo e($stockLabel); ?>

                        </td>
                    </tr>
                    <?php if($hasOffer && $product->offer_expiry_date): ?>
                        <tr>
                            <td>Offer ends</td>
                            <td style="font-weight:600; color:var(--accent)">
                                <?php echo e($product->offer_expiry_date->format('d M Y')); ?>

                            </td>
                        </tr>
                    <?php endif; ?>
                    <tr>
                        <td>SKU</td>
                        <td style="color:var(--muted)">#<?php echo e(str_pad($product->id, 5, '0', STR_PAD_LEFT)); ?>

                        </td>
                    </tr>
                </table>

            </div>
        </div>

        
        <section class="related-section">
            <div class="related-header">
                <h2 class="section-heading">More from this shop</h2>
                <?php if($product->shop): ?>
                    <a href="<?php echo e(route('storefront.shops.landing', $product->shop)); ?>" class="btn-view-shop">
                        <i class="bi bi-shop"></i> View all products
                    </a>
                <?php endif; ?>
            </div>

            <div class="related-grid">
                <?php $__empty_1 = true; $__currentLoopData = $relatedProducts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $related): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <?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';
                    ?>

                    <a href="<?php echo e(route('storefront.products.show', $related)); ?>" class="related-card">
                        <img src="<?php echo e($rImage); ?>" alt="<?php echo e($related->product_title); ?>" loading="lazy">
                        <div class="related-card-body">
                            <div class="related-card-title"><?php echo e($related->product_title); ?></div>
                            <div style="display:flex; align-items:baseline; gap:8px;">
                                <?php if($rHasOffer): ?>
                                    <span class="related-card-price related-card-offer">
                                        <?php echo e(number_format((float) $related->offer_price, 0)); ?>৳
                                    </span>
                                    <span class="related-card-original">
                                        <?php echo e(number_format((float) $related->price, 0)); ?>৳
                                    </span>
                                <?php else: ?>
                                    <span class="related-card-price">
                                        <?php echo e(number_format((float) $related->price, 0)); ?>৳
                                    </span>
                                <?php endif; ?>
                            </div>
                        </div>
                    </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <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>
                <?php endif; ?>
            </div>
        </section>

    </div>

    
    <div id="toast-container"></div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('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 = <?php echo e(max(1, (int) $product->stock)); ?>;
        const HAS_VARIANTS = <?php echo e($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);

            // ✓ Sync the hidden variant_label input
            const variantLabelInput = document.getElementById('variant-label-input');
            if (variantLabelInput) {
                variantLabelInput.value = input.value;
            }

            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[name="variant_label"]').forEach(input => {
            input.addEventListener('change', function() {
                selectVariant(this);
            });
        });

        syncQtyControls();

        // ── VARIANT IN-CART BADGE TRACKING ──
        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';
            }
        }

        // ── ADD TO CART (AJAX) ──
        const CSRF = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        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(`"<?php echo e(addslashes($product->product_title)); ?>"${variantName} ×${addedQty} added to cart!`,
                    'success');

                // Update badge on the variant pill to show how many are in cart
                if (addedVarKey) {
                    variantCartCounts[addedVarKey] = (variantCartCounts[addedVarKey] || 0) + addedQty;
                    updateVariantBadge(addedVarKey, variantCartCounts[addedVarKey]);
                }

                // ✓ Always reset form so user can immediately add another variant
                setTimeout(() => {
                    // Deselect all variant pills
                    document.querySelectorAll('input[name="variant_label"]').forEach(r => r.checked = false);
                    document.querySelectorAll('[data-variant-pill]').forEach(pill => {
                        pill.style.borderColor = 'var(--border)';
                        pill.style.boxShadow = 'none';
                    });
                    // Reset hidden inputs
                    document.getElementById('variant-label-input').value = '';
                    // 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');
        }

        // ── 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>
<?php $__env->stopPush(); ?>

<?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/product-details.blade.php ENDPATH**/ ?>