@php
    $faqContent = getContent('faq.content', true);
    if (request()->routeIs('home')) {
        $faqElements = getContent('faq.element', false, 6, true);
    } else {
        $faqElements = getContent('faq.element', false, null, true);
        $totalFaq = $faqElements->count();
        $parGroup = ceil($totalFaq / 2);
        $chunkFaqs = $faqElements->chunk($parGroup);
    }
@endphp

@if (request()->routeIs('home'))
    <section class="faq my-120">
        <div class="container">
            <div class="row gy-4 gy-lg-0">
                <div class="col-lg-6">
                    <div class="section-heading style-left">
                        <span class="section-heading__tagline" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                            {{ __($faqContent?->data_values?->title ?? '') }}
                        </span>
                        <h2 class="section-heading__title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
                            {{ __($faqContent?->data_values?->heading ?? '') }}
                        </h2>
                        <p class="section-heading__desc" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                            {{ __($faqContent?->data_values?->subheading ?? '') }}
                        </p>
                    </div>
                    <img class="faq-thumb" src="{{ frontendImage('faq', $faqContent?->data_values?->image ?? '', '1280x780') }}" alt="" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                </div>
                <div class="col-lg-6">
                    <div class="accordion custom--accordion" id="faq-accordion">
                        @foreach ($faqElements as $key => $element)
                            <div class="accordion-item" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                                <h2 class="accordion-header">
                                    <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-{{ $key }}" aria-expanded="{{ $loop->first ? 'true' : 'false' }}" aria-controls="faq-accordion-1">
                                        {{ __($element?->data_values?->question ?? '') }}
                                    </button>
                                </h2>
                                <div id="faq-accordion-{{ $key }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}" data-bs-parent="#faq-accordion">
                                    <div class="accordion-body">
                                        <p class="accordion-text">
                                            {{ __($element?->data_values?->answer ?? '') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="mt-4 mt-sm-5 text-center" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
                <a class="btn btn--base" href="{{ url($faqContent?->data_values?->button_url ?? '') }}">
                    <span class="btn__text">{{ __($faqContent?->data_values?->button_text ?? '') }}</span>
                    <span class="btn__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right">
                            <path d="M7 7h10v10"></path>
                            <path d="M7 17 17 7"></path>
                        </svg>
                    </span>
                </a>
            </div>
        </div>
    </section>
@else
    <section class="faq my-120">
        <div class="container">
            <div class="section-heading">
                <span class="section-heading__tagline" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                    {{ __($faqContent?->data_values?->title ?? '') }}
                </span>
                <h2 class="section-heading__title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
                    {{ __($faqContent?->data_values?->heading ?? '') }}
                </h2>
                <p class="section-heading__desc" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                    {{ __($faqContent?->data_values?->subheading ?? '') }}
                </p>
            </div>
            <div class="accordion custom--accordion" id="faq-accordion">
                <div class="row gy-4">
                    <div class="col-lg-6">
                        @foreach ($chunkFaqs[0] ?? [] as $key => $element)
                            <div class="accordion-item" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                                <h2 class="accordion-header">
                                    <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-{{ $key }}" aria-expanded="{{ $loop->first ? 'true' : 'false' }}" aria-controls="faq-accordion-1">
                                        {{ __($element?->data_values?->question ?? '') }}
                                    </button>
                                </h2>
                                <div id="faq-accordion-{{ $key }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}" data-bs-parent="#faq-accordion">
                                    <div class="accordion-body">
                                        <p class="accordion-text">
                                            {{ __($element?->data_values?->answer ?? '') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="col-lg-6">
                        @foreach ($chunkFaqs[1] ?? [] as $key => $item)
                            <div class="accordion-item" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                                <h2 class="accordion-header">
                                    <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-two-{{ $key }}" aria-expanded="{{ $loop->first ? 'true' : 'false' }}" aria-controls="faq-accordion-1">
                                        {{ __($item?->data_values?->question ?? '') }}
                                    </button>
                                </h2>
                                <div id="faq-accordion-two-{{ $key }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}" data-bs-parent="#faq-accordion">
                                    <div class="accordion-body">
                                        <p class="accordion-text">
                                            {{ __($item?->data_values?->answer ?? '') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif
