@extends('layouts.main', ['title' => 'Gia sư | Học viên', 'sidebarSelected' => 'students'])

@push('style')
  @vite(['resources/css/layout/tutor/breadcrumb.css', 'resources/css/tutor.css'])
@endpush
@php
  // $fake_students = [1, 2, 3, 4, 5];
@endphp
@section('content')
  <section class="tutor-wrap">
    <div class="breadcrumb-tutor-wrap pb-2 pt-3">
      <nav aria-label="breadcrumb-tutor">
        <ol class="breadcrumb-tutor d-flex">
          <li class="breadcrumb-tutor-item">
            <a href="{{ route('tutors.dashboard') }}"
              class="breadcrumb-tutor-link text-capitalize text-decoration-none">Dashboard</a>
          </li>
          <span class="breadcrumb-tutor-separation fw-light">/</span>
          <li class="breadcrumb-tutor-item active fw-semibold text-capitalize text-decoration-none text-neutral-05"
            aria-current="page">
            Học viên
          </li>
        </ol>
      </nav>
    </div>
    <section class="tutor-content-wrap">
      <div class="table-wrap table-students-wrap bg-white py-4">
        <div class="col-sm-12 table-responsive">
          <table class="table-hover table-w-1200 table">
            <thead>
              <tr>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 20%">Học Viên
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 25%">Địa Chỉ
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 10%">Môn Học
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 15%">Số ĐT
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 18%">Ngày -
                  Giờ
                </th>
                <th scope="col" class="text-blue fw-600 px-1 py-3 text-center align-middle" style="width: 12%">Số Buổi
                  Đã Dạy
                </th>
              </tr>
            </thead>
            <tbody>
              @foreach ($hire_tutors as $hire_tutor)
                <tr class="text-neutral-04 fs-14 fw-500">
                  <td class="align-middle">
                    <div class="d-flex py-2">
                      <img
                        src="{{ $hire_tutor->student->user->avatar ? Storage::url($hire_tutor->student->user->avatar) : '/img/avatardefault.jpg' }}"
                        alt="Avatar" class="user-avatar rounded-circle">
                      <div class="d-flex flex-column">
                        <p class="fs-13 fw-600 mb-0">{{ $hire_tutor->student->user->fullname }}</p>
                        <span
                          class="fs-10">{{ getGenderAndAge($hire_tutor->student->gender, $hire_tutor->student->user->date_birth) }}</span>
                      </div>
                    </div>
                  </td>
                  <td class="text-center align-middle">
                    <span>
                      {{ $hire_tutor->student->address }}
                    </span>
                  </td>
                  <td class="text-center align-middle">
                    <span class="text-capitalize">
                      {{ getTutorInfoSkill($hire_tutor->tutor_info) }}
                    </span>
                  </td>
                  <td class="text-center align-middle">
                    <span>
                      {{ $hire_tutor->student->user->phone }}
                    </span>
                  </td>
                  <td class="text-center align-middle">
                    @if ($hire_tutor->total_extend_time === null)
                      <span>
                        {{ getDateRange($hire_tutor->start_date, $hire_tutor->package_time->time) }}
                      @else
                        <span>
                          {{ getDateRange($hire_tutor->start_date, $hire_tutor->package_time->time + countExtendHireTutor($hire_tutor->total_extend_time)) }}
                    @endif
                    <br>
                    {{ getStudentSchedules($hire_tutor->id) }}
                    </span>
                  </td>
                  <td class="text-center align-middle">
                    <span class="label label-success">
                      {{ countTeachingShifts($hire_tutor->id) }}
                    </span>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        {{ $hire_tutors->links('tutors.pagination-request-manager') }}
      </div>
    </section>
  </section>
@endsection

@push('script')
@endpush