@extends('theme::layout')

@section('title', __('Foire aux questions'))
@section('description', __('La foire aux questions'))

@section('main-class', 'product-page')

@section('content')
    <div class="container pb-5 pt-5">
        <div class="row mb-3">
            <div class="col">
                <h1 class="text-quad text-uppercase fw-bold">{{ __('Foire aux questions') }}</h1>
            </div>
        </div>
        @foreach ($questionModelList->groupBy('theme')->values() as $themeIndex => $themeQuestionsModelList)
            <div class="row mb-5">
                @if ($themeQuestionsModelList->count())
                    <div class="col-12">
                        <h2 class="text-uppercase fw-bold">{{ $themeQuestionsModelList->first()->theme->name }}</h2>
                    </div>
                @endif
                <div class="col-12">
                    <div class="accordion" id="accordion-qa-theme-{{ $themeIndex }}">
                        @foreach ($themeQuestionsModelList as $questionIndex => $questionModel)
                            <div class="accordion-item">
                                <h3 class="accordion-header">
                                    <button class="accordion-button @if (!$loop->first) collapsed @endif"
                                        data-bs-toggle="collapse" data-bs-target="#accordion-qa-{{ $themeIndex }}{{ $questionIndex }}"
                                        type="button" aria-controls="accordion-qa-{{ $themeIndex }}{{ $questionIndex }}"
                                        aria-expanded="@if ($loop->first) true @else false @endif">
                                        <span class="text-uppercase fw-bold rounded">{{ $questionModel->question }}</span>
                                    </button>
                                </h3>
                                <div class="accordion-collapse @if ($loop->first) show @endif collapse"
                                    id="accordion-qa-{{ $themeIndex }}{{ $questionIndex }}"
                                    data-bs-parent="#accordion-qa-theme-{{ $themeIndex }}">
                                    <div class="accordion-body">
                                        <div class="ck-content ps-4">{!! clean($questionModel->answer) !!}</div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection