@extends('layout.online_learning.online_learning_app')

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/landing.css', 'resources/css/animate.css', 'resources/css/students/student.css', 'resources/css/unit/unit_detail.css', 'resources/css/level-test.css'])
  @vite(['resources/css/preview_teacher_document.css'])

  <style>
  </style>
@endpush

@php
  use App\Enums\TypeExerciseStudentEnum;
@endphp

@section('content')
  <section class="page-wrap col-8 col-md-9 col-xl-10 flex-grow-1 px-0">
    <section class="banner-main position-relative w-100">
      <div class="banner-unit">
        <img src="{{ asset('img/promotion/banner_class.png') }}" alt="" class="w-100">
      </div>
      <div class="banner-main-wrap position-absolute mt-2">
        <div class="banner-main-content text-white">
          <div class="banner-main-header text-uppercase">
            <h2>
              {{ $lessonOnlineLearningData->course_name }}
            </h2>
          </div>
          <div class="banner-main-text fs-17">
            <span>Giáo viên: {{ $lessonOnlineLearningData->teacher_name }}</span>
          </div>
        </div>
      </div>
    </section>
    <div class="container-fluid">
      @include('custom_errors.session-errors')
      <section class="proficiency-assessment">
        <div class="proficiency-assessment-wrap py-2 py-xl-5 pe-0">
          <div class="container-fluid">
            <div class="row flex-column-reverse flex-xl-row">
              <div class="col-xl-9 borderRight px-1 px-xl-3">
                <div class="proficiency-assessment-test">
                  <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"></h4>
                    <h5 class="proficiency-assessment-question-number text-red-main mb-0">Câu hỏi
                    </h5>
                  </div>
                  <div class="proficiency-assessment-test-content mt-3 pt-3">
                    {{-- <input type="hidden" name="time_minutes" value=""> --}}
                    {{-- <input type="hidden" name="time_seconds" value=""> --}}
                    <div class="card-body">
                      <div id="question-container">
                        <input type="hidden" name="is_true" value="">
                        <input type="hidden" name="answer" value="">
                        <!-- Câu hỏi sẽ được render ở đây -->
                      </div>
                      <div class="d-flex justify-content-center align-items-center mt-1">
                        <form action="{{ route('online_learning.storeDoExerciseStudent') }}" method="post"
                          id="levelTestForm">
                          @csrf
                          <input type="hidden" name="selected_params" value=''>
                          <input type="hidden" name="selected_answers" value=''>
                          <div class="btnQuestion">
                            <button id="back-button" class="fw-bold btn-next-question text-center mx-3" type="button">
                            </button>
                            <button id="next-button" class="fw-bold btn-next-question text-center mx-3" type="button">
                            </button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-3">
                <div class="proficiency-assessment-feature py-1 py-xl-4">
                  <div class="d-flex flex-column justify-content-center align-items-center">
                    <div class="proficiency-assessment-icon mb-2">
                      @include('svg_icons.clock')
                    </div>
                    <div class="proficiency-assessment-time py-2 pt-xl-4">
                      <p class="proficiency-assessment-time-remaining fw-semibold text-red-main mb-0 text-center">
                        <span class="fs-2 time-minutes"></span>
                        m
                        <span class="fs-2 time-seconds"></span>
                        s
                      </p>
                      <p class="proficiency-assessment-time-description text-neutral-05 mb-2 text-center">Thời gian làm
                        bài
                      </p>
                    </div>
                    {{-- <a href="{{ route('landingpage') }}" style="font-size: 1rem;"
                      class="btn-outline-red btn-go-home text-decoration-none fs-18 fw-semibold my-2 my-xl-5 px-2 px-xxl-4 text-center">
                      Về Trang Chủ
                    </a> --}}
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </section>
  @include('modals.show_loading')
@endsection

@push('script')
  <script type="text/javascript" src="{{ asset('plugins/mathpix/mathpix.js') }}"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/mml-chtml.js"></script>
  <script>
    var unit_id = {{ $lessonOnlineLearningData->lesson_id }};
    var selectedParamsBlade = {!! json_encode($selected_params) !!};
  </script>
  @vite(['resources/js/do_exercise_students/doExerciseStudent.js', 'resources/js/landing.js', 'resources/js/question_mathpix_image_responsive.js'])
@endpush