@extends('layout.app')
@section('content')
    <!-- ========== Breadcrumb Section Start ========== -->
    <div class="py-12">
        <div class="container">
            <div class="breadcrumb">
                <ul>
                    <li>
                        <a href='{{route('front.shop')}}'>
                <span>
                  <i class="hgi hgi-stroke hgi-home-01 text-[20px]"></i>
                </span>
                            Shop
                        </a>
                    </li>
                    <li class="text-light-disabled-text">&#8226;</li>
                    <li><span>Product Details</span></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- ========== Breadcrumb Section End ========== -->

    <!-- ========== Product Details Section Start ========== -->
    <section class="pb-12" id="product-scope" data-variants="{{ json_encode($groupedVariants) }}">
        <div class="container">
            <div class="lg:grid lg:grid-cols-12 lg:gap-12">

                {{-- ===== LEFT: Image Slider ===== --}}
                <div class="xl:col-span-7 lg:col-span-6">
                    <div class="flex gap-x-6 xl:flex-row flex-col gap-y-6 xl:gap-y-0">

                        {{-- Thumbnails --}}
                        <div class="xl:w-[114px] lg:w-full order-2 xl:order-1 flex-none overflow-hidden">
                            <div
                                class="product-details-small-slider -m-2.5 sellzy-slider"
                                data-slick='{"slidesToShow":6,"slidesToScroll":1,"arrows":false,"infinite":true,"vertical":true,"verticalSwiping":true,"asNavFor":".product-details-big-slider","focusOnSelect":true,"responsive":[{"breakpoint":1025,"settings":{"slidesToShow":4,"vertical":false,"verticalSwiping":false}},{"breakpoint":769,"settings":{"slidesToShow":3,"vertical":false,"verticalSwiping":false}},{"breakpoint":480,"settings":{"slidesToShow":2,"vertical":false,"verticalSwiping":false}}]}'
                            >
                                {{-- Main product image as first thumb --}}
                                <div class="single-product-small-slider-item p-2.5 rounded-lg overflow-hidden">
                                    <img src="{{ $product->image_url }}" alt="{{ $product->title }}"
                                         class="w-full h-full object-cover rounded-lg"/>
                                </div>
                                {{-- Color variant images as thumbs --}}
                                @foreach($groupedVariants as $code => $v)
                                    <div class="single-product-small-slider-item p-2.5 rounded-lg overflow-hidden">
                                        <img src="{{ $v['image'] }}" alt="{{ $v['color_name'] }}"
                                             class="w-full h-full object-cover rounded-lg"/>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        {{-- Big Slider --}}
                        <div class="w-full xl:flex-1 order-1 xl:order-2 overflow-hidden relative">
                            <div
                                class="product-details-big-slider -mx-3 sellzy-slider"
                                data-slick='{"slidesToShow":1,"slidesToScroll":1,"arrows":true,"asNavFor":".product-details-small-slider","appendArrows":".product-details-big-slider-nav","responsive":[{"breakpoint":769,"settings":{"slidesToShow":1,"arrows":false}}]}'
                            >
                                {{-- Main image --}}
                                <div class="single-product-big-slider-item px-3 rounded-2xl overflow-hidden">
                                    <img id="main-product-image"
                                         src="{{ $product->image_url }}"
                                         alt="{{ $product->title }}"
                                         class="w-full object-cover rounded-3xl max-h-[600px]"/>
                                </div>
                                {{-- Color variant images --}}
                                @foreach($groupedVariants as $code => $v)
                                    <div class="single-product-big-slider-item px-3 rounded-2xl overflow-hidden variant-slide"
                                         data-color-code="{{ $code }}">
                                        <img src="{{ $v['image'] }}"
                                             alt="{{ $v['color_name'] }}"
                                             class="w-full object-cover rounded-3xl max-h-[600px]"/>
                                    </div>
                                @endforeach
                            </div>
                            <div class="product-details-big-slider-nav absolute top-1/2 -translate-y-1/2 left-0 right-0 flex items-center justify-between px-3"></div>
                        </div>
                    </div>
                </div>

                {{-- ===== RIGHT: Product Info ===== --}}
                <div class="xl:col-span-5 lg:col-span-6 mt-6 lg:mt-0">
                    <div class="rounded-3xl border border-gray-300 p-6 sticky top-20">

                        {{-- Brand Badge --}}
                        <span class="product-discount-badge inline-block mb-4 uppercase relative bg-error text-warning-lighter font-medium text-sm leading-[22px] px-1 after:absolute after:top-0 after:left-full after:z-10 after:w-1 after:h-full after:bg-[url('../images/discount-shape.png')] after:bg-contain after:bg-no-repeat">
                        {{ $product->brand ?? 'Official' }}
                    </span>

                        {{-- Title --}}
                        <div class="product-title-section flex items-center justify-between mb-6">
                            <h3 class="text-xl font-bold leading-snug line-clamp-2">{{ $product->title }}</h3>
{{--                            <a href="{{ route('wishlist.add', $product->id) }}"--}}
{{--                               class="size-10 inline-flex flex-none items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300 ml-3">--}}
{{--                                <i class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"></i>--}}
{{--                            </a>--}}
                        </div>

                        {{-- Description --}}
                        <div class="text-gray-600 text-sm leading-relaxed mb-6 line-clamp-3">
                            {!! nl2br(e($product->description)) !!}
                        </div>

                        {{-- Price --}}
                        <div class="price-section flex items-center gap-x-3 mb-6">
                        <span id="display-price"
                              class="current-price text-2xl leading-9 font-bold text-light-primary-text">
                            @if($minPrice == $maxPrice)
                                ${{ number_format($minPrice, 2) }}
                            @else
                                ${{ number_format($minPrice, 2) }} – ${{ number_format($maxPrice, 2) }}
                            @endif
                        </span>
                            <span class="text-sm text-gray-400 font-medium uppercase">{{ $product->currency }}</span>
                        </div>

                        {{-- Variations + Cart --}}
                        <div class="product-add-to-cart-section py-6 border-b border-t border-dashed border-gray-300">

                            {{-- Color --}}
                            <div class="color-variation-section mb-6">
                                <p class="font-semibold text-light-primary-text flex items-center gap-x-2.5 mb-4">
                                    Color:
                                    <span id="selected-color-name" class="text-error font-normal capitalize">Select a color</span>
                                </p>
                                <div class="color-variation-items flex flex-wrap items-center gap-2">
                                    @foreach($groupedVariants as $code => $v)
                                        @php
                                            $isColorOutOfStock = collect($v['sizes'])->where('in_stock', true)->isEmpty();
                                        @endphp
                                        <div class="color-variation-item">
                                            <button
                                                type="button"
                                                {{ $isColorOutOfStock ? 'disabled' : '' }}
                                                data-color-code="{{ $code }}"
                                                data-color-text="{{ $v['color_name'] }}"
                                                class="color-btn relative flex items-center justify-center rounded-full size-10 border border-gray-300 transition-all overflow-hidden
                                                {{ $isColorOutOfStock
                                                    ? 'cursor-not-allowed before:absolute before:inset-x-0 before:z-10 before:h-px before:-rotate-45 before:bg-neutral-300 after:absolute after:inset-x-0 after:z-10 after:h-px after:rotate-45 after:bg-neutral-300'
                                                    : 'cursor-pointer hover:border-primary' }}"
                                            >
                                                <img src="{{ $v['image'] }}" alt="{{ $v['color_name'] }}"
                                                     class="size-full object-cover rounded-full {{ $isColorOutOfStock ? 'opacity-40' : '' }}"/>
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            {{-- Size --}}
                            <div class="size-variation-section mb-6">
                                <p class="font-semibold text-light-primary-text mb-4">
                                    Size:
                                    <span id="selected-size-name" class="font-normal text-gray-500">Select a size</span>
                                    <a href="#" class="text-sm text-info hover:underline float-right">Size Guide</a>
                                </p>
                                <div id="size-container" class="flex items-center gap-2 flex-wrap">
                                    <p class="text-sm text-gray-400">Please select a color first</p>
                                </div>
                            </div>

                            {{-- Quantity + Buttons --}}
                            <div class="product-add-to-cart-btn-section">
                                <p class="font-semibold text-light-primary-text mb-4">Quantity:</p>
                                <div class="flex items-center gap-x-3 flex-wrap gap-y-3">

                                    {{-- Qty --}}
                                    <div class="quantity-section max-w-[150px] border border-gray-300 rounded-[80px] px-4 py-[11px] flex items-center justify-between">
                                        <button class="qty-down hover:text-primary">
                                            <i class="hgi hgi-stroke hgi-minus-sign text-xl"></i>
                                        </button>
                                        <input type="number" id="qty" value="1" min="1"
                                               class="w-10 text-center font-bold outline-none"/>
                                        <button class="qty-up hover:text-primary">
                                            <i class="hgi hgi-stroke hgi-plus-sign text-xl"></i>
                                        </button>
                                    </div>

                                    {{-- Buy Now --}}
                                    <button id="buy-now-btn" class="btn btn-warning btn-large rounded-[80px] flex-1">
                                        Buy Now
                                    </button>

                                    {{-- Add to Cart --}}
                                    <button id="add-to-cart-btn"  data-product-id="{{ $product->id }}"
                                            data-variant-id=""
                                            class="btn btn-primary btn-large rounded-[80px] flex-1 disabled:opacity-50 disabled:cursor-not-allowed">
                                        <i class="hgi hgi-stroke hgi-shopping-cart-add-02 text-2xl leading-6 text-white"></i>
                                        Add to Cart
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- Share / Compare --}}
                        <div class="flex items-center gap-x-4 mt-6">
                            <a href="#"
                               class="text-info inline-flex items-center gap-x-2.5 pr-4 relative after:absolute after:top-1/2 after:-translate-y-1/2 after:right-0 after:w-px after:h-3 after:bg-gray-300">
                                <i class="hgi hgi-stroke hgi-share-05 text-xl"></i>
                                <span>Share</span>
                            </a>

                        </div>

                        {{-- Extra Info --}}
                        <div class="flex flex-col gap-y-3 mt-6 text-sm">
                            @if(!empty($product->techniques))
                                <div class="flex gap-x-2">
                                    <span class="font-bold">Techniques:</span>
                                    <span>{{ implode(', ', array_column($product->techniques, 'display_name')) }}</span>
                                </div>
                            @endif
                            <div class="flex gap-x-2">
                                <span class="font-bold">Category:</span>
                                <span>{{ $product->category->title ?? 'N/A' }}</span>
                            </div>
                            <div class="flex gap-x-2">
                                <span class="font-bold">Free Shipping:</span>
                                <span>Estimated Delivery 5–7 Days</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- ========== Product Details Section End ========== -->
