@extends('layouts.layout')
@section('title', 'FAQ')

@section('banner')
   <!-- banner -->
   <section>
    <div class="header-img banner-size">

    </div>
     @include('partials.telecharger')
  </section>

@endsection

@section('main')
  <!-- histoire -->
  <section>
    <div class="container text-center my-5">
        <div class="row">
              <div class="col-md-12">
              <h2 class="titre text-uppercase">FAQ</h2>
              </div>
             <div class="container text-start pt-5 .histoire-p ">
                  <div class="row mb-4">
                    <div class="accordion accordion-flush faq" id="accordionFlushExample">
                        @foreach ($faqs as $faq)
                             <div class="accordion-item">
                          <h2 class="accordion-header" id="flush-headingOne{{$faq->id}}">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne{{$faq->id}}" aria-expanded="false" aria-controls="flush-collapseOne{{$faq->id}}">
                              {{$faq->question}}
                            </button>
                          </h2>
                          <div id="flush-collapseOne{{$faq->id}}" class="accordion-collapse collapse @if($faq->id ==1) show @endif" aria-labelledby="flush-headingOne{{$faq->id}}" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">{!! $faq->reponse !!}</div>
                          </div>
                        </div>
                        @endforeach
                       
                        
                    </div>
                  </div>
              </div>
        </div>
      </div>
  </section>
@endsection