@php
    $blogs = HelpDesk::elementPostsByArgs($args);
	if (isset($w3cms_option)) {
        extract($w3cms_option);
    }
@endphp
<section class="xl:py-145 py-40">
    <div class="container">
        <div class="flex items-center justify-between">
            <div>
                @if(isset($args['subtitle']) && $args['subtitle'] != '')
                <span class="mb-10 inline-block text-lg font-medium dark:text-white text-secondary py-10 px-20 rounded-2lg border dark:border-white/10 border-secondary/10 backdrop-blur-[20px] dark:bg-white/5 bg-secondary/5">{{ $args['subtitle'] }}</span>
                @endif
                <h2 class="2xl:text-5xxl lg:text-5xl sm:text-4xxl text-3xl font-semibold headline dark:text-white text-secondary">{!! isset($args['title']) ? $args['title'] : '' !!}</h2>
                @if(isset($args['description']) && $args['description'] != '')
                <p class="sm:text-xl text-lg font-normal">{{ $args['description'] }}</p>
                @endif
            </div>
            <div>
                @if (isset($args['view_all']) && $args['view_all'] == 'true')
                <a href="{{ isset($args['page_id']) ? DzHelper::laraPageLink($args['page_id']) : 'javascript:void(0);' }}" class="magneticBtn sm:size-70 size-48 sm:min-w-70 min-w-48 flex items-center justify-center rounded-full bg-primary overflow-hidden group/second">
                    <svg class="group-hover/second:animate-toTopFromBottom max-sm:w-8" width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.2344 12.2344H28.6406V28.6406" stroke="var(--secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12.2344 28.6406L28.6406 12.2344" stroke="var(--secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </a>
                @endif
            </div>
        </div>
        <div class="grid grid-cols-12 mt-47">
            <div class="xl:col-span-9 col-span-12 xl:mr-54">
                <div class="swiper tips-details">
                    <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, ' ...');
                                $blog_excerpt = ($post_excerpt_length_type == 'on_words') ? Str::words($blog->excerpt, $post_excerpt_length, ' ...') : Str::limit($blog->excerpt, $post_excerpt_length, ' ...');
                                $blog_category = optional($blog)->blog_categories->pluck('slug')->toArray();

                            @endphp
                            <div class="xl:min-w-240 dark:bg-white bg-card/10 rounded-xxl shadow-md flex flex-col md:flex-row overflow-hidden">
                                <!-- Left Image -->
                                <div class="group dz-hover-item relative md:w-[45%] md:h-460 w-full">
                                    <a class="dz-hover-img rounded-xxl relative" data-displacement="{{ theme_asset('images/effect/3.jpg') }}" data-intensity="0.6" data-speedin="1" data-speedout="1">															
                                        <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="Team Planning" class="rounded-xxl size-full object-cover">
                                    </a>
                                </div>
                                <!-- Right Content -->
                                <div class="md:w-[60%] w-full 2xl:p-40 lg:p-29 p-17 flex flex-col justify-between">
                                    <div class="mb-80">
                                        <!-- Category Tag -->
                                        @foreach ($blog_category as $cat)
                                        @php
                                            $title = Str::title(str_replace('-', ' ', $cat));
                                        @endphp
                                        <span class="bg-primary text-secondary text-base font-semibold py-8 px-23 inline-block rounded-2lg w-fit hover:bg-secondary hover:text-white duration-500">{{ $title }}</span>
                                        @endforeach

                                        <!-- Title -->
                                        <h3 class="my-12 text-secondary xl:text-3xl/40 sm:text-2xxl text-2xl font-semibold hover:text-primary duration-500 item-title">
                                            <a href="{{ DzHelper::laraBlogLink($blog->id) }}">
                                                {{ $blog_visibility }}{{ $blog_title }}
                                            </a>
                                        </h3>

                                        <!-- Description -->
                                        <p class="text-base text-textlight sm:pr-55 font-semibold">{{ $blog_excerpt }}</p>
                                    </div>	

                                    <!-- Footer -->
                                    <div class="flex items-center lg:text-sm text-xs text-textlight t font-semibold">
                                        <span>{{ DzHelper::theme_lang(Carbon\Carbon::parse($blog->publish_on)->format(config('Site.custom_date_format'))) }}</span>
                                        <span class="mx-8">|</span>
                                        <a href="{{ DzHelper::laraBlogLink($blog->id) }}">{{ __('By') }} <span class="text-textlight text-sm font-semibold relative after:absolute after:h-px after:bg-[#D9D9D9] after:w-0 hover:after:w-full after:duration-500 after:left-0 hover:after:left-none after:bottom-0 border-b border-[#687B76]">{{ $blog->user->name }}</span></a>
                                        <span class="inline-flex flex-1 h-px bg-[#D9D9D9] lg:mx-18 mx-10"></span>
                                        <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="overflow-hidden inline-flex justify-center items-center sm:size-45 size-32 rounded-full border border-[#D9D9D9] text-secondary duration-100 z-0">
                                            <svg class="hover:animate-toLeftFromRight" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M4.16663 10H15.8333" stroke="var(--secondary)" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M10 4.16666L15.8333 10L10 15.8333" stroke="var(--secondary)" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        @endforelse
                    </div>
                </div>
            </div>
            @php
                $blogObj = new \app\models\Blog();
                $limit = 3;
                $blogs = $blogObj->recentBlogs(['limit'=>$limit]);
            @endphp
            <div class="xl:col-span-3 col-span-12">
                <div class="2xl:min-w-336 dark:bg-white bg-card/10 rounded-xxl shadow xl:py-33 xl:px-35 px-19 py-27 max-xl:mt-20">
                    <!-- Section Title -->
                    <h3 class="text-secondary/80 text-base font-semibold mb-15">Latest News</h3>
                    @forelse($blogs as $blog)
                        <div class="border-t border-black/10 py-14">
                            <h5 class="text-secondary xl:text-lg/24 text-base font-semibold mb-7 hover:text-primary duration-500 item-title">
                                <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="block">
                                    {{ Str::limit($blog->title, 40, ' ...') }}
                                </a>
                            </h5>	
                            <p class="text-primary/80 text-sm font-bold">{{ Carbon\Carbon::parse($blog->publish_on)->format(config('Site.custom_date_format')) }}</p>
                        </div>
                    @empty
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</section>