@extends('layouts.main', ['title' => 'Gia sư | FAQs', 'sidebarSelected' => 'faqs'])

@push('style')
  @vite(['resources/css/layout/tutor/breadcrumb.css', 'resources/css/tutor.css'])
@endpush

@section('content')
  <section class="tutor-wrap">
    <div class="breadcrumb-tutor-wrap pb-2 pt-3">
      <nav aria-label="breadcrumb-tutor">
        <ol class="breadcrumb-tutor d-flex flex-wrap">
          <li class="breadcrumb-tutor-item">
            <a href="{{ route('tutors.dashboard') }}"
              class="breadcrumb-tutor-link text-capitalize text-decoration-none">Dashboard</a>
          </li>
          <span class="breadcrumb-tutor-separation fw-light">/</span>
          <li class="breadcrumb-tutor-item active text-neutral-05 fw-semibold text-capitalize text-decoration-none"
            aria-current="page">
            FAQs
          </li>
        </ol>
      </nav>
    </div>
    <section class="tutor-content-wrap pb-5 pt-4">
      <div class="container-fluid p-0">
        <section class="tutor-faqs bg-white py-3">
          <div class="accordion py-1" id="accordionExample">
            @if (isset($faqData) && count($faqData) > 0)
              @foreach ($faqData as $value => $data)
                <div class="accordion-item border-0">
                  <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button px-md-4 {{ $value == 0 ? 'border-0' : 'collapsed' }} px-2"
                      type="button" data-bs-toggle="collapse" data-bs-target="{{ '#collapse_' . $data->id }}"
                      aria-expanded="true" aria-controls="{{ 'collapse_' . $data->id }}">
                      {{ $value + 1 . '. ' . $data->question }}
                    </button>
                  </h2>
                  <div id="{{ 'collapse_' . $data->id }}"
                    class="accordion-collapse {{ $value == 0 ? 'show' : '' }} collapse" aria-labelledby="headingOne"
                    data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      @if (isset($data->answer))
                        {!! $data->answer !!}
                      @endif
                    </div>
                  </div>
                </div>
              @endforeach
            @else
            <div class="d-flex justify-content-center">
              <span class="text-danger">Không có dữ liệu</span>
            </div>
            @endif
          </div>
        </section>
      </div>
    </section>
  </section>
@endsection

@push('script')
@endpush