<!-- StudentScheduleCard -->
@props(['teacher_id'])

<div class="card">

  <div class="card-header pb-0">
    <div class="row">
      <a
        class="col-lg-6 col-7"
        href="/schedules"
      >
        <h6><u>Schedules</u></h6>
      </a>
    </div>
  </div>

  <div class="card-body p-3">

    <div id="simple-schedule-table">loading</div>

  </div>

</div>

<script>
  window.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOM fully loaded and parsed");

    fetch('/dt/getTeacherSimpleSchedules/{{ $teacher_id }}', {})
      .then(res => res.json())
      .then(res_json => {
        temp = ""
        for (i = 0; i < res_json.length; i++) {
          if (res_json[i].subjects.length > 0) {
            subject = res_json[i].subjects[0].subjectTitle
          } else {
            subject = ' --- '
          }

          startTime = res_json[i].startTime
          endTime = res_json[i].endTime
          endTime = res_json[i].endTime
          classRoomTitle = res_json[i].classrooms[0].classRoomTitle
          temp = temp +
            `<tr>
                <th scope="row" style="font-size: 0.75rem; text-align: center">${i+1}</th>
                <td style="font-size: 0.75rem;" >${subject}</td>
                <td style="font-size: 0.75rem;" >${classRoomTitle}</td>
                <td style="font-size: 0.75rem;" >${startTime}</td>
                <td style="font-size: 0.75rem;" >${endTime}</td>
            </tr>
            `
        }

        if (res_json.length > 0) {
          document.querySelector('#simple-schedule-table').outerHTML = `
<table class="table table-sm table-striped">
<thead>
    <tr>
    <th scope="col" style="font-size: 0.75rem; text-align: center; padding: 0.75rem 0.25rem">#</th>
    <th scope="col" style="font-size: 0.75rem; text-align: left; padding: 0.75rem 0.25rem">subject</th>
    <th scope="col" style="font-size: 0.75rem; text-align: left; padding: 0.75rem 0.25rem">Classroom</th>
    <th scope="col" style="font-size: 0.75rem; text-align: left; padding: 0.75rem 0.25rem">start time</th>
    <th scope="col" style="font-size: 0.75rem; text-align: left; padding: 0.75rem 0.25rem">end time</th>
    </tr>
</thead>
<tbody>
    ${temp}
</tbody>
</table>
`
        } else {
          document.querySelector('#simple-schedule-table').outerHTML =
            'no schedule currently active';
        }
      })
  });
</script>
