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

@if (@$args['sidebar'] == '1' && $show_sidebar == '1')
<section class="noice-overlay">
    <div class="lg:pt-100 sm:pt-80 lg:pb-100 sm:pb-80 py-50">
        <div class="container">
        <div class="row">
        <div class="lg:w-8/12 pb-50 {{ $layout == 'sidebar_left' ? 'lg:order-2' : ''}}">
@else
<section class="noice-overlay">
<div class="lg:pt-100 sm:pt-80 sm:pb-80 py-50">
    <div class="container">

@endif

        @if (isset($args['title']) || isset($args['view_all']) || isset($args['page_id']))
            <div class="flex justify-between items-end gap-30 mb-40">
                <div class="{{ (isset($args['view_all']) && $args['view_all'] == 'true') ? 'text-left' : 'text-center flex-1' }}">
                    <p class="text-xl mb-15">{{ isset($args['subtitle']) ? $args['subtitle'] : '' }}</p>
                    <h2 class="text-[45px]/35 font-semibold mb-20">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
                    <p class="text-lg">{{ isset($args['description']) ? $args['description'] : '' }}</p>
                </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="btn btn-outline style-1 ms-auto p-2 group button--stroke flairBtn magneticBtn" 
                        data-block="button"
                    >
                        <span class="button-flair"></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-0">
                            <i class="fa-solid fa-arrow-right text-sm"></i>
                        </span>
                    </a>
                    @endif
                </div>
            </div>
            @endif

            <div class="grid grid-cols-12 gap-20" id="BlogsLoadmoreContent">
                @include('elements.post_listing.post_listing_1',compact('blogs'))
            </div>
            @if ($args['pagination'] ?? false)
            <!-- Blogs Pagination --> 
            <div class="grid grid-cols-12 gap-20 sm:mt-50 mt-20">
                <div class="col-span-12 text-center">
                    @if (@$args['pagination_type'] == 'load_more') 
                        @if ($blogs->hasMorePages())
                        <form id="W3AjaxIndexForm">
                            <input type="hidden" name="ajax_container" value="BlogsLoadmoreContent">
                            <input type="hidden" name="no_of_posts" value="{{$args['no_of_posts']}}">
                            <input type="hidden" name="order" value="{{$args['order']}}">
                            <input type="hidden" name="orderby" value="{{$args['orderby']}}">
                            <input type="hidden" name="page" value="2">
                            <input type="hidden" name="ajax_view" value="ajax_post_listing_1">
                            <input type="hidden" name="view_name" value="index">
                            
                            <button class="btn style-1 cursor-pointer btn-outline light ms-auto p-2 px-20 group button--stroke flairBtn magneticBtn ajax-load-more" data-form-id="W3AjaxIndexForm">
                                <span class="button-flair"></span>
                                <span class="button__label font-semibold pr-10 inline-flex items-center gap-14">Load more</span>
                                <span class="inline-flex justify-center items-center size-32 -mr-18 rounded-full dark:bg-primary bg-dark duration-100 dark:group-hover:bg-secondary group-hover:bg-white z-0">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_572_9501)">
                                        <path class="dark:stroke-dark stroke-white duration-100 dark:group-hover:stroke-white group-hover:stroke-dark" d="M19.167 3.33325V8.33325H14.167" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path class="dark:stroke-dark stroke-white duration-100 dark:group-hover:stroke-white group-hover:stroke-dark" d="M0.833008 16.6667V11.6667H5.83301" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path class="dark:stroke-dark stroke-white duration-100 dark:group-hover:stroke-white group-hover:stroke-dark" d="M2.92467 7.49998C3.34731 6.30564 4.06562 5.23782 5.01256 4.39616C5.95951 3.55451 7.10423 2.96645 8.33991 2.68686C9.5756 2.40727 10.862 2.44527 12.079 2.79729C13.296 3.14932 14.4041 3.80391 15.2997 4.69998L19.1663 8.33331M0.833008 11.6666L4.69967 15.3C5.5953 16.1961 6.70332 16.8506 7.92035 17.2027C9.13738 17.5547 10.4238 17.5927 11.6594 17.3131C12.8951 17.0335 14.0398 16.4455 14.9868 15.6038C15.9337 14.7621 16.652 13.6943 17.0747 12.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </g>
                                        <defs>
                                        <clipPath id="clip0_572_9501">
                                        <rect width="20" height="20" fill="white"/>
                                        </clipPath>
                                        </defs>
                                    </svg>
                                </span>
                            </button>

                        </form>
                        @else
                        <button class="btn btn-primary px-15 btn-skew disabled"><span>{{ DzHelper::theme_lang('No More Posts') }}</span></button>
                        @endif
                    @else
                    {!! $blogs->links('elements.pagination') !!}
                    @endif
                </div>
            </div>
            <!-- Blogs Pagination End--> 
            @endif


@if (@$args['sidebar'] == '1' && $show_sidebar == '1')
            </div>
            <div class="lg:w-4/12">
                <aside class="side-bar my-sticky space-top-0 sticky-top dz-sidebar">
                    @include('elements.sidebar')
                </aside>
            </div>
        </div>
    </div>
</div>

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

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