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

@if(isset($args['element_style']) && $args['element_style'] == '2')
<section class="lg:pt-100 lg:pb-100 py-50 dark:bg-card bg-white dz-pin-area">
    <div class="container">
        <div class="grid grid-cols-12 gap-20">
            <div class="3xl:col-span-5 lg:col-span-4 col-span-12">
                <div class="xl:pe-90 xl:pb-120 lg:pb-50 my-sticky">
                    @if(isset($args['subtitle']) && $args['subtitle'] != '')
                    <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                    @endif
                    <h2 class="xl:text-7xl lg:text-6xl sm:text-5xl text-4xxl font-bold sm:mb-20 mb-10 headline">{!! isset($args['title']) ? $args['title'] : '' !!}</h2>
                    <p class="dark:text-grey text-textlight text-xl sm:mb-30 mb-10">{{ isset($args['description']) ? $args['description'] : '' }}</p>
                    @if (isset($args['view_all']) && $args['view_all'] == 'true')
                    <a href="{{ isset($args['page_id']) ? DzHelper::laraPageLink($args['page_id']) : 'javascript:void(0);' }}" class="btn py-10 px-20 sm:h-60 rounded-6xl bg-secondary arrow-btn flairBtn group hover-dark group" data-block="button">
                        <span class="button-flair-wrapper">
                            <span class="button-flair"></span>
                        </span>
                        <span class="relative md:w-82 md:h-42 w-62 h-32">
                            <svg class=" size-full duration-500" viewBox="0 0 82 42" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="hover-fill" d="M78.0488 20.5122L78.0488 22.4634L4.56911e-05 22.4634L4.57764e-05 20.5122L78.0488 20.5122Z" fill="white"></path>
                                <path class="hover-stroke" d="M59.5122 0.999999C63.8949 12.122 68.2603 16.872 79.0244 21.4598C67.888 25.6573 63.5473 29.5287 59.5122 41" stroke="white" stroke-width="2"></path>
                            </svg>
                        </span>
                    </a>
                    @endif
                </div>
            </div>
            <div class="3xl:col-span-7 lg:col-span-8 col-span-12">

                @forelse($blogs as $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

                    <div class="bg-secondary rounded-2xl card mb-10 dz-pin-card dz-hover-item">
                        <div class="md:flex p-10">
                            <div class="flex flex-col md:p-35 p-15 flex-1">
                                <h4 class="sm:text-[35px]/35 text-4xl/35 sm:mb-20 mb-5 text-white capitalize font-base">
                                    <a href="{{ DzHelper::laraBlogLink($blog->id) }}">
                                        {{ $blog_visibility }}{{ $blog_title }}
                                    </a>
                                </h4>
                                <p class="sm:text-lg text-base text-textlight mb-20">{{ $blog_excerpt }}</p>
                                <ul class="text-base font-medium text-textlight 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 relative ps-15 before:content-['/'] before:absolute before:size-full before:top-0 before:left-0">{{ __('By') }} {{ $blog->user->name }}</li>
                                </ul>
                            </div>
                            <div class="rounded-xxl xl:min-w-340 md:w-300 xl:w-340 lg:min-h-300 overflow-hidden relative">
                                <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="dz-hover-img right" 
                                    data-displacement="{{ theme_asset('images/1.jpg') }}" data-intensity="0.6" data-speedin="1" data-speedout="1">
                                    <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="size-full object-cover">
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                @endforelse
            </div>
        </div>
    </div>
</section>
@else
<section class="noice-overlay cardStacking">
    <div class="xl:py-108 sm:py-80 py-40">
        <div class="container">
            <div class="grid grid-cols-12 xl:gap-86 gap-15">
                <div class="3xl:col-span-5 lg:col-span-4 col-span-12">
                    <div class="3xl:pe-80 my-sticky top-100 pxl-heading-scroll-effect">
                        @if(isset($args['subtitle']) && $args['subtitle'] != '')
                        <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                        @endif
                        <h2 class="xl:text-6xl md:text-5xl text-4xl md:mb-46 mb-10 heading-text">{!! isset($args['title']) ? $args['title'] : '' !!}</h2>
                        <p class="sm:text-xl text-lg md:mb-46 mb-10">{{ isset($args['description']) ? $args['description'] : '' }}</p>
                        @if (isset($args['view_all']) && $args['view_all'] == 'true')
                        <a href="{{ isset($args['page_id']) ? DzHelper::laraPageLink($args['page_id']) : 'javascript:void(0);' }}" class="btn btn-primary style-1 p-2 group button--stroke flairBtn magneticBtn" 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 All') }}</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>
                        @endif
                    </div>
                </div>
                <div class="3xl:col-span-7 lg:col-span-8 col-span-12 lg:mt-0 mt-20">
                    <div class="grid grid-cols-12 xl:gap-0 gap-15">
                        <div class="cardStacking__cards xl:block hidden"></div>
    
                        @forelse($blogs as $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
                        <div class="lg:col-span-12 md:col-span-6 col-span-12 stackCard2 xl:mb-20">
                            <div class="card bg-card rounded-lg">
                                <div class="lg:flex p-10">
                                    <div class="flex flex-col lg:p-35 p-15">
                                        <h4 class="text-[30px]/35 mb-20 text-white">
                                            <a class="hover:text-primary" href="{{ DzHelper::laraBlogLink($blog->id) }}">
                                                {{ $blog_visibility }}{{ $blog_title }}
                                            </a>
                                        </h4>   
                                        <p class="mb-6 text-white/50">{{ $blog_excerpt }}</p>
                                        <ul class="text-base text-primary 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 relative ps-15 before:content-['/'] before:absolute before:size-full before:top-0 before:left-0">{{ __('By') }} {{ $blog->user->name }}</li>
                                        </ul>
                                    </div>
                                    <div class="rounded-lg lg:min-w-340 lg:w-340 lg:min-h-300 overflow-hidden">
                                        <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="size-full object-cover">
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif