@php
    $popularCoupon = getContent('categories.content', true);
    $popularCouponElements = App\Models\Category::with('coupons')->where('status', 1)->latest()->limit(8)->get();
    $firstAd = App\Models\Ad::first();
@endphp

<!-- < popular -->
<section class="popular-section section-bg-before py-115 bg--img" style="background: url({{asset($activeTemplateTrue.'images/bg/popular-bg.png')}})">
    <div class="container">
        @if($firstAd)
        <!-- ad image start -->
        <div class="long-add-wrap">
            <div class="add-icon-wrap">
                <i class="fas fa-times"></i>
            </div>
           <div class="long-add-wrap--thumb">
                <a href="{{@$firstAd->link}}" target="_blank">
                    <img src="{{ getImage(getFilePath('adImage') . '/' . @$firstAd->image) }}" alt="">
                </a>
           </div>
        </div>
        @else
         <!-- ad image end -->
         @endif
        <div class="row">
            <div class="col-lg-12">
                <div class="section-content">
                    <div class="title-wrap">
                        <h2 class="section-title mb-2 wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                            {{__($popularCoupon->data_values->heading)}}
                        </h2>
                        <a href="{{route('categories')}}">@lang('View More')</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row gy-4 justify-content-center exclusive-coupons-slider">
           @foreach($popularCouponElements as $item)
    @if($item->page == 1)
        <div class="col-lg-3 col-md-6 col-sm-6">
            <a href="{{ url('category-brands/'.$item->id) }}">
                <div class="coupon-card-2 wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                    <div class="icon-wrap">
                        <img src="{{ getImage(getFilePath('category') . '/' . $item->image) }}" alt="@lang('popular-image')">
                    </div>
                    <div class="title-cat">
                        @if (strlen(__($item->name)) > 20)
                            {{ substr(__($item->name), 0, 20) . '...' }}
                        @else
                            {{ __($item->name) }}
                        @endif
                    </div>
                    <span class="text--base">{{ $item->brands->count() }} @lang('brands')</span>
                </div>
            </a>
        </div>
    @endif
@endforeach

        </div>
    </div>
</section>
  <!--  popular /> -->


@push('script')
<script>
 $(document).ready(function() {
    function initializeCarousel() {
        const $slider = $('.exclusive-coupons-slider');
        const $items = $slider.find('.coupon-card');
        const itemCount = $items.length; // Count valid items
        
        // Check for valid items
        if (itemCount === 0) {
            return; // Exit if there are no items
        }

        if ($(window).width() <= 768) {
            if (!$slider.hasClass('owl-loaded')) { // Only initialize if not loaded
                $slider.addClass('owl-carousel').owlCarousel({
                    loop: itemCount > 2, // Loop only if there are more than 2 items
                    margin: 10,
                    nav: true,
                    dots: false,
                    responsive: {
                        0: {
                            items: 1
                        },
                        600: {
                            items: 2
                        }
                    }
                });
            }
        } else {
            if ($slider.hasClass('owl-loaded')) {
                $slider.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded').find('.owl-stage-outer').remove();
            }
        }
    }

    initializeCarousel();

    $(window).resize(function() {
        initializeCarousel();
    });
});

</script>



@endpush