@extends('home.master')

@section('title',\App\Models\Setting::where('key' , 'title')->pluck('value')->first())
@section('content')
    <main class="allIndex">
        <h1 class="hiddenSeo">{{\App\Models\Setting::where('key' , 'name')->pluck('value')->first()}}</h1>
        <h2 class="hiddenSeo">{{\App\Models\Setting::where('key' , 'title')->pluck('value')->first()}}</h2>
        @foreach($widget as $item)
            @if($item['name'] == 'استوری')
                <div class="myWidget">
                    @include('home.index.storyIndex' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'استوری2')
                <div class="myWidget">
                    @include('home.index.storyIndex2' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'استوری4')
                <div class="myWidget">
                    @include('home.index.storyIndex4' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'بلاگ2')
                <div class="myWidget">
                    @include('home.index.blogIndex2' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'تبلیغ ساده')
                <div class="myWidget">
                    @include('home.index.adIndex' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'تبلیغ بزرگ')
                <div class="myWidget">
                    @include('home.index.bigIndex2' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'تبلیغ بزرگ 3')
                <div class="myWidget">
                    @include('home.index.bigIndex3' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'لیست غرفه')
                <div class="myWidget">
                    @include('home.index.sellerIndex' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'تک غرفه')
                <div class="myWidget">
                    @include('home.index.sellerDetail' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'تک غرفه2')
                <div class="myWidget">
                    @include('home.index.sellerDetail2' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'بازارگردی')
                <div class="myWidget">
                    @include('home.index.bazarIndex2' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'معرفی سایت')
                <div class="myWidget">
                    @include('home.index.bigIndex' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'دسته بندی')
                <div class="myWidget">
                    @include('home.index.category' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'دسته بندی2')
                <div class="myWidget">
                    @include('home.index.category2' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'لحظه ای')
                <div class="myWidget">
                    @include('home.index.momentProduct' , ['data' => $item,'moment' => $moment])
                </div>
            @elseif($item['name'] == 'محصولات اسلایدری')
                <div class="myWidget">
                    @include('home.index.productList' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'محصولات افقی')
                <div class="myWidget">
                    @include('home.index.horizontal1' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'محصولات اسلایدری2')
                <div class="myWidget">
                    @include('home.index.productList2' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'استوری3')
                <div class="myWidget">
                    @include('home.index.storyIndex3' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'محصولات ویژه')
                <div class="myWidget">
                    @include('home.index.suggestIndex' , ['data' => $item])
                </div>
            @elseif($item['name'] == 'بلاگ')
                <div class="myWidget">
                    @include('home.index.blogIndex' , ['data' => $item])
                </div>
            @endif
        @endforeach
        @if($popUp == 1)
            @include('home.index.popUp',['imagePopUp' => $imagePopUp,'descriptionPopUp' => $descriptionPopUp,'buttonPopUp' => $buttonPopUp,'titlePopUp' => $titlePopUp,'addressPopUp' => $addressPopUp,'popUpStatus'=>$popUpStatus])
        @endif
    </main>
@endsection

@section('linkPage')
    <link rel="stylesheet" href="/css/swiper.min.css">
    <script src="/js/swiper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>
@endsection

