@extends('layouts.main', ['title' => 'Giáo Viên Online | Học viên đang dạy', 'sidebarSelected' => 'students', 'isTeacher' => true])
@push('style')
  @vite(['resources/css/teachers/teacher.css'])
@endpush
@php
  $fake_students = [1, 2, 3, 4];
@endphp
@section('content')
  <section class="teacher-wrap mx-2 px-4 py-3">
    <div class="breadcrumb-main pb-2">
      <nav aria-label="breadcrumb-container">
        <ol class="breadcrumb-group d-flex align-items-center gap-2">
          <li class="breadcrumb-item">
            <a href="{{ route('teachers.dashboard') }}"
              class="breadcrumb-link text-capitalize text-decoration-none text-neutral-06 fs-14">Dashboard</a>
          </li>
          <span class="breadcrumb-separation fw-light">/</span>
          <li class="breadcrumb-item active fw-semibold text-capitalize text-decoration-none text-neutral-05 fs-14"
            aria-current="page">
            Học viên
          </li>
        </ol>
      </nav>
    </div>
    <section class="teacher-group">
      <div class="table-wrap table-students-wrap my-2 bg-white py-4">
        <div class="col-sm-12 table-responsive">
          <table class="table-hover table-w-1200 table">
            <thead>
              <tr class="border-bottom">
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 5%">#
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 24%">Học Viên
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 23%">Địa Chỉ
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 15%">Thời
                  gian dạy
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 15%">Khóa học
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 8%">SĐT
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 10%">Số buổi
                  đã
                  dạy
                </th>
              </tr>
            </thead>
            <tbody>
              @foreach ($online_class_students as $online_class_student)
                @if ($online_class_student->user->student)
                  <tr class="text-neutral-04 fs-14 fw-500">
                    <td class="fs-6 text-center align-middle">
                      <span>{{ $loop->index + 1 }}</span>
                    </td>
                    <td class="px-0 align-middle">
                      <div class="d-flex py-2">
                        <img
                          src="{{ $online_class_student->user->avatar ? Storage::url($online_class_student->user->avatar) : '/img/avatardefault.jpg' }}"
                          alt="Avatar" class="user-avatar rounded-circle">
                        <div class="d-flex flex-column align-items-start" style="width: calc(100% - 50px);">
                          <p class="fs-6 fw-600 mb-0 two-lines">{{ $online_class_student->user->fullname }}</p>
                          <span
                            class="fs-12">{{ getGenderAndAge($online_class_student->user->student->gender, $online_class_student->user->date_birth) }}</span>
                        </div>
                      </div>
                    </td>
                    <td class="text-center align-middle">
                      <span>
                        {{ $online_class_student->user->student->address }}
                      </span>
                    </td>
                    <td class="text-center align-middle">
                      <div class="d-flex flex-column">
                        <span>
                          {{ getFormatDateRange($online_class_student->teacher_online_course->start_day, $online_class_student->teacher_online_course->end_day) }}
                        </span>
                        <span>
                          {{ getLabelByTeacherSchedules($online_class_student->teacher_online_course->teaching_day) }}({{ getLabelTimeRange($online_class_student->teacher_online_course->start_time, $online_class_student->teacher_online_course->end_time) }})
                        </span>
                      </div>
                    </td>
                    <td class="text-center align-middle">
                      <div class="d-flex flex-column">
                        <span>
                          {{ $online_class_student->teacher_online_course->name }}
                        </span>
                        <span class="text-capitalize">
                          {{ !is_null($online_class_student->teacher_online_course->subject_id) ? $online_class_student->teacher_online_course->subject->name : $online_class_student->teacher_online_course->subject_name }},
                          {{ $online_class_student->teacher_online_course->grade->name }}
                        </span>
                      </div>
                    </td>
                    <td class="text-center align-middle">
                      <span>
                        {{ $online_class_student->user->phone }}
                      </span>
                    </td>
                    <td class="text-center align-middle">
                      <span class="label label-success">
                        {{ countTeachingShiftOfTeacherOnline($online_class_student->teacher_online_course->teaching_day, $online_class_student->teacher_online_course->start_day, $online_class_student->teacher_online_course->end_day, true) }}
                      </span>
                    </td>
                  </tr>
                @endif
              @endforeach

            </tbody>
          </table>
        </div>
        @if ($online_class_students->total() > 10)
          {{ $online_class_students->links('tutors.pagination-request-manager') }}
        @endif
      </div>
    </section>
  </section>
@endsection

@push('script')
@endpush