{{-- @extends('layout.online_learning.online_learning_app') --}}
@extends('layout.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/unit/study_notebook.css'])
@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>
              {{ $studyNotebookData['teacher_course']['name'] }}
            </h2>
          </div>
          <div class="banner-main-text fs-17">
            <span>Giáo viên: {{ $studyNotebookData['teacher_course']['teacher_name'] }}</span>
          </div>
        </div>
      </div>
    </section>
    <div class="container-fluid">
      @include('custom_errors.session-errors')
      <div class="p-5">
        <div class="d-flex align-items-center justify-content-between gap-3">
          <div class="d-flex flex-column gap-2">
            <div class="d-flex justify-content-between gap-4">
              <span class="fw-600 text-nowrap">
                Đánh giá học lực
              </span>
              <span class="fw-700 text-danger">
                {{ $studyNotebookData['evaluate_academic'] }}
              </span>
            </div>
            <div class="d-flex justify-content-between gap-4">
              <span class="fw-600 text-nowrap">
                Trung bình cả khóa
              </span>
              <span class="fw-700 text-danger">
                {{ $studyNotebookData['average_course_all'] }}%
              </span>
            </div>
          </div>
          <a class="btn-red-main btn btn-fill-primary"
            href="{{ route('online_learning.exportPDFStudyNotebook', ['id' => $studyNotebookData['teacher_course']['id']]) }}">
            <span class="fw-700 fs-16 text-center text-white">Download</span>
            <span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path
                  d="M4 20.3827C4.40471 20.778 4.95361 21 5.52595 21H18.4741C19.0464 21 19.5953 20.778 20 20.3827M12.0012 3V14.9425M12.0012 14.9425L16.9338 10.3793M12.0012 14.9425L7.06859 10.3793"
                  stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </span>
          </a>
        </div>
        <div class="table-reponsive box mt-4">
          <table id="studyNotebook" class="table-bordered table" style="width:100%">
            <thead>
              <tr>
                <th>
                  <span class="justify-content-start table-row">Nội dung</span>
                </th>
                <th>
                  <span class="table-row">Bài giảng</span>
                </th>
                <th>
                  <span class="table-row">Video</span>
                </th>
                <th>
                  <span class="table-row">Bài tập</span>
                </th>
                <th>
                  <span class="table-row">Bài kiểm tra</span>
                </th>
                <th>
                  <span class="table-row">Thi học kỳ</span>
                </th>
              </tr>
            </thead>
            <tbody>
              @if ($studyNotebookData['list_lesson'] !== null)
                @foreach ($studyNotebookData['list_lesson'] as $lesson)
                  <tr>
                    <td class="">
                      <span class="fw-700">
                        {{ $lesson->name }}
                      </span>
                    </td>
                    <td class="text-center">
                      @if ($lesson->is_slide_viewed)
                        <span class="fw-700"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                            viewBox="0 0 25 25" fill="none">
                            <path
                              d="M7.25 12.3784C8.19144 13.0631 10.0743 14.9459 10.8446 16.2297C11.786 14.1757 14.1824 9.55405 16.75 7.5"
                              stroke="#418844" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                          </svg></span>
                      @else
                        <span class="fw-700"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                            viewBox="0 0 25 25" fill="none">
                            <path d="M16.75 8.5L8.75 16.5M16.75 16.5L8.75 8.5" stroke="#CC3A3D" stroke-width="2"
                              stroke-linecap="round" />
                          </svg></span>
                      @endif
                    </td>
                    <td class="text-center">
                      @if ($lesson->is_video_viewed)
                        <span class="fw-700"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                            viewBox="0 0 25 25" fill="none">
                            <path
                              d="M7.25 12.3784C8.19144 13.0631 10.0743 14.9459 10.8446 16.2297C11.786 14.1757 14.1824 9.55405 16.75 7.5"
                              stroke="#418844" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                          </svg></span>
                      @else
                        <span class="fw-700"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                            viewBox="0 0 25 25" fill="none">
                            <path d="M16.75 8.5L8.75 16.5M16.75 16.5L8.75 8.5" stroke="#CC3A3D" stroke-width="2"
                              stroke-linecap="round" />
                          </svg></span>
                      @endif
                    </td>
                    <td class="text-center">
                      @if (!is_null($lesson->right_answer_exercise))
                        <div class="text-center">
                          <span class="fw-700 text-score">{{ $lesson->right_answer_exercise }} /</span>
                          <span>{{ $lesson->total_question_exercise }}</span>
                          <span><a class="ms-2"
                              href="{{ route('online_learning.viewStudyHistory', ['teacher_course_detail_id' => $lesson->id, 'type' => TypeExerciseStudentEnum::EXERCISE]) }}">xem</a></span>
                        </div>
                      @else
                        <div class="text-center">
                          <span class="fw-700 text-score">--</span>
                        </div>
                      @endif
                    </td>
                    <td class="text-center">
                      @if (!is_null($lesson->right_answer_test))
                        <div class="text-center">
                          <span class="fw-700 text-score">{{ $lesson->right_answer_test }} /</span>
                          <span>{{ $lesson->total_question_test }}</span>
                          <span><a class="ms-2"
                              href="{{ route('online_learning.viewStudyHistory', ['teacher_course_detail_id' => $lesson->id, 'type' => TypeExerciseStudentEnum::TEST]) }}">xem</a></span>
                        </div>
                      @else
                        <div class="text-center">
                          <span class="fw-700 text-score">--</span>
                        </div>
                      @endif
                    </td>
                    <td class="text-center">
                      @if (!is_null($lesson->right_answer_exam))
                        <div class="text-center">
                          <span class="fw-700 text-score">{{ $lesson->right_answer_exam }} /</span>
                          <span>{{ $lesson->total_question_exam }}</span>
                          <span><a class="ms-2"
                              href="{{ route('online_learning.viewStudyHistory', ['teacher_course_detail_id' => $lesson->id, 'type' => TypeExerciseStudentEnum::EXAM]) }}">xem</a></span>
                        </div>
                      @else
                        <div class="text-center">
                          <span class="fw-700 text-score">--</span>
                        </div>
                      @endif
                    </td>
                  </tr>
                @endforeach
              @endif
            </tbody>
            <tfoot>
              <tr>
                <td class="">
                  <span class="fw-500">Điểm trung bình</span>
                </td>
                <td class="text-center"></td>
                <td class="text-center"></td>
                <td class="text-center">
                  <span class="fw-700 text-score">{{ $studyNotebookData['right_answer_exercise'] }} /</span>
                  <span>{{ $studyNotebookData['question_exercise'] }}</span>
                </td>
                <td class="text-center">
                  <span class="fw-700 text-score">{{ $studyNotebookData['right_answer_test'] }} /</span>
                  <span>{{ $studyNotebookData['question_test'] }}</span>
                </td>
                <td class="text-center">
                  <span class="fw-700 text-score">{{ $studyNotebookData['right_answer_exam'] }} /</span>
                  <span>{{ $studyNotebookData['question_exam'] }}</span>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </section>
@endsection

@push('script')
  <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
  <script>
    $(document).ready(function() {
      $('#studyNotebook').DataTable({
        "lengthChange": false,
        "searching": false,
        "ordering": false,
        "responsive": true,
        "autoWidth": false,
        "info": false,
        "paging": false,
        'columnDefs': [{
            'targets': 0,
            'width': '35%'
          }, // col-5
          {
            'targets': 1,
            'width': '13%'
          }, // col-2
          {
            'targets': 2,
            'width': '13%'
          }, // col-2
          {
            'targets': 3,
            'width': '13%'
          }, // col-3
          {
            'targets': 4,
            'width': '13%'
          }, // col-3
          {
            'targets': 5,
            'width': '13%'
          }, // col-3
        ]
      });
    });
  </script>

  @vite(['resources/js/unit.js', 'resources/js/unit/check_slide_video_progress.js'])
@endpush