@extends($activeTemplate.'layouts.frontend')
@section('content')
@php
    $secondAd = App\Models\Ad::skip(1)->first();
@endphp

<section class="exclusive-section pt-115">
    <div class="container">
        <div class="row gy-4 justify-content-center">
            <div class="col-lg-3">
                <div class="side-bar-wrap">
                    <div class="section-search-box mb-4">
                       
    <div class="coupon">
      @if($uniqueStore)
    <div class="store-card">
        <img src="{{ getImage(getFilePath('store') . '/' . $uniqueStore->image) }}" alt="{{ $uniqueStore->name }}" />
        <p>{{ $uniqueStore->name }}</p>
         <span style="font-size:15px;font-weight:bold;">Brand Detail</span><br><p style="font-size:12px;">{{ $uniqueStore->description }}</p>
    </div>
@endif
        <!-- Other coupon details -->
    </div>


                        <!--<form>-->
                        <!--    <input class="form--control" id="searchValue" name="search" type="text" placeholder="@lang('Search')">-->
                        <!--    <button><i class="fa-solid fa-magnifying-glass"></i></button>-->
                        <!--</form>-->
                    </div>
                    <div class="category-box">
                        <div class="side-bar-wrap">
                            <div class="category-box">
                                <div class="categories">
                                    <h6 class="title">@lang('Categories')</h6>
                                    <div class="category-list">
                                        @foreach ($categories as $item)
                                        <div class="check-item">
                                            <div class="form--check categories-search mb-2">
                                                <input class="form-check-input filter-by-category" name="categories_{{$loop->iteration}}" type="checkbox" value="{{ $item->id }}" id="categories_{{$loop->iteration}}">
                                                <label for="categories_{{$loop->iteration}}" class="form-check-label">{{ $item->name }}</label>
                                            </div>
                                        </div>
                                        @endforeach
                                        <button class="show-more-button btn btn--base btn--sm mt-2">@lang('Show More')</button>
                                    </div>
                                    
                                </div>
                                <div class="categories">
                                    <h6 class="title">@lang('Brands')</h6>
                                    <div class="category-list">
                                        @foreach ($stores as $item)
                                        <div class="check-item-stores">
                                            <div class="form--check categories-search mb-2">
                                                <input class="form-check-input filter-by-stores" id="stores_{{$loop->iteration}}" name="stores_{{$loop->iteration}}"
                                                    type="checkbox" value="{{ $item->id }}">
                                                <label for="stores_{{$loop->iteration}}" class="form-check-label">{{ $item->name }}</label>
                                            </div>
                                        </div>
                                        @endforeach
                                        <button class="show-more-button-stores btn btn--base btn--sm mt-2">@lang('Show More')</button>
                                    </div>
                                </div>
                                @if($secondAd)
                                <div class="categories">
                                    <!-- ad image start -->
                                    <div class="sidebar-add-wrap position-relative">
                                       <div class="long-add-wrap--thumb">
                                            <a href="{{@$secondAd->link}}" target="_blank">
                                                <img src="{{ getImage(getFilePath('adImage') . '/' . @$secondAd->image) }}" alt="">
                                            </a>
                                       </div>
                                    </div>
                                     <!-- ad image end -->
                                </div>
                                @else
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
               
            </div>
            <div class="col-lg-9  main-content">
                <div class="row gy-4">
                    @forelse($coupons as $item)
                    <div class="card col-lg-12 col-md-12">
                        <div class="row  wow animate__animated animate__fadeInUp pt-3 pb-3" 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>-->
                            <!--        @if($item->is_featured == 1)-->
                            <!--        <p>@lang('Featured')</p>-->
                            <!--        @elseif($item->is_exclusive == 1)-->
                            <!--        <p>@lang('Exclusive')</p>-->
                            <!--        @else -->
                            <!--        <p>@lang('New')</p>-->
                            <!--        @endif-->
                                    
                            <!--    </div>-->
                            <!--</div>-->
                            <div class="col-md-4">
                                <a href="javascript:void(0)" class=" getCoupon" data-id="{{$item->id}}" data-title="{{$item->title}}" data-code="{{$item->code}}" data-description="{{$item->description}}" data-link="{{$item->link}}"> <img src="{{ getImage(getFilePath('store') . '/' . @$item->store->image) }}" alt="@lang('Store Image')" style="height:100px;"></a>
                            </div>
                            <div class="col-md-5 mt-4">
                                <p class="card-title" style="font-weight:bold;">{{__($item->title)}}</p>
                                 <p class="card-action" style="font-weight:bold;">{!! isExpired($item->id) !!}</p>
                            </div>
                            <div class="col-md-3 mt-4">
                                                            <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 ?? 'Get Code') }}
