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

  <x-navbars.sidebar_triage
    role="{{ $request->user()->role }}"
    activePage="teachers"
  >
  </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="Teachers"
      role="{{ $request->user()->role }}"
      firstName="{{ $request->user()->name }}"
    >
    </x-navbars.navs.auth>
    <!-- End Navbar -->

    <div class="container-fluid px-md-4 px-2">
      <div class="row gx-4 mb-2">
        <div class="col-auto">
          @if ($teacher->avatar)
            <img
              id="original-avatar"
              src="{{ '/avatars/' . $teacher->avatar }}"
              alt="User Avatar"
              style="width: 150px; height: 150px; border-radius: 10px;"
              onclick="originalAvatarOnClick(event)"
            />
          @else
            <div
              style="
                                height: 150px; width: 150px;
                                border-width: 3px;
                                border-style: dotted;
                                border-radius: 10px;
                                border-color: gray;"
            >
              <div
                style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;"
              >
                <i
                  class="fa fa-user fa-2x"
                  aria-hidden="true"
                ></i>
              </div>
            </div>
          @endif
        </div>
        <div class="col-auto my-auto">
          <div class="h-100">
            <h5 class="mb-1">
              {{ $teacher->name }}
            </h5>
            <p class="font-weight-normal mb-0 text-sm">
              {{ $teacher->name }}
            </p>
          </div>
        </div>
      </div>

      <div class="card card-plain h-100">
        <div class="card-header p-3 pb-0">
          <div class="row mb-4">
            <div class="col-md-6 d-flex align-items-center">
              <h6
                class="align-center mb-3"
                style="margin-bottom: 0 !important;"
              >
                View Teacher Information
              </h6>
            </div>

            <div class="col-md-6 d-flex align-items-center">
              <form
                action="/teachers/{{ $teacher->id }}"
                method="POST"
              >

                <a
                  class="btn btn-secondary btn-sm"
                  href="/teachers/{{ $teacher->id }}/edit"
                  style="margin-bottom: 0;"
                >
                  <span class="btn-text">edit</span>
                </a>

                @csrf
                @method('DELETE')
                <button
                  class="btn btn-danger btn-sm"
                  style="margin-bottom: 0;"
                >
                  <span class="btn-text">delete</span>
                </button>

              </form>
            </div>
          </div>
        </div>
        <div
          class="card-body p-3 pb-0"
          style="background-color: white;"
        >
          <div class="row">

            <div class="col-md-6 mb-3">
              <label class="form-label">First name :</label>
              <input
                class="form-control border border-2 p-2"
                name="firstName"
                type="text"
                value="{{ old('firstName', $teacher->firstName) }}"
                disabled
              >
              @error('firstName')
                <p class='text-danger inputerror'>{{ $message }} </p>
              @enderror
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">Last name :</label>
              <input
                class="form-control border border-2 p-2"
                name="lastName"
                type="text"
                value="{{ old('lastName', $teacher->lastName) }}"
                disabled
              >
              @error('lastName')
                <p class='text-danger inputerror'>{{ $message }} </p>
              @enderror
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">Gender :</label>

              <input
                class="form-control border border-2 p-2"
                name="lastName"
                type="text"
                value="{{ old('lastName', $teacher->gender) }}"
                disabled
              />

              @error('gender')
                <p class='text-danger inputerror'>{{ $message }} </p>
              @enderror
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">Date of birth (Y-m-d):</label>
              <input
                class="form-control border border-2 p-2"
                name="dateOfBirth"
                type="text"
                value="{{ old('dateOfBirth', $teacher->dateOfBirth) }}"
                disabled
              >
              @error('dateOfBirth')
                <p class='text-danger inputerror'>{{ $message }} </p>
              @enderror
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">Email :</label>
              <input
                class="form-control border border-2 p-2"
                name="email"
                type="email"
                value="{{ old('email', $teacher->email) }}"
                placeholder="e.g. teacher@school.com ... "
                disabled
              />
              @error('email')
                <p class='text-danger inputerror'>{{ $message }} </p>
              @enderror
            </div>

            <div class="col-md-12 mb-3">
              <label for="floatingTextarea2">Contact :</label>
              <textarea
                class="form-control border border-2 p-2"
                id="floatingTextarea2"
                name="contact"
                placeholder="teacher contact address"
                rows="4"
                cols="50"
                disabled
              >{{ old('contact', $teacher->contact) }}</textarea>

              @error('contact')
                <p class='text-danger inputerror'>{{ $message }} </p>
              @enderror
            </div>

            <div class="col-md-12 mb-3">
              <label for="floatingTextarea2">Skills :</label>
              <textarea
                class="form-control border border-2 p-2"
                id="floatingTextarea2"
                name="skills"
                placeholder="teacher skill set"
                rows="4"
                cols="50"
                disabled
              >{{ old('skills', $teacher->skills) }}</textarea>

              @error('skills')
                <p class='text-danger inputerror'>{{ $message }} </p>
              @enderror
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">
                Subjects ({{ count($teacher->schedules) }})
              </label>

              @foreach ($teacher->schedules as $schedule)
                <div>
                  @if (count($schedule->subjects) > 0)
                    {{ $schedule->subjects[0]->subjectTitle }}
                  @endif
                </div>
              @endforeach

              @error('subject')
                <p class='text-danger inputerror'>{{ $message }} </p>
              @enderror
            </div>

          </div>
        </div>

        <div
          class="card-footer d-flex"
          style="background-color: white;"
        >
          <a
            class="btn btn-secondary btn-sm font-weight-normal my-auto"
            href="/teachers"
            style="display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1rem;"
          >
            <i
              class="fas fa-arrow-left"
              style="font-size: 1rem;"
            ></i> Back
          </a>
        </div>

      </div>

    </div>
  </main>

</x-layout>
