@extends('layout.app', ['title' => 'Hướng dẫn giải đáp'])

@push('style')
  @vite(['resources/css/landing.css', 'resources/css/level-test.css'])
@endpush
@php
  use App\Enums\UserRole;

  $roleTutorTeacher =
      Auth::check() && in_array(Auth::user()->role_id, [UserRole::TUTOR->value, UserRole::TEACHER->value]);
  $roleUser = Auth::check() && in_array(Auth::user()->role_id, [UserRole::USER->value]);

  function getImgPath(string $path): string|null
  {
      $parts = explode('/files/', $path);
      if (count($parts) > 1) {
          return '/upload' . '/' . $parts[1];
      }
      return null;
  }
@endphp
@section('content')
  <section class="page-wrap col-8 col-md-9 col-xl-10 flex-grow-1 px-0">
    @include('layout.landing_banner', [
        'title' => 'hướng dẫn giải đáp',
        'description' => 'Bạn đang gặp khó khăn gì, đừng lo lắng hãy nói với Siêu Học nhé!',
    ])
    @include('custom_errors.session-errors')
    <div class="theoryContent m-5 p-5">
      <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($question_content))
          <textarea class="form-control answerContent border-0 px-5" rows="3" disabled>{{ $question_content }}</textarea>
        @endif
        @if (isset($file))
          <img src="{{ Storage::url($file) }}" class="card-img-top" alt="image question">
        @endif
      </div>
      <div class="theoryQuestion mb-5">
        <div id="carouselExampleDark" class="carousel slide">
          <div class="carousel-inner">
            <div class="d-flex justify-content-between align-items-center pb-1">
              <label for="exampleFormControlTextarea1" class=""></label>
              <div class="d-flex align-items-center gap-3">
                <label id="carousel-counter" for="exampleFormControlTextarea1"></label>
                <button class="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-carousel btn-carousel-next" type="button" data-bs-target="#carouselExampleDark"
                  data-bs-slide="next">
                  <i class="fa-solid fa-chevron-right"></i>
                </button>
              </div>
            </div>
            @foreach ($answers as $key => $answer)
              <div class="carousel-item {{ $key === 0 ? 'active' : '' }} ">
                <label>Câu hỏi tương tự</label>
                <div class="textAnswer my-2" data-content="{{ $answer->text ?? '' }}"
                  data-choices="{{ $answer->choices ?? '' }}"></div>
                <label>Câu trả lời</label>
                <div class="textAnswer my-2" data-content="{{ $answer->answer_text ?? '' }}"
                  data-result="{{ $answer->result ?? '' }}"></div>
              </div>
            @endforeach
          </div>
        </div>
      </div>

      {{-- @endforeach --}}

      @if (!$roleTutorTeacher)
        @if ($roleUser)
          {{-- @include('modals.show_notice_anwser_guide') --}}
        @endif
        <div class="w-100 d-flex justify-content-center mb-3">
          <a href="{{ route('students.dashboard') }}"
            class="answerQuestion btn btn-white btn-outline-danger my-3 px-4 mx-2 text-uppercase {{ $roleUser ? 'checkRoleUser' : '' }}"
            id="agree">Đồng ý
            với câu trả lời
          </a>
          <form id="exerciseGuideForm" action="{{ route('answer_guides.requestExerciseGuide') }}" method="POST">
            @csrf
            <input type="hidden" name="question_text" value="{{ $question_content ?? '' }}">
            <input type="hidden" name="question_file" value="{{ $file ?? '' }}">
            <button type="submit"
              class="answerQuestion btn btn-danger my-3 px-4 mx-2 text-uppercase {{ $roleUser ? 'checkRoleUser' : '' }}">yêu
              cầu giáo viên hỗ trợ</button>
          </form>
        </div>
      @endif
      {{-- @include('modals.show_loading') --}}
    </div>
  </section>
@endsection
@push('script')
  @vite(['resources/js/exercise-guide.js'])
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      let script = document.createElement('script');
      // script.src = "https://cdn.jsdelivr.net/npm/mathpix-markdown-it@1.0.40/es5/bundle.js";
      script.src = "/plugins/mathpix/mathpix.js";
      document.head.append(script);

      script.onload = function() {
        const isLoaded = window.loadMathJax();
        if (isLoaded) {
          // console.log('MathJax loaded!')
        }
        document.querySelectorAll('.textAnswer').forEach((el, index) => {
          let content = el.getAttribute('data-content');
          let choices = el.getAttribute('data-choices') ?? "[]";
          let result = el.getAttribute('data-result') ?? "";
          let final = null;
          if (result && result != "null") {
            final = content + "\n\n" + "<strong>Đáp án: " + result + "</strong>";
          } else {
            let choiceArray = JSON.parse(choices);
            final = content + "\n\n" + choiceArray.join('\n');
          }
          el.innerHTML = window.render(final, {
            htmlTags: true
          });
        });
      };

      // document.querySelectorAll('.checkRoleUser').forEach(function(element) {
      //   element.addEventListener('click', function(event) {
      //     event.preventDefault();
      //     $('#upgradeModal').modal('show');
      //   });
      // });

      // document.querySelectorAll('.btn-close').forEach(function(element) {
      //   element.addEventListener('click', function() {
      //     $('#upgradeModal').modal('hide');
      //   });
      // });

      // document.getElementById('upgradeButton').addEventListener('click', function() {
      //   window.location.href = "{{ route('landingpage') }}";
      // });
    });
  </script>
@endpush