@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Accueil')

<!-- Vendor Styles -->
@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/nouislider/nouislider.scss',
  'resources/assets/vendor/libs/swiper/swiper.scss'
])
@endsection

<!-- Page Styles -->
@section('page-style')
@vite(['resources/assets/vendor/scss/pages/front-page-landing.scss'])
<style>
  .underline-title {
    display: inline-block;
    border-bottom: 4px solid #22aa22;
    padding-bottom: 1px;
  }
</style>
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/nouislider/nouislider.js',
  'resources/assets/vendor/libs/swiper/swiper.js'
])
@endsection

<!-- Page Scripts -->
@section('page-script')
@vite(['resources/assets/js/front-page-landing.js'])
@endsection


@section('content')
<div data-bs-spy="scroll" class="scrollspy-example">
  <!-- Hero: Start -->
<section id="heroDashboardCarousel" class="pb-5 bg-body" style="padding-top: 6rem !important;">
  <div class="container-fluid px-0">
    <div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          {{-- <a href="#" target="_blank"> --}}
            <img src="{{ asset('assets/img/front-pages/landing-page/image4.jpg') }}" class="d-block w-100" alt="hero dashboard">
          {{-- </a> --}}
        </div>
        <div class="carousel-item">
          {{-- <a href="#" target="_blank"> --}}
            <img src="{{ asset('assets/img/front-pages/landing-page/image1.jpg') }}" class="d-block w-100" alt="hero elements">
          {{-- </a> --}}
        </div>
        <div class="carousel-item">
          {{-- <a href="#" target="_blank"> --}}
            <img src="{{ asset('assets/img/front-pages/landing-page/image2.jpg') }}" class="d-block w-100" alt="hero elements">
          {{-- </a> --}}
        </div>
        <div class="carousel-item">
          {{-- <a href="#" target="_blank"> --}}
            <img src="{{ asset('assets/img/front-pages/landing-page/image3.jpg') }}" class="d-block w-100" alt="hero elements">
          {{-- </a> --}}
        </div>
        <!-- Add more carousel items as needed -->
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
</section>
</div>
  <!-- Hero: End -->

  <!-- FAQ: Start -->
  <section id="landingFAQ" class="bg-body landing-faq">
    <div class="container">
        <div class="text-center">
            <!--span class="badge bg-label-primary">FAQ</!--span-->
        </div>
        <h3 class="text-center">
            <span class="position-relative fw-bold z-1 underline-title">Questions fréquemment posées
                {{-- <img src="{{asset('assets/img/front-pages/icons/section-title-icon.png')}}" alt="laptop charging" class="section-title-img position-absolute object-fit-contain bottom-0 z-n1"> --}}
            </span>
        </h3>
        <p class="text-center">Parcourez ces FAQs pour trouver des réponses aux questions couramment posées.</p>
        <!-- resources/views/faqs/index.blade.php -->
      <div class="row pt-2">
          <div class="col-lg-6">
            <div class="accordion" id="accordionLeft">
               @foreach($faqsLeft as $index => $faq)
                <div class="card accordion-item">
                    <h2 class="accordion-header" id="headingLeft{{ $faq->id }}" style="color: black; font-weight: bold;">
                        <button
                            type="button"
                            class="accordion-button"
                            data-bs-toggle="collapse"
                            data-bs-target="#collapseLeft{{ $faq->id }}"
                            aria-expanded="{{ $index == 0 ? 'true' : 'false' }}"
                            aria-controls="collapseLeft{{ $faq->id }}">
                            {{ $faq->question }}
                        </button>
                    </h2>
                    <div
                        id="collapseLeft{{ $faq->id }}"
                        class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }}"
                        data-bs-parent="#accordionLeft">
                        <div class="accordion-body">
                            {{ $faq->reponse }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="col-lg-6">
        <div class="accordion" id="accordionRight">
            @foreach($faqsRight as $index => $faq)
                <div class="card accordion-item">
                    <h2 class="accordion-header" id="headingRight{{ $faq->id }}" style="color: black; font-weight: bold;">
                        <button
                            type="button"
                            class="accordion-button"
                            data-bs-toggle="collapse"
                            data-bs-target="#collapseRight{{ $faq->id }}"
                            aria-expanded="{{ $index == 0 ? 'true' : 'false' }}"
                            aria-controls="collapseRight{{ $faq->id }}">
                            {{ $faq->question }}
                        </button>
                    </h2>
                    <div
                        id="collapseRight{{ $faq->id }}"
                        class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }}"
                        data-bs-parent="#accordionRight">
                        <div class="accordion-body">
                            {{ $faq->reponse }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
</section>

  <!-- FAQ: End -->
  <!-- Contact Us: Start -->
  <section id="landingContact" class="pb-5 bg-body landing-contact" style="padding-top: 3rem !important;">
    <div class="container">
      <div class="text-center">
        <!--span class="badge bg-label-primary">Contact Nous</!--span-->
      </div>
      <h3 class="text-center">
        <span class="position-relative fw-bold z-1 underline-title">Contactez-nous
          <!-- <img src="{{asset('assets/img/front-pages/icons/section-title-icon.png')}}" alt="laptop charging" class="section-title-img position-absolute object-fit-contain bottom-0 z-n1"> -->
        </span>
      </h3>
      <p class="text-center">Envoyez-nous un message si vous avez des question ou des remarques.</p>
      <div class="row gy-4">
        <div class="col-lg-5 mb-3">
          <div class="contact-img-box position-relative border p-2 h-100">
            <img src="{{asset('assets/img/front-pages/icons/contact-border.png')}}" alt="contact border" class="contact-border-img position-absolute d-none d-md-block scaleX-n1-rtl" />
            <img src="{{asset('assets/img/front-pages/landing-page/contact-customer-service.png')}}" alt="contact customer service" class="contact-img w-100 scaleX-n1-rtl" />
            <div class="pt-3 px-4 pb-1">
              <div class="row gy-3 gx-md-4">
                <div class="col-md-6 col-lg-12 col-xl-6">
                  <div class="d-flex align-items-center">
                    <div class="badge bg-label-primary rounded p-2 me-2"><i class="ti ti-mail ti-sm"></i></div>
                    <div>
                      <p class="mb-0">Email</p>
                      <h5 class="mb-0">
                        <a href="mailto:example@gmail.com" class="text-heading">infos@foner.net</a>
                      </h5>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-12 col-xl-6">
                  <div class="d-flex align-items-center">
                    <div class="badge bg-label-success rounded p-2 me-2">
                      <i class="ti ti-phone-call ti-sm"></i>
                    </div>
                    <div>
                      <p class="mb-0">Téléphone</p>
                      <h5 class="mb-0"><a href="#" class="text-heading">+226 50349858</a></h5>
                      <h5 class="mb-0"><a href="#" class="text-heading">+226 50349859</a></h5>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-7">
          <div class="card">
            <div class="card-body">
              <h4 class="mb-1">Envoyez un message</h4>
              <p class="mb-4">
                Si vous avez une préocupation en lien avec le recouvrement, vous êtes au bon endroit.
                <br class="d-none d-lg-block" />
              </p>
              <form>
                <div class="row g-3">
                  <div class="col-md-6">
                  <div class="form-floating">
                    <input type="text" class="form-control" id="floatingInput" placeholder="Ex: KABORE Jonas" aria-describedby="floatingInputHelp" />
                    <label for="floatingInput">Votre nom complet </label>
                    <div id="floatingInputHelp" class="form-text">Veuillez renseigner votre nom complet.</div>
                  </div>
                  </div>
                  <div class="col-md-6">
                  <div class="form-floating">
                    <input type="text" class="form-control" id="floatingInput" placeholder="Ex: exemple@gmail.com" aria-describedby="floatingInputHelp" />
                    <label for="floatingInput">Votre e-mail </label>
                    <div id="floatingInputHelp" class="form-text">Veuillez renseigner votre email.</div>
                  </div>
                  </div>
                  <div class="col-12">
                    <label class="form-label" for="contact-form-message">Votre message</label>
                    <textarea id="contact-form-message" class="form-control" rows="8" placeholder="Ecrire un message"></textarea>
                  </div>
                  <div class="col-12">
                    <button type="submit" class="btn btn-success">Envoyez la demande</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Contact Us: End -->
</div>
@endsection