@props(['blogs', 'title', 'slug' , 'parent'])
<div class="  lg:border-0 w-full ">
    @if (request()->is('CategoryBlog/*'))
    <div href="#" class="  text-[#16205b] my-3 flex font-bold  lg:my-8 text-[16px] lg:text-[20px] text-start items-center   gap-2">
        <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]  "> </div> <span class="text-[#16205b]"> مطالب {{$title}}</span>
    </div>
    @else
    <div class="text-black my-3 lg:my-8  flex  text-[16px] lg:text-[20px] text-start justify-between items-center   gap-2">
        @if (!is_null($parent))
        @php
        $parent_nameFa = App\Models\Category::where('slug' , $parent)->where('parent' , 1)->first()->title;
        @endphp
        <span class="font-bold flex items-center gap-2 text-[#16205b] ">
            <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]  "> </div>
            {{$parent_nameFa}} {{$title}}
        </span>
        @else
        <span class="font-bold flex items-center gap-2 text-[#16205b] ">
            <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]  "> </div>
            مطالب {{$title}}
        </span>
        @endif
        @if (!is_null($parent))
        <a class="  text-[#16205b] md:flex hidden  rounded-xl px-2  text-[16px]  " href="{{route('CategoryBlog.index' , ['categoryunderparentslug' => $parent ,  'slug' => $slug]).'/'}}" wire:navigate>مشاهده همه</a>

        @else
        <a class="  text-[#16205b] md:flex hidden  rounded-xl px-2  text-[16px]  " href="{{route('CategoryBlog.index' , ['categoryunderparentslug' => $slug]).'/'}}" wire:navigate>مشاهده همه</a>

        @endif
    </div>
    @endif
    <div x-data="blogList" x-intersect="shown = true">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8" x-show="shown" x-transition>
            @foreach ($blogs as $index => $blog)
            <div x-show="{{$index }} < limit" class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-slate-100 md:shadow">
                <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="relative w-[80px] md:w-full">
                    <img class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none" src="{{ asset('images/' . $blog->image) }}" alt="">
                </a>
                <div class="flex  md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
                        {!! $blog->subject !!}
                    </a>
                    <div class="md:block hidden text-[#16205b]">
                        @php
                        $preview = Str::limit($blog->preview, 80, '...');
                        @endphp
                        {!! $preview !!}
                    </div>
                    <div class="flex gap-1 text-white md:mt-auto">
                        <div class="hidden md:flex flex-col justify-center">
                            <img class="bg-cover bg-center rounded-full size-8" src="{{ asset('image/'.$blog->user->picture) }}" alt="">
                        </div>
                        <div class="text-xs text-gray-600 flex flex-col justify-center">
                            {{ $blog->user->full_name }}
                        </div>
                        <span style="font-variation-settings: 'wght' 500;" class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
                        <div class="text-xs text-gray-600 flex flex-col justify-center">
                            {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @if (request()->is('CategoryBlog/*'))
    <button class="w-full p-3 mb-6  md:hidden block  rounded-xl text-center border border-[#084642] text-[#084642]">
        مشاهده مطالب بیشتر
    </button>
    @else
    @if (!is_null($parent))
    <a href=" {{cleanRouteUrl('CategoryBlog.index' , ['categoryunderparentslug' => $parent , 'slug' => $slug]).'/'}}" wire:navigate class="w-full p-3 md:hidden block   mb-6 rounded-xl  text-center  border border-[#084642] text-[#084642]">
        مشاهده مطالب بیشتر
    </a>
    @else
    <a href=" {{cleanRouteUrl('CategoryBlog.index' , ['slug' => $slug]).'/'}}" wire:navigate class="w-full p-3 md:hidden block   mb-6 rounded-xl  text-center  border border-[#084642] text-[#084642]">
        مشاهده مطالب بیشتر
    </a>
    @endif
    @endif
</div>
@script
<script>
    Alpine.data('blogList', () => ({
        limit: 4,
        shown: false,
        init() {
            this.updateLimit();
            window.addEventListener('resize', () => this.updateLimit());
        },
        updateLimit() {
            const screenWidth = window.innerWidth;
            if (screenWidth < 768) {
                this.limit = 5;
            } else if (screenWidth >= 768 && screenWidth < 1024) {
                this.limit = 2;
            } else if (screenWidth >= 1024 && screenWidth < 1280) {
                this.limit = 3;
            } else {
                this.limit = 4;
            }
        }
    }));
</script>
@endscript