
<div class="w-full pt-9 lg:mt-19 mt-6 pb-8 relative overflow-hidden @if($widget->title_position == 'center') bg-gradient-to-b from-white to-gray-100 @endif">
    @widgetOption($widget, ['main_title', 'main_description', 'title_position', 'button_label','button_link', 'status'], 'top:0px;right:20px;left:auto;z-index:100;padding:10px',  'icon-only', '', 'pencil-alt')
    @widgetOption($widget, ['tags'], 'top:0px;right:50px;left:auto;z-index:100',  '', 'اسلایدر', '')

    <div class=" mx-auto z-0">
        @if($widget->title_position == 'right')
            <a href="{{$widget->button_link}}" class="p-3 flex justify-between relative">
                <div class="">
                    <h3 class="font-bold lg:text-4xl md:text-2xl text-xl w-[170px] lg:w-[330px] sm:w-[220px] text-center lg:text-right  text-gray-700">{{$widget->main_title}}</h3>
                    <span class="w-full block mt-3 lg:text-md sm:text-sm text-xs">{{$widget->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 my-8 text-brand-500 lg:text-md sm:text-sm text-xs">
                        <span>{{$widget->button_label}}</span>
                        <i class="las la-arrow-left"></i>
                    </div>
                </div>
            </a>
        @else
            <div class="p-3 flex justify-center ">
                <div class="">
                    <h3 class=" font-bold text-center lg:text-4xl md:text-2xl text-xl text-gray-700">{{$widget->main_title}}</h3>
                    <span class="w-full block mt-3 text-center lg:text-md sm:text-sm text-xs">{{$widget->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
            $tags = $widget->tags;
            $videos = [];

            if($tags) {
                $videos = \Modules\Vod\Models\Video::whereHas('tags', function($q) use($tags) {
                    $q->whereIn('video_tag_id', $tags)->take(20);
                })->get();
            }
        @endphp


        <div class="swiper vod-swiper-1 px-4 md:px-5 pt-9">
            <div class="swiper-wrapper">
                @foreach($videos as $id => $video)
                <a href="{{$video->path()}}"  class="swiper-slide p-0 overflow-hidden" >
                    <div  class="w-full"><div class="relative rounded-md" >
                            <img class="rounded-md w-full" src="@if($video->poster) {{url('storage/'.$video->poster)}} @else {{url(theme('/img/photos/vod/default-video.jpg'))}} @endif" alt="">

                        </div>
                        <div >
                            <div class="text-center w-full text-bold text-sm text-gray-700 p-2 block">{{$video->title}}</div>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>
            <!-- <div class="swiper-pagination mt-6"></div> -->
            <div class="sw-button-next  absolute flex items-center z-10 top-0 bottom-0 left-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="fill-green-600" width="20" height="40" viewBox="10 0 20 40"><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 class="sw-button-prev absolute flex items-center z-10 top-0 bottom-0 right-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="fill-green-600" width="20" height="40" viewBox="10 0 20 40"><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>
        <script>

            document.addEventListener('livewire:navigated', () => {
                const swiper_{{$widget->name}} = new Swiper(".vod-swiper-1", {
                    slidesPerView: 2,
                    // centeredSlides: true,
                    spaceBetween: 10,
                    grabCursor: true,
                    navigation: {
                        nextEl: ".sw-button-next",
                        prevEl: ".sw-button-prev",
                    },
                    breakpoints: {
                        640: {
                            slidesPerView: 3,
                            spaceBetween: 10,
                        },
                        768: {
                            slidesPerView: 4,
                            spaceBetween: 10,
                        },
                        1024: {
                            slidesPerView: 5,
                            spaceBetween: 10,
                        },
                        1280: {
                            slidesPerView: 6,
                            spaceBetween: 10,
                        },
                        1536: {
                            slidesPerView: 7,
                            spaceBetween: 10,
                        },
                    },
                });
            })
            window.addEventListener('contentChanged:{{$widget->name}}', event => {
                const swiper_{{$widget->name}} = new Swiper(".vod-swiper-1", {
                    slidesPerView: 2,
                    // centeredSlides: true,
                    spaceBetween: 10,
                    grabCursor: true,
                    navigation: {
                        nextEl: ".sw-button-next",
                        prevEl: ".sw-button-prev",
                    },
                    breakpoints: {
                        640: {
                            slidesPerView: 3,
                            spaceBetween: 10,
                        },
                        768: {
                            slidesPerView: 4,
                            spaceBetween: 10,
                        },
                        1024: {
                            slidesPerView: 5,
                            spaceBetween: 10,
                        },
                        1280: {
                            slidesPerView: 6,
                            spaceBetween: 10,
                        },
                        1536: {
                            slidesPerView: 7,
                            spaceBetween: 10,
                        },
                    },
                });
                console.log('update doctor widget')
                swiper_{{$widget->name}}.update();
            });

        </script>
    </div>
    @if($widget->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>
