@php
    $faq = getContent('faq.content', true);
    $faqElements = getContent('faq.element', false, 12);
@endphp

<section class="faq-section pt-100 position-relative">
    <div class="container">
        <div class="row gy-5 justify-content-center">
            <div class="col-xl-7 col-lg-8 col-md-10">
                <div class="section-content d-flex justify-content-center flex-column align-items-center mb-60">
                    <div class="d-inline-flex heading--wrap">
                        <h6 class="heading text-center text--upper">{{__($faq->data_values->heading)}}</h6>
                    </div>
                    <h6 class="title wow animate__animated animate__fadeInUp text-center fs--40 fw--600 splite-text"
                        data-splitting data-wow-delay="0.2s">{{__($faq->data_values->subheading)}}</h6>
                    <p class="subtitle wow animate__animated animate__fadeInUp text-center fs-16 fw--400 w--80"
                        data-wow-delay="0.3s">{{__($faq->data_values->short_description)}}</p>
                </div>
            </div>
        </div>

        <div class="row gy-5 justify-content-between position-relative">
            <div class="col-lg-6">
                <div class="accordion custom--accordion1 accordion-flush" id="accordionFlushExample">
                
                    @foreach($faqElements->take(ceil($faqElements->count() / 2)) as $index => $item)
                        <div class="accordion-item wow animate__fadeInUp animate__animated" data-wow-delay="0.2s">
                            <div class="accordion-header">
                                <div class="bar"></div>
                                <button class="accordion-button {{$index != 0 ? 'collapsed': ''}} " type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapse{{ $index }}" aria-expanded="{{$index == 0 ? 'true': 'false'}}"
                                    aria-controls="flush-collapse{{ $index }}">
                                    {{ __($item->data_values->question) }}
                                </button>
                            </div>
                            <div id="flush-collapse{{ $index }}" class="accordion-collapse collapse {{$index == 0 ? 'show': ''}}"
                                data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body"> @php echo $item->data_values->answer; @endphp</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="col-lg-6">
                <div class="accordion custom--accordion1 accordion-flush" id="accordionFlushExample1">
                    @foreach($faqElements->slice(ceil($faqElements->count() / 2)) as $index => $item)
                        <div class="accordion-item wow animate__fadeInUp animate__animated" data-wow-delay="0.5s">
                            <div class="accordion-header">
                                <div class="bar"></div>
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapse{{ $index + ceil($faqElements->count() / 2) }}"
                                    aria-expanded="false"
                                    aria-controls="flush-collapse{{ $index + ceil($faqElements->count() / 2) }}">
                                    {{ __($item->data_values->question) }}
                                </button>
                            </div>
                            <div id="flush-collapse{{ $index + ceil($faqElements->count() / 2) }}"
                                class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample1">
                                <div class="accordion-body">@php echo $item->data_values->answer; @endphp </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>