@php
    use Illuminate\Support\Str;
    $count          = core()->getConfigData('catalog.products.homepage.no_of_featured_product_homepage');
    $count          = $count ? $count : 20;
    $direction      = core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr';
    $onSaleProducts = app(\Webkul\Velocity\Repositories\Product\ProductRepository::class)->getSaleProducts(10)->items();
@endphp

{{-- TODO: change the product-route to shop.productOrCategory.index --}}
<product-collections
    product-id       = "sale-products-carousel"
    product-title    = "{{ $custom_titles ? $custom_titles->on_sale : __('shop::app.home.on-sale') }}"
    product-route    = "{{ route('velocity.category.details', ['category-slug' => 'on-sale', 'count' => $count]) }}"
    locale-direction = "{{ $direction }}"
    count            = "{{ (int) $count }}"
></product-collections>

{{-- TODO: use the Vue component --}}
{{-- <sale-products-popup :products="{{ json_encode($onSaleProducts) }}" /> --}}

<!-- Display popup with a random product on sale -->
@foreach ($onSaleProducts as $idx => $productFlat)
    @if($productFlat && $productFlat->product && $productFlat->getTypeInstance())
        <div id="sale-product-popup-{{ $idx }}" class="flash-sale-popup modal sensitive-modal">
            <!-- Close button -->
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="closePopup()">&times;</button>
            <a href="{{ route('shop.productOrCategory.index', $productFlat->url_key) }}">
                <div class="modal-content">
                    <div class="row py-2">
                        <!-- Sale Sticker -->
                        @php
                            $typeInstance = $productFlat->getTypeInstance();
                            $priceHtml = $typeInstance ? $typeInstance->getPriceHtml() : '';
                            // Extract the first <div> tag using Str::between()
                            $discountPercentage = $priceHtml ? Str::between($priceHtml, 'class="sticker sale">', '</div>') : '';
                        @endphp
                        
                        @if($discountPercentage)
                            <div class="sticker sale d-block">{{ $discountPercentage }}</div>
                        @endif

                        <!-- Product Picture -->
                        <div class="col-3 d-flex justify-content-center align-items-center">
                            @if($productFlat->product && $productFlat->product->MainImageUrl)
                                <img src="{{ $productFlat->product->MainImageUrl }}" alt="{{ $productFlat->name }}">
                            @endif
                        </div>

                        <div class="col-9">
                            <!-- Product Name -->
                            <h5 class="product-name">{{ $productFlat->name }}</h5>
                            <!-- Product Price -->
                            @if($priceHtml)
                                <div class="product-price">
                                    {!! $priceHtml !!}
                                </div>
                            @endif
                            <!-- End Sale Date -->
                            <span class="font-weight-bolder">{{ __('shop::app.home.sale-ends') }}:</span>
                            <span>{{ $productFlat->special_price_to }}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    @endif
@endforeach

@push('scripts')
    <script>
        // Show the first popup when the page loads
        $(document).ready(function () {
            setTimeout(() => {
                // Index of the currently displayed product
                let currentIndex = 0;
                const length = {{ count($onSaleProducts) }};

                // Function to show the next modal and hide the current one
                function showNextModal() {
                    // Hide the current modal
                    hideCurrentModal();

                    // Show the next modal
                    currentIndex++;

                    // Reset index if we reach the end
                    if (currentIndex >= length) currentIndex = 0;

                    const modalId = '#sale-product-popup-' + currentIndex;
                    $(modalId).addClass('show');

                    // hiding the popup after (show for) 5 seconds
                    setTimeout(hideCurrentModal, 5000);
                }

                // Function to hide the current modal
                function hideCurrentModal() {
                    const modalId = '#sale-product-popup-' + currentIndex;
                    $(modalId).removeClass('show');
                }

                // Schedule showing next modal every 15 seconds
                setInterval(showNextModal, 15000);
            }, 0);
        });

        function closePopup() {
            $('.flash-sale-popup').remove();
        }
    </script>
@endpush