@section('scriptPage')
    <script src="/js/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="/css/owl.carousel.min.css"/>
    <script src="/js/jquery.cookie.js"></script>
    <script>
        $(document).mouseup(function(e)
        {
            var container = $(".showStory");
            if (container.is(e.target) && container.has(e.target).length == 0)
            {
                $('.showStory').hide();
                $.each($("video"), function () {
                    this.pause();
                    this.currentTime = 0;
                    this.muted = true;
                });
                $(".allStoryIndex2 .swiper-wrapper,.allStoryIndex3 .swiper-wrapper,.allStoryIndex4 .swiper-wrapper").css({'transform': 'translate3d(0px,0,0)','z-index': '0'})
            }
        });
        $(document).ready(function () {
            $('.AllPopUpIndex').click(function(){
                this.remove();
                $.cookie('popUp' , 1);
            })
            $(".showStory .titleS i").click(function (){
                $(".showStory").hide();
                $.each($(".showStory video"), function () {
                    this.pause();
                    this.currentTime = 0;
                    this.muted = true;
                });
                $(".allStoryIndex2 .swiper-wrapper,.allStoryIndex3 .swiper-wrapper,.allStoryIndex .swiper-wrapper").css({'transform': 'translate3d(0px,0,0)','z-index': '0'})
            })
            $(".allBazarIndex2 .story, .allBazarIndex3 .story, .allStoryIndex .story, .allStoryIndex2 .story, .allStoryIndex3 .story, .allStoryIndex4 .story")
                .on("touchstart", function (e) {
                    this.touchStartY = e.originalEvent.touches[0].clientY;
                    this.touchStartX = e.originalEvent.touches[0].clientX;
                })
                .on("touchend click", function (e) {
                    let movedY = Math.abs(e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0].clientY - this.touchStartY : 0);
                    let movedX = Math.abs(e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0].clientX - this.touchStartX : 0);

                    if (movedY > 10 || movedX > 10) {
                        $(".showStory").hide();
                        $(".allStoryIndex2 .swiper-wrapper, .allStoryIndex3 .swiper-wrapper, .allStoryIndex4 .swiper-wrapper, .allStoryIndex .swiper-wrapper")
                            .css({ 'transform': 'translate3d(0px,0,0)', 'z-index': '0' });
                        return;
                    }

                    $(".showStory").hide();
                    const storyId = $(this).attr('data-story');
                    $(this).parent().find("#" + storyId).show();
                    var gg = $(this).parent().find("#" + storyId).find("video").get(0);
                    if(gg){
                        gg.currentTime = 0;
                        gg.muted = false;
                        gg.play();
                    }
                    $(".allStoryIndex2 .swiper-wrapper, .allStoryIndex3 .swiper-wrapper, .allStoryIndex4 .swiper-wrapper, .allStoryIndex .swiper-wrapper")
                        .css({ 'transform': 'unset', 'z-index': '200' });
                });

            $('.slider-moment2').owlCarousel({
                loop:true,
                rtl:true,
                lazyLoad: true,
                touchDrag: false,
                mouseDrag: false,
                pullDrag: false,
                items:1,
                autoplay:true,
                dots:false,
                autoplayTimeout:10000,
            })
            new Swiper(".detailSwiper", {
                initialSlide: 1,
                effect: "coverflow",
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: "auto",
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 300,
                    modifier: 1,
                    slideShadows: true,
                },
            });
            new Swiper(".detailSwiper2", {
                spaceBetween: 20,
                breakpoints: {
                    100: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 4,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".sellerSwiper1", {
                breakpoints: {
                    100: {
                        slidesPerView: 1,
                    },
                    1024: {
                        slidesPerView: 2,
                        spaceBetween: 20,
                    },
                },
            });
            new Swiper(".swiperBig2", {
                slidesPerView: 1,
                pagination: {
                    el: ".swiper-pagination",
                },
                autoplay: {
                    delay: 1500,
                    pauseOnMouseEnter: true,
                },
            });
            new Swiper(".swiperBig3", {
                slidesPerView: 1,
                lazyLoad: true,
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                },
                autoplay: {
                    delay: 1500,
                    pauseOnMouseEnter: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".storySwiper", {
                spaceBetween: 10,
                breakpoints: {
                    100: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 6,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".momentSwiper", {
                spaceBetween: 10,
                breakpoints: {
                    100: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 4,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".listSwiper", {
                spaceBetween: 10,
                breakpoints: {
                    100: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 5,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".listSwiper2", {
                breakpoints: {
                    100: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    1024: {
                        spaceBetween: 30,
                        slidesPerView: 5,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".storySwiper2", {
                spaceBetween: 15,
                breakpoints: {
                    100: {
                        slidesPerView: 2.3,
                    },
                    1024: {
                        slidesPerView: 6,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },

                on: {
                    slideChange: function () {
                        if($('.showStory').filter(':visible').length >= 1){
                            $('.showStory').hide();
                            $(".allStoryIndex2 .swiper-wrapper").css({'transform': 'translate3d(0px,0,0)','z-index': '0'})
                        }
                    }
                }
            });
            new Swiper(".storySwiper3", {
                breakpoints: {
                    100: {
                        spaceBetween: 8,
                        slidesPerView: 4.3,
                    },
                    1024: {
                        spaceBetween: 15,
                        slidesPerView: 10,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },

                on: {
                    slideChange: function () {
                        if($('.showStory').filter(':visible').length >= 1){
                            $('.showStory').hide();
                            $(".allStoryIndex3 .swiper-wrapper").css({'transform': 'translate3d(0px,0,0)','z-index': '0'})
                        }
                    }
                }
            });
            new Swiper(".storySwiper4", {
                slidesPerView: 'auto',
                breakpoints: {
                    100: {
                        spaceBetween: 8,
                    },
                    1024: {
                        spaceBetween: 15,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },

                on: {
                    slideChange: function () {
                        if($('.showStory').filter(':visible').length >= 1){
                            $('.showStory').hide();
                            $(".allStoryIndex4 .swiper-wrapper").css({'transform': 'translate3d(0px,0,0)','z-index': '0'})
                        }
                    }
                }
            });
            new Swiper(".sellerSwiper2", {
                spaceBetween: 10,
                breakpoints: {
                    100: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 3,
                    },
                },
            });
            new Swiper(".blogSwiper", {
                spaceBetween: 10,
                breakpoints: {
                    100: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 4,
                    },
                    1700: {
                        slidesPerView: 5,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".blogSwiper2", {
                spaceBetween: 15,
                breakpoints: {
                    100: {
                        slidesPerView: 1.5,
                    },
                    1024: {
                        slidesPerView: 4,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".mySwiper", {
                breakpoints: {
                    100: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 10,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".suggestSwiper", {
                breakpoints: {
                    100: {
                        slidesPerView: 1.5,
                        spaceBetween: 10,
                    },
                    1024: {
                        spaceBetween: 15,
                        slidesPerView: 5,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".catSwiper", {
                spaceBetween: 10,
                breakpoints: {
                    100: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 10,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".category2", {
                spaceBetween: 1,
                breakpoints: {
                    100: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 8,
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
            new Swiper(".swiperBig", {
                effect: "cube",
                grabCursor: true,
                loop: true,
                speed: 1000,
                cubeEffect: {
                    shadow: false,
                    slideShadows: true,
                    shadowOffset: 10,
                    shadowScale: 0.94,
                },
                autoplay: {
                    delay: 1500,
                    pauseOnMouseEnter: true,
                },
            });
        })
    </script>
@endsection

