@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

@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 ? $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.storeTeacherDocument', ['teacher_online_course_id' => $teacher_online_course->id]) }}"
          method="POST" enctype="multipart/form-data">
          @csrf
          <div class="documentWrap table-responsive">
            @if ($errors->has('duplicate_names'))
              <div class="alert alert-danger">
                <p><strong>Các bài học sau đã 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>
                  <th>Action</th> {{-- Cột Action --}}
                </tr>
              </thead>
              <tbody id="lessons-body">
                @for ($i = 0; $i < 2; $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"></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>
                    </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">
                    </td>
                    <td class="align-middle">
                      <button type="button" class="btn btnData btn-sm btn-exercise-modal d-inline-block text-truncate"
                        data-row-index="{{ $i }}">
                        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>
                      <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">
                      <button type="button" class="btn btn-sm btnData btn-test-modal d-inline-block text-truncate"
                        data-row-index="{{ $i }}">
                        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>
                      <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">
                      <button type="button" class="btn btnData btn-sm btn-exam-modal d-inline-block text-truncate"
                        data-row-index="{{ $i }}">
                        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>
                      <textarea hidden class="form-control" name="lessons[{{ $i }}][exam_data]" placeholder="Nhập liệu"></textarea>
                    </td>
                    <td class="align-middle">
                      <button type="button" class="btn btn-light btn-sm delete-row-btn"
                        data-row-index="{{ $i }}">
                        <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>
                      </button>
                    </td>
                  </tr>
                @endfor
              </tbody>
              <tfoot class="weight-row">
                <tr class="bgColor">
                  <td colspan="3" class="text-end align-middle">Trọng số điểm (Đảm bảo đạt 100%)</td>
                  <td colspan="1" class="text-center align-middle"> {{-- colspan = 2 để footer trải dài hết chiều rộng --}}
                    <input type="number" class="form-control" name="exercise_weight"
                      value="{{ $teacher_online_course->exercise_weight }}" min="0" max="100">
                  </td>
                  <td colspan="1" class="text-center align-middle"> {{-- colspan = 2 để footer trải dài hết chiều rộng --}}
                    <input type="number" class="form-control" name="test_weight"
                      value="{{ $teacher_online_course->test_weight }}" min="0" max="100">
                  </td>
                  <td colspan="1" class="text-center align-middle"> {{-- colspan = 2 để footer trải dài hết chiều rộng --}}
                    <input type="number" class="form-control" name="exam_weight"
                      value="{{ $teacher_online_course->exam_weight }}" min="0" max="100">
                  </td>
                  <td colspan="1" class="text-center">

                  </td>
                </tr>

              </tfoot>
            </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 --}}
            <button type="button" id="add-row" class="btn btn-sm">
              Thêm
              dòng <span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                  fill="none">
                  <path
                    d="M13 7.5C13 6.94772 12.5523 6.5 12 6.5C11.4477 6.5 11 6.94772 11 7.5H13ZM11 16.5C11 17.0523 11.4477 17.5 12 17.5C12.5523 17.5 13 17.0523 13 16.5H11ZM16.5 13C17.0523 13 17.5 12.5523 17.5 12C17.5 11.4477 17.0523 11 16.5 11V13ZM7.5 11C6.94772 11 6.5 11.4477 6.5 12C6.5 12.5523 6.94772 13 7.5 13V11ZM20 12C20 16.4183 16.4183 20 12 20V22C17.5228 22 22 17.5228 22 12H20ZM12 20C7.58172 20 4 16.4183 4 12H2C2 17.5228 6.47715 22 12 22V20ZM4 12C4 7.58172 7.58172 4 12 4V2C6.47715 2 2 6.47715 2 12H4ZM12 4C16.4183 4 20 7.58172 20 12H22C22 6.47715 17.5228 2 12 2V4ZM11 7.5L11 12H13L13 7.5H11ZM11 12V16.5H13V12H11ZM16.5 11H12V13H16.5V11ZM12 11H7.5V13H12V11Z"
                    fill="#004DA9" />
                </svg>

              </span></button>
            <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"
                data-teacher_online_course_id="{{ $teacher_online_course->id }}">
                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>
      </div>
      </form>
    </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></script>
@endpush