@extends('layout.app')

@section('content')
    <div class="breadcumb-wrapper">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">FAQs</h1>
                <ul class="breadcumb-menu">
                    <li><a href="{{ url(app()->getLocale()) }}">Home</a></li>
                    <li>FAQs</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="space-top space-extra-bottom">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-7">
                    <div class="title-area text-center">
                        <h2 class="sec-title">frequently Ask Questions</h2>
                        <p>Have questions you want answers to?</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-10 offset-lg-1">
                    <div class="accordion-area accordion mb-30" id="faqAccordion">
                        @forelse($faqs as $index => $faq)
                            <div class="accordion-card style2 {{ $index === 0 ? 'active' : '' }}">
                                <div class="accordion-header" id="collapse-item-{{ $faq->id }}">
                                    <button class="accordion-button {{ $index === 0 ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse-{{ $faq->id }}"
                                            aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                            aria-controls="collapse-{{ $faq->id }}">
                                        {{ $faq->question }}
                                    </button>
                                </div>
                                <div id="collapse-{{ $faq->id }}" class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}"
                                     aria-labelledby="collapse-item-{{ $faq->id }}"
                                     data-bs-parent="#faqAccordion">
                                    <div class="accordion-body style2">
                                        <div class="faq-text">{!! $faq->answer !!}</div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-5">
                                <p>{{ __('No FAQs available at the moment.') }}</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection