{{--
    Flash Fashion Deal Section
    ─────────────────────────────────────────────────────────
    $fashionCategories → Collection of Category, each with:
        $category->name
        $category->slug
        $category->products → each product has ->variants eager-loaded

    Slider images:
        Main image   → $product->image_url
        Extra slides → unique color variants with image_url
--}}

<!-- ========== Flash Fashion Deal Section Start ========== -->
<section class="pb-[70px]">
    <div class="container">

        {{-- ── Heading ── --}}
        <div class="mb-10 text-center">
            <h3 data-wow-delay=".2s" class="pb-6 wow animate__animated animate__fadeInUp">
                Flash Fashion Deal
            </h3>

            {{-- ── Tab Buttons ── --}}
            <div data-wow-delay=".3s" class="flex items-center justify-center wow animate__animated animate__fadeInUp">
                <div class="flex gap-x-8 overflow-x-auto fashion-deal-filter border-b border-gray-300">
                    @foreach($fashionCategories as $index => $category)
                        <button
                            type="button"
                            data-deal-tab="deal-{{ $category->slug }}"
                            class="fashion-deal-tab-btn whitespace-nowrap pt-[13px] pb-[22px] text-base font-medium transition-colors duration-200
                                {{ $index === 0 ? 'active-deal-tab text-primary border-b-2 border-primary -mb-px' : 'text-light-secondary-text' }}"
                        >
                            {{ $category->title }}
                        </button>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- ── Tab Panes ── --}}
        <div id="fashion-deal-tab-content">
            @foreach($fashionCategories as $catIndex => $category)
                <div
                    class="fashion-deal-pane {{ $catIndex !== 0 ? 'hidden' : '' }}"
                    id="deal-{{ $category->slug }}"
                >
                    @if($category->products->isNotEmpty())

                        <div class="grid grid-cols-12 gap-6">

                            @foreach($category->products as $cardIndex => $product)

                                @php

                                    $inStock   = $product->variants->where('in_stock', true);

                                    // Color variants with image — for slider
                                    $variantSlides = $inStock
                                        ->whereNotNull('color_code')
                                        ->whereNotNull('image_url')
                                        ->unique('color_code')
                                        ->values();

                                    // Color swatches (up to 7)
                                    $allColors = $inStock
                                        ->whereNotNull('color_code')
                                        ->unique('color_code')
                                        ->take(7);

                                    $minPrice = $inStock->min('price');
                                    $maxPrice = $inStock->max('price');

                                    // Unique slider ID per card
                                    $bigSliderClass   = 'fd-big-slider-'   . $product->id;
                                    $smallSliderClass = 'fd-small-slider-' . $product->id;
                                @endphp

                                <div
                                    class="xl:col-span-3 md:col-span-6 col-span-12 wow animate__animated animate__fadeInUp"
                                    data-wow-delay="{{ number_format(0.2 + ($cardIndex * 0.1), 1) }}s"
                                >
                                    <div class="border border-gray-300 rounded-2xl product-card-1 p-6 group">

                                        {{-- ── Big Slider ── --}}
                                        <div
                                            class="mb-3 -mx-3 {{ $bigSliderClass }} sellzy-slider"
                                            data-slick='{"slidesToShow":1,"slidesToScroll":1,"loop":true,"arrows":false,"infinite":true,"asNavFor":".{{ $smallSliderClass }}"}'
                                        >
                                            {{-- Main product image --}}
                                            <div class="mx-3">
                                                <img
                                                    src="{{ $product->image_url ?? 'https://placehold.co/400x400/F4F6F8/9CA3AF?text=No+Image' }}"
                                                    alt="{{ $product->title }}"
                                                    class="bg-[#F4F3F5] rounded-2xl w-full object-cover"
                                                />
                                            </div>
                                            {{-- Color variant images --}}
                                            @foreach($variantSlides as $variant)
                                                <div class="mx-3">
                                                    <img
                                                        src="{{ $variant->image_url }}"
                                                        alt="{{ $variant->color ?? $product->title }}"
                                                        class="bg-[#F4F3F5] rounded-2xl w-full object-cover"
                                                    />
                                                </div>
                                            @endforeach
                                        </div>

                                        {{-- ── Small Thumbnail Slider ── --}}
                                        <div
                                            class="mb-3 -mx-1.5 {{ $smallSliderClass }} sellzy-slider"
                                            data-slick='{"slidesToShow":3,"slidesToScroll":1,"loop":true,"arrows":false,"infinite":true,"asNavFor":".{{ $bigSliderClass }}","focusOnSelect":true}'
                                        >
                                            {{-- Main product image thumb --}}
                                            <div class="mx-1.5">
                                                <img
                                                    src="{{ $product->image_url ?? 'https://placehold.co/400x400/F4F6F8/9CA3AF?text=No+Image' }}"
                                                    alt="{{ $product->title }}"
                                                    class="bg-[#F4F3F5] rounded-xl w-full object-cover cursor-pointer"
                                                />
                                            </div>
                                            {{-- Color variant image thumbs --}}
                                            @foreach($variantSlides as $variant)
                                                <div class="mx-1.5">
                                                    <img
                                                        src="{{ $variant->image_url }}"
                                                        alt="{{ $variant->color ?? $product->title }}"
                                                        class="bg-[#F4F3F5] rounded-xl w-full object-cover cursor-pointer"
                                                    />
                                                </div>
                                            @endforeach
                                        </div>

                                        {{-- ── Product Content ── --}}
                                        <div class="product-content">

                                            {{-- Title --}}
                                            <h5 class="text-[20px] leading-[30px] font-bold pb-4 line-clamp-2">
                                                <a href="{{ route('product.show', $product->id) }}"
                                                   class="hover:text-primary transition-colors">
                                                    {{ $product->title }}
                                                </a>
                                            </h5>



                                            {{-- Color Swatches --}}
                                            @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-transparent 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 opacity-0 color-tick text-[9px]"></i>
                                                            </button>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif

                                            {{-- Price --}}
                                            <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>

                                            {{-- Buttons --}}
                                            <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>

                            @endforeach
                        </div>

                    @else
                        <div class="flex flex-col items-center justify-center py-20 text-center">
                            <span class="inline-flex items-center justify-center size-16 bg-gray-100 rounded-full mb-4">
                                <i class="hgi hgi-stroke hgi-package text-3xl text-light-disabled-text"></i>
                            </span>
                            <p class="text-light-secondary-text text-base">No products available in this category
                                yet.</p>
                        </div>
                    @endif

                </div>
            @endforeach
        </div>

    </div>
