@php
  $infor = getMenuData(); //for registering teachingClass
@endphp
@extends('layouts.main', ['title' => 'Giáo Viên Online | Dashboard', 'sidebarSelected' => 'dashboard', 'isTeacher' => true])
@push('style')
  <link rel="stylesheet" href="{{ URL::asset('/plugins/daterangepicker/daterangepicker.css') }}">
  <link rel="stylesheet" href="{{ URL::asset('/css/select2.min.css') }}">
  <link rel="stylesheet" href="{{ URL::asset('/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
@endpush

@push('script')
  <script src="{{ asset('/plugins/fullcalendar/dist/index.global.min.js') }}"></script>
  @vite('resources/js/calendar.js')
  @vite(['resources/css/schedule.css', 'resources/css/teachers/dashboard_teacher.css'])
@endpush
@section('content')
  <div class="teacherWrap p-sm-2 p-md-4 m-md-2">
    @include('custom_errors.session-errors')
    <!-- Info boxes -->
    <div class="row my-3">
      <div class="col-12 col-sm-6 col-md-3 d-flex align-items-stretch">
        <div class="info-box itemShadow d-flex flex-column">
          <i class="iconTotalIncome"></i>
          <div class="contentInfor">
            <p class="fs20 my-2"> {{ number_format($statistic['expected_income'], 0, '.', ',') }} VND
            </p>
            <p class="fs12 text-warning">Thu nhập tạm tính</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-3 d-flex align-items-stretch">
        <div class="info-box itemShadow d-flex flex-column">
          <div class="d-flex justify-content-between flex-wrap">
            <i class="iconWithdrawal mb-2"></i>
            @if (Auth::user()->role_id == \App\Enums\UserRole::TEACHER->value)
              <button type="button" class="fw-600 fs-12 text-capitalize btn-withdrawal-request px-3"
                data-bs-toggle="modal" data-bs-target="#withdrawalRequestModal">
                Yêu cầu rút tiền
              </button>
            @endif
          </div>

          <div class="contentInfor">
            <p class="fs20 my-2">{{ number_format($statistic['withdrawn'], 0, '.', ',') }} VND
            </p>
            <p class="fs12 textGreen">Số tiền có thể rút</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-3 d-flex align-items-stretch">
        <div class="info-box itemShadow d-flex flex-column">
          <div class="d-flex justify-content-between flex-wrap">
            <i class="iconWebinar mb-2"></i>
            @if (Auth::user()->role_id == \App\Enums\UserRole::TEACHER->value)
              <button type="button" class="fw-600 fs-12 text-capitalize btn-withdrawal-request px-3"
                data-bs-toggle="modal" data-bs-target="#registerClassNewModal">
                Đăng Ký Lớp Dạy
              </button>
            @endif
          </div>
          <div class="contentInfor">
            <p class="fs20 my-2">{{ $statistic['grades'] }}</p>
            <p class="fs12 text-danger">Số lớp dạy</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-3 d-flex align-items-stretch">
        <div class="info-box itemShadow d-flex flex-column">
          <i class="iconReading"></i>
          <div class="contentInfor">
            <p class="fs20 my-2">{{ $statistic['students'] }}</p>
            <p class="fs12 textBlue">Học viên theo học</p>
          </div>
        </div>
      </div>

    </div>
    <!-- /.row -->

    <div class="row pb-4">
      <div class="col">
        <div class="card teachInfo teacherOnline px-2">
          <div class="card-header border-bottom-0 my-4">
            <h3 class="card-title fs20">Thông tin các lớp dạy</h3>
          </div>
          <!-- /.card-header -->
          <div class="card-body table-responsive p-0">
            <table class="table">
              <thead class="text-center">
                <tr>
                  <th style="min-width: 20px">Mã lớp</th>
                  <th>Tên khóa học</th>
                  <th>Trạng thái</th>
                  <th>Số buổi dạy</th>
                  <th>Số học viên</th>
                  <th>Thời gian dạy</th>
                  <th>Link / Địa chỉ dạy</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {{-- need to get data from backend --}}
                @foreach ($teacher_online_courses as $teacher_online_course)
                  <tr>
                    <td>{{ $teacher_online_course->id_code }}</td>
                    <td class="text-center">{{ $teacher_online_course->name }} -
                      <span class="text-capitalize">
                        {{ !is_null($teacher_online_course->subject_id) ? $teacher_online_course->subject->name : $teacher_online_course->subject_name }}</span>,
                      {{ $teacher_online_course->grade->name }}
                    </td>
                    <td>
                      @if ($teacher_online_course->type == \App\Enums\TeacherCourseType::PUBLIC->value)
                        <div
                          class="d-flex align-items-center justify-content-center rounded-25 bg-blue-custom gap-2 px-1 py-3">
                          <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"
                            fill="none">
                            <circle cx="4.125" cy="4.39258" r="4" fill="#004DA9" />
                          </svg>
                          <span class="fw-500 nowrap">Siêu học</span>
                        </div>
                      @else
                        <div
                          class="d-flex align-items-center justify-content-center rounded-25 bg-red-main gap-2 px-1 py-3">
                          <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"
                            fill="none">
                            <circle cx="4.625" cy="4.39258" r="4" fill="#CC3A3D" />
                          </svg>
                          <span class="fw-500 nowrap">Cá nhân</span>
                        </div>
                      @endif
                    </td>
                    <td class="teachType text-center">
                      @if (collect($teacher_online_course->teacher_online_class_students)->count() == 0)
                        {{ countTeachingShiftOfTeacherOnline($teacher_online_course->teaching_day, $teacher_online_course->start_day, $teacher_online_course->end_day, false) }}
                      @else
                        {{ countTeachingShiftOfTeacherOnline($teacher_online_course->teaching_day, $teacher_online_course->start_day, $teacher_online_course->end_day, true) }}
                      @endif
                    </td>
                    <td class="teachType text-center">
                      {{ collect($teacher_online_course->teacher_online_class_students)->count() }}</td>
                    <td>
                      @if ($teacher_online_course->type == \App\Enums\TeacherCourseType::PUBLIC->value)
                        <div class="info-box teachNext teacherSchedule bg-blue-custom rounded-35 border-0"
                          data-bs-toggle="modal" data-bs-target="#calendarModalTutor"
                          data-teacher_online_course_id="{{ $teacher_online_course->id }}">
                          <span class="info-box-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"
                              fill="none">
                              <path
                                d="M19.75 4.39258H5.75C4.64543 4.39258 3.75 5.28801 3.75 6.39258V20.3926C3.75 21.4971 4.64543 22.3926 5.75 22.3926H19.75C20.8546 22.3926 21.75 21.4971 21.75 20.3926V6.39258C21.75 5.28801 20.8546 4.39258 19.75 4.39258Z"
                                stroke="#004DA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                              <path d="M3.75 10.3926H21.75" stroke="#004DA9" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                              <path d="M16.75 2.39258V6.39258" stroke="#004DA9" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                              <path d="M8.75 2.39258V6.39258" stroke="#004DA9" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                            </svg>
                          </span>
                          <div class="info-box-content">
                            <span
                              class="info-box-text-time">{{ getLabelByTeacherSchedules($teacher_online_course->teaching_day) . ' ' }}({{ getLabelTimeRange($teacher_online_course->start_time, $teacher_online_course->end_time) }})
                            </span>
                            <span class="info-box-text-day">
                              {{ getFormatDateRange($teacher_online_course->start_day, $teacher_online_course->end_day) }}
                            </span>
                          </div>
                        </div>
                      @else
                        <div class="info-box teachNext teacherSchedule bg-red-main rounded-35 border-0"
                          data-bs-toggle="modal" data-bs-target="#calendarModalTutor"
                          data-teacher_online_course_id="{{ $teacher_online_course->id }}">
                          <span class="info-box-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"
                              fill="none">
                              <path
                                d="M19.75 4.39258H5.75C4.64543 4.39258 3.75 5.28801 3.75 6.39258V20.3926C3.75 21.4971 4.64543 22.3926 5.75 22.3926H19.75C20.8546 22.3926 21.75 21.4971 21.75 20.3926V6.39258C21.75 5.28801 20.8546 4.39258 19.75 4.39258Z"
                                stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                              <path d="M3.75 10.3926H21.75" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                              <path d="M16.75 2.39258V6.39258" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                              <path d="M8.75 2.39258V6.39258" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                            </svg>
                          </span>
                          <div class="info-box-content">
                            <span
                              class="info-box-text-time">{{ getLabelByTeacherSchedules($teacher_online_course->teaching_day) . ' ' }}({{ getLabelTimeRange($teacher_online_course->start_time, $teacher_online_course->end_time) }})
                            </span>
                            <span class="info-box-text-day">
                              {{ getFormatDateRange($teacher_online_course->start_day, $teacher_online_course->end_day) }}
                            </span>
                          </div>
                        </div>
                      @endif
                    </td>
                    <td class="text-center">
                      <div class="d-flex justify-content-between align-items-center flex-column"
                        style="min-width: 200px;">
                        @if ($teacher_online_course->teach_address)
                          <span class="text-address">{{ $teacher_online_course->teach_address }}</span>
                        @endif
                        @if ($teacher_online_course->teach_link)
                          @if (Auth::check() && Auth::user()->role_id == \App\Enums\UserRole::TEACHER->value)
                            <a href="{{ $teacher_online_course->teach_link }}" class="fs13" target="_blank">Link</a>
                          @else
                            <span class="text-address">{{ $teacher_online_course->teach_link }}</span>
                          @endif
                        @endif
                      </div>
                    </td>
                    <td class="text-center">
                      <div class="d-flex gap-2">
                        @if (Auth::user()->role_id == \App\Enums\UserRole::TEACHER->value)
                          <a href="{{ route('teachers.indexTeacherDocument', ['teacher_online_course_id' => $teacher_online_course->id]) }}"
                            class="d-flex align-items-center justify-content-center btn btn-action rounded-circle p-0">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                              fill="none">
                              <path
                                d="M15.7141 11.9V15.7143C15.7141 16.0932 15.5636 16.4566 15.2957 16.7245C15.0277 16.9924 14.6644 17.1429 14.2855 17.1429H4.28551C3.90662 17.1429 3.54326 16.9924 3.27535 16.7245C3.00744 16.4566 2.85693 16.0932 2.85693 15.7143V5.71432C2.85693 5.33544 3.00744 4.97208 3.27535 4.70417C3.54326 4.43626 3.90662 4.28575 4.28551 4.28575H8.09979M14.2855 2.85718L17.1426 5.71432L9.99979 12.8572H7.14265V10L14.2855 2.85718Z"
                                stroke="#7A7E84" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                          </a>
                        @endif
                        <a class="d-flex align-items-center justify-content-center btn btn-action rounded-circle p-0"
                          href="{{ route('teachers.listStudentsByTeacherOnlineCourseId', ['teacher_online_course_id' => $teacher_online_course->id]) . '?id=' . Request::query('id') }}">
                          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                            fill="none">
                            <path
                              d="M16 11.4048C17.0561 12.1939 18 14.1806 18 15.4047C18 15.7861 17.7218 16.0953 17.3785 16.0953H17M13 8.17043C13.6832 7.77522 14.1429 7.03654 14.1429 6.1905C14.1429 5.34446 13.6832 4.60578 13 4.21057M2.62148 16.0953H13.569C13.9122 16.0953 14.1905 15.7861 14.1905 15.4047C14.1905 13.0076 12.1878 11.0643 8.09524 11.0643C4.00272 11.0643 2 13.0076 2 15.4047C2 15.7861 2.27824 16.0953 2.62148 16.0953ZM10.381 6.1905C10.381 7.45286 9.3576 8.47621 8.09524 8.47621C6.83287 8.47621 5.80952 7.45286 5.80952 6.1905C5.80952 4.92813 6.83287 3.90479 8.09524 3.90479C9.3576 3.90479 10.381 4.92813 10.381 6.1905Z"
                              stroke="#7A7E84" stroke-linecap="round" />
                          </svg>
                        </a>
                        @if (Auth::user()->role_id == \App\Enums\UserRole::TEACHER->value)
                          <button type="button"
                            class="d-flex align-items-center justify-content-center btn btn-danger rounded-5 btnNotify p-0"
                            data-bs-toggle="modal" data-bs-target="#notifyClassModal"
                            data-teacher_online_course_id="{{ $teacher_online_course->id }}"
                            {{ collect($teacher_online_course->teacher_online_class_students)->count() == 0 ? 'disabled' : '' }}>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                              xmlns="http://www.w3.org/2000/svg">
                              <path
                                d="M18.387 12.0009C19.198 15.7999 21 17.0009 21 17.0009H3C3 17.0009 6 15.0009 6 8.0009C6.00001 7.12835 6.19033 6.2663 6.5577 5.47485C6.92506 4.6834 7.46062 3.9816 8.12705 3.41838C8.79347 2.85515 9.57472 2.44406 10.4163 2.21375C11.2579 1.98344 12.1397 1.93947 13 2.0849"
                                stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                              <path
                                d="M13.7295 21.001C13.5537 21.3041 13.3014 21.5556 12.9978 21.7305C12.6941 21.9054 12.3499 21.9974 11.9995 21.9974C11.6492 21.9974 11.3049 21.9054 11.0013 21.7305C10.6977 21.5556 10.4453 21.3041 10.2695 21.001"
                                stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                              <path d="M18 2.00098V8.00098" stroke="white" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                              <path d="M21 5.00098H15" stroke="white" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                            </svg>
                          </button>
                        @endif
                      </div>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
    </div>
    @if ($teacher_online_courses->total() > 10)
      {{ $teacher_online_courses->links('tutors.pagination-request-manager') }}
    @endif
  </div>
  @include('modals.with_drawal_request')
  {{-- @include('teachers.modal_register_online_course') --}}
  @if (Auth::check() && Auth::user()->role_id == \App\Enums\UserRole::TEACHER->value)
    @include('teachers.modal_register_online_course_new')
  @endif
  @include('teachers.modal_notify_online_course')
  @include('modals.calendar_event_teacher')
  @include('modals.show_await_approval_tutor')
@endsection

@push('script')
  @vite('resources/js/teacher_dashboard.js')
@endpush