</a>
                                                            </div>

                        </div>
                    </div>
                    @empty
                    <p class="text-center">{{__($emptyMessage)}}</p>
                    @endforelse
                </div>
            </div>
        
        </div>
        <div class="row py-4">
            @if ($coupons->hasPages())
                <div class="py-4">
                    {{ paginateLinks($coupons) }}
                </div>
            @endif
        </div>
    </div>
</section>

    <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">
                        <img id="storeImage"  src="/" >
                    <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>



<script>

    document.addEventListener("DOMContentLoaded", function () {
        const sideBarWrap = document.querySelector(".side-bar-wrap");
        const couponsSection = document.querySelector(".main-content .row");

        function moveSidebar() {
            if (window.innerWidth <= 575) {
                if (sideBarWrap && couponsSection) {
                    couponsSection.appendChild(sideBarWrap); 
                }
            } else {
                
                const originalParent = document.querySelector(".col-lg-3");
                if (originalParent && sideBarWrap) {
                    originalParent.appendChild(sideBarWrap);
                }
            }
        }

       
        moveSidebar();

       
        window.addEventListener("resize", moveSidebar);
    });


</script>
    <!-- Modal /> -->

@endsection

@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'));
              var storeLink = $(this).data('link');
            modal.find('a[href]').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');
             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 into product info
        function getCouponInfo(couponId) {
            $.ajax({
                url: '{{ route("get.modal.info") }}',
                type: 'get',
                data: {
                    couponId: couponId,
                },
                success: function(response) {
                    var storeName = response.storeName;
                    var storeImage = response.storeImage;
                    $('.storeName').text(storeName);
                    if (storeImage) {
                        $('#storeImage').attr('src', storeImage);
                    } else {
                        console.error('Store image not found');
                    }
                },
                error: function(error) {
                    console.error('Error fetching coupon 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
            
            
         // Filter coupon
         $("#searchValue").on('keyup', function () {
            var categories   = [];
            var searchValue = [];
            var stores   = [];
         
            var searchValue = $(this).val();
            getFilteredData(stores, categories,searchValue)
        });

         $("input[type='checkbox'][name^='categories_']").on('click', function(){
                var categories   = [];
                var stores   = [];
                var searchValue = [];
                $('.filter-by-category:checked').each(function() {
                    if(!categories.includes(parseInt($(this).val()))){
                        categories.push(parseInt($(this).val()));
                    }
                });
                getFilteredData(stores, categories,searchValue)
        });

        $("input[type='checkbox'][name^='stores_']").on('click', function(){
            var categories   = [];
            var stores   = [];
            var searchValue = [];

                $('.filter-by-stores:checked').each(function() {
                    if(!stores.includes(parseInt($(this).val()))){
                        stores.push(parseInt($(this).val()));
                    }
                });
                getFilteredData(stores, categories,searchValue)
        });


        function getFilteredData(stores, categories,searchValue){

            $.ajax({
                type: "get",
                url: "{{ route('coupon.filtered') }}",
                data:{
                
                    "categories": categories,
                    "stores": stores,
                    "search": searchValue
                },
                dataType: "json",
                success: function (response) {
                    if(response.html){
                        $('.main-content').html(response.html);
                    }

                    if(response.error){
                        notify('error', response.error);
                    }
                }
            });
        }
        // end filter product
      
    })(jQuery);
</script>
@endpush