@push('style')
  @vite(['resources/css/answer_guide_request_modal.css'])
@endpush
<!-- Modal -->
<div class="modal fade" id="answerGuideRequestModal" tabindex="-1" aria-labelledby="answerGuideRequestModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-reply">
    <div class="modal-content rounded">
      @if ($guideRequests->count() > 0)
        <div class="modal-header">
          <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-3">
              <button class="btn btn-carousel btn-carousel-prev" type="button" data-bs-target="#carouselExampleDark"
                data-bs-slide="prev">
                <i class="fa-solid fa-chevron-left"></i>
              </button>
              <button class="btn btn-carousel btn-carousel-next" type="button" data-bs-target="#carouselExampleDark"
                data-bs-slide="next">
                <i class="fa-solid fa-chevron-right"></i>
              </button>
              <label id="carousel-counter-answer" for="exampleFormControlTextarea1"></label>
            </div>
          </div>
          <button type="button" class="btn-close me-3" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body d-flex flex-column answer-guide-request-wrapper">
          <div id="carouselExampleDark" class="carousel slide">
            <div class="carousel-inner">
              @foreach ($guideRequests as $key => $guideRequest)
                <div class="carousel-item {{ $key === 0 ? 'active' : '' }} ">
                  <div
                    class="proficiency-assessment-test-header d-flex justify-content-between align-items-center pb-3 pe-4">
                    <h4 class="proficiency-assessment-test-title text-red-main fw-semibold mb-0">Nội dung câu hỏi</h4>
                  </div>
                  <div class="questionContent my-4">
                    @if (isset($guideRequest->question_text))
                      <div class="form-control answerContent border-0 px-5" rows="3" disabled>
                        {{ $guideRequest->question_text }}</div>
                    @else
                      <img src="{{ Storage::url($guideRequest->question_file) }}" class="card-img-top"
                        alt="image question">
                    @endif
                  </div>
                  <div
                    class="proficiency-assessment-test-header d-flex justify-content-between align-items-center pb-3 pe-4">
                    <h4 class="proficiency-assessment-test-title text-red-main fw-semibold mb-0">Hướng dẫn giải</h4>
                  </div>
                  <div class="answerContent my-4">
                    <p>
                      {!! $guideRequest->answer !!}
                    </p>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        </div>
      @else
        <div class="modal-header">
          <button type="button" class="btn-close me-3" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body d-flex flex-column answer-guide-request-wrapper">
          <div class="d-flex justify-content-center">
            <h5 class="text-danger">Không có dữ liệu</h5>
          </div>
        </div>
      @endif
    </div>
  </div>
</div>
@push('script')
  @vite(['resources/js/exercise-guide.js'])
@endpush