@props(['blogs'])

<div>

    @php
    $count=0;
    $num=0;
    @endphp

    @foreach($blogs->chunk(4) as $key => $chunk)

    <div class="grid my-5 grid-cols-2 gap-10 h-[66vh] ">


        {{-- @dd($blogs->chunk(4))--}}
        @if($count%4==0 && $chunk->has($count))
        @php

        $blog=$chunk->all()[$count];

        $num=0;

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

            <a href="{{route('detail',['id'=>$blog->id])}}" wire:navigate>

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

                    <div class="h-full flex flex-col gap-1 justify-end">

                        <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-sm items-center">
                                <svg height="12" width="12" xmlns="http://www.w3.org/2000/svg">
                                    <circle r="5" cx="5" cy="6.5" fill="black" />
                                </svg>
                                {{$blog->category->title}}
                            </div>
                        </div>

                        <div>
                            {!! $blog->subject !!}
                        </div>
                        <div>
                            {!! $blog->preview !!}
                        </div>
                        <div class="flex gap-5 text-white">

                            <div>
                                {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
                            </div>

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

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

                        </div>

                    </div>

                </div>
            </a>

        </div>

        @php $count=$count+1; @endphp

        @endif


        <div class="">
            <div class="grid gap-10 h-full">

                @if($count%4==1 && $chunk->has($count))
                @php

                $blog=$chunk->all()[$count];

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

                    <a href="{{route('detail',['id'=>$blog->id])}}" wire:navigate>

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

                            <div class="h-full flex flex-col gap-1 justify-end">

                                <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-sm items-center">
                                        <svg height="12" width="12" xmlns="http://www.w3.org/2000/svg">
                                            <circle r="5" cx="5" cy="6.5" fill="black" />
                                        </svg>
                                        {{$blog->category->title}}
                                    </div>
                                </div>

                                <div>
                                    {!! $blog->subject !!}
                                </div>
                                <div>
                                    {!! $blog->preview !!}
                                </div>
                                <div class="flex gap-5 text-white">

                                    <div>
                                        {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
                                    </div>

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

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

                                </div>

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

                </div>

                @php $count=$count+1; @endphp

                @endif


                <div>

                    <div class="grid grid grid-cols-2 gap-10 h-full">

                        @if($count%4==2 && $chunk->has($count))
                        @php

                        $blog=$chunk->all()[$count]

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

                            <a {{route('detail',['id'=>$blog->id])}} wire:navigate>

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

                                    <div class="h-full flex flex-col gap-1 justify-end">

                                        <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-sm items-center">
                                                <svg height="12" width="12"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <circle r="5" cx="5" cy="6.5" fill="black" />
                                                </svg>
                                                {{$blog->category->title}}
                                            </div>
                                        </div>

                                        <div>
                                            {!! $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 class="text-xs">--}}
                                            {{-- {!! $blog->likes ??0 !!}--}}
                                            {{-- </div>--}}

                                        </div>

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

                        </div>
                        @php $count=$count+1; @endphp

                        @endif


                        @if($count%4==3 && $chunk->has($count))
                        @php

                        $blog=$chunk->all()[$count]

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

                            <a {{route('detail',['id'=>$blog->id])}} wire:navigate>

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

                                    <div class="h-full flex flex-col gap-1 justify-end">

                                        <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-sm items-center">
                                                <svg height="12" width="12"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <circle r="5" cx="5" cy="6.5" fill="black" />
                                                </svg>
                                                {{$blog->category->title}}
                                            </div>
                                        </div>

                                        <div>
                                            {!! $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 class="text-xs">--}}
                                            {{-- {!! $blog->likes ??0 !!}--}}
                                            {{-- </div>--}}

                                        </div>

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

                        </div>

                        @php $count=$count+1; @endphp


                        @endif


                    </div>

                </div>

            </div>

        </div>


    </div>

    @endforeach


</div>