@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);

    $partner_section_title = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'partner_section_title',optional($blog)->id);
    $partner_logos = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'partner_logos_gallery',optional($blog)->id);
    $partner_logos_gallery = explode(',', $partner_logos);

    $marketing_section_title = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'marketing_section_title',optional($blog)->id);
    $marketing_section_description = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'marketing_section_description',optional($blog)->id);
    $marketing_section_image = CustomFieldHelper::get_custom_field_value('cpt_'.@$blog->post_type,'marketing_section_image',optional($blog)->id);

    $cpt_category = optional($blog)->blog_categories->pluck('slug')->toArray();
    $faqs = HelpDesk::getCptPostsByCategory(implode(',',$cpt_category), 'faqs');

@endphp

<div class="noice-overlay relative bg-linear-(--banner-gradient) xl:pt-150 pt-90">
    <div class="dark:bg-bodybg bg-white">
        <div class="container z-10 my-sticky 3xl:block hidden sidebar-sticky top-[45%]" >
            <div class="w-full absolute">
            <ul class="sidebar-sticky-wrap transform 4xl:translate-x-[-213px] translate-x-[-130px] pt-10 flex flex-col items-start">
                    <li class="inline-block">
                        <a href="#creativedesign" class="mb-5 text-base dark:text-[#273e27] text-black/60 duration-500 hover:text-black dark:hover:text-white">Service</a>
                    </li>
                    @if(isset($partner_logos) && !empty($partner_logos))
                    <li class="inline-block">
                        <a href="#partner" class="mb-5 text-base dark:text-[#273e27] text-black/60 duration-500 hover:text-black dark:hover:text-white">Partner</a>
                    </li>
                    @endif
                    @if(
                    (isset($marketing_section_title) && !empty($marketing_section_title)) ||
                    (isset($marketing_section_description) && !empty($marketing_section_description)) ||
                    (isset($marketing_section_image) && !empty($marketing_section_image))
                    )
                    <li class="inline-block">
                        <a href="#marketing" class="mb-5 text-base dark:text-[#273e27] text-black/60 duration-500 hover:text-black dark:hover:text-white">Marketing</a>
                    </li>
                    @endif
                    <li class="inline-block">
                        <a href="#Process" class="mb-5 text-base dark:text-[#273e27] text-black/60 duration-500 hover:text-black dark:hover:text-white">Process</a>
                    </li>
                    <li class="inline-block">
                        <a href="#faq" class="mb-5 text-base dark:text-[#273e27] text-black/60 duration-500 hover:text-black dark:hover:text-white">FAQ’s</a>
                    </li>
                </ul>
            </div>
        </div>
        
        <section id="creativedesign" class="main-banner pb-100 overflow-hidden bg-linear-(--banner-gradient) z-0 h-full noice-overlay">
            <div class="container">
                <div class="grid grid-cols-12 gap-20">
                    <div class="lg:col-span-6 col-span-12 lg:order-[0] order-1">
                        @php
                            if($blog->visibility != 'Pu'){
                                $blog_visibility = $blog->visibility == 'Pr' ? __('Private: ') : __('Protected: ');
                            }else {
                                $blog_visibility = '';
                            }
                        @endphp
                        <div class="lg:pt-75 pt-10 xl:pe-120">
                            <h2 class="xl:text-7xl/80 md:text-5xl text-4xl font-semibold text-black sm:mb-25 mb-10">{{ $blog_visibility }}{{ $blog->title }}</h2>
                            <p class="sm:text-xl/30 text-lg font-normal text-black/60">{!! $blog->content !!}</p>
                        </div>
                    </div>
                    @if ($featured_image && $featured_img_on && !empty(@$blog->feature_img->value))
                    <div class="lg:col-span-6 col-span-12">
                        <div class="lg:w-[50vw] lg:float-left xl:ps-50 lg:h-full sm:h-500 h-300">
                            <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="size-full object-cover">
                        </div>
                    </div>
                    @endif
                </div>
            </div>
            <img src="{{ theme_asset('images/background/bg2.png') }}" alt="bg2" class="absolute z-1 animate-move 3xl:w-127 3xl:h-148 w-77 h-98 top-[15%] left-[8%] mix-blend-luminosity max-xl:hidden">
        </section>

        @if(isset($partner_logos) && !empty($partner_logos))
        <section id="partner" class="noice-overlay">
            <div class="xl:pb-100 md:pb-50">
                <div class="container">
                    <div class="grid grid-cols-12 gap-20 items-center">
                        <div class="lg:col-span-3 col-span-12 max-lg:mb-30">
                            <div class="sm:pe-50">
                                <h3 class="text-2xxl/35 font-medium">
                                    {{ @$partner_section_title }}
                                </h3>
                            </div>
                        </div>
                        <div class="lg:col-span-9 col-span-12">
                            <div class="swiper brand-swiper2">
                                <div class="swiper-wrapper items-center">
                                    @foreach (@$partner_logos_gallery as $logo)    
                                    <div class="swiper-slide lg:text-end text-center">
                                        <img class="max-w-200 w-full max-h-40 mx-auto" src="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$logo) }}" alt="" />                                        
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif
        @if(
        (isset($marketing_section_title) && !empty($marketing_section_title)) ||
        (isset($marketing_section_description) && !empty($marketing_section_description)) ||
        (isset($marketing_section_image) && !empty($marketing_section_image))
        )
        <section id="marketing" class="noice-overlay">
            <div class="lg:pt-30 xl:pb-150 py-80">
                <div class="container">
                    <div class="grid grid-cols-12 gap-20 items-center">
                        <div class="md:col-span-4 col-span-12">
                            <img src="{{ DzHelper::getStorageImage('storage/custom-fields/'.@$marketing_section_image) }}" class="w-full" alt="">
                        </div>
                        <div class="md:col-span-8 col-span-12">
                            <div class="xl:px-110 md:px-30 sm:py-20 pxl-heading-scroll-effect">
                                <h2 class="md:text-[50px]/65 text-4xl font-semibold sm:mb-25 mb-10 heading-text">{{ @$marketing_section_title }}</h2>
                                <p class="sm:text-xl text-lg">{{ @$marketing_section_description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif

        {{-- <section id="Process" class="noice-overlay bg-linear-(--primary2-gradient)">
            <div class="xl:py-150 sm:py-80 py-40">
                <div class="container">
                    <div class="grid grid-cols-12 gap-20">
                        <div class="xl:col-span-3 sm:col-span-6 col-span-12">
                            <h3 class="text-5xl/[1] mb-20 text-heading opacity-20 font-medium">01</h3>
                            <span class="block text-xl/30 font-medium text-heading sm:mb-15 mb-5">Search Engine Optimization</span>
                            <p class="text-lg/28 text-black/60">Drive organic traffic to your website with optimized content and technical improvements.</p>
                        </div>
                        <div class="xl:col-span-3 sm:col-span-6 col-span-12">
                            <h3 class="text-5xl/[1] mb-20 text-heading opacity-20 font-medium">02</h3>
                            <span class="block text-xl/30 font-medium text-heading sm:mb-15 mb-5">Social Media Marketing</span>
                            <p class="text-lg/28 text-black/60">Drive organic traffic to your website with optimized content and technical improvements.</p>
                        </div>
                        <div class="xl:col-span-3 sm:col-span-6 col-span-12">
                            <h3 class="text-5xl/[1] mb-20 text-heading opacity-20 font-medium">03</h3>
                            <span class="block text-xl/30 font-medium text-heading sm:mb-15 mb-5">Content Marketing</span>
                            <p class="text-lg/28 text-black/60">Drive organic traffic to your website with optimized content and technical improvements.</p>
                        </div>
                        <div class="xl:col-span-3 sm:col-span-6 col-span-12">
                            <h3 class="text-5xl/[1] mb-20 text-heading opacity-20 font-medium">04</h3>
                            <span class="block text-xl/30 font-medium text-heading sm:mb-15 mb-5">Email Marketing</span>
                            <p class="text-lg/28 text-black/60">Drive organic traffic to your website with optimized content and technical improvements.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section> --}}

    </div>
</div>

<!-- Faq -->
<section id="faq" class="noice-overlay border-t border-black/20 dark:border-white/20">
    <div class="xl:py-144 sm:py-80 py-40">
        <div class="container">
            <div class="grid grid-cols-12 xl:gap-30 gap-10">
                <div class="lg:col-span-4 col-span-12">
                    <div class="lg:max-w-540 pxl-heading-scroll-effect my-sticky space-top-0">
                        <h2 class="xl:text-6xl md:text-5xl text-4xl mb-15 font-medium heading-text">Frequently 
                            Asked Questions</h2>
                    </div>
                </div>
                <div class="lg:col-span-8 col-span-12">
                    
                    <div class="custom-accordion style-2 myAccordion">
                        @forelse($faqs as $index => $faq)
                        <div class="accordion-item">
                            <button class="accordion-header {{ $index == '1' ? 'open' : '' }}">
                                <span class="xl:text-2xxl/56 text-lg font-normal">{{ $faq->title }}</span>
                                <span class="arrow">
                                    <i class="fa-solid fa-plus"></i>
                                    <i class="fa-solid fa-minus"></i>
                                </span>
                            </button>
                            <div class="accordion-content">
                                <div class="content-inner">{!! $faq->content !!}</div>
                            </div>
                        </div>
                        @empty
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>