<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <style>
            .dash-header-title {
                font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
                font-weight: 700;
                font-size: 1.5rem;
                letter-spacing: -0.01em;
                background: linear-gradient(135deg, #1e1e2f 0%, #6366f1 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
        </style>
        <h2 class="dash-header-title"><?php echo e($product->name); ?></h2>
     <?php $__env->endSlot(); ?>

    <style>
        /* Font system biasa */
        .product-wrap,
        .product-wrap * {
            font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
        }

        .product-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 32px;
        }

        /* ── ALERT ── */
        .product-alert {
            padding: 14px 24px;
            margin-bottom: 32px;
            font-size: 0.8rem;
            font-weight: 500;
            border-radius: 8px;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-left-width: 3px;
            border-left-style: solid;
        }

        .product-alert-success {
            border-left-color: #10b981;
            color: #0f0f0f;
            background: #f0fdf4;
        }

        .product-alert-error {
            border-left-color: #ef4444;
            color: #ef4444;
            background: #fef2f2;
        }

        /* ── PRODUCT INFO CARD ── */
        .product-card {
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 48px;
        }

        .product-card-inner {
            padding: 40px;
        }

        .product-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
        }

        @media (max-width: 768px) {
            .product-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            .product-card-inner {
                padding: 24px;
            }
        }

        /* ── IMAGE GALLERY ── */
        .product-gallery {
            position: relative;
        }

        .product-carousel {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            margin-bottom: 16px;
            background: #fafafa;
        }

        .product-carousel-container {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }

        .product-carousel-container::-webkit-scrollbar {
            display: none;
        }

        .product-carousel-slide {
            flex-shrink: 0;
            width: 100%;
            scroll-snap-align: start;
        }

        .product-carousel-img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
        }

        .product-carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.95);
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 18px;
            color: #666;
            font-weight: 700;
        }

        .product-carousel-btn:hover {
            background: #fff;
            color: #6366f1;
            border-color: #6366f1;
        }

        .product-carousel-btn-left {
            left: 16px;
        }

        .product-carousel-btn-right {
            right: 16px;
        }

        .product-carousel-indicator {
            position: absolute;
            bottom: 16px;
            right: 16px;
            background: rgba(0,0,0,0.7);
            color: #fff;
            font-size: 0.7rem;
            padding: 6px 12px;
            border-radius: 20px;
            font-weight: 700;
        }

        .product-thumbnails {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 4px;
        }

        .product-thumbnails::-webkit-scrollbar {
            display: none;
        }

        .product-thumb {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border: 2px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
            background: #fafafa;
        }

        .product-thumb.active {
            border-color: #6366f1;
        }

        .product-thumb:hover {
            border-color: #a5b4fc;
        }

        /* ── PRODUCT DETAILS ── */
        .product-category {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #6366f1;
            margin-bottom: 12px;
        }

        .product-name {
            font-size: 2rem;
            font-weight: 700;
            color: #1f2937;
            letter-spacing: -0.02em;
            margin-bottom: 16px;
            line-height: 1.2;
        }

        .product-price-section {
            margin-bottom: 24px;
        }

        .product-price-range {
            font-size: 1.8rem;
            font-weight: 800;
            color: #ef4444;
        }

        .product-price-range-small {
            font-size: 1rem;
            font-weight: 500;
            color: #9ca3af;
        }

        .product-price-selected {
            font-size: 1.8rem;
            font-weight: 800;
            color: #ef4444;
        }

        .product-price-selected-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: #6b7280;
            margin-right: 8px;
        }

        .product-rating {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 28px;
        }

        .product-stars {
            display: flex;
            gap: 3px;
        }

        .product-star {
            font-size: 0.9rem;
            color: #e5e7eb;
            font-weight: 500;
        }

        .product-star-filled {
            color: #fbbf24;
        }

        .product-review-count {
            font-size: 0.75rem;
            font-weight: 600;
            color: #6b7280;
        }
        
        /* ── DESCRIPTION ── */
        .product-description {
            font-size: 0.85rem;
            font-weight: 500;
            color: #4b5563;
            line-height: 1.6;
            margin: 20px 0 28px 0;
            padding-bottom: 20px;
            border-bottom: 1px solid #e5e5e5;
        }

        /* ── VARIANTS SECTION ── */
        .product-variants-section {
            margin-top: 8px;
        }

        .product-variant-group {
            margin-bottom: 20px;
        }

        .product-variant-label {
            font-size: 0.8rem;
            font-weight: 700;
            color: #374151;
            margin-bottom: 10px;
            display: block;
        }

        .product-variant-options {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .product-variant-option {
            padding: 8px 20px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            background: #fff;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            color: #374151;
        }

        .product-variant-option:hover {
            border-color: #6366f1;
            background: #eef2ff;
            color: #6366f1;
        }

        .product-variant-option.active {
            border-color: #6366f1;
            background: #6366f1;
            color: #fff;
        }

        .product-variant-option.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            text-decoration: line-through;
        }

        .product-stock-info {
            font-size: 0.75rem;
            font-weight: 700;
            color: #10b981;
            margin-top: 8px;
        }

        .product-stock-info.out {
            color: #ef4444;
        }

        /* ── QUANTITY & ACTIONS ── */
        .product-quantity-section {
            margin: 24px 0;
        }

        .product-quantity-label {
            font-size: 0.8rem;
            font-weight: 700;
            color: #374151;
            margin-bottom: 10px;
            display: block;
        }

        .product-quantity-control {
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            width: fit-content;
            overflow: hidden;
        }

        .product-qty-btn {
            width: 36px;
            height: 36px;
            background: #f8f8f8;
            border: none;
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: 700;
            transition: all 0.2s;
            color: #6366f1;
        }

        .product-qty-btn:hover {
            background: #eef2ff;
            color: #4f46e5;
        }

        .product-qty-input {
            width: 60px;
            height: 36px;
            text-align: center;
            border: none;
            font-size: 0.9rem;
            font-weight: 700;
            padding: 0;
            color: #1f2937;
        }

        .product-qty-input:focus {
            outline: none;
        }

        .product-action-buttons {
            display: flex;
            gap: 16px;
            margin-top: 24px;
        }

        .product-btn {
            flex: 1;
            font-size: 0.85rem;
            font-weight: 800;
            padding: 14px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }

        .product-btn-cart {
            background: #fff;
            color: #6366f1;
            font-weight: 800;
            border: 2px solid #6366f1;
        }

        .product-btn-cart:hover {
            background: #6366f1;
            color: #fff;
            transform: scale(1.02);
        }

        .product-btn-buy {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: #fff;
            font-weight: 800;
            border: none;
        }

        .product-btn-buy:hover {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            transform: scale(1.02);
        }

        .product-btn-disabled {
            background: #f5f5f5;
            color: #aaa;
            cursor: not-allowed;
            border: 1px solid #e5e5e5;
        }

        /* ── SECTION TITLE ── */
        .product-section-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 28px;
            padding-bottom: 12px;
            border-bottom: 2px solid #6366f1;
            display: inline-block;
        }

        /* ── REVIEWS ── */
        .product-reviews {
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 56px;
        }

        .product-reviews-header {
            padding: 24px 28px;
            border-bottom: 1px solid #e5e5e5;
            background: #fafafa;
        }

        .product-reviews-list {
            padding: 0 28px;
        }

        .product-review-item {
            padding: 24px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .product-review-item:last-child {
            border-bottom: none;
        }

        .product-review-user {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 14px;
        }

        .product-review-avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 700;
            color: #fff;
        }

        .product-review-user-name {
            font-size: 0.85rem;
            font-weight: 700;
            color: #1f2937;
        }

        .product-review-date {
            font-size: 0.65rem;
            font-weight: 500;
            color: #9ca3af;
            margin-top: 2px;
        }

        .product-review-stars {
            display: flex;
            gap: 3px;
            margin-bottom: 12px;
        }

        .product-review-star {
            font-size: 0.8rem;
            color: #e5e7eb;
            font-weight: 500;
        }

        .product-review-star-filled {
            color: #fbbf24;
        }

        .product-review-comment {
            font-size: 0.8rem;
            font-weight: 500;
            color: #4b5563;
            line-height: 1.5;
            margin-bottom: 14px;
        }

        .product-review-images {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .product-review-img {
            width: 64px;
            height: 64px;
            object-fit: cover;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            cursor: pointer;
        }

        .product-reviews-empty {
            padding: 80px 32px;
            text-align: center;
        }

        .product-reviews-empty-title {
            font-size: 1rem;
            font-weight: 600;
            color: #9ca3af;
        }

        /* ── RELATED PRODUCTS ── */
        .product-related {
            margin-bottom: 56px;
        }

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

        .product-related-card {
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.2s;
        }

        .product-related-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
            border-color: #6366f1;
        }

        .product-related-img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-bottom: 1px solid #e5e5e5;
        }

        .product-related-info {
            padding: 16px;
        }

        .product-related-name {
            font-size: 0.85rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 8px;
            text-decoration: none;
            display: block;
            line-height: 1.4;
        }

        .product-related-name:hover {
            color: #6366f1;
            text-decoration: underline;
        }

        .product-related-price {
            font-size: 0.8rem;
            font-weight: 700;
            color: #ef4444;
        }
    </style>

    <div class="product-wrap">
        <div class="product-inner">

            
            <?php if(session('success')): ?>
                <div class="product-alert product-alert-success">
                    <?php echo e(session('success')); ?>

                </div>
            <?php endif; ?>
            <?php if(session('error')): ?>
                <div class="product-alert product-alert-error">
                    <?php echo e(session('error')); ?>

                </div>
            <?php endif; ?>

            
            <div class="product-card">
                <div class="product-card-inner">
                    <div class="product-grid">
                        
                        <div class="product-gallery">
                            <div class="product-carousel">
                                <div id="image-carousel" class="product-carousel-container">
                                    <?php if($product->images && $product->images->count() > 0): ?>
                                        <?php $__currentLoopData = $product->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <div class="product-carousel-slide" id="slide-<?php echo e($image->id); ?>">
                                                <img src="<?php echo e(asset('storage/' . $image->image_path)); ?>"
                                                     alt="<?php echo e($product->name); ?>"
                                                     class="product-carousel-img">
                                            </div>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    <?php else: ?>
                                        <div class="product-carousel-slide">
                                            <img src="https://via.placeholder.com/600x400?text=No+Image"
                                                 alt="<?php echo e($product->name); ?>"
                                                 class="product-carousel-img">
                                        </div>
                                    <?php endif; ?>
                                </div>

                                <?php if($product->images && $product->images->count() > 1): ?>
                                    <button onclick="slideCarousel(-1)" class="product-carousel-btn product-carousel-btn-left">‹</button>
                                    <button onclick="slideCarousel(1)" class="product-carousel-btn product-carousel-btn-right">›</button>
                                    <div class="product-carousel-indicator">
                                        <span id="slide-indicator">1</span> / <?php echo e($product->images->count()); ?>

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

                            <?php if($product->images && $product->images->count() > 1): ?>
                                <div class="product-thumbnails" id="thumbnail-grid">
                                    <?php $__currentLoopData = $product->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <img src="<?php echo e(asset('storage/' . $image->image_path)); ?>"
                                             id="thumb-<?php echo e($image->id); ?>"
                                             class="product-thumb <?php echo e($index === 0 ? 'active' : ''); ?>"
                                             onclick="goToSlide('<?php echo e($image->id); ?>')">
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            <?php endif; ?>
                        </div>

                        
                        <div>
                            <div class="product-category"><?php echo e($product->category->name ?? 'Uncategorized'); ?></div>
                            <div class="product-name"><?php echo e($product->name); ?></div>
                            
                            
                            <div class="product-price-section">
                                <?php
                                    $minPrice = $product->variants->min('additional_price') ?? 0;
                                    $maxPrice = $product->variants->max('additional_price') ?? 0;
                                ?>
                                
                                <?php if($minPrice == $maxPrice): ?>
                                    <div class="product-price-range">
                                        Rp <?php echo e(number_format($minPrice, 0, ',', '.')); ?>

                                    </div>
                                <?php else: ?>
                                    <div class="product-price-range">
                                        Rp <?php echo e(number_format($minPrice, 0, ',', '.')); ?>

                                        <span class="product-price-range-small"> - <?php echo e(number_format($maxPrice, 0, ',', '.')); ?></span>
                                    </div>
                                <?php endif; ?>
                                
                                
                                <div id="selected-price-wrapper" style="display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e5e5;">
                                    <span class="product-price-selected-label">Harga dipilih:</span>
                                    <span class="product-price-selected" id="selected-price">Rp 0</span>
                                </div>
                            </div>

                            <div class="product-rating">
                                <div class="product-stars">
                                    <?php $avgRating = $product->reviews->avg('rating') ?? 0; ?>
                                    <?php for($i = 1; $i <= 5; $i++): ?>
                                        <span class="product-star <?php echo e($i <= round($avgRating) ? 'product-star-filled' : ''); ?>">★</span>
                                    <?php endfor; ?>
                                </div>
                                <span class="product-review-count">(<?php echo e($product->reviews->count()); ?> ulasan)</span>
                            </div>

                            
                            <div class="product-description">
                                <?php echo e($product->description); ?>

                            </div>

                            <?php if($product->variants && $product->variants->count() > 0): ?>
                                <?php
                                    $sizes = $product->variants->whereNotNull('size')->pluck('size')->unique()->filter()->values();
                                    $colors = $product->variants->whereNotNull('color')->pluck('color')->unique()->filter()->values();
                                    $variantMap = [];
                                    foreach ($product->variants as $variant) {
                                        $key = ($variant->size ?? '') . '|' . ($variant->color ?? '');
                                        $variantMap[$key] = $variant;
                                    }
                                ?>

                                <div class="product-variants-section">
                                    
                                    <?php if($sizes->count() > 0): ?>
                                    <div class="product-variant-group">
                                        <label class="product-variant-label">Ukuran</label>
                                        <div class="product-variant-options" id="size-options">
                                            <?php $__currentLoopData = $sizes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $size): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <div class="product-variant-option" data-size="<?php echo e($size); ?>" onclick="selectSize('<?php echo e($size); ?>')">
                                                    <?php echo e($size); ?>

                                                </div>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </div>
                                    </div>
                                    <?php endif; ?>

                                    
                                    <?php if($colors->count() > 0): ?>
                                    <div class="product-variant-group">
                                        <label class="product-variant-label">Warna</label>
                                        <div class="product-variant-options" id="color-options">
                                            <?php $__currentLoopData = $colors; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $color): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <div class="product-variant-option" data-color="<?php echo e($color); ?>" onclick="selectColor('<?php echo e($color); ?>')">
                                                    <?php echo e($color); ?>

                                                </div>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </div>
                                    </div>
                                    <?php endif; ?>

                                    <div class="product-stock-info" id="stock-info"></div>
                                </div>

                                <input type="hidden" id="selected-variant-id" value="">
                            <?php endif; ?>

                            <div class="product-quantity-section">
                                <label class="product-quantity-label">Jumlah</label>
                                <div class="product-quantity-control">
                                    <button type="button" class="product-qty-btn" onclick="decrementQty()">-</button>
                                    <input type="number" id="product-qty" class="product-qty-input" value="1" min="1" readonly>
                                    <button type="button" class="product-qty-btn" onclick="incrementQty()">+</button>
                                </div>
                            </div>

                            <div class="product-action-buttons">
                                <form action="<?php echo e(route('cart.add', $product->id)); ?>" method="POST" id="cart-form" onsubmit="return submitCart()">
                                    <?php echo csrf_field(); ?>
                                    <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
                                    <input type="hidden" name="variant_id" id="form-variant-id" value="">
                                    <input type="hidden" name="quantity" id="form-quantity" value="1">
                                    <input type="hidden" name="action" value="add_to_cart">
                                    <button type="submit" class="product-btn product-btn-cart" id="cart-btn">
                                        Keranjang
                                    </button>
                                </form>

                                <form action="<?php echo e(route('cart.add', $product->id)); ?>" method="POST" id="buy-form" onsubmit="return submitBuy()">
                                    <?php echo csrf_field(); ?>
                                    <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
                                    <input type="hidden" name="variant_id" id="buy-variant-id" value="">
                                    <input type="hidden" name="quantity" id="buy-quantity" value="1">
                                    <input type="hidden" name="action" value="buy_now">
                                    <button type="submit" class="product-btn product-btn-buy" id="buy-btn">
                                        Beli Sekarang
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="product-reviews">
                <div class="product-reviews-header">
                    <h3 class="product-section-title" style="margin-bottom: 0; padding-bottom: 0; border-bottom: none;">Ulasan Pelanggan</h3>
                </div>

                <?php if($product->reviews->count() > 0): ?>
                    <div class="product-reviews-list">
                        <?php $__currentLoopData = $product->reviews; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $review): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="product-review-item">
                                <div class="product-review-user">
                                    <div class="product-review-avatar">
                                        <?php echo e(strtoupper(substr($review->user->name, 0, 1))); ?>

                                    </div>
                                    <div>
                                        <div class="product-review-user-name"><?php echo e($review->user->name); ?></div>
                                        <div class="product-review-date"><?php echo e($review->created_at->diffForHumans()); ?></div>
                                    </div>
                                </div>

                                <div class="product-review-stars">
                                    <?php for($i = 1; $i <= 5; $i++): ?>
                                        <span class="product-review-star <?php echo e($i <= $review->rating ? 'product-review-star-filled' : ''); ?>">★</span>
                                    <?php endfor; ?>
                                </div>

                                <div class="product-review-comment"><?php echo e($review->comment); ?></div>

                                <?php if($review->images->count() > 0): ?>
                                    <div class="product-review-images">
                                        <?php $__currentLoopData = $review->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <img src="<?php echo e(asset('storage/' . $img->image_path)); ?>"
                                                 class="product-review-img"
                                                 onclick="window.open(this.src)">
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php else: ?>
                    <div class="product-reviews-empty">
                        <div class="product-reviews-empty-title">Belum ada ulasan untuk produk ini</div>
                    </div>
                <?php endif; ?>
            </div>

            
            <?php if($relatedProducts->count() > 0): ?>
                <div class="product-related">
                    <h3 class="product-section-title">Produk Terkait</h3>
                    <div class="product-related-grid">
                        <?php $__currentLoopData = $relatedProducts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $related): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php
                                $relatedImg = $related->images->first();
                                $relatedMinPrice = $related->variants->min('additional_price') ?? 0;
                                $relatedMaxPrice = $related->variants->max('additional_price') ?? 0;
                            ?>
                            <div class="product-related-card">
                                <a href="<?php echo e(route('products.show', $related->id)); ?>">
                                    <?php if($relatedImg): ?>
                                        <img src="<?php echo e(asset('storage/' . $relatedImg->image_path)); ?>"
                                             alt="<?php echo e($related->name); ?>"
                                             class="product-related-img">
                                    <?php else: ?>
                                        <img src="https://via.placeholder.com/300x200?text=No+Image"
                                             class="product-related-img">
                                    <?php endif; ?>
                                </a>
                                <div class="product-related-info">
                                    <a href="<?php echo e(route('products.show', $related->id)); ?>" class="product-related-name">
                                        <?php echo e($related->name); ?>

                                    </a>
                                    <?php if($relatedMinPrice == $relatedMaxPrice): ?>
                                        <div class="product-related-price">Rp <?php echo e(number_format($relatedMinPrice, 0, ',', '.')); ?></div>
                                    <?php else: ?>
                                        <div class="product-related-price">Rp <?php echo e(number_format($relatedMinPrice, 0, ',', '.')); ?> - <?php echo e(number_format($relatedMaxPrice, 0, ',', '.')); ?></div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
            <?php endif; ?>

        </div>
    </div>

    <script>
        // Data variants dari server
        const variants = <?php echo json_encode($product->variants ?? [], 15, 512) ?>;
        const variantMap = {};
        
        <?php if($product->variants && $product->variants->count() > 0): ?>
            <?php $__currentLoopData = $product->variants; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $variant): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                variantMap['<?php echo e(($variant->size ?? '')); ?>|<?php echo e(($variant->color ?? '')); ?>'] = {
                    id: <?php echo e($variant->id); ?>,
                    price: <?php echo e($variant->additional_price ?? 0); ?>,
                    stock: <?php echo e($variant->stock); ?>,
                    size: '<?php echo e($variant->size ?? ''); ?>',
                    color: '<?php echo e($variant->color ?? ''); ?>'
                };
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        <?php endif; ?>

        let selectedSize = '';
        let selectedColor = '';
        let currentStock = 0;
        let currentPrice = 0;

        // Update variant yang dipilih
        function updateSelectedVariant() {
            const key = selectedSize + '|' + selectedColor;
            const variant = variantMap[key];
            const selectedPriceWrapper = document.getElementById('selected-price-wrapper');
            
            if (variant && variant.stock > 0) {
                document.getElementById('selected-variant-id').value = variant.id;
                document.getElementById('form-variant-id').value = variant.id;
                document.getElementById('buy-variant-id').value = variant.id;
                currentStock = variant.stock;
                currentPrice = variant.price;
                
                if (selectedPriceWrapper) {
                    selectedPriceWrapper.style.display = 'block';
                }
                
                document.getElementById('selected-price').innerHTML = 'Rp ' + new Intl.NumberFormat('id-ID').format(variant.price);
                
                const stockInfo = document.getElementById('stock-info');
                stockInfo.innerHTML = 'Stok tersedia: ' + variant.stock;
                stockInfo.classList.remove('out');
                
                document.getElementById('cart-btn').disabled = false;
                document.getElementById('buy-btn').disabled = false;
                document.getElementById('cart-btn').classList.remove('product-btn-disabled');
                document.getElementById('buy-btn').classList.remove('product-btn-disabled');
                
                document.getElementById('product-qty').value = 1;
                document.getElementById('product-qty').max = variant.stock;
                
                return true;
            } else if (variant && variant.stock <= 0) {
                const stockInfo = document.getElementById('stock-info');
                stockInfo.innerHTML = 'Stok habis';
                stockInfo.classList.add('out');
                
                document.getElementById('cart-btn').disabled = true;
                document.getElementById('buy-btn').disabled = true;
                document.getElementById('cart-btn').classList.add('product-btn-disabled');
                document.getElementById('buy-btn').classList.add('product-btn-disabled');
                
                return false;
            }
            
            return false;
        }

        function selectSize(size) {
            selectedSize = size;
            
            document.querySelectorAll('#size-options .product-variant-option').forEach(opt => {
                if (opt.getAttribute('data-size') === size) {
                    opt.classList.add('active');
                } else {
                    opt.classList.remove('active');
                }
            });
            
            updateSelectedVariant();
        }

        function selectColor(color) {
            selectedColor = color;
            
            document.querySelectorAll('#color-options .product-variant-option').forEach(opt => {
                if (opt.getAttribute('data-color') === color) {
                    opt.classList.add('active');
                } else {
                    opt.classList.remove('active');
                }
            });
            
            updateSelectedVariant();
        }

        function decrementQty() {
            const qtyInput = document.getElementById('product-qty');
            let qty = parseInt(qtyInput.value);
            if (qty > 1) {
                qtyInput.value = qty - 1;
            }
        }

        function incrementQty() {
            const qtyInput = document.getElementById('product-qty');
            let qty = parseInt(qtyInput.value);
            if (qty < currentStock) {
                qtyInput.value = qty + 1;
            } else {
                alert('Stok tersisa ' + currentStock + ' item');
            }
        }

        function submitCart() {
            const qty = parseInt(document.getElementById('product-qty').value);
            const variantId = document.getElementById('selected-variant-id').value;
            
            if (!variantId && variants.length > 0) {
                alert('Silakan pilih ukuran dan warna terlebih dahulu');
                return false;
            }
            
            if (qty < 1) {
                alert('Jumlah minimal 1');
                return false;
            }
            
            if (qty > currentStock) {
                alert('Jumlah melebihi stok (maks: ' + currentStock + ')');
                return false;
            }
            
            document.getElementById('form-quantity').value = qty;
            return true;
        }

        function submitBuy() {
            const qty = parseInt(document.getElementById('product-qty').value);
            const variantId = document.getElementById('selected-variant-id').value;
            
            if (!variantId && variants.length > 0) {
                alert('Silakan pilih ukuran dan warna terlebih dahulu');
                return false;
            }
            
            if (qty < 1) {
                alert('Jumlah minimal 1');
                return false;
            }
            
            if (qty > currentStock) {
                alert('Jumlah melebihi stok (maks: ' + currentStock + ')');
                return false;
            }
            
            document.getElementById('buy-quantity').value = qty;
            return true;
        }

        // Carousel functions
        const carousel = document.getElementById('image-carousel');
        const indicator = document.getElementById('slide-indicator');

        if(carousel) {
            carousel.addEventListener('scroll', () => {
                const currentSlideIndex = Math.round(carousel.scrollLeft / carousel.clientWidth);
                if(indicator) indicator.innerText = currentSlideIndex + 1;
                document.querySelectorAll('.product-thumb').forEach((t, index) => {
                    if (index === currentSlideIndex) {
                        t.classList.add('active');
                    } else {
                        t.classList.remove('active');
                    }
                });
            });
        }

        function slideCarousel(direction) {
            if(!carousel) return;
            carousel.scrollBy({ left: direction * carousel.clientWidth, behavior: 'smooth' });
        }

        function goToSlide(imageId) {
            const slide = document.getElementById('slide-' + imageId);
            if(slide && carousel) {
                carousel.scrollTo({ left: slide.offsetLeft - carousel.offsetLeft, behavior: 'smooth' });
            }
        }
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\toko_pakaian\resources\views/customer/products/show.blade.php ENDPATH**/ ?>