<?php $__env->startSection('title', 'Pilih Varian'); ?>
<?php $__env->startSection('background'); ?>
    <div class="position-relative w-100" style="height: 30px;"></div>
    
    
    

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

<?php $__env->startSection('content'); ?>
    <div class="container py-3">
 
    <div class="text-center mb-3">
        <img src="<?php echo e(asset('assets/new-asset/title-variant.png')); ?>"
             alt="Custom Show"
             style="width:200px; height:auto;">
    </div>


        
        <div id="productCarousel" class="carousel slide mb-4" data-bs-ride="carousel">
            <div class="carousel-inner">

                <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="carousel-item <?php echo e($index === 0 ? 'active' : ''); ?>" data-product-id="<?php echo e($product['id']); ?>">
                        <div class="card product-card mx-auto <?php echo e($index === 0 ? 'border border-warning shadow' : ''); ?>"
                            style="width: 80%; border-radius: 20px; padding: 16px;">
                            <img src="<?php echo e($product['product_image']); ?>" class="img-fluid mx-auto d-block"
                                style="max-height: 260px; object-fit: contain;">
                            <p class="text-center mt-3 mb-0" style="font-weight: normal; font-size:1.2rem;color:#<?php echo e($product['color']); ?>">
                                <?php echo e($product['sku_name']); ?>

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

            
            <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon bg-dark rounded-circle" aria-hidden="true"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon bg-dark rounded-circle" aria-hidden="true"></span>
            </button>
        </div>

        
        <div class="text-center mt-4">
            <?php
                $activeProduct = $products[0];
            ?>
        <button id="chooseProductButton"
                class="btn p-0 border-0 bg-transparent"
                style="outline:none;">
            <img src="<?php echo e(asset('assets/new-asset/button-pilih.png')); ?>"
                 alt="Pilih"

             style="max-width: 150px; height: auto; cursor: pointer; margin-top: 20px">

        </button>
        </div>

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

<?php $__env->startPush('styles'); ?>
    <style>
        /* BACKGROUND */
        .bg-pattern {
            background: url('<?php echo e(asset('assets/new-asset/bg-mobile.webp')); ?>') no-repeat center top;
            background-size: cover;
        }

        /* Border Aktif */
        .product-card {
            transition: all 0.5s ease;
        }

        .product-card.active-product {
            border: 10px solid #ffc107 !important;
            box-shadow: 0 0 12px rgba(255, 193, 7, 0.7);
            border-radius: 20px;
        }
    </style>
<?php $__env->stopPush(); ?>
<?php $__env->startPush('scripts'); ?>
    <script>
        document.getElementById("chooseProductButton").addEventListener("click", function() {
            const activeItem = document.querySelector(".carousel-item.active");
            const productId = activeItem.getAttribute("data-product-id");
            if (productId) {
                window.location.href = `/experience/edit-template?product_id=${productId}`;
            } else {
                alert("❌ Gagal mendapatkan ID produk");
            }
        });
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.mobile', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/plossayokesen/public_html/resources/views/select-product-mobile.blade.php ENDPATH**/ ?>