@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/courses/list_unit.css', 'resources/css/unit/unit_detail.css', 'resources/css/unit/study_notebook.css'])
  <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" />
@endpush

@php
  use App\Enums\CourseType;
@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['course_purchased_data']['grade_name'] }} -
              {{ $studyNotebookData['course_purchased_data']['subject_name'] }}</h2>
          </div>
          <div class="banner-main-text fs-17">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item breadcrumb-unit capitalize-first" aria-current="page">
                  {{ checkIsCourseSeftStudy($studyNotebookData['course_purchased_data']['course_type'])['study_notebook'] }}
                </li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section>
    <div class="container-fluid">
      <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">
                {{ checkIsCourseSeftStudy($studyNotebookData['course_purchased_data']['course_type'])['assessment'] }}
              </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">
                {{ checkIsCourseSeftStudy($studyNotebookData['course_purchased_data']['course_type'])['overall_average'] }}
              </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('units.exportPDFStudyNotebook', ['id' => $studyNotebookData['course_purchased_data']['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">{{ checkIsCourseSeftStudy($studyNotebookData['course_purchased_data']['course_type'])['content'] }}</span>
                </th>
                <th>
                  <span
                    class="table-row">{{ checkIsCourseSeftStudy($studyNotebookData['course_purchased_data']['course_type'])['lecture'] }}</span>
                </th>
                <th>
                  <span class="table-row">Video</span>
                </th>
                <th>
                  <span
                    class="table-row">{{ checkIsCourseSeftStudy($studyNotebookData['course_purchased_data']['course_type'])['exercise'] }}</span>
                </th>
              </tr>
            </thead>
            <tbody>
              @foreach ($studyNotebookData['course_purchased_data']['chapters'] as $chapter)
                <tr>
                  <td colspan="4">
                    <span class="fw-700">
                      {{ checkIsCourseSeftStudy($studyNotebookData['course_purchased_data']['course_type'])['unit'] . ' ' . $chapter['chapter']['chapter_number'] . ': ' . $chapter['chapter']['chapter_name'] }}
                    </span>
                  </td>
                  <td class="p-0"></td>
                  <td class="p-0"></td>
                  <td class="p-0"></td>
                </tr>
                @if ($chapter['units'] !== null)
                  @foreach ($chapter['units'] as $unit)
                    <tr>
                      <td class="">
                        <span class="ps-3">
                          {{ checkIsCourseSeftStudy($studyNotebookData['course_purchased_data']['course_type'])['topic'] . ' ' . $unit['unit_number'] . ': ' . $unit['unit_name'] }}
                        </span>
                      </td>
                      <td class="text-center">
                        @if ($unit['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 ($unit['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" style="min-width: 9.375rem">
                        @if ($studyNotebookData['course_purchased_data']['course_type'] === CourseType::COURSE_SELF_STUDY->value)
                          <div class="d-flex flex-column">
                            <div class="d-flex align-items-center justify-content-between">
                              <span class="fw-600">Cơ bản</span>
                              <div>
                                <span class="fw-700 text-score">{{ $unit['right_answer_level_normal'] }} /</span>
                                <span>{{ $unit['total_question_level_normal'] }}</span>
                              </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-between">
                              <span class="fw-600">Khá</span>
                              <div>
                                <span class="fw-700 text-score">{{ $unit['right_answer_level_medium'] }} /</span>
                                <span>{{ $unit['total_question_level_medium'] }}</span>
                              </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-between">
                              <span class="fw-600">Giỏi</span>
                              <div>
                                <span class="fw-700 text-score">{{ $unit['right_answer_level_advanced'] }} /</span>
                                <span>{{ $unit['total_question_level_advanced'] }}</span>
                              </div>
                            </div>
                          </div>
                        @else
                          <div class="text-center">
                            <span class="fw-700 text-score">{{ $unit['right_answer'] }} /</span>
                            <span>{{ $unit['total_question'] }}</span>
                          </div>
                        @endif
                      </td>
                    </tr>
                  @endforeach
                @endif
              @endforeach
            </tbody>
            <tfoot>
              <tr>
                <td class="">
                  <span
                    class="fw-500">{{ checkIsCourseSeftStudy($studyNotebookData['course_purchased_data']['course_type'])['grade_point_average'] }}</span>
                </td>
                <td class="text-center"></td>
                <td class="text-center"></td>
                <td class="text-center">
                  <span class="fw-700 text-score">{{ $studyNotebookData['average_score_all'] }} /</span>
                  <span>{{ $studyNotebookData['average_question_all'] }}</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': '50%'
          }, // col-5
          {
            'targets': 1,
            'width': '16.67%'
          }, // col-2
          {
            'targets': 2,
            'width': '16.67%'
          }, // col-2
          {
            'targets': 3,
            'width': '16.67%'
          } // col-3
        ]
      });
    });
  </script>
@endpush