<x-layouts.widget>
    <div class="w-full pt-9 lg:mt-19 mt-2 relative overflow-hidden @if($entity->title_position == 'center') bg-gradient-to-b from-white to-gray-100 @endif">
        <div class="relative mx-auto z-0">
            @if($entity->title_position == 'right')
                <a href="{{$entity->button_link}}" class="px-4 md:px-5 flex justify-between relative pt-3 pb-2">
                    <div class="">
                        <div class="font-bold lg:text-2xl md:text-xl text-lg w-[170px] lg:w-[290px] lg:mr-[-40px] sm:w-[190px] text-center  text-gray-700 ">{{$entity->main_title}}</div>
                        <span class="w-full block mt-3 lg:text-md sm:text-sm text-xs">{{$entity->main_description}}</span>
                        <img src="{{theme('/img/vectors/eslimi-title-bg.svg')}}" class="absolute lg:top-[-36px] -top-2 sm:top-[-15px] lg:right-[-40px] lg:w-[330px] sm:w-[220px] sm:right-0 w-[170px] z-[-1] shadow-[0_16px_11px_-11px_#fff]" alt="">
                    </div>
                    <div>
                        <div  class="w-max text-brand-500 lg:text-md sm:text-sm text-xs font-semibold flex items-center gap-2">
                            <span>{{$entity->button_label}}</span>
                            <i class="las la-arrow-left text-lg font-semibold"></i>
                        </div>
                    </div>
                </a>
            @else
                <div class="p-3 flex justify-center ">
                    <div class="">
                        <div class=" font-bold text-center lg:text-3xl md:text-2xl text-xl text-gray-700">{{$entity->main_title}}</div>
                        <span class="w-full block mt-3 text-center lg:text-md sm:text-sm text-xs">{{$entity->main_description}}</span>
                        <svg id="Layer_2" width="70" class="absolute fill-gray-100 top-[-54px] right-0 left-0 m-auto w-[70px] z-0" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 791.02 945.33">
                            <g id="Layer_1-2" data-name="Layer 1">
                                <path d="m.14,0v585.17c-2.3,55.02,24.38,105.43,68.81,129.18,41.69,22.28,83.49,12.79,95.06,9.75-.64,10.43-1.69,47.87,24.37,82.87,21.13,28.37,48.44,39.52,59.3,43.31,18.42,3.43,44.84,10.61,73.12,26.81,38.74,22.19,62.31,50.6,74.63,68.02v.22s.06-.08.08-.11c.02.03.06.08.08.11v-.22c12.31-17.42,35.89-45.84,74.63-68.02,28.28-16.2,54.7-23.38,73.12-26.81,10.87-3.78,38.18-14.93,59.3-43.31,26.06-35,25.02-72.44,24.37-82.87,11.57,3.04,53.37,12.53,95.06-9.75,44.43-23.75,71.11-74.16,68.81-129.18V0"/>
                            </g>
                        </svg>
                    </div>
                </div>
            @endif

            @php
                if(auth()->check() and session('vod_profile') and session('vod_profile')->age_range !== null) {
                    $profile = session('vod_profile');
                    $cache_title = 'widgets::video_tags_swipper_slider.'.$profile->age_range.'.'.$entity->id;
                } else{
                    $cache_title = 'widgets::video_tags_swipper_slider.'.$entity->id;
                }

                $items = \Illuminate\Support\Facades\Cache::flexible($cache_title, [60*10, 60*15], function () use ($entity) {
                    $tags = $entity->tags;
                    $vod_type = $entity->vod_type;

                    $query = \Modules\Vod\Models\Video::where('status', 1);
                    if(auth()->check() and session('vod_profile') and session('vod_profile')->age_range !== null){
                        $profile = session('vod_profile');
                        $age = (int) $profile->age_range;
                        $query = $query->whereHas('ageRange', function($q) use($age) {
                            return $q->where('value', '<', $age);
                        });
                    }

                    if($vod_type) {
                        $query = $query->where('vod_type', $vod_type);
                    } else {
                        $query = $query->whereIn('vod_type', [\Modules\Serial\Enums\VodType::SERIES,\Modules\Serial\Enums\VodType::MOVIE]);
                    }
                    if($tags) {
                        $query = $query->whereHas('tags', function ($query) use($tags) {
                            $query->whereIn('video_tags.id', $tags);
                        });
                    }
                    if($entity->collection) {
                        $query = $query->where('video_collection_id', $entity->collection);
                    }
                   return $query->orderBy('published_at', 'desc')->take(28)->get();
                });

                $static_disk = \Rezahmady\SettingOperation\Setting::get('storage_disks.video_static_disk', 'public') ?? 'public';
                $url = \Illuminate\Support\Facades\Cache::flexible('disk::domain.'.$static_disk,[60*60, 60*60*2], function () use ($static_disk) {
                    return ($static_disk == 'public') ? url('') : \Modules\StorageDriver\Models\Disk::where('name', $static_disk)->value('domain').'/';
                });
            @endphp


            <div class="swiper vod-swiper-1 px-4 md:px-5"
                 x-data="{
                    visible:false,
                    hover:false,
                    swiperMain: false,
                    preview:false,
                    init() {
                        this.initializeSwiper()
                    },
                    initializeSwiper() {
                        if (this.swiperMain) {
                            this.swiperMain.destroy(true, true);
                        }
                        this.swiperMain = new Swiper(this.$el, {
                            init: false,
                            crossFade: true,
                            spaceBetween: 10,
                            slidesPerView: 2.1,
                            slidesPerGroup: 2,
                            breakpoints: {
                                512: {
                                    slidesPerView: 2.3,
                                    slidesPerGroup: 2,
                                },
                                768: {
                                    slidesPerView: 3.2,
                                    slidesPerGroup: 3,
                                    spaceBetween: 15,
                                },
                                1280: {
                                    slidesPerView: 4.5,
                                    slidesPerGroup: 4,
                                    spaceBetween: 15,
                                },
                                1919: {
                                    slidesPerView: 7.5,
                                    slidesPerGroup: 7,
                                    spaceBetween: 20,
                                },
                            },
                            speed: 600,
                            loop: true,
                            parallax: true,
                            navigation: {
                                nextEl: '.swiper-vod-next',
                                prevEl: '.swiper-vod-prev'
                            }
                        });

                        this.swiperMain.on('init', () => {
                          this.visible = true;
                          $refs.wrapper.classList.remove('3xl:gap-5')
                          $refs.wrapper.classList.remove('lg:gap-4')
                          $refs.wrapper.classList.remove('gap-3')
                        });
                        this.swiperMain.init();
                    }
                }">
                <div class="swiper-wrapper">
                    @foreach($items as $item)
                        @php
                            $item = $item->withFakes();
                            $link = url('/v/'.$item->slug);
                        @endphp
                        @include('theme::partials.video_card')
                    @endforeach
                </div>
                <div class="absolute z-10 swiper-vod-prev px-1 bg-gradient-to-l from-[#121212] from-0% top-0 right-0 flex items-center bottom-20" x-transition.duration.300ms x-show="hover">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="10 0 20 40" fill="#fff">
                        <g style="transform: rotate(180deg); transform-origin: 20px center;">
                            <path class="svg-c1" d="M14.77 18.793c0-.493.196-.967.545-1.315l6.2-6.2a1.86 1.86 0 0 1 2.626 2.633l-4.88 4.882 4.88 4.88a1.86 1.86 0 0 1-2.63 2.63l-6.2-6.2c-.347-.348-.54-.82-.54-1.31z"></path>
                        </g>
                    </svg>
                </div>
                <div class="absolute z-10 swiper-vod-next px-1 bg-gradient-to-r from-[#121212] from-0% top-0 left-0 flex items-center bottom-20" x-transition.duration.300ms x-show="hover">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="10 0 20 40" fill="#fff">
                        <path class="svg-c1" d="M14.77 18.793c0-.493.196-.967.545-1.315l6.2-6.2a1.86 1.86 0 0 1 2.626 2.633l-4.88 4.882 4.88 4.88a1.86 1.86 0 0 1-2.63 2.63l-6.2-6.2c-.347-.348-.54-.82-.54-1.31z" style="transform: translateY(2px);"></path>
                    </svg>
                </div>
            </div>

        </div>
        @if($entity->title_position == 'right')
            <div class="absolute lg:top-[60px] sm:top-[63px] top-[60px] right-[-40px] lg:w-[60%] w-[100%] h-[300px] z-[-1] bg-gradient-radial-to-bl from-white to-transparent"></div>
        @endif
    </div>
</x-layouts.widget>
