@extends('layout.auth_layout', ['title' => 'Tutor | Điền thông tin'])

@push('style')
  @vite(['resources/css/schedule.css'])
@endpush

@section('content')
  <section class="container pt-5">
    <div class="row">
      <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>
            <form action="{{ route('tutors.storeSchedule') }}" method="post">
              @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">Hoàn thành</button>
            </form>
          </div>
          <table class="table-bordered table border-0">
            <thead>
              <tr class="border-0 text-center">
                <th colspan="5"></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="border-0 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" 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" 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" 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>
  </section>
@endsection

@push('script')
  @vite('resources/js/schedule-create.js')
@endpush