@php
    $exclusiveCoupon = getContent('exclusive_coupons.content', true);
    $exlusivesCouponsData = App\Models\Coupon::with(['category', 'store','wishlists'])->orderBy('priority', 'asc')->where('status', 1)
        ->where('is_exclusive', 1)
        ->latest()
        ->limit(4)
        ->get();
@endphp
<!-- < exclusive -->
<section class="exclusive-section py-115">
    <div class="container">
        <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">
                            {{ __($exclusiveCoupon->data_values->heading) }}
                        </h2>
                        <a href="{{ route('exclusive.coupons') }}">@lang('View  More  ')</a>
                    </div>
                </div>
            </div>
        </div>
     <div class="row gy-4 justify-content-center exclusive-coupons-slider">
    @foreach ($exlusivesCouponsData as $item)
        <div class="col-lg-3 col-md-6">
            <div class="coupon-card wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
                <a href="javascript:void(0)" class=" getCoupon1"
                        data-id="{{ $item->id }}" data-title="{{ $item->title }}"
                        data-code="{{ $item->code }}" data-description="{{ $item->description }}"
                        data-link="{{ $item->link }}">
                <div class="card-ribbon-wrap">
                    <button class="fav-cta addToWishList1" data-id="{{ $item->id }}">
                        @if(auth()->check() && $item->wishlists->count() > 0)
                            <i class="fas fa-heart"></i>
                        @else
                            <i class="far fa-heart"></i>
                        @endif
                    </button>
                    <div class="ex-cta">
                        <i class="fas fa-gem"></i>
                        <p>@lang('Exclusive')</p>
                    </div>
                </div>
                <div class="card-thumb">
                    <img src="{{ getImage(getFilePath('store') . '/' . @$item->store->image) }}" alt="@lang('Store Image')">
                </div>
                </a>
                <div class="card-content-wrap">
                    <p class="card-title">{{ __($item->title) }}</p>
                    <a href="javascript:void(0)" class="btn btn--base w-100 getCoupon1"
                        data-id="{{ $item->id }}" data-title="{{ $item->title }}"
                        data-code="{{ $item->code }}" data-description="{{ $item->description }}"
                        data-link="{{ $item->link }}">{{ __($item->code_name) }}</a>
                    <p class="card-action">{!! isExpired($item->id) !!}</p>
                </div>
            </div>
        </div>
    @endforeach
</div>

<!-- Modal -->
<div class="modal fade" id="couponModal1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="btn-wrap">
                <button data-bs-dismiss="modal" aria-label="Close"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div class="logo-thumb">
                    <img class="storeImage" src="/" alt="modal-image">
                </div>
                <p class="title"></p>
                <p class="storeTitle">@lang('Copy and paste this code at') <a href="" class="text--base storeName" target="_blank"></a></p>
                <div class="copy-code-input">
                    <input class="form--control coponCodeCopy" name="code" readonly="" id="code">
                    <button class="btn btn--base copy-btn copytext" id="copyBoard-exclusive"><i class="fas fa-copy"></i></button>
                </div>
                <div class="qr-thumb">
                    <p class="description"></p>
                </div>
                <div class="footer-item social-wrapper">
                    <p class="mb-3">@lang('Share this coupon now.')</p>
                    <ul class="social-list">
                        <li class="social-list__item">
                            <a href="#" class="social-list__link share-link" target="_blank" data-social="facebook">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                        </li>
                        <li class="social-list__item">
                            <a href="#" class="social-list__link share-link" target="_blank" data-social="twitter">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                        <li class="social-list__item">
                            <a href="#" class="social-list__link share-link" target="_blank" data-social="linkedin">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End of Modal -->

<div class="d-flex justify-content-center mt-4 view-more-btn">
    <a href="{{ route('exclusive.coupons') }}"  class="btn btn--base w-50">@lang('View More')</a>
</div>
</div>
</section>

<!--  exclusive /> -->

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

    $('.getCoupon1').on('click', function() {
        var modal = $('#couponModal1');

        modal.find('.title').text($(this).data('title'));
        modal.find('.description').text($(this).data('description'));
        modal.find('input[name=code]').val($(this).data('code'));
        var storeLink = $(this).data('link');  // Correctly assign to storeLink
        modal.find('.storeName').attr('href', storeLink);
        var couponId = $(this).data('id');
        getCouponInfo(couponId);

        // Update the href attribute of the share links
        $('.share-link[data-social="facebook"]').attr('href',
            'https://www.facebook.com/sharer/sharer.php?u=' + storeLink);
        $('.share-link[data-social="twitter"]').attr('href',
            'https://twitter.com/intent/tweet?url=' + storeLink);
        $('.share-link[data-social="linkedin"]').attr('href',
            'https://www.linkedin.com/shareArticle?url=' + storeLink);

        modal.modal('show');
        setTimeout(function() {
            window.open(storeLink, '_blank');  
        }, 200);  
    });

    $('#copyBoard-exclusive').on('click', function() {
        var copyText = document.getElementsByClassName("coponCodeCopy");
        copyText = copyText[0];
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        /* For mobile devices */
        document.execCommand("copy");
        copyText.blur();
        this.classList.add('copied');
        setTimeout(() => this.classList.remove('copied'), 1500);
    });

    // Get modal info via AJAX
    function getCouponInfo(couponId) {
        $.ajax({
            url: '{{ route('get.modal.info') }}',
            type: 'get',
            data: {
                couponId: couponId,
            },
            success: function(response) {
                var storeImages = response.storeImage;
                var storeName = response.storeName;
                $('.storeName').text(storeName);
                if (storeImages) {
                    $('.storeImage').attr('src', storeImages);
                } else {
                    console.error('Store image could not be found');
                }
            },
            error: function(error) {
                console.error('Error fetching product info:', error);
            }
        });
    }

    // Add to wishlist
    $(document).on('click', '.addToWishList1', function() {
        'use strict';
        var isLoggedIn = {{ Auth::check() ? 'true' : 'false' }};
        if (isLoggedIn) {
            var couponId = $(this).data('id');
            var button = $(this);
            $.ajax({
                url: '{{ route('user.wishlist.add') }}',
                type: 'get',
                data: {
                    couponId: couponId,
                },
                success: function(response) {
                    if (response.hasOwnProperty('message')) {
                        Toast.fire({
                            icon: 'success',
                            title: response.message
                        });
                        var heartIcon = button.find('i');
                        heartIcon.removeClass('far fa-heart').addClass('fas fa-heart');
                    } else {
                        Toast.fire({
                            icon: 'warning',
                            title: response.error
                        });
                    }
                },
                error: function(xhr, status, error) {
                    var errorMessage = 'Error occurred while adding the Coupon to wishlist.';
                    Toast.fire({
                        icon: 'error',
                        title: errorMessage
                    });
                }
            });
        } else {
            var errorMessage = 'Please log in to add items to your wishlist.';
            Toast.fire({
                icon: 'warning',
                title: errorMessage
            });
        }
    });
    // End wishlist

})(jQuery);




    </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



<style>
    .owl-prev, .owl-next {
    font-size: 70px !important; 
    width: 50px; 
    height: 50px; 
    line-height: 50px;
    background-color: #333; 
    color:#800080  !important;
    color: #fff; 
    border-radius: 50%; 
    opacity: 0.8; 
}

.owl-prev:hover, .owl-next:hover {
    opacity: 1; 
    background-color: #000; 
}

.view-more-btn a {
    color: #800080 !important;
    background-color: white !important; 
}

.view-more-btn a:hover {  
    color: white !important;
    background-color: #800080 !important; 
}




</style>