@php
    $variants      = $product->variants ?? collect();
    $inStock       = $variants->where('in_stock', true);
    $minPrice      = $inStock->min('price') ?? 0;
    $maxPrice      = $inStock->max('price') ?? 0;
    $allColors     = $inStock->whereNotNull('color_code')->unique('color_code')->values();
    $isOutOfStock  = $inStock->isEmpty();
    // Discount: compare max price to min price (printful products vary by color/size)
    $hasRange      = $minPrice !== $maxPrice;
@endphp

<div
    class="2xl:col-span-3 xl:col-span-4 lg:col-span-4 md:col-span-6 col-span-12"
>
    <div
        class="border border-gray-300 rounded-2xl product-card-1 p-4 group wow animate__animated animate__fadeInUp"
        data-wow-delay=".2s"
        style="transform: none;" data-product-id="{{ $product->id }}"
    >
        <div class="product-image-container relative">
            <div
                class="product-image rounded-xl mb-4 bg-[#F4F5F6] overflow-hidden" style="height: 380px"
            >
                <img
                    src="{{ $product->image_url ?? 'https://placehold.co/400x400/F4F6F8/9CA3AF?text=No+Image' }}"
                    alt="{{ $product->title }}"
                    class="product-main-image group-hover:scale-110 transition-all transform group-hover:-rotate-3 ease-in-out h-full w-full duration-300 "
                />
            </div>
            <div
                class="product-btn-actions absolute bottom-0 right-0 left-0 flex justify-center z-9 transition-all duration-300 ease-in-out opacity-0 group-hover:opacity-100 group-hover:bottom-3"
            >
                <ul class="flex items-center gap-x-px">
                    <li>
                        <a aria-label='Add to Wishlist'
                           class='product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tl-sm rounded-bl-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5'
                           href='#' data-tip="Wishlist">
                            <i
                                class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"
                            ></i>
                        </a>
                    </li>
                    <li>
                        <a aria-label='Compare'
                           class='product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5'
                           href='#' data-tip="Compare">
                            <i
                                class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"
                            ></i>
                        </a>
                    </li>
                    <li>
                        <a
                            aria-label="Quick view"
                            data-tip="Quick View"
                            data-product="{{ $product->id }}"
                            class="quick-view-btn quick-view-sidebar-btn product-btn-action-item relative size-11 bg-white inline-flex items-center justify-center rounded-tr-sm rounded-br-sm before:absolute before:left-[calc(50%-8px)] before:bottom-full before:z-9 before:border-8 before:border-transparent before:border-t-black before:opacity-0 before:invisible before:-mb-3.5 hover:before:opacity-100 hover:before:visible before:transition-all before:duration-300 after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:rounded-sm after:bg-gray-800 after:whitespace-nowrap after:text-white after:text-xs after:leading-[18px] after:py-[3px] after:px-2 after:content-[attr(aria-label)] after:opacity-0 after:invisible after:transition-all after:duration-300 hover:after:opacity-100 hover:after:visible hover:after:-translate-y-2.5 hover:before:-translate-y-2.5"
                            href="#"
                        >
                            <i class="hgi hgi-stroke hgi-view text-2xl leading-6 text-light-primary-text"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="product-content">
            <h5 class="text-base leading-6 font-semibold font-dm-sans mb-4">
                <a href='{{ route('product.show', $product->id) }}'>{{ $product->title }}</a
                >
            </h5>

            @if($allColors->count() > 0)
                <div
                    class="color-slider-wrapper relative mb-3 px-6"> {{-- 1. Yahan horizontal padding (px-6) add ki hai --}}

                    {{-- Left arrow --}}
                    <button
                        class="color-scroll-btn color-scroll-left absolute left-0 top-1/2 -translate-y-1/2 z-20 size-6 bg-white border border-gray-200 rounded-full shadow flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-gray-500" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </button>

                    {{-- Scroll Track --}}
                    <div
                        class="color-scroll-track overflow-x-auto flex items-center gap-x-2 scroll-smooth no-scrollbar"
                        style="scrollbar-width: none; -ms-overflow-style: none; padding: 4px 2px;"> {{-- 2. Inline padding for safety --}}
                        @foreach($allColors as $color)
                            <div
                                class="variation-color-item flex-none p-0.5 border-2 border-transparent rounded-full cursor-pointer transition-all duration-200 hover:border-gray-400 color-swatch-wrapper"
                                data-product-id="{{ $product->id }}"
                                data-color-code="{{ $color->color_code }}"
                                title="{{ $color->color }}"
                            >
                                <button
                                    style="background-color: {{ $color->color_code }}"
                                    class="size-5 rounded-full flex items-center justify-center"
                                >
                                    <i class="hgi hgi-stroke hgi-tick-02 text-[9px] text-white opacity-0 transition-opacity duration-150 color-tick"></i>
                                </button>
                            </div>
                        @endforeach
                    </div>

                    {{-- Right arrow --}}
                    <button
                        class="color-scroll-btn color-scroll-right absolute right-0 top-1/2 -translate-y-1/2 z-20 size-6 bg-white border border-gray-200 rounded-full shadow flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-gray-500" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </button>
                </div>
        @endif
        <!-- Price Section -->
            <div class="price-section flex items-center gap-x-2 mb-4">
                @if($isOutOfStock)
                    <span class="text-sm font-semibold text-red-500">Out of Stock</span>
                @else
                    <span class="current-price text-lg font-bold text-gray-900">
                        @if($hasRange)
                            ${{ number_format($minPrice, 2) }} - ${{ number_format($maxPrice, 2) }}
                        @else
                            ${{ number_format($minPrice, 2) }}
                        @endif
                    </span>
                    <span class="text-xs text-gray-400 font-medium uppercase">{{ $product->currency }}</span>
                @endif
            </div>
            <div class="btn-section flex items-center gap-x-4">
                <a class='size-11 flex flex-none items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300'
                   href='#'>
                    <i
                        class="hgi hgi-stroke hgi-favourite text-xl text-light-secondary-text"
                    ></i>
                </a>
                <a data-product="{{ $product->id }}"
                   class="quick-view-btn btn btn-primary rounded-full font-semibold text-sm leading-6 px-6.5 py-2 flex-1 text-center flex items-center justify-center gap-x-2">
                    <i class="hgi hgi-stroke hgi-shopping-cart-02 text-xl text-white"></i>
                    <span>Quick View</span>
                </a>
            </div>
        </div>
    </div>
</div>