@php
    $blogs = HelpDesk::elementPostsByArgs($args);
	if (isset($w3cms_option)) {
        extract($w3cms_option);
    }
@endphp

<section class="noice-overlay">
    <div class="3xl:pb-197 lg:py-80 pb-50 md:pt-30">
        <div class="container">
            <div class="grid grid-cols-12 xl:gap-88 gap-10 items-center lg:mb-73 mb-40">
                <div class="lg:col-span-9 sm:col-span-10 col-span-12">
                    <div class="flex lg:items-center justify-between lg:flex-row flex-col gap-20 pxl-heading-scroll-effect">
                        <div>
                            <span class="sub-title text-primary">{{ isset($args['subtitle']) ? $args['subtitle'] : '' }}</span>
                            <h2 class="xl:text-7xl/80 md:text-5xl text-4xl heading-text">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
                        </div>
                        @if(isset($args['description']))
                        <div class="max-w-340">
                            <p class="sm:text-xl text-lg/30">{{ $args['description'] }}</p>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="lg:col-span-3 sm:col-span-2 col-span-12">
                    @if (isset($args['view_all']) && $args['view_all'] == 'true')
                    <a 
                    data-block="button"
                    href="{{ isset($args['page_id']) ? DzHelper::laraPageLink($args['page_id']) : 'javascript:void(0);' }}" 
                    class="lg:size-129 sm:size-100 size-70 sm:p-15 p-8 flex items-center justify-center rounded-full text-primary border border-primary light lg:text-lg/20 sm:text-base text-xs gradient-hover btn btn-outline style-1 button--stroke sm:ms-auto flairBtn group magneticBtn">
                        <span class="button-flair"></span>
                        <span class="text-center button__label group-hover:text-secondary duration-100">
                            {{ __("View All") }}<br>{{ __("Post") }}
                        </span>
                    </a>
                    @endif
                </div>
            </div>
            <div class="swiper blog-swiper">
                <div class="swiper-wrapper">
                
                    @forelse($blogs as $blog)
                    <div class="swiper-slide">
                        @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, ' ...');
                           
                        @endphp
                        <div class="group blog-card">
                            <div class="mb-30 overflow-hidden">
                                <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="size-full duration-500 group-hover:scale-[1.03] group-hover:translate-x-3">
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="">
                                    <h4 class="text-2xxl/35 mb-5">{{ $blog_visibility }}{{ $blog_title }}</h4>
                                    <ul>
                                        <li class="text-base/16 dark:text-bodytext text-textlight pe-10 inline-block relative before:content-[''] before:absolute before:h-1 before:w-10 before:left-0 before:top-1/2 before:-translate-y-1/2 first:before:hidden dark:before:bg-bodytext before:bg-textlight">{{ DzHelper::theme_lang(Carbon\Carbon::parse($blog->publish_on)->format(config('Site.custom_date_format'))) }}</li>
                                        <li class="text-base/16 dark:text-bodytext text-textlight ps-20 inline-block relative before:content-[''] before:absolute before:h-1 before:w-10 before:left-0 before:top-1/2 before:-translate-y-1/2 first:before:hidden dark:before:bg-bodytext before:bg-textlight">{{ __('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 dark:bg-white bg-dark transform xl:-translate-x-full xl:rotate-[-360deg] xl:opacity-0 group-hover:translate-x-0 group-hover:rotate-0 group-hover:opacity-100 overflow-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 class="dark:stroke-black stroke-white" d="M7.5 17L17.5 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path class="dark:stroke-black stroke-white" d="M7.5 7H17.5V17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    @empty
                    @endforelse
                </div>
            </div>
        </div>
    </div>
    <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-50%] 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>