@if($hotPicks->count() > 0)
    <!-- ========== Hot Picks Section Start ========== -->
    <section class="pb-[70px]">
        <div class="container">
            <div class="md:flex md:justify-between md:items-center mb-10">
                <div
                    class="text-center md:text-left wow animate__animated animate__fadeInUp"
                    data-wow-delay=".2s"
                >
                    <h3>Today&apos;s Hot Picks</h3>
                </div>
                <div class="flex items-center gap-x-5">
                    <div
                        data-wow-delay=".2s"
                        class="home-four-picks-slider-nav md:flex items-center justify-between gap-x-6 hidden wow animate__animated animate__fadeInUp"
                    ></div>
                </div>
            </div>
            <div
                class="home-four-picks-slider -mx-3 sellzy-slider"
                data-slick='{"slidesToShow": 4, "slidesToScroll": 1, "loop": true, "arrows": true, "infinite": true, "appendArrows": ".home-four-picks-slider-nav", "autoplay": true, "autoplaySpeed": 7000, "responsive": [{"breakpoint": 1441, "settings": {"slidesToShow": 5}}, {"breakpoint": 1025, "settings": {"slidesToShow": 3}}, {"breakpoint": 769, "settings": {"slidesToShow": 2}}, {"breakpoint": 480, "settings": {"slidesToShow": 1}}]}'
            >
            @foreach($hotPicks as $product)
                @php
                    $sizeOrder  = ['XS', 'S', 'M', 'L', 'XL'];
                    $inStock    = $product->variants->where('in_stock', true);
                    $allColors  = $inStock->whereNotNull('color_code')->unique('color_code')->take(6);
                    $allSizes  = $inStock->whereIn('size', $sizeOrder)
                                    ->unique('size')
                                    ->sortBy(fn($v) => array_search($v->size, $sizeOrder))
                                    ->values();
                $minPrice   = $inStock->min('price');
                    $maxPrice   = $inStock->max('price');
                @endphp
                <!-- ========== Single Product Card Start ========== -->
                    <div
                        data-wow-delay=".3s"
                        class="mx-3 wow animate__animated animate__fadeInUp"
                    >
                        <div
                            class="border border-gray-300 rounded-2xl product-card-1 p-6 group h-full min-h-[550px] flex flex-col justify-between"
                            data-product-id="{{ $product->id }}">
                            <div class="product-image-container relative">
                                <!-- Is se replace karein -->
                                <div
                                    class="product-image rounded-xl mb-4 overflow-hidden bg-[#F4F3F5] relative h-[280px] "
                                    style="    height: 337px;
    width: 341px;">
                                    <a href='{{ route('product.show', $product->id) }}'
                                       class="flex items-center justify-center">
                                        <img
                                            src="{{ $product->image_url ?? 'https://placehold.co/400x400/F4F6F8/9CA3AF?text=No+Image' }}"
                                            alt="{{ $product->title }}"
                                            class="product-main-image max-w-full max-h-full w-auto h-auto object-contain transition-all duration-300 group-hover:scale-110"
                                        />
                                    </a>
                                </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" href="#"
                                               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">
                                                <i class="hgi hgi-stroke hgi-favourite text-2xl leading-6 text-light-secondary-text"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a aria-label="Compare" href="#"
                                               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">
                                                <i class="hgi hgi-stroke hgi-reload text-2xl leading-6 text-light-primary-text"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a aria-label="Quick view" href="#"
                                               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">
                                                <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 flex-grow">
                <span
                    class="product-discount-badge inline-block 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-no-repeat after:bg-contain uppercase"
                >SALES</span
                >

                                <p class="py-3 text-sm leading-[22px]">{{$product->category->title}}</p>

                                <h6 class="text-[18px] leading-7 font-bold pb-3">
                                    <a href='{{ route('product.show', $product->id) }}'> {{ $product->title }}</a>
                                </h6>

                                <div class="price-section flex items-center gap-x-3 mb-3">
            <span class="current-price text-[20px] font-urbanist leading-[30px] font-bold text-light-primary-text">
                @if($minPrice && $maxPrice)
                    @if($minPrice == $maxPrice)
                        ${{ number_format($minPrice, 2) }}
                    @else
                        ${{ number_format($minPrice, 2) }} – ${{ number_format($maxPrice, 2) }}
                    @endif
                @else
                    —
                @endif
            </span>
                                </div>
                                @if($allColors->count() > 0)
                                    <div class="variation-buttons flex gap-x-2.5 mb-4 flex-wrap">
                                        @foreach($allColors as $color)
                                            <div
                                                class="variation-color-item p-1 border border-gray-300 rounded-full 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-6 rounded-full flex items-center justify-center cursor-pointer">
                                                    <i class="hgi hgi-stroke hgi-tick-02 text-white hidden color-tick text-[9px]"></i>
                                                </button>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                                <div class="deal-progress flex flex-col gap-y-1 mb-3">
                                    <div
                                        class="progress w-full h-1.5 bg-warning-lighter rounded-[50px] overflow-hidden"
                                    >
                                        <div
                                            style="width: 1%"
                                            class="progress-bar h-full bg-warning rounded-[50px]"
                                        ></div>
                                    </div>
                                    <div class="deal-stock flex items-center justify-between">
                                        <div class="stock-sold flex items-center gap-x-2.5">
                                            <p class="text-[16px] leading-6">Sold:</p>
                                            <p class="text-[16px] leading-6 text-light-primary-text">
                                                0
                                            </p>
                                        </div>
                                        <div class="stock-remaining flex items-center gap-x-2.5">
                                            <p class="text-[16px] leading-6">Available:</p>
                                            <p class="text-[16px] leading-6 text-light-primary-text">
                                                200
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-section flex items-center gap-x-4">
                                    <a href="#"
                                       class="size-11 flex flex-none items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 border border-gray-300">
                                        <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>
                    <!-- ========== Single Product Card End ========== -->
                @endforeach
            </div>
        </div>
    </section>
    <!-- ========== Hot Picks Section End ========== -->
@endif