@php
    $blog_view              = HelpDesk::getPostMeta(optional($blog)->id,'blog_view') ?? 0;
    $total_post_views       = $blog_start_view + $blog_view;

    $blog_options           = ThemeOption::GetBlogOptionById(optional($blog)->id);

@endphp

<section class="relative z-10 xl:pt-250 sm:pt-150 pt-120">
    <div class="container">
        <div class="grid grid-cols-12">
            <div class="lg:col-span-6 col-span-12 lg:mr-85 max-lg:mb-30">
                <div class="my-sticky !top-0 w-full">
                    <img class="size-full rounded-[14px]" src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}">
                </div>
            </div>
            <div class="lg:col-span-6 col-span-12">
                <div class="pxl-heading-scroll-effect xl:mb-100 mb-40">
                    @php
                        if($blog->visibility != 'Pu'){
                            $blog_visibility = $blog->visibility == 'Pr' ? __('Private: ') : __('Protected: ');
                        }else {
                            $blog_visibility = '';
                        }

                        $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
                    <h2 class="xl:text-7xxl md:text-5xl text-4xl heading-text mb-23">
                        {{ $blog_visibility }}{{ $blog->title }}
                    </h2>
                    <span class="text-dark dark:text-white text-lg">{{CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'department',optional($blog)->id)}}</span>
                    <p class="text-lg/32 item-des mt-30">{!! $blog->content !!}</p>
                    @if (CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'show_social_icons',optional($blog)->id))
                    <div class="lg:mt-47 mt-30">
                        <span class="text-base dark:text-white font-medium uppercase">FOLLOW ME</span>
                        <div class="flex items-center text-sm dark:text-white mt-30 gap-30">
                            <a href="{{ $social_linkedin }}" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
                            <a href="{{ $social_twitter }}" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
                            <a href="{{ $social_instagram }}" target="_blank"><i class="fa-brands fa-instagram" ></i></a>
                            <a href="{{ $social_facebook }}" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
                            <a href="{{ $social_youtube }}" target="_blank"><i class="fa-brands fa-youtube"></i></a>
                        </div>
                    </div>
                    @endif
                </div>
                
                <div class="grid grid-cols-12 gap-20 xl:mb-100 mb-40">
                    <div class="col-span-12">
                        <div class="flex justify-between">
                            <h5 class="text-2xl dark:text-white font-semibold mb-10">Work</h5>
                        </div>
                    </div>

                    @php
                        
                        $cpt_category = optional($blog)->blog_categories->pluck('slug')->toArray();
                        $portfolios = HelpDesk::getCptPostsByCategory(implode(',',$cpt_category), 'portfolio');
                        
                    @endphp
                    
                    @foreach ($portfolios as $portfolio)
                    <div class="md:col-span-6 col-span-12">
                        <div class="group">
                            <img class="mb-15 w-full" src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$portfolio->feature_img->value) }}">
                            <div class="flex items-center justify-between">
                                <h5 class="dark:text-white font-medium text-xl"><a href="{{ DzHelper::laraBlogLink($portfolio->id) }}">{{ $portfolio->title }}</a></h5>
                                <a href="{{ DzHelper::laraBlogLink($portfolio->id) }}" class="size-50 min-w-50 -mb-8 flex items-center justify-center rounded-full bg-primary transform -translate-x-full rotate-[-360deg] sm:opacity-0 group-hover:translate-x-0 group-hover:rotate-0 group-hover:opacity-100 overflow-hidden max-sm:hidden group/second">
                                    <svg class="group-hover/second:animate-toTopFromBottom" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.5 17L17.5 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M7.5 7H17.5V17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </a>
                            </div>	
                        </div>
                    </div>
                    @endforeach

                </div>
            </div>
            <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-8%] left-[-47%] -z-1">
            <img src="{{ theme_asset('images/background/bg10.png') }}" alt="" class="absolute top-[-30%] right-[0%] max-xl:w-[60%] -z-1">
        </div>
    </div>
