<div class="w-full relative xl:max-w-full xl:px-7 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>
    @widgetOption($widget, ['slides'], 'top:20px;right:10%;left:auto;z-index:100')
    <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 = $widget->slides;
    @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="2xl:w-64 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:{{$widget->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>
