@extends('layouts.main', ['title' => 'Giáo Viên Online | Document', 'sidebarSelected' => '', 'isTeacher' => true])

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/teacher_document.css'])
  @vite(['resources/css/preview_teacher_document.css'])

  <style>

  </style>
@endpush
@php
  function getFilePath($filePath): array
  {
      $file = optional(json_decode($filePath, true))[0] ?? '';
      $fileName = basename($file);
      $parts = explode('.', $fileName);
      $filteredName = implode('.', array_slice($parts, 2));

      return [
          'file' => $file ? Storage::url($file) : '#',
          'name' => $filteredName,
      ];
  }
  function getVideoPath($filePath): array
  {
      $file = optional(json_decode($filePath, true))[0] ?? '';
      $fileName = basename($file);
      return [
          'file' => $file ?? '#',
          'name' => $fileName,
      ];
  }
@endphp
@section('content')
  <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">
          <h2>
            {{ $teacher_online_course->name }} -
            <span class="text-capitalize">
              {{ $teacher_online_course->subject ? $teacher_online_course->subject->name : $teacher_online_course->subject_name }}</span>,
            {{ $teacher_online_course->grade->name }}
          </h2>
          <p>Tài liệu học tập</p>
        </div>

      </div>
    </div>
  </section>
  <section class="teacherDocument-wrap w-100">
    @include('custom_errors.session-errors')
    <div class="row">
      <div class="col p-2 p-lg-5">
        <div class="documentWrap table-responsive">
          <table class="table table-bordered text-center w-100">
            <thead>
              <tr class="bgColor py-4">
                <th style="min-width:250px">Nội dung</th>
                <th>Bài giảng</th>
                <th>Video</th>
                <th>Bài tập</th>
                <th>Bài kiểm tra</th>
                <th>Thi học kỳ</th>
                <th>Action</th> {{-- Cột Action --}}
              </tr>
            </thead>
            <tbody id="lessons-body">
              @foreach ($teacher_course_details as $teacher_course_detail)
                <tr class="lesson-row">
                  <td class="align-middle" style="text-align: start;">
                    {{ $teacher_course_detail->name }}
                  </td>
                  <td class="align-middle" style="max-width:200px">
                    <div class="fileWrap">
                      <a target="_blank"
                        href="{{ getFilePath($teacher_course_detail->file)['file'] }}">{{ getFilePath($teacher_course_detail->file)['name'] }}</a>
                    </div>
                  </td>
                  <td class="align-middle" style="max-width:200px">
                    <div class="fileWrap">
                      <a target="_blank"
                        href="{{ getVideoPath($teacher_course_detail->video)['file'] }}">{{ getVideoPath($teacher_course_detail->video)['name'] }}</a>
                    </div>
                  </td>
                  <td class="align-middle">
                    @if ($teacher_course_detail->teacher_course_exercise)
                      <button type="button" class="btn btn-primary btnView btn-exercise-modal p-2 px-lg-3"
                        data-teacher_course_exercise="{{ $teacher_course_detail->teacher_course_exercise }}">
                        Xem
                      </button>
                    @else
                      <span>--</span>
                    @endif
                  </td>
                  <td class="align-middle">
                    @if ($teacher_course_detail->teacher_course_test)
                      <button type="button" class="btn btn-primary btnView btn-test-modal p-2 px-lg-3"
                        data-teacher_course_test="{{ $teacher_course_detail->teacher_course_test }}">
                        Xem
                      </button>
                    @else
                      <span>--</span>
                    @endif
                  </td>
                  <td class="align-middle">
                    @if ($teacher_course_detail->teacher_course_exam)
                      <button type="button" class="btn btn-primary btnView btn-exam-modal p-2 px-lg-3"
                        data-teacher_course_exam="{{ $teacher_course_detail->teacher_course_exam }}">
                        Xem
                      </button>
                    @else
                      <span>--</span>
                    @endif
                  </td>
                  <td class="align-middle">
                    <div class="d-flex justify-content-center">
                      <a class="btn btn-light btnEdit mx-1 d-flex align-items-center justify-content-center"
                        href="{{ route('teachers.editTeacherDocument', ['teacher_course_detail_id' => $teacher_course_detail->id]) }}">
                        <span>
                          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                            fill="none">
                            <path
                              d="M10.4471 16.036L11.0657 15.3427C11.8246 14.4921 13.1863 14.6026 13.7981 15.5646C14.3681 16.4606 15.6062 16.6305 16.3964 15.921L17.5176 14.9144M2.48242 16.2252L6.12074 15.4921C6.31389 15.4531 6.49124 15.358 6.63052 15.2187L14.7752 7.06947C15.1657 6.67876 15.1655 6.04543 14.7747 5.65505L13.0493 3.93165C12.6586 3.54143 12.0256 3.5417 11.6353 3.93225L3.48972 12.0823C3.35071 12.2214 3.25579 12.3984 3.21684 12.5911L2.48242 16.2252Z"
                              stroke="#7A7E84" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
                        </span>
                      </a>
                      <a class="btn btn-light deleteRowBtn mx-1 d-flex align-items-center justify-content-center"
                        href="{{ route('teachers.deleteTeacherDocument', ['teacher_course_detail_id' => $teacher_course_detail->id]) }}"
                        data-id="{{ $teacher_course_detail->id }}" data-bs-toggle="modal" data-bs-target="#modal-danger">
                        <span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                            fill="none">
                            <path
                              d="M7.03125 3.59375H6.875C6.96094 3.59375 7.03125 3.52344 7.03125 3.4375V3.59375H12.9688V3.4375C12.9688 3.52344 13.0391 3.59375 13.125 3.59375H12.9688V5H14.375V3.4375C14.375 2.74805 13.8145 2.1875 13.125 2.1875H6.875C6.18555 2.1875 5.625 2.74805 5.625 3.4375V5H7.03125V3.59375ZM16.875 5H3.125C2.7793 5 2.5 5.2793 2.5 5.625V6.25C2.5 6.33594 2.57031 6.40625 2.65625 6.40625H3.83594L4.31836 16.6211C4.34961 17.2871 4.90039 17.8125 5.56641 17.8125H14.4336C15.1016 17.8125 15.6504 17.2891 15.6816 16.6211L16.1641 6.40625H17.3438C17.4297 6.40625 17.5 6.33594 17.5 6.25V5.625C17.5 5.2793 17.2207 5 16.875 5ZM14.2832 16.4062H5.7168L5.24414 6.40625H14.7559L14.2832 16.4062Z"
                              fill="#7A7E84" />
                          </svg></span>
                      </a>
                    </div>
                  </td>
                </tr>
              @endforeach

            </tbody>
            <tfoot>
              <tr class="bgColor">
                <td colspan="3" class="text-start align-middle">Trọng số điểm (Đảm bảo đạt 100%)</td>
                <td colspan="1" class="text-center align-middle">
                  {{ $teacher_online_course->exercise_weight }}%
                </td>
                <td colspan="1" class="text-center align-middle">
                  {{ $teacher_online_course->test_weight }}%
                </td>
                <td colspan="1" class="text-center align-middle">
                  {{ $teacher_online_course->exam_weight }}%
                </td>
                <td colspan="1" class="text-center">
                  <a class="btn btn-light btnEdit mx-auto d-flex align-items-center justify-content-center"
                    href="{{ route('teachers.editWeightTeacherDocument', ['teacher_online_course_id' => $teacher_online_course->id]) }}">
                    <span> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                        fill="none">
                        <path
                          d="M10.4471 16.036L11.0657 15.3427C11.8246 14.4921 13.1863 14.6026 13.7981 15.5646C14.3681 16.4606 15.6062 16.6305 16.3964 15.921L17.5176 14.9144M2.48242 16.2252L6.12074 15.4921C6.31389 15.4531 6.49124 15.358 6.63052 15.2187L14.7752 7.06947C15.1657 6.67876 15.1655 6.04543 14.7747 5.65505L13.0493 3.93165C12.6586 3.54143 12.0256 3.5417 11.6353 3.93225L3.48972 12.0823C3.35071 12.2214 3.25579 12.3984 3.21684 12.5911L2.48242 16.2252Z"
                          stroke="#7A7E84" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                      </svg></span>
                  </a>
                </td>
              </tr>
            </tfoot>
          </table>
          {{ $teacher_course_details->links('tutors.pagination') }}

          @include('teachers.documents.modal_exercise_teacher_document', ['units' => $units])
          @include('teachers.documents.modal_test_teacher_document', ['chapters' => $chapters])
          @include('teachers.documents.modal_exam_teacher_document', ['chapters' => $chapters])
          @include('teachers.documents.modal_delete_confirm')
        </div>
        <div class="text-center my-3">
          <a class="btn btn-primary"
            href="{{ route('teachers.createTeacherDocument', ['teacher_online_course_id' => $teacher_online_course->id]) }}">
            <i class="fas fa-save"></i> Thêm mới tài liệu</a>
        </div>
      </div>
    </div>

  </section>
@endsection

@push('script')
  <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>

  <script>
    $(document).ready(function() {
      $(".teacherDocument-wrap").on("click", "a.deleteRowBtn", function(e) {
        e.preventDefault();
        let url = $(this).attr('href');
        let userId = $(this).data('id');
        $('form.deleteConfirm').attr('action', url);
        // let msg = 'Are you sure delete this user with user_id=' + userId + ' ?';
        // $('.modal .modal-body p').text(msg);
      });
    });
  </script>
@endpush