</section>
<!-- ========== Flash Fashion Deal Section End ========== -->


@push('scripts')
    <script>
        (function () {
            'use strict';

            // ── Tab switching ─────────────────────────────────────────────
            const tabBtns = document.querySelectorAll('.fashion-deal-tab-btn');
            const tabPanes = document.querySelectorAll('.fashion-deal-pane');

            tabBtns.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    const targetId = this.dataset.dealTab;

                    // Reset all buttons
                    tabBtns.forEach(function (b) {
                        b.classList.remove('active-deal-tab', 'text-primary', 'border-b-2', 'border-primary', '-mb-px');
                        b.classList.add('text-light-secondary-text');
                    });

                    // Activate clicked
                    this.classList.add('active-deal-tab', 'text-primary', 'border-b-2', 'border-primary', '-mb-px');
                    this.classList.remove('text-light-secondary-text');

                    // Hide all panes
                    tabPanes.forEach(function (pane) {
                        pane.classList.add('hidden');
                    });

                    // Show target
                    const target = document.getElementById(targetId);
                    if (!target) return;
                    target.classList.remove('hidden');

                    // Slick sliders reinitialize — hidden panes mein slick initialize nahi hota
                    if (typeof jQuery !== 'undefined' && typeof jQuery.fn.slick !== 'undefined') {
                        target.querySelectorAll('.sellzy-slider').forEach(function (el) {
                            const $el = jQuery(el);
                            if ($el.hasClass('slick-initialized')) {
                                $el.slick('refresh');
                            } else {
                                // Sellzy global init call — jo tumhara existing code karta hai
                                if (typeof initSellzySliders === 'function') {
                                    initSellzySliders($el[0]);
                                } else {
                                    // Fallback: data-slick se options lo aur initialize karo
                                    const opts = $el.data('slick') || {};
                                    $el.slick(opts);
                                }
                            }
                        });
                    }

                    // Re-trigger WOW
                    if (typeof WOW !== 'undefined') {
                        target.querySelectorAll('.wow').forEach(function (el) {
                            el.classList.remove('animate__animated');
                            void el.offsetWidth;
                            el.classList.add('animate__animated');
                        });
                    }
                });
            });

        }());
    </script>
@endpush