@extends('layouts.main', ['title' => 'Giáo Viên Online | FAQs', 'sidebarSelected' => 'faqs', 'isTeacher' => true])
@push('style')
  @vite(['resources/css/teachers/teacher.css'])
@endpush
@section('content')
  <section class="teacher-wrap mx-2 px-4 py-3">
    <div class="breadcrumb-main pb-2">
      <nav aria-label="breadcrumb-container">
        <ol class="breadcrumb-group d-flex align-items-center gap-2">
          <li class="breadcrumb-item">
            <a href="{{ route('teachers.dashboard') }}"
              class="breadcrumb-link text-capitalize text-decoration-none text-neutral-06 fs-14">Dashboard</a>
          </li>
          <span class="breadcrumb-separation fw-light">/</span>
          <li class="breadcrumb-item active fw-semibold text-capitalize text-decoration-none text-neutral-05 fs-14"
            aria-current="page">
            FAQs
          </li>
        </ol>
      </nav>
    </div>
    <section class="teacher-group bg-white px-5 py-3">
      <div class="px-3">
        <div class="accordion mx-3 my-1 px-3" 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>
      </div>
    </section>
  </section>
@endsection

@push('script')
@endpush