@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,
      ];
  }
@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">
    <div class="row">
      <div class="col p-2 p-lg-5">
        <form class="teacherDocumentData"
          action="{{ route('teachers.updateTeacherDocument', ['teacher_course_detail_id' => $teacher_course_detail->id]) }}"
          method="POST" enctype="multipart/form-data">
          @method('PATCH')
          @csrf
          <div class="documentWrap table-responsive">

            @if ($errors->has('duplicate_names'))
              <div class="alert alert-danger">
                <p><strong>Bài học này đã bị trùng tên:</strong></p>
                <ul>
                  @foreach ($errors->get('duplicate_names') as $duplicateName)
                    <li>{{ $duplicateName }}</li>
                  @endforeach
                </ul>
              </div>
            @else
              @if ($errors->any())
                <div class="alert alert-danger">
                  <ul>
                    @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                    @endforeach
                  </ul>
                </div>
              @endif
            @endif
            @include('custom_errors.session-errors')

            <table class="table table-bordered text-center w-100 mb-0">
              <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>
                </tr>
              </thead>
              <tbody id="lessons-body">
                @for ($i = 0; $i < 1; $i++)
                  <tr class="lesson-row">
                    <td class="align-middle"><input type="text" class="form-control"
                        name="lessons[{{ $i }}][lesson_name]" placeholder="Nhập tên bài học"
                        value="{{ $teacher_course_detail->name }}"></td>
                    <td class="align-middle" style="max-width:200px">
                      <div class="inputFileWrap">
                        <label for="file-upload-{{ $i }}" class="custom-file-upload">
                          <span id="file-name-{{ $i }}">Tải file</span>
                          <svg xmlns="http://www.w3.org/2000/svg" width="19" height="18" viewBox="0 0 19 18"
                            fill="none">
                            <path
                              d="M3.2002 11.4149V14.1943C3.2002 14.6156 3.36613 15.0195 3.6615 15.3174C3.95687 15.6152 4.35748 15.7826 4.7752 15.7826H14.2252C14.6429 15.7826 15.0435 15.6152 15.3389 15.3174C15.6343 15.0195 15.8002 14.6156 15.8002 14.1943V11.4149M9.53272 11.2175L9.53272 2.21753M9.53272 2.21753L5.93271 5.65639M9.53272 2.21753L13.1327 5.65639"
                              stroke="#004DA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
                        </label>
                        <input id="file-upload-{{ $i }}" type="file" class="d-none file-input"
                          name="lessons[{{ $i }}][document_path]" accept=".pdf">

                        <p class="file-selected text-muted" id="selected-file-{{ $i }}">Định dạng PDF - Max
                          100MB</p>
                        @error('lessons.' . $i . '.document_path')
                          <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                      </div>
                      <a href="{{ getFilePath($teacher_course_detail->file)['file'] }}"
                        target="_bank">{{ getFilePath($teacher_course_detail->file)['name'] }}</a>
                    </td>
                    <td class="align-middle" style="min-width:200px">
                      <input type="text" class="form-control" name="lessons[{{ $i }}][video_link]"
                        placeholder="Nhập link youtube"
                        value="{{ optional(json_decode($teacher_course_detail->video, true))[0] ?? '' }}">
                    </td>
                    <td class="align-middle">
                      <div class="d-flex justify-content-center">
                        <button type="button" class="btn btnData btn-sm btn-exercise-modal d-inline-block text-truncate"
                          data-row-index="{{ $i }}"
                          data-teacher_course_exercise="{{ $teacher_course_detail->teacher_course_exercise }}">
                          {{ $teacher_course_detail->teacher_course_exercise ? 'Chỉnh sửa' : 'Nhập liệu' }} <span><svg
                              xmlns="http://www.w3.org/2000/svg" width="19" height="18" viewBox="0 0 19 18"
                              fill="none">
                              <path
                                d="M9.9026 14.4323L10.4593 13.8083C11.1424 13.0428 12.3679 13.1423 12.9185 14.008C13.4314 14.8145 14.5458 14.9674 15.257 14.3288L16.2661 13.4228M2.73438 14.6025L6.00886 13.9428C6.1827 13.9077 6.34231 13.8221 6.46766 13.6967L13.7979 6.36243C14.1494 6.01078 14.1491 5.44079 13.7974 5.08945L12.2446 3.53839C11.893 3.18719 11.3233 3.18743 10.972 3.53892L3.64095 10.874C3.51584 10.9991 3.43041 11.1584 3.39535 11.3319L2.73438 14.6025Z"
                                stroke="#004DA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg></span>

                        </button>
                        @if ($teacher_course_detail->teacher_course_exercise)
                          <a class="btn btn-light deleteRowBtn mx-1 d-flex align-items-center justify-content-center"
                            href="{{ route('teachers.deleteTeacherDocumentType', ['id' => $teacher_course_detail->teacher_course_exercise->id, 'type' => 1]) }}"
                            data-id="{{ $teacher_course_detail->teacher_course_exercise->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>
                        @endif
                      </div>
                      <textarea hidden class="form-control" name="lessons[{{ $i }}][exercise_data]"></textarea> {{-- Hidden textarea để lưu data bài tập --}}
                    </td>
                    <td class="align-middle">
                      <div class="d-flex justify-content-center">
                        <button type="button" class="btn btnData btn-sm btn-test-modal d-inline-block text-truncate"
                          data-row-index="{{ $i }}"
                          data-teacher_course_test="{{ $teacher_course_detail->teacher_course_test }}">
                          {{ $teacher_course_detail->teacher_course_test ? 'Chỉnh sửa' : 'Nhập liệu' }} <span><svg
                              xmlns="http://www.w3.org/2000/svg" width="19" height="18" viewBox="0 0 19 18"
                              fill="none">
                              <path
                                d="M9.9026 14.4323L10.4593 13.8083C11.1424 13.0428 12.3679 13.1423 12.9185 14.008C13.4314 14.8145 14.5458 14.9674 15.257 14.3288L16.2661 13.4228M2.73438 14.6025L6.00886 13.9428C6.1827 13.9077 6.34231 13.8221 6.46766 13.6967L13.7979 6.36243C14.1494 6.01078 14.1491 5.44079 13.7974 5.08945L12.2446 3.53839C11.893 3.18719 11.3233 3.18743 10.972 3.53892L3.64095 10.874C3.51584 10.9991 3.43041 11.1584 3.39535 11.3319L2.73438 14.6025Z"
                                stroke="#004DA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg></span>
                        </button>
                        @if ($teacher_course_detail->teacher_course_test)
                          <a class="btn btn-light deleteRowBtn mx-1 d-flex align-items-center justify-content-center"
                            href="{{ route('teachers.deleteTeacherDocumentType', ['id' => $teacher_course_detail->teacher_course_test->id, 'type' => 2]) }}"
                            data-id="{{ $teacher_course_detail->teacher_course_test->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>
                        @endif
                      </div>
                      <textarea hidden class="form-control" name="lessons[{{ $i }}][test_data]"></textarea> {{-- Hidden textarea để lưu data bài kiểm tra --}}
                    </td>
                    <td class="align-middle">
                      <div class="d-flex justify-content-center">
                        <button type="button" class="btn btnData btn-sm btn-exam-modal d-inline-block text-truncate"
                          data-row-index="{{ $i }}"
                          data-teacher_course_exam="{{ $teacher_course_detail->teacher_course_exam }}">
                          {{ $teacher_course_detail->teacher_course_exam ? 'Chỉnh sửa' : 'Nhập liệu' }} <span><svg
                              xmlns="http://www.w3.org/2000/svg" width="19" height="18" viewBox="0 0 19 18"
                              fill="none">
                              <path
                                d="M9.9026 14.4323L10.4593 13.8083C11.1424 13.0428 12.3679 13.1423 12.9185 14.008C13.4314 14.8145 14.5458 14.9674 15.257 14.3288L16.2661 13.4228M2.73438 14.6025L6.00886 13.9428C6.1827 13.9077 6.34231 13.8221 6.46766 13.6967L13.7979 6.36243C14.1494 6.01078 14.1491 5.44079 13.7974 5.08945L12.2446 3.53839C11.893 3.18719 11.3233 3.18743 10.972 3.53892L3.64095 10.874C3.51584 10.9991 3.43041 11.1584 3.39535 11.3319L2.73438 14.6025Z"
                                stroke="#004DA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg></span>
                        </button>
                        @if ($teacher_course_detail->teacher_course_exam)
                          <a class="btn btn-light deleteRowBtn mx-1 d-flex align-items-center justify-content-center"
                            href="{{ route('teachers.deleteTeacherDocumentType', ['id' => $teacher_course_detail->teacher_course_exam->id, 'type' => 3]) }}"
                            data-id="{{ $teacher_course_detail->teacher_course_exam->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>
                        @endif
                      </div>
                      <textarea hidden class="form-control" name="lessons[{{ $i }}][exam_data]" placeholder="Chỉnh sửa"></textarea>
                    </td>
                  </tr>
                @endfor
              </tbody>
            </table>
            @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])

          </div>
          <div class="text-start p-3"> {{-- colspan = 7 và thêm padding --}}
            <div class="float-end"> {{-- Float right để nút Lưu bên phải --}}
              <button type="submit" class="btn btn-danger fw-700" id="save-button">
                Lưu <span><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M6.9375 19.875V14.8125C6.9375 14.1912 7.44118 13.6875 8.0625 13.6875H15.9375C16.5588 13.6875 17.0625 14.1912 17.0625 14.8125V20.4375M14.8125 7.5L8.0625 7.5C7.44118 7.5 6.9375 6.99632 6.9375 6.375L6.9375 3M20.4351 6.93513L17.0649 3.56487C16.7032 3.20319 16.2127 3 15.7012 3H4.92857C3.86344 3 3 3.86344 3 4.92857V19.0714C3 20.1366 3.86344 21 4.92857 21H19.0714C20.1366 21 21 20.1366 21 19.0714V8.29883C21 7.78734 20.7968 7.2968 20.4351 6.93513Z"
                      stroke="white" stroke-width="2" stroke-linecap="round" />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </form>
        @include('teachers.documents.modal_delete_confirm')
      </div>
    </div>

  </section>
@endsection

@push('script')
  <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
  @vite(['resources/js/teacher_documents/exercises/handle_teacher_document.js'])
  @vite(['resources/js/teacher_documents/add_row_and_submit_teacher_document.js'])

  <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);
      });
    });
  </script>
@endpush