ahrommag/resources/views/components/grid/bigscroller.blade.php

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


@if($scroll)

<div class="h-full">

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

                @foreach($blogs as $blog)

                <div class="swiper-slide w-1/4 h-full ">

                    <div style="transition: transform 0.5s ease-in-out;" class="flex gap-10     overflow-x-auto h-full">

                        <div class="h-full w-full rounded-xl" style="background-image: url('{{asset('images/'.$blog->image)}}');background-size:     cover;
                             background-repeat:   no-repeat;
                             background-position: center center; ">

                            <div class="w-full h-full rounded-xl flex "
                                style="background-image: linear-gradient(180deg, transparent, black);">

                                <div dir="rtl" class="h-full w-full flex flex-col gap-3 p-7  justify-between ">

                                    <div>
                                        <div style="background: {{$blog->category->color}}"
                                            class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-xs items-center">
                                            <svg height="12" width="10" xmlns="http://www.w3.org/2000/svg">
                                                <circle r="4" cx="5" cy="5.5" fill="black" />
                                            </svg>
                                            {{$blog->category->title}}
                                        </div>
                                    </div>

                                    <div class="flex flex-col gap-3">


                                        <div class="text-white">
                                            {!! $blog->subject!!}
                                            {{-- {!! $blog->subject !!}--}}
                                        </div>
                                        <div>
                                            {{-- توضیحات--}}
                                            {{-- {!! $blog->preview !!}--}}
                                        </div>
                                        <div class="flex gap-5 text-white">

                                            <div class="text-xs">
                                                {{-- تاریخ--}}
                                                {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
                                            </div>

                                            <div class="text-xs">
                                                {{-- زمان مطالعه--}}
                                                {!! $blog->reed_time !!} دقیقه زمان مطالعه
                                            </div>

                                            {{-- <div>--}}
                                            {{-- {!! $blog->likes ??0 !!}--}}
                                            {{-- </div>--}}

                                        </div>
                                    </div>

                                </div>


                            </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 hover:backdrop-blur-sm w-12 h-12 items-center content-center rounded-full  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('slider3', () => ({
            swiper: null,
            init() {
                this.swiper = new Swiper('.swiper3', {
                    loop: true, // فعال‌سازی حالت لوپ
                    slidesPerView: 4, // تعداد اسلایدهای قابل نمایش در هر صفحه
                    spaceBetween: 30, // فاصله بین اسلایدها
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    autoplay: {
                        delay: 5000,
                        disableOnInteraction: false,
                    },
                    speed: 400,
                    // pagination: {
                    //     el: '.swiper-pagination',
                    //     clickable: true,
                    // },
                });



            },


        }))
    </script>

    @endscript


</div>

@else


<div class="w-full grid grid-cols-4 gap-5">
    @foreach($blogs as $blog)

    <div class="flex gap-10  my-8 overflow-x-auto h-[45vh]">

        <div class="h-full w-80 rounded-xl" style="background-image: url('{{asset('images/'.$blog->image)}}');background-size:     cover;
                     background-repeat:   no-repeat;
                     background-position: center center; ">

            <div class="w-full h-full rounded-xl flex "
                style="background-image: linear-gradient(180deg, transparent, black);">

                <div dir="rtl" class="h-full w-full flex flex-col gap-3 p-7 justify-between ">

                    <div>
                        <div style="background: {{$blog->category->color}}"
                            class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-xs items-center">
                            <svg height="12" width="10" xmlns="http://www.w3.org/2000/svg">
                                <circle r="4" cx="5" cy="5.5" fill="black" />
                            </svg>
                            {{$blog->category->title}}
                        </div>
                    </div>

                    <div class="flex flex-col gap-1">


                        <div class="text-white">
                            {!! $blog->subject!!}
                            {{-- {!! $blog->subject !!}--}}
                        </div>
                        <div>
                            {{-- توضیحات--}}
                            {{-- {!! $blog->preview !!}--}}
                        </div>
                        <div class="flex gap-3 text-white">

                            <div class="text-xs flex flex-col justify-center">

                                با میلاد بابایی
                                {{-- تاریخ--}}
                                {{-- {{jalaliDate($blog->updated_at,'%d %B، %Y')}}--}}
                            </div>

                            <span>.</span>

                            <div class="text-xs flex flex-col justify-center">
                                {{-- زمان مطالعه--}}
                                {{jalaliDate($blog->updated_at,'%d %B، %Y')}}

                                {{-- {!! $blog->reed_time !!} دقیقه زمان مطالعه--}}
                            </div>

                            {{-- <div>--}}
                            {{-- {!! $blog->likes ??0 !!}--}}
                            {{-- </div>--}}

                        </div>
                    </div>

                </div>


            </div>

        </div>


    </div>




    @endforeach
</div>








@endif