<section class="xl:py-140 sm:py-80 py-40">
    @if (isset($args['title']) || isset($args['view_all']) || isset($args['page_id']))
    <div class="container"> 
        <div class="grid grid-cols-12">
            <div class="md:col-span-8 col-span-12">
                <div class="max-w-800">
                    @if(isset($args['subtitle']) && $args['subtitle'] != '')
                    <span class="mb-10 inline-block text-lg font-medium dark:text-white text-secondary py-10 px-20 rounded-2lg border dark:border-white/10 border-secondary/10 backdrop-blur-[20px] dark:bg-white/5 bg-secondary/5">{{ $args['subtitle'] }}</span>
                    @endif
                    <h2 class="2xl:text-[55px]/[65px] lg:text-4xxl sm:text-4xl text-3xl font-semibold headline dark:text-white text-secondary">{!! 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>
            <div class="md:col-span-4 col-span-12 self-end max-md:mt-10">
                <div class="flex sm:justify-end">
                    @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 !pr-5 pl-30 border text-secondary bg-primary dark:!border-primary !border-white group 
                    shadow-[0px_5px_10px_rgba(27,76,64,0.05)] button--stroke flairBtn">
                        <span class="button-flair"></span>
                        <span class="font-semibold button__label" data-original-text="Let’s Connect">{{ __('View All') }}</span>
                        <span class="overflow-hidden inline-flex justify-center items-center size-45 ml-10 rounded-full bg-secondary group-hover:bg-primary 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 class="group-hover:stroke-secondary" d="M4.16663 10H15.8333" stroke="#fff" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path class="group-hover:stroke-secondary" d="M10 4.16666L15.8333 10L10 15.8333" stroke="#fff" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                    </a>
                    @endif
                </div>	
            </div>
        </div>	
    </div>
    @endif
    <div class="container-full sm:mt-50 mt-80 sm:!mx-30">
        <div class="swiper services-details">
            <div class="swiper-wrapper">
                @php
                    $args['post_type'] = 'services';
                    $blogs = HelpDesk::elementPostsByArgs($args);
                @endphp
                @forelse($blogs as $key => $blog)
                @php
                    $svgIcon = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'svg_icon',optional($blog)->id);
                    $pngIcon = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'png_icon',optional($blog)->id);
                    $features_list = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'features_list',optional($blog)->id);
                @endphp
                <div class="swiper-slide">
                    <div class="relative rounded-xxl bg-no-repeat bg-position-[50%] bg-size-[0] shadow-[0_4px_4px_rgba(0,0,0,2%)] mb-5 duration-500 overflow-hidden group hover:bg-cover bg-secondary/10 dark:bg-white service-slider-card"
                    style="background-image:url('{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}')"
                    >
                        <div class="duration-500 group-hover:bg-linear-[var(--secondary-gradient)]">
                            <div class="flex items-center pt-34 pr-55 pb-25 lg:pl-35 pl-28 gap-15">
                                @if(isset($args['icon_type']) && $args['icon_type'] == 'svg')
                                <div class="size-45 icon-full">
                                    {!! $svgIcon !!}
                                </div>
                                @else
                                    @if(isset($pngIcon))
                                        <img class="size-45 object-contain" src="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$pngIcon) }}" alt="{{ __('image') }}">
                                    @endif
                                @endif
                                <h4 class="text-secondary text-xl font-semibold group-hover:text-white duration-500"><a href="{{ DzHelper::laraBlogLink($blog->id) }}">{{ $blog->title }}</a></h4>
                            </div>
                            <div class="relative duration-500 group-hover:bg-white/10 group-hover:backdrop-blur-[10px]">
                                <div class=""><img class="block 3xl:h-195 md:h-320 h-200 w-full object-cover [clip-path:inset(0_0_0_0)] group-hover:[clip-path:inset(100%_0_100%_0)] duration-500" src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="img"></div>
                                <div class="absolute inset-0 flex items-center justify-center opacity-0 scale-[0.5] duration-500 group-hover:opacity-100 group-hover:scale-[1]">
                                    <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="size-80 min-w-80 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 d="M15.8128 15.8127H28.1872V28.1871" stroke="var(--secondary)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                            @php
                            $features = explode(',', @$features_list);
                            @endphp
                            @if(isset($features))
                            <div class="pt-25 lg:pl-40 pl-28 pb-40 sm:pr-35 pr-23">
                                    @foreach ($features as $feature) 
                                        <div class="flex items-center gap-8 mb-5">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path class="group-hover:stroke-primary" d="M13.3333 4L6 11.3333L2.66666 8" stroke="var(--secondary)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                            <span class="text-base text-black/75 group-hover:text-white duration-500">{{@$feature }}</span>
                                        </div>
                                    @endforeach
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                @empty
                @endforelse
            </div>
        </div>
    </div>
</section>