@php
    $args['post_type'] = 'testimonials';
    $blogs = HelpDesk::elementPostsByArgs($args);
@endphp
<section>
    <div class="lg:py-150 sm:pt-100 py-50">
        <div class="container">
            <div class="grid grid-cols-12 xl:gap-40 gap-10">
                <div class="xl:col-span-6 col-span-12">
                    <div class="dark:bg-white bg-light md:px-60 md:py-80 sm:px-30 p-20 sm:py-50 rounded-5xl h-full">
                        <div class="flex flex-col h-full">
                            <div class="text-center flex-1">
                                <h4 class="md:text-[55px]/58 sm:text-[45px]/48 text-3xl text-dark sm:mb-30 mb-10">{{ isset($args['card_title']) ? $args['card_title'] : '' }}</h4>
                                <p class="sm:text-xl text-base text-textlight max-w-520 mx-auto mb-120">{{ isset($args['card_description']) ? $args['card_description'] : '' }}</p>
                            </div>
                            <div class="">
                                <div class="flex sm:flex-row flex-col">
                                    <div class="text-center flex-1">
                                        <span class="sm:text-7xl text-5xl font-medium text-red value" data-akhi="{{ isset($args['counter_1_digit']) ? $args['counter_1_digit'] : '' }}">{{ isset($args['counter_1_digit']) ? $args['counter_1_digit'] : '' }}</span>
                                        <span class="sm:text-7xl text-5xl font-medium text-red">{{ isset($args['counter_1_symbol']) ? $args['counter_1_symbol'] : '' }}</span>
                                        <p class="text-xl text-black">{{ isset($args['counter_1_text']) ? $args['counter_1_text'] : '' }}</p>
                                    </div>
                                    <div class="relative text-center sm:order-0 -order-1">
                                        <div class="-mt-80 mb-26">
                                            <img src="{{ theme_asset('images/emoji.png') }}" alt="" class="inline-block animate-bounceShake">
                                        </div>
                                        <div class="border-r border-grey h-130 sm:inline-block hidden"></div>
                                    </div>
                                    <div class="text-center flex-1">
                                        <span class="sm:text-7xl text-5xl font-medium text-red value" data-akhi="{{ isset($args['counter_2_digit']) ? $args['counter_2_digit'] : '' }}">{{ isset($args['counter_2_digit']) ? $args['counter_2_digit'] : '' }}</span>
                                        <span class="sm:text-7xl text-5xl font-medium text-red">{{ isset($args['counter_2_symbol']) ? $args['counter_2_symbol'] : '' }}</span>
                                        <p class="text-xl text-black">{{ isset($args['counter_2_text']) ? $args['counter_2_text'] : '' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="xl:col-span-6 col-span-12">
                    <div class="bg-no-repeat bg-cover rounded-5xl h-full bg-[url('../images/background/bg13.png')]">
                        <div class="pxl-swiper-slider pxl-testimonial-carousel layout-1 !relative">
                            @if(isset($args['subtitle']) && $args['subtitle'] != '')
                            <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                            @endif
                            <h3 class="content-title px-10" style="opacity: 1;">{{ isset($args['title']) ? $args['title'] : '' }}</h3>
                            @if(isset($args['description']) && $args['description'] != '')
                            <span class="inline-block dark:bg-white bg-black dark:text-black text-white rounded-4xl py-10 px-15 sm:text-base text-sm font-medium">{{ $args['description'] }}</span>
                            @endif
                            <div class="pxl-swiper-slider-wrap pxl-carousel-inner overflow-hidden pointer-events-none">
                                <div class="pxl-swiper-container swiper-initialized swiper-horizontal swiper-pointer-events swiper-watch-progress"
                                    dir="ltr"
                                    data-settings="{&quot;slide_direction&quot;:&quot;horizontal&quot;,&quot;slide_percolumn&quot;:1,&quot;slide_mode&quot;:&quot;slide&quot;,&quot;slides_to_show_xxl&quot;:5,&quot;slides_to_show&quot;:5,&quot;slides_to_show_lg&quot;:5,&quot;slides_to_show_md&quot;:5,&quot;slides_to_show_sm&quot;:5,&quot;slides_to_show_xs&quot;:5,&quot;slides_to_scroll&quot;:1,&quot;slides_gutter&quot;:15,&quot;slides_gutter_xl&quot;:15,&quot;slides_gutter_lg&quot;:15,&quot;slides_gutter_md&quot;:15,&quot;slides_gutter_sm&quot;:15,&quot;slides_gutter_xs&quot;:15,&quot;center_slide&quot;:true,&quot;loop&quot;:true,&quot;pause_on_hover&quot;:false,&quot;autoplay&quot;:false,&quot;pause_on_interaction&quot;:true,&quot;delay&quot;:5000,&quot;speed&quot;:500,&quot;dots_style&quot;:&quot;bullets-number&quot;,&quot;set_timeout&quot;:true}">
                                    <div class="pxl-swiper-wrapper swiper-wrapper">
                                        @forelse($blogs as $blog)

                                        @php

                                            $testimonial_designation = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'designation',optional($blog)->id);
                                            $testimonial_user_name = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'username',optional($blog)->id);
                                            $testimonial_user_img = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'user_profile',optional($blog)->id);

                                        @endphp

                                        <div class="pxl-swiper-slide swiper-slide swiper-slide-duplicate">
                                            <div class="item-inner relative min-w-65">
                                                <div class="item-image col-auto">
                                                    <img loading="lazy" decoding="async" class="no-lazyload size-65 min-w-65 object-cover" src="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$testimonial_user_img) }}" width="65" height="65" alt="img8-home" title="img8-home">
                                                </div>
                                                <div class="item-info-wrap align-items-center">
                                                    <span class="item-name">{{ isset($testimonial_user_name) ? $testimonial_user_name : '' }}</span>
                                                    <span class="item-position">{{ isset($testimonial_designation) ? $testimonial_designation : '' }}</span>
                                                </div>
                                            </div>
                                        </div>

                                        @empty
                                        @endforelse
                                    </div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                                </div>
                            </div>
                            <div class="pxl-swiper-slider-thumbs pointer-events-none">
                                <div class="pxl-swiper-slider-inner pxl-carousel-inner">
                                    <div class="pxl-swiper-thumbs overflow-hidden swiper-fade swiper-initialized swiper-horizontal swiper-pointer-events"
                                        data-settings="{&quot;allow_touch_move&quot;:false,&quot;slide_direction&quot;:&quot;horizontal&quot;,&quot;slide_percolumn&quot;:1,&quot;slide_mode&quot;:&quot;fade&quot;,&quot;slides_to_show_xxl&quot;:1,&quot;slides_to_show&quot;:1,&quot;slides_to_show_lg&quot;:1,&quot;slides_to_show_md&quot;:1,&quot;slides_to_show_sm&quot;:1,&quot;slides_to_show_xs&quot;:1,&quot;slides_to_scroll&quot;:1,&quot;slides_gutter&quot;:15,&quot;arrow&quot;:false,&quot;dots&quot;:false,&quot;speed&quot;:500,&quot;loop&quot;:true}">
                                        <div class="pxl-thumbs-wrapper swiper-wrapper">
                                        @forelse($blogs as $blog)

                                            @php

                                                $testimonial_designation = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'designation',optional($blog)->id);
                                                $testimonial_user_name = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'username',optional($blog)->id);

                                            @endphp
                                            <div class="pxl-swiper-slide thumb-item swiper-slide !h-auto">
                                                <div class="thumbs-wrap flex h-full">
                                                    <div class="thumbs-content"> <span class="item-description">{!! $blog->content !!}</span>
                                                        <div class="thumbs-name-position flex">
                                                            <span class="thumbs-name">{{ isset($testimonial_user_name) ? $testimonial_user_name : '' }}</span> 
                                                            <span class="thumbs-position">{{ isset($testimonial_designation) ? $testimonial_designation : '' }}</span>
                                                        </div>
                                                    </div>
                                                    @if($blog->feature_img->value)
                                                    <div class="thumbs-image"> 
                                                        <img loading="lazy" decoding="async" class="h-full object-cover" src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" width="165" height="356" alt="img10-home" title="img10-home">
                                                    </div>
                                                    @endif
                                                </div>
                                            </div>
                                        @empty
                                        @endforelse
                                        </div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="pxl-swiper-arrows">
                                <div class="pxl-swiper-arrow pxl-swiper-arrow-prev ement.style absolute md:top-[42%] sm:top-245 min-[450px]:top-[29.5%] top-295 md:left-[16%] left-[10%] overflow-visible">
                                    <span class="pxl-icon">
                                        <span class="pxli pxli-left">
                                            <svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22.1666 14.5H5.8333" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M14 6.3335L5.83334 14.5002L14 22.6668" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </span>
                                    </span>
                                </div>
                                <div class="pxl-swiper-arrow pxl-swiper-arrow-next ement.style absolute md:top-[42%] sm:top-245 min-[450px]:top-[29.5%] top-295 md:right-[16%] right-[10%] overflow-visible">
                                    <span class="pxl-icon">
                                        <span class="pxli pxli-right">
                                            <svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5.83337 14.5H22.1667" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path d="M14 6.3335L22.1667 14.5002L14 22.6668" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <div class="pxl-swiper-dots style-bullets-number swiper-pagination-custom swiper-pagination-horizontal !absolute !top-0 right-0 !w-auto !bottom-auto !left-auto p-40 text-white text-2xl font-light">
                                <span class="swiper-pagination-custom">1/5</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>