@extends('layouts.main', ['title' => 'Giáo Viên Online | Học viên đang dạy', 'sidebarSelected' => 'dashboard', 'isTeacher' => true])
@push('style')
  @vite(['resources/css/teachers/teacher.css', 'resources/css/teachers/dashboard_teacher.css'])
@endpush

@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">
            <a href="{{ route('teachers.viewListStudent') }}"
              class="breadcrumb-link text-capitalize text-decoration-none text-neutral-06 fs-14">Tất cả học viên</a>
          </li>
          <li class="breadcrumb-item active fw-semibold text-capitalize text-decoration-none text-neutral-05 fs-14"
            aria-current="page">
            Học viên theo học khóa học
          </li>
        </ol>
      </nav>
    </div>
    <section class="teacher-group">
      <div class="d-flex align-items-center justify-content-between px-3">
        <div class="d-flex fs-20 fw-600">
          {{ $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 }}
        </div>
        <div class="d-flex flex-column align-items-end">
          <span class="fw-500">Tổng học viên</span>
          <span class="fw-600 fs-20">
            {{ isset($online_class_students) ? $online_class_students->total() : 0 }}
          </span>
        </div>
      </div>
      <div class="table-wrap table-students-wrap my-2 bg-white py-4">
        <div class="col-sm-12 table-responsive">
          <table class="table-w-1200 table">
            <thead>
              <tr class="border-bottom">
                <th scope="col" class="text-paragraph fw-500 px-1 py-3 text-center align-middle" style="width: 10%">ID
                </th>
                <th scope="col" class="text-paragraph fw-500 px-1 py-3 text-center align-middle" style="width: 22%">
                  Học Viên
                </th>
                <th scope="col" class="text-paragraph fw-500 px-1 py-3 text-center align-middle" style="width: 22%">
                  Email
                </th>
                <th scope="col" class="text-paragraph fw-500 px-1 py-3 text-center align-middle" style="width: 16%">Số
                  Điện Thoại
                </th>
                <th scope="col" class="text-paragraph fw-500 px-1 py-3 text-center align-middle" style="width: 18%">
                  Hình thức mua
                </th>
                <th scope="col" class="text-paragraph fw-500 px-1 py-3 text-center align-middle" style="width: 12%">
                  Kết quả học tập
                </th>
              </tr>
            </thead>
            <tbody>
              @if (isset($online_class_students) && $online_class_students->total() > 0)
                @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>{{ $online_class_student->user->id_code }}</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">
                            <p class="fs-6 fw-600 mb-0">{{ $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->email }}
                        </span>
                      </td>
                      <td class="text-center align-middle">
                        <span>
                          {{ $online_class_student->user->phone }}
                        </span>
                      </td>
                      <td class="text-center align-middle">
                        <span class="text-capitalize">
                          {{ $online_class_student->purchase_option }}
                        </span>
                      </td>
                      <td class="text-center align-middle">
                        <div class="d-flex align-items-center justify-content-center">
                          <a href={{ route('teachers.viewStudyNotebook', ['id' => $teacher_online_course->id, 'user_id' => $online_class_student->user->id]) }}
                            class="btn btn-action rounded-circle p-0 d-flex align-items-center justify-content-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"
                              fill="none">
                              <path
                                d="M17.25 4.00252V13.055C17.25 13.775 16.665 14.45 15.945 14.54L15.6975 14.57C14.0625 14.7875 11.5425 15.62 10.1025 16.415C9.90748 16.5275 9.58501 16.5275 9.38251 16.415L9.35248 16.4C7.91248 15.6125 5.40002 14.7875 3.77252 14.57L3.55499 14.54C2.83499 14.45 2.25 13.775 2.25 13.055V3.99501C2.25 3.10251 2.97748 2.42752 3.86998 2.50252C5.44498 2.63002 7.82998 3.42504 9.16498 4.25754L9.35248 4.37001C9.56998 4.50501 9.93002 4.50501 10.1475 4.37001L10.275 4.28752C10.7475 3.99502 11.3475 3.70252 12 3.44002V6.50003L13.5 5.50252L15 6.50003V2.58505C15.2025 2.54755 15.3975 2.52503 15.5775 2.51003H15.6225C16.515 2.43503 17.25 3.10252 17.25 4.00252Z"
                                stroke="#7A7E84" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                              <path d="M9.75 4.61743V15.8674" stroke="#7A7E84" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                              <path
                                d="M15 2.58496V6.49994L13.5 5.50243L12 6.49994V3.43993C12.9825 3.04993 14.0775 2.73496 15 2.58496Z"
                                stroke="#7A7E84" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                          </a>
                        </div>
                      </td>
                    </tr>
                  @endif
                @endforeach
              @else
                <tr>
                  <td colspan="6" class="text-center text-danger border-bottom-0">Không có dữ liệu</td>
                </tr>
              @endif
            </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