@extends('layouts.main', ['title' => 'Gia sư | Dashboard', 'sidebarSelected' => 'dashboard'])

@push('script')
  <script src="{{ asset('/plugins/fullcalendar/dist/index.global.min.js') }}"></script>
  @vite('resources/js/calendar.js')
  @vite(['resources/css/schedule.css'])
@endpush

@php
  use Carbon\Carbon;
  use App\Enums\TeachType;
@endphp
@section('content')
  <!-- Info boxes -->
  <div class="tutor-wrap p-md-4 px-0">
    <div class="row my-3">
      @include('custom_errors.session-errors')
      <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"></i>
            @if (Auth::user()->role_id == \App\Enums\UserRole::TUTOR->value)
              <button type="button" class="fw-600 fs-12 text-capitalize btn-withdrawal-request p-md-2 p-lg-2"
                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">
          <i class="iconWebinar"></i>
          <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 đang dạy</p>
          </div>
        </div>
      </div>

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

    <div class="row pb-4">
      <div class="col">
        <div class="card teachInfo">
          <div class="card-header border-bottom-0 mt-4">
            <h3 class="card-title fs20">Thông tin các lớp đang dạy</h3>
          </div>
          <!-- /.card-header -->
          <div class="card-body table-responsive px-2 py-5">
            <table class="table">
              <thead class="text-center">
                <tr>
                  <th style="min-width: unset">#</th>
                  <th class="text-left">Học viên</th>
                  <th>Hình thức</th>
                  <th>Thời gian dạy</th>
                  <th class="w-25">Link / Địa chỉ dạy</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($hire_tutors as $hire_tutor)
                  <tr>
                    <td style="min-width: unset">{{ $loop->index + 1 }}</td>
                    <td>
                      <div class="d-flex align-items-center justify-content-start gap-2">
                        <div class="user-block">
                          <img class="img-circle"
                            src="{{ $hire_tutor->student->user->avatar ? Storage::url($hire_tutor->student->user->avatar) : '/img/avatardefault.jpg' }}"
                            alt="Avatar">
                        </div>
                        <div class="d-flex flex-column">
                          <span class="username">{{ $hire_tutor->student->user->fullname }}</span>
                          <span
                            class="description">{{ getGenderAndAge($hire_tutor->student->gender, $hire_tutor->student->user->date_birth) }}
                          </span>
                        </div>
                      </div>
                    </td>
                    <td class="teachType text-capitalize text-center">
                      {{ $hire_tutor->is_teach_online == TeachType::HOME->value ? TeachType::HOME->name() : TeachType::ONLINE->name() }},
                      <br> Môn {{ getTutorInfoSkill($hire_tutor->tutor_info) }}
                    </td>
                    <td>
                      <div class="info-box teachTime teachNext">
                        <span class="info-box-icon">
                          <svg width="14" height="15" viewBox="0 0 14 15" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                              d="M11.0833 2.72656H2.91667C2.27233 2.72656 1.75 3.2489 1.75 3.89323V12.0599C1.75 12.7042 2.27233 13.2266 2.91667 13.2266H11.0833C11.7277 13.2266 12.25 12.7042 12.25 12.0599V3.89323C12.25 3.2489 11.7277 2.72656 11.0833 2.72656Z"
                              stroke="#08A5D3" stroke-width="1.08333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M1.75 6.22656H12.25" stroke="#08A5D3" stroke-width="1.08333" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path d="M9.3335 1.55859V3.89193" stroke="#08A5D3" stroke-width="1.08333"
                              stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4.6665 1.55859V3.89193" stroke="#08A5D3" stroke-width="1.08333"
                              stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
                        </span>
                        <div class="info-box-content" data-bs-toggle="modal" data-bs-target="#calendarModalTutor"
                          data-hire_tutor_id="{{ $hire_tutor->id }}">
                          @if ($hire_tutor->total_extend_time === null)
                            <span
                              class="info-box-text fs-12">{{ getDateRange($hire_tutor->start_date, $hire_tutor->package_time->time) }}
                            @else
                              <span
                                class="info-box-text fs-12">{{ getDateRange($hire_tutor->start_date, $hire_tutor->package_time->time + countExtendHireTutor($hire_tutor->total_extend_time)) }}
                          @endif
                          </span>
                          <span class="info-box-text fs-12">{{ getStudentSchedules($hire_tutor->id) }}</span>
                        </div>

                        <!-- /.info-box-content -->
                      </div>
                    </td>
                    <td class="text-center">
                      @if ($hire_tutor->is_teach_online == 0)
                        <p class="fs-11 fw-500">{{ $hire_tutor->teaching_address }}</p>
                      @else
                        @if (Auth::user()->role_id == \App\Enums\UserRole::TUTOR->value)
                          <a href="{{ $hire_tutor->teaching_address ? $hire_tutor->teaching_address : '#' }}"
                            data-teaching-address="{{ $hire_tutor->teaching_address }}"
                            data-password="{{ $hire_tutor->password }}" data-hire_tutor_id="{{ $hire_tutor->id }}"
                            target="_blank"
                            class="fs-13 text-red-main fw-bold text-decoration-underline hover-text-primary {{ $hire_tutor->teaching_address ? '' : 'disableLink' }} update-teaching-link">Link</a>
                        @else
                          <span class="info-box-text">{{ $hire_tutor->teaching_address }}</span>
                        @endif
                      @endif
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
            {{ $hire_tutors->links('tutors.pagination-request-manager') }}
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
    </div>
    <div class="row pb-4">
      <div class="col">
        <div class="scheduleWrap m-5">
          <div class="d-flex justify-content-between my-3">
            <p class="titleFs24">Thời gian dạy</p>
          </div>
          <table class="table-bordered table border-0">
            <thead>
              <tr class="text-center">
                <th colspan="2" class="text-start align-middle">
                  @if (Auth::user()->role_id == \App\Enums\UserRole::TUTOR->value)
                    <form action="{{ route('tutors.updateSchedule') }}" method="post">
                      @method('PATCH')
                      @csrf()
                      @error('schedule_data')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                      <input type="hidden" name="schedule_data" value="">
                      <button type="submit" class="btn btn-success" action="show">Chỉnh sửa</button>
                    </form>
                  @endif
                </th>
                <th colspan="3"></th>
                <th><span class="dayName shiftName text-uppercase active" tab_id="1">Sáng</span></th>
                <th><span class="dayName shiftName text-uppercase" tab_id="2">Chiều</span></th>
                <th><span class="dayName shiftName text-uppercase" tab_id="3">Tối</span></th>
              </tr>
              <tr class="text-center">
                <th></th>
                @foreach (getMultiSelect() as $row)
                  <th><span class="dayName text-uppercase">{{ $row['text'] }}</span></th>
                @endforeach
              </tr>
            </thead>
            <tbody class="shifts shiftActive" id="shiftTab1">
              <tr class="trFirst">
                @for ($i = 0; $i <= 7; $i++)
                  <td></td>
                @endfor
              </tr>
              @for ($i = 0; $i < 10; $i++)
                <tr data_row={{ $i }}>
                  <td><span class="timeName"> {{ getScheduleFrom($i) }}</span></td>
                  @foreach (getMultiSelect() as $row)
                    <td><span class="selectedTime {{ getScheduleClassName($schedules, $i, $row['id']) }}"
                        data_col={{ $row['id'] }}></span></td>
                  @endforeach
                </tr>
              @endfor
              <tr class="trEnd">
                <td><span> 12:00</span></td>
                @for ($i = 1; $i <= 7; $i++)
                  <td></td>
                @endfor
              </tr>
            </tbody>

            <tbody class="shifts" id="shiftTab2">
              <tr class="trFirst">
                @for ($i = 0; $i <= 7; $i++)
                  <td></td>
                @endfor
              </tr>
              @for ($i = 10; $i < 20; $i++)
                <tr data_row={{ $i }}>
                  <td><span class="timeName"> {{ getScheduleFrom($i) }}</span></td>
                  @foreach (getMultiSelect() as $row)
                    <td><span class="selectedTime {{ getScheduleClassName($schedules, $i, $row['id']) }}"
                        data_col={{ $row['id'] }}></span></td>
                  @endforeach
                </tr>
              @endfor
              <tr class="trEnd">
                <td><span> 17:00</span></td>
                @for ($i = 1; $i <= 7; $i++)
                  <td></td>
                @endfor
              </tr>
            </tbody>

            <tbody class="shifts" id="shiftTab3">
              <tr class="trFirst">
                @for ($i = 0; $i <= 7; $i++)
                  <td></td>
                @endfor
              </tr>
              @for ($i = 20; $i < 34; $i++)
                <tr data_row={{ $i }}>
                  <td><span class="timeName"> {{ getScheduleFrom($i) }}</span></td>
                  @foreach (getMultiSelect() as $row)
                    <td><span class="selectedTime {{ getScheduleClassName($schedules, $i, $row['id']) }}"
                        data_col={{ $row['id'] }}></span></td>
                  @endforeach
                </tr>
              @endfor
              <tr class="trEnd">
                <td><span> 00:00</span></td>
                @for ($i = 1; $i <= 7; $i++)
                  <td></td>
                @endfor
              </tr>
            </tbody>
            <tfoot class="my-4">
              <tr>
                <td class="align-middle"><span class="timeDay">Time/Day</span></td>
                @foreach (getMultiSelect() as $row)
                  <td><span class="totalTime" data_col={{ $row['id'] }}>0h</span></td>
                @endforeach
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
    <!-- Main row: Tam disable, sau nay co the moi lai -->
    <!-- <div class="row my-3">
                                                                                                                                                                                                                                                                                                                                                                                                                        <div class="col">
                                                                                                                                                                                                                                                                                                                                                                                                                          <div class="card card-white iconNumberShadow">
                                                                                                                                                                                                                                                                                                                                                                                                                            <div class="card-header border-bottom-0">
                                                                                                                                                                                                                                                                                                                                                                                                                              <h3 class="card-title fs24Title">Thống kê thu nhập</h3>
                                                                                                                                                                                                                                                                                                                                                                                                                              <div class="card-tools d-flex">
                                                                                                                                                                                                                                                                                                                                                                                                                                <select class="form-select fs16 iconDropDown" aria-label="Default select example">
                                                                                                                                                                                                                                                                                                                                                                                                                                  <option selected>Theo năm</option>
                                                                                                                                                                                                                                                                                                                                                                                                                                  <option value="1">One</option>
                                                                                                                                                                                                                                                                                                                                                                                                                                  <option value="2">Two</option>
                                                                                                                                                                                                                                                                                                                                                                                                                                  <option value="3">Three</option>
                                                                                                                                                                                                                                                                                                                                                                                                                                </select>
                                                                                                                                                                                                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                                                                                                                                            <div class="card-body">
                                                                                                                                                                                                                                                                                                                                                                                                                              <div class="chart">
                                                                                                                                                                                                                                                                                                                                                                                                                                <canvas id="areaChart"
                                                                                                                                                                                                                                                                                                                                                                                                                                  style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                                                                                                                                                                                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                                                                      </div> -->
    <!-- /.row -->
    <!-- Main row: Tam disable, sau nay co the moi lai  -->
    {{-- <div class="row my-3">
      <div class="col">
        <div class="card card-white iconNumberShadow">
          <div class="card-header border-bottom-0">
            <h3 class="card-title fs24Title">Tổng học viên</h3>

            <div class="card-tools">
              <select id="tutorStudent" class="form-select fs16 iconDropDown" value=""
                aria-label="Default select example">
                <option value="1" selected>Tuần này</option>
                <option value="2">Tháng này</option>
                <option value="3">Năm này</option>
              </select>
            </div>
          </div>
          <div class="card-body">
            <div class="chart">
              <canvas id="barChart"
                style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div> --}}
    <!-- /.row -->

    {{-- Modal --}}
    @include('modals.with_drawal_request')
    @include('modals.calendar_event')
    {{-- title, content, link, rate, rate content,  --}}
  </div>
@endsection

@push('script')
  <script>
    var scheduleBlade = {!! json_encode(getScheduleData($schedules)) !!};
    $('#withdrawalRequestModal').on('hidden.bs.modal', function(e) {
      $('input[name="money"]').val("");
    });
  </script>
  @vite('resources/js/schedule-show-edit.js')
  @vite('resources/js/calendar_event.js')
@endpush