</section>  
<section class="xl:py-120 sm:py-80 py-40 noice-overlay z-2">
    <div class="container relative">
        <div class="pxl-heading-scroll-effect lg:mb-80 mb-30">
            <h2 class="xl:text-7xxl md:text-5xl text-4xl heading-text">
                Professional Services
            </h2>
        </div>
        @php
                                
            $service_cpt_category = optional($blog)->blog_categories->pluck('slug')->toArray();
            $services = HelpDesk::getCptPostsByCategory(implode(',',$service_cpt_category), 'services');
            
        @endphp
        <div class="grid grid-cols-12 xl:gap-80 gap-20 card-hover-container">
            <div class="md:col-span-6 col-span-12 max-md:hidden">
                <div class="relative min-h-450">
                    @forelse($services as $service)
                    @php
                        $png_icon = CustomFieldHelper::get_custom_field_value('cpt_'.$service->post_type,'png_icon',optional($service)->id);
                    @endphp
                    <img style="opacity:{{ $loop->first ? 1 : 0 }}" src="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$png_icon) }}" alt="{{ $service->title }}" class="hover-img duration-500 absolute top-1/2 -translate-y-1/2 object-cover bottom-0 right-0"
                    >
                    @empty
                    @endforelse
                </div>
            </div>

            @forelse($services as $service)

                @php
                    $features_list = CustomFieldHelper::get_custom_field_value('cpt_'.$service->post_type,'features_list',optional($service)->id);
                    $png_icon = CustomFieldHelper::get_custom_field_value('cpt_'.$service->post_type,'png_icon',optional($service)->id);
                @endphp

                <div class="md:col-span-6 col-span-12">
                    <div class="card h-full rounded-lg card-img-hover  bg-card" data-index="0" data-hover-img="{{ DzHelper::getStorageImage('storage/blog-images/'.@$service->feature_img->value) }}">
                        <div class="xl:p-50 p-30 relative flex flex-col h-full">
                            <div class="flex-1">
                                <span class="inline-block py-2 px-15 text-sm/ font-medium bg-primary text-secondary rounded-2xl md:mb-15 mb-10 duration-500 hover:bg-white hover:text-secondary">SEO</span>
                                <h3 class="sm:text-[30px]/45 text-2xl md:mb-32 mb-15 text-white">
                                    <a class="hover:text-primary" href="{{ DzHelper::laraBlogLink($service->id) }}">{{ $service->title }}</a>
                                </h3>
                                @php
                                $features = explode(',', @$features_list);
                                @endphp
                                @if(isset($features))
                                    <ul class="text-bodytext font-medium mb-45">
                                        @foreach ($features as $feature) 
                                            <li class="mb-11 ps-36 relative after:content-[''] after:absolute after:block after:top-1/2 after:-translate-y-1/2 after:left-0 after:size-full after:bg-check after:bg-no-repeat">{{@$feature }}</li>
                                        @endforeach
                                    </ul>
                                @endif
                            </div>
                            <div class="flex items-center justify-between">
                                <a href="{{ DzHelper::laraBlogLink($service->id) }}" class="btn btn-primary style-1 p-2 group button--stroke flairBtn" data-block="button">
                                    <span class="button-flair__wrapper">
                                        <span class="button-flair"></span>
                                    </span>
                                    <span class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">{{ __('View Details') }}</span>
                                    <span class="inline-flex justify-center items-center size-32 rounded-full bg-secondary text-white duration-100 group-hover:bg-primary group-hover:text-secondary z-1">
                                        <i class="fa-solid fa-arrow-right text-sm"></i>
                                    </span>
                                </a>
                                <div class="media absolute xl:bottom-40 bottom-0 right-30">
                                    <img src="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$png_icon) }}" alt="" class="object-contain sm:size-150 size-120">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            @empty
            <div class="col-span-12 py-20 text-center dark:text-white text-xl"><strong>{{ __('No services found.') }}</strong></div>
            @endforelse



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