@extends('frontend::layouts.master')
@section('title')

@section('style')

@endsection

@section('content')

    <main>
        <div class="pt-2 pt-lg-4">
            <div class="text-center">
                <h2 class="title-text --spacing">{{ $content['content_' . $pageInit['lang']] ?? '' }}</h2>
            </div>
            <div class="container lg:py-8">
                <div class="accordion faq-accordion" id="FAQAccordion">
                    <hr class="bg-gray-light" />
                    @foreach ($faqs as $index => $faq)
                        @if ($index == 0)
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="faqHead{{ $faq->id ?? 0 }}">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqDetail{{ $faq->id ?? 0 }}" aria-expanded="true" aria-controls="faqDetail{{ $faq->id ?? 0 }}">{{ $faq['title_' . $pageInit['lang']] ?? '' }}
                                    </button>
                                </h2>
                                <div class="accordion-collapse collapse show" id="faqDetail{{ $faq->id ?? 0 }}" aria-labelledby="faqHead{{ $faq->id ?? 0 }}" data-bs-parent="#FAQAccordion">
                                    <div class="accordion-body">
                                        <div class="space-y-4">
                                            {!! nl2br($faq['detail_' . $pageInit['lang']] ?? '') !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="faqHead{{ $faq->id ?? 0 }}">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqDetail{{ $faq->id ?? 0 }}" aria-expanded="false" aria-controls="faqDetail{{ $faq->id ?? 0 }}">{{ $faq['title_' . $pageInit['lang']] ?? '' }}
                                    </button>
                                </h2>
                                <div class="accordion-collapse collapse" id="faqDetail{{ $faq->id ?? 0 }}" aria-labelledby="faqHead{{ $faq->id ?? 0 }}" data-bs-parent="#FAQAccordion">
                                    <div class="accordion-body">
                                        <div class="space-y-4">
                                            {!! nl2br($faq['detail_' . $pageInit['lang']] ?? '') !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')

    <script>
        var elms = document.getElementsByClassName('accordion-splide');
        for (var i = 0; i < elms.length; i++) {
            accordionSplide(elms[i])
        }
    </script>

@endsection