@props(['blogs','scroll'=>true])


@if($scroll)

<div>


    <div wire:ignore dir="ltr" x-data="slider4" class="relative group swiper-container h-full">
        <div class="swiper swiper4 h-full">
            <!-- Wrapper -->
            <div class="swiper-wrapper  h-full">
                <!-- Slides -->

                @foreach($blogs as $blog)

                <div class="swiper-slide flex justify-center h-max">

                    <div class=" flex flex-col gap-3 h-max w-full ">

                        <div dir="rtl" class="w-full">
                            {{-- :style="`height: ${width}px`"       --}}
                            <img :style="`height: ${width}px`" @if($loop->first) id="imagee" @endif class="w-full rounded-xl"
                            src="{{asset('images/'.$blog->image)}}"
                            alt="">
                        </div>

                        <div dir="rtl" class="flex flex-col ">
                            <div class="text-white">
                                رضا کریمی
                            </div>

                            <div class="text-gray-400 text-xs">
                                مدیر فروش
                            </div>
                        </div>

                    </div>


                </div>
                @endforeach

            </div>

            {{-- <!-- Pagination -->--}}
            {{-- <div class="swiper-pagination"></div>--}}

            <!-- Navigation Buttons -->
            <div class="swiper-button-prev ">

                {{-- hover:bg-[#000000b3]    bg-[#00000080]        --}}
                <button
                    class="prev absolute  w-12 h-12 items-center content-center rounded-full  hover:backdrop-blur-sm backdrop-blur-md text-white transform duration-500 group-hover:left-5 -left-52 opacity-0 group-hover:opacity-100 ">&#10094;
                </button>

            </div>
            <div class="swiper-button-next">

                {{-- hover:bg-[#000000b3]    bg-[#00000080]        --}}
                <button
                    class="next absolute  w-12 h-12 items-center content-center rounded-full  hover:backdrop-blur-sm backdrop-blur-md text-white transform duration-500 group-hover:right-5 -right-52 opacity-0 group-hover:opacity-100">&#10095;
                </button>

            </div>
        </div>
    </div>





    @script

    <script>
        Alpine.data('slider4', () => ({
            swiper4: null,
            width: ((document.getElementById('imagee').clientWidth) - 120) / 6,
            init() {
                this.swiper4 = new Swiper('.swiper4', {
                    loop: true, // فعال‌سازی حالت لوپ
                    slidesPerView: 6, // تعداد اسلایدهای قابل نمایش در هر صفحه
                    spaceBetween: 20, // فاصله بین اسلایدها
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // pagination: {
                    //     el: '.swiper-pagination',
                    //     clickable: true,
                    // },

                    autoplay: {
                        delay: 5000,
                        disableOnInteraction: false,
                    },

                });


            },


        }))
    </script>

    @endscript


</div>

@else

<div class="grid grid-cols-6 items-center content-center">

    @foreach($blogs as $blog)
    <div class=" ">

        <div dir="rtl">
            <img class="size-44 rounded-xl"
                src="{{asset('images/'.$blog->image)}}"
                alt="">
        </div>

        <div dir="rtl" class="flex flex-col mt-2 ">
            <div class="text-white">
                رضا کریمی
            </div>

            <div class="text-gray-400 text-xs">
                مدیر فروش
            </div>
        </div>

    </div>

    @endforeach




</div>


@endif