@php
    $args['post_type'] = 'services';
    $blogs = HelpDesk::elementPostsByArgs($args);
@endphp

<section class="xl:py-120 sm:py-80 py-40 noice-overlay z-2">
    <div class="container relative">
        <div class="grid grid-cols-12 xl:gap-80 gap-20 {{ isset($args['element_style']) && $args['element_style'] == '2' ? 'mb-40 items-center' : '' }}">
            <div class="lg:col-span-6 col-span-12">
                @if(isset($args['subtitle']) && $args['subtitle'] != '')
                <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                @endif
                <div class="pxl-heading-scroll-effect">
                    <h2 class="xl:text-7xxl md:text-5xl text-4xl heading-text">
                        {!! isset($args['title']) ? $args['title'] : '' !!}
                    </h2>
                </div>
            </div>
            <div class="lg:col-span-6 col-span-12">
                <div class="lg:flex items-center justify-end">
                    @if(isset($args['description']) && $args['description'] != '')
                    <span class="sm:text-2xl text-xl dark:text-white text-dark font-normal break-keep max-w-360 inline-block text-center px-20 relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-60 before:w-13 before:bg-primary-left-bracket before:bg-no-repeat after:content-[''] after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:h-60 after:w-13 after:bg-primary-right-bracket after:bg-no-repeat xl:mb-0 mb-20">{{ $args['description'] }}</span>
                    @endif
                    @if (isset($args['view_all']) && $args['view_all'] == 'true')
                    <a href="{{ isset($args['page_id']) ? DzHelper::laraPageLink($args['page_id']) : 'javascript:void(0);' }}" class="ml-auto flex lg:size-104 sm:size-100 size-50 items-center justify-center rounded-full bg-linear-(--btn-gradient) group magneticBtn sm:mb-0 mb-20">
                        <span class="overflow-hidden inline-flex">
                            <svg class="group-hover:animate-toTopFromBottom" width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22.375 53.625L53.625 22.375" stroke="#1C1A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M22.375 22.375H53.625V53.625" stroke="#1C1A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </a>
                    @endif
                </div>
            </div>
        </div>
        <div class="grid grid-cols-12 card-hover-container {{ isset($args['element_style']) && $args['element_style'] == '2' ? 'xl:gap-40 gap-20' : 'xl:gap-80 gap-20' }}" id="{{ $args['base'] }}LoadmoreContent">
            @if(isset($args['element_style']) && $args['element_style'] == '1')
                <div class="md:col-span-6 col-span-12 max-sm:hidden">
                    <div class="relative min-h-450">
                        @forelse($blogs as $blog)
                        @php
                            $png_icon = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'png_icon',optional($blog)->id);
                        @endphp
                        <img style="opacity:{{ $loop->first ? 1 : 0 }}" src="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$png_icon) }}" alt="{{ $blog->title }}" class="hover-img duration-500 absolute top-1/2 -translate-y-1/2 object-cover bottom-0 right-0"
                        >
                        @empty
                        @endforelse
                    </div>
                </div>
            @endif
            @php $ajax_view = 'ajax_service_listing_1'; @endphp
            @include('elements.service_listing.service_listing_1',compact('blogs'))
           
        </div>

        @if ($args['pagination'] ?? false)
        <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="W3Ajax{{ $args['base'] }}Form">
                        <input type="hidden" name="ajax_container" value="{{ $args['base'] }}LoadmoreContent">
                        <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="post_type" value="{{ $args['post_type'] }}">
                        <input type="hidden" name="ajax_view" value="{{ $ajax_view }}">
                        <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="W3Ajax{{ $args['base'] }}Form">
                            <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
                    <a href="javascript:void(0);" class="btn btn-primary px-15 btn-skew disabled"><span>{{ DzHelper::theme_lang('No More Posts') }}</span></a>
                    @endif
                @else
                {!! $blogs->links('elements.pagination') !!}
                @endif
            </div>
        </div>
        @endif

        <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-8%] left-[-47%] -z-1 pointer-events-none">
    </div>
</section>