@php
    $args['post_type'] = 'faqs';
    $blogs = HelpDesk::elementPostsByArgs($args);
@endphp
@if(isset($args['element_style']) && $args['element_style'] == '2')

<section class="xl:py-145 py-40">
    <div class="container">
        <div class="grid grid-cols-12 sm:gap-45 items-center">
            <div class="lg:col-span-5 col-span-12">
                <div class="overflow-hidden size-full relative">
                    <div class="group dz-hover-item relative size-full">
                        <a class="dz-hover-img rounded-2lg relative size-full" data-displacement="{{ theme_asset('images/effect/1.jpg') }}" data-intensity="0.6" data-speedin="1" data-speedout="1">
                            <img class="rounded-xxl lg:w-750 lg:h-750 max-h-750 size-full object-cover" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['image']) }}" alt="img">
                        </a>
                    </div>
                    {{-- <div class="absolute rounded-2xl sm:py-18 py-16 px-16 bg-black/35 backdrop-blur-[20px] bottom-30 left-34 flex items-center sm:gap-30 gap-11 sm:w-440 w-260">
                        <img src="assets/images/chat/1.png" alt="chat" class="max-sm:size-48">
                        <div class="">
                            <p class="text-white text-base font-medium sm:mb-10 mb-2">Google Analytics</p>
                            <div class="flex items-center">
                                <div class="mr-10">	
                                    <span class="sm:text-xl text-base font-bold text-white value" data-akhi="34">34</span>
                                    <span class="sm:text-xl text-base font-bold text-white">%</span>
                                    <span class="sm:text-xl text-base font-bold text-white">Roi</span>
                                </div>	
                                <div>	
                                    <span class="sm:text-xl text-base font-bold text-primary value" data-akhi="34">87</span>
                                    <span class="sm:text-xl text-base font-bold text-primary">%</span>
                                    <span class="sm:text-xl text-base font-bold text-primary">Growth</span>
                                </div>	
                            </div>	
                        </div>	
                    </div> --}}
                </div>
            </div>
            <div class="lg:col-span-7 col-span-12 2xl:ml-100 lg:ml-40 max-lg:mt-40">
                @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-5xxl lg:text-5xl sm:text-4xxl text-3xl font-semibold headline mb-12 dark:text-white text-secondary sm:pr-60">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
                @if(isset($args['description']) && $args['description'] != '')
                <p class="sm:text-2xl text-xl">{{ $args['description'] }}</p>
                @endif

                <!-- Accordian -->
                <div class="mt-40">
                    <div class="custom-accordion style-1 myAccordion">
                        <!--One-->

                        @forelse($blogs as $index => $blog)
                        <div class="accordion-item">
                            <div class="accordion-header {{ $index == '1' ? 'open' : '' }}">
                                <h4 class="acod-title w-full">
                                    <a class="text-secondary sm:text-lg text-base font-medium flex relative z-1 overflow-hidden w-full justify-between items-center arrow">
                                        {{ $blog->title }}
                                        <span class="indicator bg-primary rounded-full size-30 flex items-center justify-center duration-500">
                                            <i class="las la-angle-down text-2sm"></i>
                                        </span>	
                                    </a>
                                </h4>
                            </div>
                            <div class="accordion-content">
                                <div class="content-inner">{!! $blog->content !!}</div>
                            </div>
                        </div>
                        @empty
                        @endforelse
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>	


@else
<section class="noice-overlay dark:bg-secondary bg-white">
    <div class="xl:py-144 sm:py-80 py-40">
        <div class="container">
            <div class="grid grid-cols-12 gap-30">
                <div class="3xl:col-span-5 lg:col-span-5 col-span-12">
                    <div class="relative 3xl:-left-110 before:content-[''] before:absolute before:top-0 before:left-0 before:size-full before:bg-linear-(--primary2-gradient) before:-z-1">
                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['image']) }}" alt="" class="lg:w-530 lg:h-615 max-h-750 size-full object-cover">
                        <img src="{{ theme_asset('images/background/bg3.png') }}" alt="" class="absolute w-64 top-[20%] right-[-8%] z-1 animate-move max-xl:hidden">
                        <img src="{{ theme_asset('images/background/bg9.png') }}" alt="" class="absolute w-35 bottom-[5%] left-[0%] z-1 animate-move max-xl:hidden">
                        <img src="{{ theme_asset('images/background/bg2.png') }}" alt="" class="absolute w-64 bottom-[-2%] right-[-8%] z-1 animate-move max-xl:hidden">
                    </div>
                </div>
                <div class="3xl:col-span-7 lg:col-span-7 col-span-12">
                    <div class="sm:mb-60 mb-20 pxl-heading-scroll-effect">
                        @if(isset($args['subtitle']) && $args['subtitle'] != '')
                        <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                        @endif
                        @if(isset($args['title']) && $args['title'] != '')
                        <h2 class="xl:text-6xl md:text-5xl text-4xl sm:mb-15 mb-5 max-w-540 heading-text">{{ $args['title'] }}</h2>
                        @endif
                        @if(isset($args['description']) && $args['description'] != '')
                        <p class="sm:text-2xl text-lg font-light">{{ $args['description'] }}</p>
                        @endif
                    </div>
                    <div class="custom-accordion style-3 myAccordion">
                        @forelse($blogs as $index => $blog)
                        <div class="accordion-item">
                            <button class="accordion-header {{ $index == '1' ? 'open' : '' }}">
                                <span class="sm:text-xl text-lg font-medium">{{ $blog->title }}</span>
                                <span class="arrow">
                                    <i class="las la-angle-down"></i>
                                </span>
                            </button>
                            <div class="accordion-content">
                                <div class="content-inner">{!! $blog->content !!}</div>
                            </div>
                        </div>
                        @empty
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endif

