@php
    $blogs = HelpDesk::elementPostsByArgs($args);
	if (isset($w3cms_option)) {
        extract($w3cms_option);
    }
@endphp
<section class="noice-overlay">
    <div class="lg:pt-232 lg:pb-150 sm:pt-160 sm:pb-80 pt-120 pb-50">
        <div class="container">
            <div class="row">
                <div class="w-full">
                    <div class="text-center lg:mb-150 sm:mb-80 mb-30">
                        @if(isset($args['subtitle']) && $args['subtitle'] != '')
                        <span class="text-2xl dark:text-white mb-10 block">{{ $args['subtitle'] }}</span>
                        @endif
                        <h2 class="sm:text-7xl/70 text-4xl font-semibold sm:mb-20 mb-10">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
                         @if(isset($args['description']))
                        <p class="sm:text-xl/30 text-base max-w-560 mx-auto">{{ $args['description'] }}</p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-12 gap-20">
                @foreach($blogs as $index => $blog)
                    @php
                        if($blog->visibility != 'Pu'){
                            $blog_visibility = $blog->visibility == 'Pr' ? __('Private: ') : __('Protected: ') ;
                        }else {
                            $blog_visibility = '';
                        }

                        $blog_title = ($post_title_length_type == 'on_words') ? Str::words($blog->title, $post_title_length, ' ...') : Str::limit($blog->title, $post_title_length, ' ...');
                        $blog_excerpt = ($post_excerpt_length_type == 'on_words') ? Str::words($blog->excerpt, $post_excerpt_length, ' ...') : Str::limit($blog->excerpt, $post_excerpt_length, ' ...');
                    @endphp
                    @if($index % 5 == 0) 
                        <div class="xl:col-span-5 col-span-12 xl:row-span-2">
                            <div class="card !rounded-none h-full group bg-card">
                                <div class="overflow-hidden md:h-420">
                                    <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="w-full h-full object-cover duration-500 group-hover:scale-[1.03] group-hover:translate-x-3">
                                </div>
                                <div class="sm:flex items-end justify-between md:p-50 md:pt-45 p-30 pt-25">
                                    <div class="">
                                        <h4 class="md:text-[45px]/50 text-[30px]/35 text-white">
                                            <a class="hover:text-primary" href="{{ DzHelper::laraBlogLink($blog->id) }}">
                                                {{ $blog_visibility }}{{ $blog_title }}
                                            </a>
                                        </h4>
                                        <p class="sm:mb-54 mb-30 text-white/60">{{ $blog_excerpt }}</p>
                                        <ul class="text-base text-bodytext uppercase mt-auto">
                                            <li class="inline-block relative pe-10">{{ DzHelper::theme_lang(Carbon\Carbon::parse($blog->publish_on)->format(config('Site.custom_date_format'))) }}</li>
                                            <li class="inline-block z-1 relative ps-15 before:-z-1 before:content-['/'] before:absolute before:size-full before:top-0 before:left-0">{{ __('By') }} <a href="{{ DzHelper::author($blog->user->id) }}">{{ $blog->user->full_name }}</a></li>
                                        </ul>
                                    </div>
                                    <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="size-60 min-w-60 flex items-center justify-center rounded-full bg-primary transform -translate-x-full rotate-[-360deg] sm:opacity-0 group-hover:translate-x-0 group-hover:rotate-0 group-hover:opacity-100 overflow-hidden max-sm:hidden group/second">
                                        <svg class="group-hover/second:animate-toTopFromBottom" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M7.5 17L17.5 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M7.5 7H17.5V17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="xl:col-span-7 col-span-12">
                            <div class="card !rounded-none h-full bg-card">
                                <div class="flex md:flex-row flex-col justify-between md:p-10 group">
                                    <div class="flex flex-col p-30 max-sm:pt-25">
                                        <h4 class="md:text-[35px]/41 text-[30px]/35 mb-10 text-white">
                                            <a class="hover:text-primary" href="{{ DzHelper::laraBlogLink($blog->id) }}">
                                                {{ $blog_visibility }}{{ $blog_title }}
                                            </a>
                                        </h4>
                                        <p class="mb-30 text-white/60">{{ $blog_excerpt }}</p>
                                        <ul class="text-base text-bodytext uppercase mt-auto">
                                            <li class="inline-block relative pe-10">{{ DzHelper::theme_lang(Carbon\Carbon::parse($blog->publish_on)->format(config('Site.custom_date_format'))) }}</li>
                                            <li class="inline-block z-1 relative ps-15 before:-z-1 before:content-['/'] before:absolute before:size-full before:top-0 before:left-0">{{ __('By') }} <a href="{{ DzHelper::author($blog->user->id) }}">{{ $blog->user->full_name }}</a></li>
                                        </ul>
                                    </div>
                                    <div class="md:min-w-340 md:w-340 md:h-340 h-full overflow-hidden md:order-0 -order-1">
                                        <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="w-full h-full object-cover duration-500 group-hover:scale-[1.03] group-hover:translate-x-3">
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                @endforeach
            </div>
        </div>
    </div>
    <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-30%] left-[-47%] -z-1 pointer-events-none">
    <img src="{{ theme_asset('images/background/bg10.png') }}" alt="" class="absolute bottom-[-40%] right-[0%] max-xl:w-[60%] -z-1 pointer-events-none">
</section>