@php
    $featureCoupon = getContent('feature_coupon.content', true);
    $featuredCouponsData = App\Models\Coupon::with(['category', 'store', 'wishlists'])->orderBy('priority', 'asc')
        ->where('status', 1)
        ->where('is_featured', 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">
                            {{ __($featureCoupon->data_values->heading) }}
                        </h2>
                        <a href="{{ route('feature.coupons') }}">@lang('View More')</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row gy-4 justify-content-center exclusive-coupons-slider">
            @foreach ($featuredCouponsData as $item)
                <div class="col-lg-3 col-md-6">
                    <a href="javascript:void(0)" class=" w-100 getCoupon"
                                data-id="{{ $item->id }}" data-title="{{ $item->title }}"
                                data-code="{{ $item->code }}" data-description="{{ $item->description }}"
                                data-link="{{ $item->link }}">
                    <div class="coupon-card wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
                        <div class="card-ribbon-wrap">
                            <button class="fav-cta addToWishList" 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('Featured')</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 getCoupon"
                                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="couponModal" 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>
                                <button class="btn btn--base copy-btn copytext" id="copyBoard"><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>
            <!-- Modal /> -->
        </div>
      @if(Request::is('/'))
    <div class="d-flex justify-content-center mt-4 view-more-btn">
        <a href="{{ route('feature.coupons') }}" class="btn btn--base w-50">@lang('View More')</a>
    </div>
@endif

    </div>
</section>
<!--  exclusive /> -->

@push('script')
    <script>
        // (function($) {
        //     "use strict";
        //     $('.getCoupon').on('click', function() {
        //         var modal = $('#couponModal');

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

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

        //         modal.modal('show');
        //     });

        //     $('#copyBoard').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 into product info
        //     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 found');
        //                 }

        //             },
        //             error: function(error) {
        //                 console.error('Error fetching product info:', error);
        //             }
        //         });
        //     }
        //     // add to wishlist
        //     $(document).on('click', '.addToWishList', 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);
        
        
     (function($) {
    "use strict";

    $('.getCoupon').on('click', function() {
        var modal = $('#couponModal');

        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');
        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').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', '.addToWishList', 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() {
        if ($(window).width() <= 768) {
            if (!$('.exclusive-coupons-slider').hasClass('owl-loaded')) {
                $('.exclusive-coupons-slider').addClass('owl-carousel').owlCarousel({
                    loop: true,
                    margin: 10,
                    nav: true,
                    dots: false,
                    responsive: {
                        0: {
                            items: 1
                        },
                        600: {
                            items: 2
                        }
                    }
                });
            }
        } else {
            if ($('.exclusive-coupons-slider').hasClass('owl-loaded')) {
                $('.exclusive-coupons-slider').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
                $('.exclusive-coupons-slider').find('.owl-stage-outer').children().unwrap();
            }
        }
    }

    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; 
}



</style>