@php
    $args['post_type'] = 'teams';
    $blogs = HelpDesk::elementPostsByArgs($args);
@endphp
<section class="main-banner relative bg-bglight xl:h-750 overflow-hidden before:bg-[url('../images/background/bg25.png')] before:size-full before:z-1 before:bg-center before:bg-no-repeat before:bg-cover before:absolute bg-no-repeat bg-cover 2xl:mx-40 mx-14 rounded-2xl">
    <img class="size-full object-cover absolute scale-130 -mt-120" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['background_image']) }}" alt="img" data-speed=".5">
    <div class="container xl:py-130 py-40 relative z-1">
        <div class="grid grid-cols-12 gap-20 items-start">
            <div class="xl:col-span-4 col-span-12 xl:pt-50">
                @if(isset($args['subtitle']) && $args['subtitle'] != '')
                <span class="text-lg font-medium text-white py-10 px-20 rounded-2lg border border-white/10 backdrop-blur-[20px] bg-white/5">{{ $args['subtitle'] }}</span>
                @endif
                <h2 class="2xl:text-5xxl/68 lg:text-5xl sm:text-4xxl text-3xl font-semibold headline xl:mt-20 text-white">{!! isset($args['title']) ? $args['title'] : '' !!}</h2>
                @if(isset($args['description']) && $args['description'] != '')
                <p class="text-white/70 mt-30">{{ $args['description'] }}</p>
                @endif
                <div class="mt-40">
                    @if (isset($args['view_all']) && $args['view_all'] == 'true')
                    <a href="{{ isset($args['page_id']) ? DzHelper::laraPageLink($args['page_id']) : 'javascript:void(0);' }}" class="style-4 btn !px-5 text-secondary bg-white border border-white hover:border-primary group 
                    shadow-[0px_5px_10px_rgba(27,76,64,0.05)] button--stroke flairBtn">
                        <span class="button-flair"></span>
                        <span class="mx-10 button__label" data-original-text="View All Services">{{ __('View All Members') }}</span>
                        <span class="inline-flex justify-center items-center size-45 rounded-full bg-primary text-secondary duration-100 z-0">
                            <svg class="group-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>
                        </span>
                    </a>
                    @endif
                </div>
            </div>
            <div class="xl:col-span-8 col-span-12">
                <div class="swiper tema-details">
                    <div class="swiper-wrapper">
                        @forelse($blogs as $index => $blog)

                        @php
                            $team_department = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'department',optional($blog)->id);
                            $social_linkedin = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'social_linkedin',optional($blog)->id);
                            $social_facebook = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'social_facebook',optional($blog)->id);
                            $social_instagram = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'social_instagram',optional($blog)->id);
                            $social_twitter = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'social_twitter',optional($blog)->id);
                            $social_youtube = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'social_youtube',optional($blog)->id);
                        @endphp

                        <div class="swiper-slide">
                            <div class="rounded-xxl relative overflow-hidden group dz-hover-item">
                                <a class="dz-hover-img rounded-2lg relative" data-displacement="{{ theme_asset('images/effect/2.jpg') }}" data-intensity="0.6" data-speedin="1" data-speedout="1">
                                    <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="img" width="277" height="382" class="rounded-xxl relative size-full object-cover">
                                </a>
                                <div class="absolute group-hover:right-10 group-hover:top-10 -right-54 -top-54 duration-500">
                                    <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="size-50 min-w-50 flex items-center justify-center rounded-full bg-primary overflow-hidden group/second">
                                        <svg class="group-hover/second:animate-toTopFromBottom" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M15.8128 28.1873L28.1872 15.8129" stroke="var(--secondary)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M15.8128 15.8127H28.1872V28.1871" stroke="var(--secondary)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="absolute left-9 right-10 flex flex-col rounded-2lg bg-white overflow-hidden translate-y-full group-hover:-translate-y-132 duration-500">
                                    <div class="bg-primary py-15 flex flex-col items-center w-full text-center rounded-2lg">
                                        <h5 class="text-xl font-bold! text-secondary"><a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="hover:text-white duration-500">{{ $blog->title }}</a></h5>
                                        <span class="text-sm font-medium text-secondary/80">{{ isset($team_department) ? $team_department : '' }}</span>
                                    </div>
                                    <div class="flex items-center justify-center gap-20 py-10">
                                        @if(isset($social_linkedin) && $social_linkedin != '')
                                        <div class=""> 
                                            <a href="{{ $social_linkedin }}" target="_blank" class="text-base text-secondary duration-500 hover:text-primary"> <i class="fa-brands fa-linkedin-in"></i> </a>
                                        </div>
                                        @endif
                                        @if(isset($social_twitter) && $social_twitter != '')
                                        <div class=""> 
                                            <a href="{{ $social_twitter }}" target="_blank" class="text-base text-secondary duration-500 hover:text-primary"> <i class="fa-brands fa-x-twitter"></i> </a>
                                        </div>
                                        @endif
                                        @if(isset($social_facebook) && $social_facebook != '')
                                        <div class=""> 
                                            <a href="{{ $social_facebook }}" target="_blank" class="text-base text-secondary duration-500 hover:text-primary"> <i class="fa-brands fa-facebook-f"></i> </a>
                                        </div>
                                        @endif
                                        @if(isset($social_instagram) && $social_instagram != '')
                                        <div class=""> 
                                            <a href="{{ $social_instagram }}" target="_blank" class="text-base text-secondary duration-500 hover:text-primary"> <i class="fa-brands fa-instagram"></i> </a>
                                        </div>
                                        @endif
                                        @if(isset($social_youtube) && $social_youtube != '')
                                        <div class=""> 
                                            <a href="{{ $social_youtube }}" target="_blank" class="text-base text-secondary duration-500 hover:text-primary"> <i class="fa-brands fa-youtube"></i> </a>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        @empty
                        <div class="col-span-12 py-20 text-center dark:text-white text-xl"><strong>{{ __('No team found.') }}</strong></div>
                        @endforelse
                        
                    </div>
                </div>
                @if(isset($args['cta_title']) && $args['cta_title'] != '')
                <div class="mt-40 py-12 px-20 rounded-2lg border dark:border-white/5 border-black/10 shadow-[inset_0px_2px_2px_rgba(255,255,255,0.1)] backdrop-blur-[20px] bg-white/5 sm:flex justify-between items-center">
                    <span class="sm:text-2xl text-xl font-medium text-white">{{ $args['cta_title'] }}</span>
                    <div class="flex items-center">
                        <span class="text-white/90 text-medium sm:mr-20 mr-12">{{ isset($args['cta_button_text']) ? $args['cta_button_text'] : '' }}</span>
                        <a href="{{ isset($args['cta_button_link']) ? $args['cta_button_link'] : 'javascript:void(0);' }}" class="size-40 min-w-40 flex items-center justify-center rounded-full bg-primary overflow-hidden group/second">
                            <svg class="group-hover/second:animate-toTopFromBottom" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.8128 28.1873L28.1872 15.8129" stroke="var(--secondary)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M15.8128 15.8127H28.1872V28.1871" stroke="var(--secondary)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                    </div>
                </div>	
                @endif
            </div>
        </div>
    </div>
    </section>