@extends('layouts.main', ['title' => 'Giáo Viên Online | Sổ tay học tập', 'sidebarSelected' => 'dashboard', 'isTeacher' => true])
@push('style')
  @vite(['resources/css/teachers/teacher.css', 'resources/css/teachers/dashboard_teacher.css', 'resources/css/unit/study_notebook.css'])
  <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" />
@endpush

@section('content')
  <section class="">
    <div class="p-5">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <div class="d-flex py-2">
            <img
              src="{{ $studyNotebookData['student']->avatar ? Storage::url($studyNotebookData['student']->avatar) : '/img/avatardefault.jpg' }}"
              alt="Avatar" class="user-avatar rounded-circle">
            <div class="d-flex flex-column align-items-start">
              <p class="fs-6 fw-600 mb-0">
                {{ $studyNotebookData['student']->fullname }}
              </p>
              <span class="fs-12">
                {{ $studyNotebookData['student']->email }}
              </span>
            </div>
          </div>
          <a class="purchase"
            href={{ route('teachers.exportPDFStudyNotebook', ['id' => $studyNotebookData['id'], 'user_id' => $studyNotebookData['student']->id]) }}>
            <span>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path
                  d="M2.6665 13.5885C2.93631 13.852 3.30224 14 3.6838 14H12.3159C12.6974 14 13.0634 13.852 13.3332 13.5885M8.00064 2V9.96164M8.00064 9.96164L11.289 6.91953M8.00064 9.96164L4.71223 6.91953"
                  stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </span>
            <span class="fw-500 fs-13 text-center text-danger text-decoration-underline">Kết quả học tập</span>
          </a>
        </div>
        <div class="d-flex flex-column justify-content-between gap-3">
          <div class="d-flex justify-content-between gap-4">
            <span class="fw-600">Đá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">Trung bình cả khóa</span>
            <span class="fw-700 text-danger">
              {{ $studyNotebookData['average_course_all'] }}%
            </span>
          </div>
        </div>
      </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>
                      </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>
                      </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>
                      </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>
  </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': '30%'
          }, // col-5
          {
            'targets': 1,
            'width': '14%'
          }, // col-2
          {
            'targets': 2,
            'width': '14%'
          }, // col-2
          {
            'targets': 3,
            'width': '14%'
          }, // col-3
          {
            'targets': 4,
            'width': '14%'
          }, // col-3
          {
            'targets': 5,
            'width': '14%'
          }, // col-3
        ]
      });
    });
  </script>
@endpush