<x-layout bodyClass="g-sidenav-show  bg-gray-200">

  <x-navbars.sidebar_triage
    role="{{ $request->user()->role }}"
    activePage="show_applicable_schedules"
    teacherId="{{ $current_teacher->id }}"
  >
  </x-navbars.sidebar_triage>

  <main
    class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
  >

    <!-- Navbar -->
    <x-navbars.navs.auth
      titlePage="Applicable schedules"
      role="{{ $request->user()->role }}"
      firstName="{{ $current_teacher->firstName }}"
      last_name="{{ $current_teacher->lastName }}"
    >
    </x-navbars.navs.auth>
    <!-- End Navbar -->

    <div class="container-fluid py-4">
      <div
        class="card card-plain h-100"
        style="background-color: white;"
      >
        <div class="card-header p-3 pb-0">
          <div class="row">
            <div class="col-md-8 d-flex align-items-center">
              <h6 class="mb-3">This teacher applied {{ count($schedules) }}
                subjects.</h6>
            </div>
          </div>
        </div>

        <div class="card-body pl-3 pr-3">
          <div class="row">

            @foreach ($schedules as $schedule)
              <div
                class="col-3 bg-light border p-3"
                style="margin: 0.5rem; border-radius: 1rem;"
              >
                @if ($schedule->subject)
                  <div class="">
                    <div style="min-height: 10rem;">
                      <div>
                        <span style="font-size: 1.2rem; font-weight: bold;">
                          Subject:
                        </span>

                        <span>{{ $schedule->subject }}</span>
                      </div>
                      <div class="mt-2">
                        <div>course duration: </div>

                        <div>start time: {{ $schedule->startTime }}</div>
                        <div>end time: {{ $schedule->endTime }})</div>

                      </div>

                    </div>

                    <div class="mt-5">
                      <a
                        class="btn btn-secondary btn-sm"
                        href="{{ route('showStudentAttendance', [$schedule->id]) }}"
                      >
                        <span class="btn-text">
                          update attendance
                        </span>
                      </a>
                    </div>

                    <div class="mt-1">
                      <a
                        class="btn btn-secondary btn-sm"
                        href="{{ route('viewStudentAttendance', [$schedule->id]) }}"
                      >
                        <span class="btn-text">
                          view attendance
                        </span>
                      </a>
                    </div>

                  </div>
                @else
                  <div class="col-12 d-flex align-items-center">
                    {{ 'subject name not assigned' }}
                    (course duration: {{ $schedule->startTime }} ~
                    {{ $schedule->endTime }})
                  </div>
                @endif
              </div>
            @endforeach

          </div>
        </div>

      </div>

      <x-footers.auth></x-footers.auth>
    </div>

  </main>

</x-layout>
