@php

	use Illuminate\Support\Str;

	$items = explode(',', @$args['faqs_categories']);
                        
@endphp

@if(isset($args['element_style']) && $args['element_style'] == '1')
<section class="main-banner overflow-hidden lg:py-200 sm:py-160 py-120 z-0 noice-overlay">
    <div class="container-sm">
        <div class="md:mb-85 mb-30 text-center max-w-800 mx-auto">
            @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-7xl/80 md:text-5xl text-4xl font-medium">{{ $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-tab">
            <ul class="flex flex-wrap justify-center items-center tab-titles md:mb-50 mb-20 relative after:content-[''] after:absolute after:bottom-0 lg:after:left-[calc(calc(100vw_-_916px)_/_-2)] after:left-0 lg:after:w-screen after:w-full after:h-1 after:bg-black/10 dark:after:bg-white/10">

                @foreach ($items as $index => $slug)
                    @php
                        $title = Str::title(str_replace('-', ' ', $slug));
                    @endphp
                    <li class="tab-title {{ $index === 0 ? "active" : "" }}">
                        <a href="javascript:void(0);" class="block py-15 px-15 dark:text-bodytext text-textlight font-normal text-lg/18 duration-500 relative after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:h-3 after:w-0 after:bg-linear-(--tab-underline-gradient) after:duration-500">{{ $title }}</a>
                    </li>
                @endforeach
            </ul>
            <div class="tab-contents sm:px-26">
                @foreach ($items as $index => $slug) 
                <div class="tab-content {{ $index === 0 ? "active" : "" }}">
                    <div class="custom-accordion style-2 myAccordion">
                       
                        @php
                            $blogs = HelpDesk::getCptPostsByCategory($slug,'faqs');
                        @endphp
                        @foreach ($blogs as $key => $blog)	
                        <div class="accordion-item">
                            <button class="accordion-header {{ $key === 0 ? 'open' : '' }}">
                                <span class="xl:text-2xxl/56 text-lg font-normal">{{ DzHelper::theme_lang( $blog->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">{!! $blog->content !!}</div>
                            </div>
                        </div>
                        @endforeach
                      
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-8%] left-[-47%] -z-1 pointer-events-none">
    <img src="{{ theme_asset('images/background/bg10.png') }}" alt="" class="absolute top-[-30%] right-[0%] max-xl:w-[60%] -z-1 pointer-events-none">
</section>

@else

<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 lg:gap-30">
                <div class="lg:col-span-4 col-span-12">
                    @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'] != '')
                    <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">{{ $args['title'] }}</h2>
                    </div>
                    @endif
                    @if(isset($args['description']) && $args['description'] != '')
                    <p class="sm:text-2xl text-lg font-light">{{ $args['description'] }}</p>
                    @endif
                </div>
                <div class="lg:col-span-8 col-span-12">
                    
                    <div class="custom-accordion style-2 myAccordion">
                        @php
                            $args['post_type'] = 'faqs';
                            $blogs = HelpDesk::elementPostsByArgs($args);
                        @endphp 
                        @forelse($blogs as $index => $blog)
                        <div class="accordion-item">
                            <button class="accordion-header {{ $index == '1' ? 'open' : '' }}">
                                <span class="xl:text-2xxl/56 text-lg font-normal">{{ $blog->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">{!! $blog->content !!}</div>
                            </div>
                        </div>
                        @empty
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endif