<x-layouts.widget>
    <div class="w-full relative xl:max-w-full xl:m-auto">
        <div class="absolute lg:w-[60%] md:w-[400px] w-[60%] top-0  right-0 rounded-tl-[140px] rounded-bl-[140px]  before:w-full before:bg-gray-300 h-full
      bg-gradient-to-b from-white to-gray-100
      z-[-1]"></div>
        <div class="absolute -top-6 block md:hidden right-8">
            <h3 class="text-center font-bold text-2xl text-gray-700">ویژه</h3>
        </div>
        @php
            $slides = $entity->slides;
            $static_disk = \Rezahmady\SettingOperation\Setting::get('storage_disks.video_static_disk', 'public') ?? 'public';
            $url = ($static_disk == 'public') ? url('') : \Modules\StorageDriver\Models\Disk::where('name', $static_disk)->value('domain').'/';
        @endphp
        <div class="swiper banner-swiper pt-9 px-8 lg:px-0">
            <div class="absolute right-[9%] xl:right-[13%] 2xl:right-[15%] lg:right-[12%] top-[16%] hidden md:block">
                <h3 class="text-center font-bold text-4xl text-gray-700">ویژه</h3>
                <img src="{{theme('/img/icons/esalat.svg')}}" class="xl:w-36 lg:w-28 w-16 md:w-24 sm:w-18 " alt="">
            </div>
            <div class="swiper-wrapper">
                @foreach($slides as $slide)
                <a href="{{$slide['link']}}" class="swiper-slide rounded-md p-0 overflow-hidden"><img src="{{$url.$slide['image']}}" alt="{{$slide['alt']}}"></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>
            var swiper = new Swiper(".banner-swiper", {
                slidesPerView: 1,
                centeredSlides: true,
                spaceBetween: 10,
                grabCursor: true,
                navigation: {
                    nextEl: ".sw-button-next",
                    prevEl: ".sw-button-prev",
                },
                breakpoints: {
                    640: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    768: {
                        slidesPerView: 2,
                        spaceBetween: 20,
                    },
                    1024: {
                        slidesPerView: 3,
                        spaceBetween: 20,
                    },
                    1280: {
                        slidesPerView: 3,
                        spaceBetween: 10,
                    },
                    1536: {
                        slidesPerView: 4,
                        spaceBetween: 10,
                    },
                },
            });

            window.addEventListener('contentChanged:{{$entity->name}}', event => {
                var swiper = new Swiper(".banner-swiper", {
                    slidesPerView: 1,
                    centeredSlides: true,
                    spaceBetween: 10,
                    grabCursor: true,
                    navigation: {
                        nextEl: ".sw-button-next",
                        prevEl: ".sw-button-prev",
                    },
                    breakpoints: {
                        640: {
                            slidesPerView: 1,
                            spaceBetween: 10,
                        },
                        768: {
                            slidesPerView: 2,
                            spaceBetween: 20,
                        },
                        1024: {
                            slidesPerView: 3,
                            spaceBetween: 20,
                        },
                        1280: {
                            slidesPerView: 3,
                            spaceBetween: 10,
                        },
                        1536: {
                            slidesPerView: 4,
                            spaceBetween: 10,
                        },
                    },
                });
            });
        </script>
    </div>
</x-layouts.widget>
