<x-layout bodyClass="g-sidenav-show  bg-gray-200">
  <x-navbars.sidebar_triage
    role="{{ $request->user()->role }}"
    activePage="subjects"
  ></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="subjects"
      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"
          style="display: none;"
        >
          <div class="avatar avatar-xl position-relative">
            <img
              class="w-100 border-radius-lg shadow-sm"
              src="{{ asset('assets') }}/img/bruce-mars.jpg"
              alt="profile_image"
            >
          </div>
        </div>
        <div class="col-auto my-auto">
          <div class="h-100">
            <h5 class="mb-1">
              {{ $subject->name }}
            </h5>
            <p class="font-weight-normal mb-0 text-sm">
              {{ $subject->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 Subject Information
              </h6>
            </div>

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

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

                <a
                  class="btn btn-danger btn-sm"
                  href="/subjects/{{ $subject->id }}/softdelete"
                  style="margin-bottom: 0;"
                >
                  <span class="btn-text"> delete</span>
                </a>

              </form>
            </div>
          </div>
        </div>

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

            <div class="col-md-12 mb-3">
              <label class="form-label">Title :</label>
              <input
                class="form-control border border-2 p-2"
                name="subjectTitle"
                type="text"
                value="{{ old('subjectTitle', $subject->subjectTitle) }}"
                disabled
              />

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

            <div class="col-md-12 mb-3">
              <label for="floatingTextarea2">Details :</label>
              <textarea
                class="form-control border border-2 p-2"
                id="floatingTextarea2"
                name="syllabusDetails"
                placeholder="some description about this subject ..."
                rows="4"
                cols="50"
                disabled
              >{{ old('syllabusDetails', $subject->syllabusDetails) }}</textarea>

              @error('syllabusDetails')
                <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="/subjects"
            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>
