@forelse($blogs as $blog)

    @php
        $features_list = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'features_list',optional($blog)->id);
        $png_icon = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'png_icon',optional($blog)->id);
        
        $cpt_category = optional($blog)->blog_categories->pluck('slug')->toArray();
   
    @endphp

    <div class="md:col-span-6 col-span-12">
        <div class="card h-full rounded-lg card-img-hover  bg-card" data-index="0" data-hover-img="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}">
            <div class="xl:p-50 p-30 relative flex flex-col h-full">
                <div class="flex-1">
                    @foreach ($cpt_category as $cat)
                    @php
                        $title = Str::title(str_replace('-', ' ', $cat));
                    @endphp
                    <span class="inline-block py-2 px-15 text-sm/ font-medium bg-primary text-secondary rounded-2xl md:mb-15 mb-10 duration-500 hover:bg-white hover:text-secondary">{{ $title }}</span>
                    @endforeach
                    <h3 class="sm:text-[30px]/45 text-2xl md:mb-32 mb-15 text-white">
                        <a class="hover:text-primary" href="{{ DzHelper::laraBlogLink($blog->id) }}">{{ $blog->title }}</a>
                    </h3>
                    @php
                    $features = explode(',', @$features_list);
                    @endphp
                    @if(isset($features))
                        <ul class="text-bodytext font-medium mb-45">
                            @foreach ($features as $feature) 
                                <li class="mb-11 ps-36 relative after:content-[''] after:absolute after:block after:top-1/2 after:-translate-y-1/2 after:left-0 after:size-full after:bg-check after:bg-no-repeat">{{@$feature }}</li>
                            @endforeach
                        </ul>
                    @endif
                </div>
                <div class="flex items-center justify-between">
                    <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="btn btn-primary style-1 p-2 group button--stroke flairBtn" data-block="button">
                        <span class="button-flair__wrapper">
                            <span class="button-flair"></span>
                        </span>
                        <span class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">View Details</span>
                        <span class="inline-flex justify-center items-center size-32 rounded-full bg-secondary text-white duration-100 group-hover:bg-primary group-hover:text-secondary z-1">
                            <i class="fa-solid fa-arrow-right text-sm"></i>
                        </span>
                    </a>
                    <div class="media absolute xl:bottom-40 -bottom-30 right-30">
                        <img src="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$png_icon) }}" alt="" class="object-contain sm:size-150 size-120">
                    </div>
                </div>
            </div>
        </div>
    </div>

@empty
<div class="col-span-12 py-20 text-center dark:text-white text-xl"><strong>{{ __('No services found.') }}</strong></div>
@endforelse