
@forelse($blogs as $index => $blog)

    @php
        $team_department = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'department',optional($blog)->id);
        $social_linkedin = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'social_linkedin',optional($blog)->id);
        $social_facebook = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'social_facebook',optional($blog)->id);
        $social_instagram = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'social_instagram',optional($blog)->id);
        $social_twitter = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'social_twitter',optional($blog)->id);
        $social_youtube = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'social_youtube',optional($blog)->id);
    @endphp

    <div class="project relative border-b dark:border-white/10 border-black/10 sm:px-30 px-20 group">
        <div class="box-item max-w-1320 mx-auto lg:flex justify-between items-center relative sm:py-40 py-20">
            <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="mb-15 max-w-360 sm:hidden mx-auto">
            <div class="project-title relative z-4 flex items-baseline gap-10 lg:mb-0 mb-10 sm:justify-start justify-center">
                <h3 class="sm:text-[40px]/70 text-xl font-medium">{{ $blog->title }}</h3>
                <span class="post inline-block">/ {{ isset($team_department) ? $team_department : '' }}</span>
            </div>
            <ul class="relative z-4 flex items-center gap-10 lg:mb-0 mb-15 sm:justify-start justify-center">
                @if(isset($social_facebook) && $social_facebook != '')
                <li class="inline-block lg:opacity-0 -translate-y-0.5 duration-300 group-hover:opacity-100 group-hover:translate-y-0">
                    <a href="{{ $social_facebook }}" class="flex items-center justify-center size-40 rounded-md border lg:border-social max-lg:dark:border-white max-lg:border-social lg:text-social max-lg:dark:text-white max-lg:text-social hover:!bg-social hover:!border-social hover:!text-white max-lg:group-hover:!bg-social max-lg:group-hover:!border-social max-lg:group-hover:!text-white">
                        <i class="fa-brands fa-facebook-f"></i>
                    </a>
                </li>
                @endif
                @if(isset($social_twitter) && $social_twitter != '')
                <li class="inline-block lg:opacity-0 -translate-y-0.5 duration-300 group-hover:opacity-100 group-hover:translate-y-0">
                    <a href="{{ $social_twitter }}" class="flex items-center justify-center size-40 rounded-md border lg:border-social max-lg:dark:border-white max-lg:border-social lg:text-social max-lg:dark:text-white max-lg:text-social hover:!bg-social hover:!border-social hover:!text-white max-lg:group-hover:!bg-social max-lg:group-hover:!border-social max-lg:group-hover:!text-white">
                        <i class="fa-brands fa-x-twitter"></i>
                    </a>
                </li>
                @endif
                @if(isset($social_linkedin) && $social_linkedin != '')
                <li class="inline-block lg:opacity-0 -translate-y-0.5 duration-300 group-hover:opacity-100 group-hover:translate-y-0">
                    <a href="{{ $social_linkedin }}" class="flex items-center justify-center size-40 rounded-md border lg:border-social max-lg:dark:border-white max-lg:border-social lg:text-social max-lg:dark:text-white max-lg:text-social hover:!bg-social hover:!border-social hover:!text-white max-lg:group-hover:!bg-social max-lg:group-hover:!border-social max-lg:group-hover:!text-white">
                        <i class="fa-brands fa-linkedin-in"></i>
                    </a>
                </li>
                @endif
                @if(isset($social_instagram) && $social_instagram != '')
                <li class="inline-block lg:opacity-0 -translate-y-0.5 duration-300 group-hover:opacity-100 group-hover:translate-y-0">
                    <a href="{{ $social_instagram }}" class="flex items-center justify-center size-40 rounded-md border lg:border-social max-lg:dark:border-white max-lg:border-social lg:text-social max-lg:dark:text-white max-lg:text-social hover:!bg-social hover:!border-social hover:!text-white max-lg:group-hover:!bg-social max-lg:group-hover:!border-social max-lg:group-hover:!text-white">
                        <i class="fa-brands fa-instagram"></i>
                    </a>
                </li>
                @endif
                @if(isset($social_youtube) && $social_youtube != '')
                <li class="inline-block lg:opacity-0 -translate-y-0.5 duration-300 group-hover:opacity-100 group-hover:translate-y-0">
                    <a href="{{ $social_youtube }}" class="flex items-center justify-center size-40 rounded-md border lg:border-social max-lg:dark:border-white max-lg:border-social lg:text-social max-lg:dark:text-white max-lg:text-social hover:!bg-social hover:!border-social hover:!text-white max-lg:group-hover:!bg-social max-lg:group-hover:!border-social max-lg:group-hover:!text-white">
                        <i class="fa-brands fa-youtube"></i>
                    </a>
                </li>
                @endif
            </ul>
            <div class="relative z-4 project-categ">
                <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="flex items-center gap-5 sm:justify-start justify-center">
                    <span>More Details</span>
                    <svg class="svg-currentcolor" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.33325 14.1673L14.6666 5.83398" stroke-opacity="0.6"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M6.33325 5.83398H14.6666V14.1673" stroke-opacity="0.6"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </a>
            </div>
            <div class="item-image max-sm:hidden absolute w-300 h-350 pointer-events-none top-0 left-0 overflow-hidden opacity-0">
                <div class="reveal-image position-relative h-full w-full bg-cover bg-position-center" style="background-image: url('{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}')"></div>
            </div>
        </div>
    </div>

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