<div class="m-auto swiper-container">
    <h3 class="text-white px-5 lg:px-10 mb-4 text-lg font-bold">{{__('theme-ekmal::lang.same_as')}} "{{$video->title}}"</h3>
    <div
        class="swiper lg:px-[43px] px-5 z-0" x-on:mouseover="hover=true" x-on:mouseleave="hover=false"
        x-data="{
                visible:false,
                hover:false,
                swiperMain: false,
                preview:false,
                init() {
                    this.initializeSwiper()
                },
                initializeSwiper() {
                    if (this.swiperMain) {
                        this.swiperMain.destroy(true, true); // تخریب instance موجود
                    }
                    this.swiperMain = new Swiper(this.$el, {
                        init: false,
                        crossFade: true,
                        spaceBetween: 10,
                        slidesPerView: 3,
                        slidesPerGroup: 3,
                        breakpoints: {
                            512: {
                                slidesPerView: 3,
                                slidesPerGroup: 3,
                            },
                            768: {
                                slidesPerView: 5,
                                slidesPerGroup: 5,
                                spaceBetween: 15,
                            },
                            1280: {
                                slidesPerView: 7,
                                slidesPerGroup: 7,
                                spaceBetween: 15,
                            },
                            1919: {
                                slidesPerView: 9,
                                slidesPerGroup: 9,
                                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();
                }
            }">
        <!-- Additional required wrapper -->
        <div
            class="swiper-wrapper flex w-1/3 sm:w-1/3 md:w-1/5 xl:w-[14.28%] 3xl:w-[11.11%] gap-3 lg:gap-4 3xl:gap-5" x-ref="wrapper" :class="visible ? '' : ''" wire:ignore>
        <!-- Slides -->
            @foreach($similarVideos as $item)
                @php
                    $item = $item->withFakes();
                    $item->imagePoster = $url.$item->imagePoster;
                @endphp
                @include('theme::partials.card.video')
            @endforeach
        </div>

        <!-- If we need navigation buttons -->
        <div x-ref="next" class="absolute z-10 swiper-vod-prev px-1 bg-gradient-to-l from-[#121212] from-0% top-0 right-0 flex items-center top-0" style="bottom: 5rem" 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 x-ref="prev" class="absolute z-10 swiper-vod-next px-1 bg-gradient-to-r from-[#121212] from-0% top-0 left-0 flex items-center top-0" style="bottom: 5rem" 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>
