@php
    $args['post_type'] = 'testimonials';
    $blogs = HelpDesk::elementPostsByArgs($args);
@endphp
<section class="lg:py-150 pt-40 pb-70 dark:bg-secondary relative z-1 after:absolute after:rounded-full after:-bottom-120 after:-left-120 after:bg-primary/50 after:size-[533.43px] after:blur-[252px] after:-z-1">
    <div class="container">
        <div class="text-center mb-20">
             @if(isset($args['subtitle']) && $args['subtitle'] != '')
            <p class="sm:text-2xl text-lg dark:text-white text-heading mb-10">{{ $args['subtitle'] }}</p>
            @endif
            <h2 class="dark:text-white font-medium 2xl:text-7xxl xl:text-5xl lg:text-4xxl sm:text-4xl text-3xl headline">{{ 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 class="dark:bg-white/2 bg-black/2 rounded-xxl sm:p-30 p-15">
            <div class="md:flex gap-50 testimonial-swiper-wrapper">
                <div class="swiper testimonial-thumbs md:w-[35%] w-full">
                    <div class="swiper-wrapper">
                        @forelse($blogs as $blog)
                        <div class="swiper-slide dz-hover-item relative">
                            <a class="dz-hover-img right size-full" data-displacement="{{ theme_asset('images/effect/2.jpg') }}" data-intensity="0.6" data-speedin="1" data-speedout="1">                                                 
                                <img class="rounded-2lg size-full object-cover" src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="img">
                            </a>
                        </div>
                        @empty
                        @endforelse
                    </div>
                </div>
                <div class="swiper testimonial-swiper md:w-[70%] w-full max-xl:mt-20">
                    <div class="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="swiper-slide">
                            <div>
                                <p class="dark:text-white sm:text-2xl/40 text-xl font-light">{!! $blog->content !!}</p>
                                <div class="md:mt-107 mt-40 border-t dark:border-white/10 border-black/10 pt-20">
                                    <div>
                                        <h6 class="dark:text-white text-xl font-light mb-4 capitalize">{{ isset($testimonial_user_name) ? $testimonial_user_name : '' }}</h6>
                                        <span class="text-primary text-base font-light">{{ isset($testimonial_designation) ? $testimonial_designation : '' }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        @endforelse
                    </div>
                    <div class="flex items-center absolute sm:!right-0 gap-10 right-12 2xl:!bottom-40 !-bottom-0">
                        <div class="swiper-button-prev !left-0 testimonial-button-prev !relative !size-auto !mt-auto duration-500 group" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-c38a1b3ef3f5bc03">
                            <a class="flex items-center justify-center border border-primary rounded-full hover:bg-primary duration-500 sm:size-50 size-40">
                                <svg class="!size-24" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="group-hover:stroke-black" d="M19.001 12H5.00098" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                <path class="group-hover:stroke-black" d="M12 4.99902L5 11.999L12 18.999" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </a>                                                         
                        </div>
                        <div class="swiper-button-next !right-0 testimonial-button-next !relative !size-auto !mt-auto duration-500 group" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-c38a1b3ef3f5bc03">
                            <a class="flex items-center justify-center border border-primary rounded-full hover:bg-primary duration-500 sm:size-50 size-40">
                                <svg class="!size-24" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="group-hover:stroke-black"  d="M4.99902 12H18.999" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                <path class="group-hover:stroke-black"  d="M12 4.99902L19 11.999L12 18.999" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </a>                                                         
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>