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

@extends('layouts.layoutMaster')

@section('title', 'Store')

<!-- Page Styles -->
@section('page-style')
  @vite([
      'resources/assets/vendor/scss/pages/front-page-payment.scss',
      'resources/assets/vendor/scss/pages/front-page-landing.scss',
      'resources/assets/vendor/scss/pages/page-faq.scss',
      'resources/assets/vendor/libs/animate-css/animate.scss'
  ])
@endsection

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

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


@section('content')

  <div data-bs-spy="scroll" class="scrollspy-example">

    <!-- FAQ: Start -->
    <section id="landingFAQ" class="section-py bg-body landing-faq">
      <div class="container bg-icon-right">
        <img src="{{asset('assets/img/front-pages/icons/bg-right-icon-'.$configData['style'].'.png')}}" alt="section icon" class="position-absolute top-0 end-0" data-speed="1" data-app-light-img="front-pages/icons/bg-right-icon-light.png" data-app-dark-img="front-pages/icons/bg-right-icon-dark.png" />
        <h6 class="text-center d-flex justify-content-center align-items-center mb-6">
          <img src="{{asset('assets/img/front-pages/icons/section-tilte-icon.png')}}" alt="section title icon" class="me-3" />
          <span class="text-uppercase">faq</span>
        </h6>
        <h5 class="text-center mb-2">Frequently asked<span class="display-5 fs-4 fw-bold"> questions</span></h5>
        <p class="text-center fw-medium mb-4 mb-md-12 pb-4">
          Browse through these FAQs to find answers to commonly asked questions.
        </p>
        <div class="row gy-5">
          <div class="col-lg-5">
            <div class="text-center">
              <img src="{{asset('assets/img/front-pages/landing-page/sitting-girl-with-laptop.png')}}" alt="sitting girl with laptop" class="faq-image scaleX-n1-rtl" />
            </div>
          </div>
          <div class="col-lg-7">
            <div class="accordion" id="accordionFront">
              @foreach($faq as $f)
                <div class="accordion-item">
                  <h2 class="accordion-header" id="head-One">
                    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionOne{{ $loop->iteration }}" aria-expanded="true" aria-controls="accordionOne">
                      {{ $f['question'] }}
                    </button>
                  </h2>

                  <div id="accordionOne{{ $loop->iteration }}" class="accordion-collapse collapse" data-bs-parent="#accordionFront" aria-labelledby="accordionOne">
                    <div class="accordion-body">
                      {{ $f['answer'] }}
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- FAQ: End -->


    <!-- Contact -->
    <section class="container mb-10">
      <div class="row my-6">
      <div class="col-12 text-center my-6">
        <div class="badge bg-label-primary rounded-pill">Question?</div>
        <h4 class="my-2">You still have a question?</h4>
        <p class="mb-0">If you can't find question in our FAQ, you can contact us. We'll answer you shortly!</p>
      </div>
    </div>


      <div class="row justify-content-center gap-sm-0 gap-6">
        <div class="col-sm-6">
          <div class="p-6 rounded-4 bg-faq-section d-flex align-items-center flex-column">
            <div class="avatar avatar-md">
          <span class="avatar-initial bg-label-primary rounded-3">
            <i class="ri-phone-line ri-30px"></i>
          </span>
            </div>
            <h5 class="mt-4 mb-1"><a class="text-heading" href="tel:+(810)12345678">+ (810) 1234 5678</a></h5>
            <p class="mb-0">We are always happy to help</p>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="p-6 rounded-4 bg-faq-section d-flex align-items-center flex-column">
            <div class="avatar avatar-md">
          <span class="avatar-initial bg-label-primary rounded-3">
            <i class="ri-mail-line ri-30px"></i>
          </span>
            </div>
            <h5 class="mt-4 mb-1"><a class="text-heading" href="mailto:help@help.com">help@help.com</a></h5>
            <p class="mb-0">Best way to get a quick answer</p>
          </div>
        </div>
      </div>
    </section>
    <!-- /Contact -->


  </div>

@endsection