@endsection
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const scope    = document.getElementById('product-scope');
            const variants = JSON.parse(scope.dataset.variants);

            let selectedColor  = null;
            let selectedSize   = null;
            let sliderInstance = null;

            setTimeout(() => {
                const $big = $('.product-details-big-slider');
                if ($big.length) sliderInstance = $big;
            }, 300);

            // ── Color ────────────────────────────────────────────────────────
            document.querySelectorAll('.color-btn').forEach((btn, index) => {
                btn.addEventListener('click', function () {
                    const code    = this.dataset.colorCode;
                    selectedColor = variants[code];
                    selectedSize  = null;

                    document.querySelectorAll('.color-btn').forEach(b => {
                        b.classList.remove('border-primary', 'scale-110');
                    });
                    this.classList.add('border-primary', 'scale-110');

                    document.getElementById('selected-color-name').innerText = selectedColor.color_name;
                    document.getElementById('selected-size-name').innerText  = 'Select a size';

                    // Cart button reset
                    const cartBtn = document.getElementById('add-to-cart-btn');
                    cartBtn.dataset.variantId = '';
                    cartBtn.disabled = true;

                    if (sliderInstance) sliderInstance.slick('slickGoTo', index + 1);

                    renderSizes(selectedColor.sizes);
                });
            });

            // ── Sizes ────────────────────────────────────────────────────────
            function renderSizes(sizes) {
                const container = document.getElementById('size-container');
                container.innerHTML = '';

                sizes.forEach(s => {
                    const btn     = document.createElement('button');
                    btn.type      = 'button';
                    btn.innerText = s.size;
                    btn.disabled  = !s.in_stock;
                    btn.className = [
                        'px-8 py-2 border rounded-full font-semibold text-sm transition-all',
                        s.in_stock
                            ? 'border-gray-300 hover:border-primary cursor-pointer'
                            : 'bg-gray-100 text-gray-400 cursor-not-allowed line-through'
                    ].join(' ');

                    if (s.in_stock) {
                        btn.addEventListener('click', () => {
                            selectedSize = s;

                            container.querySelectorAll('button').forEach(b => {
                                b.classList.remove('bg-primary', 'text-white', 'border-primary');
                                b.classList.add('border-gray-300');
                            });
                            btn.classList.add('bg-primary', 'text-white', 'border-primary');
                            btn.classList.remove('border-gray-300');

                            document.getElementById('display-price').innerText =
                                '$' + parseFloat(s.price).toFixed(2);
                            document.getElementById('selected-size-name').innerText = s.size;

                            // variant_id button pe set karo — cart.js isko uthayega
                            const cartBtn = document.getElementById('add-to-cart-btn');
                            cartBtn.dataset.variantId = s.variant_id;
                            cartBtn.disabled = false;
                        });
                    }

                    container.appendChild(btn);
                });
            }

            // ── Qty ──────────────────────────────────────────────────────────
            const qtyInput = document.getElementById('qty');
            document.querySelector('.qty-up')?.addEventListener('click', () => {
                qtyInput.value = parseInt(qtyInput.value) + 1;
            });
            document.querySelector('.qty-down')?.addEventListener('click', () => {
                if (parseInt(qtyInput.value) > 1) qtyInput.value = parseInt(qtyInput.value) - 1;
            });

            // ── Buy Now ──────────────────────────────────────────────────────
            document.querySelector('#buy-now-btn')?.addEventListener('click', function (e) {
                e.preventDefault();
                const cartBtn = document.getElementById('add-to-cart-btn');
                if (!cartBtn.dataset.variantId) {
                    // cart.js ka toast use karo
                    return;
                }
                window.Cart.add(
                    cartBtn.dataset.productId,
                    cartBtn.dataset.variantId,
                    parseInt(qtyInput.value),
                    function () { window.location.href = BASE_URL + '/checkout'; }
                );
            });

            // Note: #add-to-cart-btn click cart.js handle karta hai
            // (e.target.closest('#add-to-cart-btn') wala block already hai)
            // Sirf ensure karo data-variant-id set ho — jo upar renderSizes mein ho raha hai
        });
    </script>
@endpush