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

  <x-navbars.sidebar_triage
    role="{{ $request->user()->role }}"
    activePage="payments"
  ></x-navbars.sidebar_triage>

  <div
    class="main-content position-relative max-height-vh-100 h-100 bg-gray-100">
    <!-- Navbar -->
    <x-navbars.navs.auth
      titlePage="Payments"
      role="{{ $request->user()->role }}"
    ></x-navbars.navs.auth>
    <!-- End Navbar -->

    <div class="container-fluid px-md-4 px-2">
      @if (session('status'))
        <div class="row">
          <div
            class="alert alert-warning alert-dismissible text-white"
            role="alert"
          >
            <span class="text-sm">{{ Session::get('status') }}</span>
            <button
              class="btn-close py-3 text-lg opacity-10"
              data-bs-dismiss="alert"
              type="button"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      @endif

      <div
        class="row gx-4 mb-2"
        style="display: none;"
      >
        <div class="col-auto">
          <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">
              {{ 'new classroom' }}
            </h5>
            <p class="font-weight-normal mb-0 text-sm">
              {{ 'create a new classroom' }}
            </p>
          </div>
        </div>

      </div>

      <div class="card card-plain h-100">
        <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">New ClassRoom Information</h6>
            </div>
          </div>
        </div>
        <div class="card-body p-3">

          <form
            action="{{ route('payments.store') }}"
            method="POST"
            enctype="multipart/form-data"
          >
            @csrf

            <div class="row">

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

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

              <div class="col-md-12 mb-3">
                <label for="floatingTextarea2">Remarks :</label>
                <textarea
                  class="form-control border border-2 p-2"
                  id="floatingTextarea2"
                  name="remarks"
                  placeholder="Please type payment remarks ... "
                  rows="4"
                  cols="50"
                >{{ old('remarks', '') }}</textarea>
                @error('remarks')
                  <p class='text-danger inputerror'>{{ $message }}</p>
                @enderror
              </div>

            </div>

            <button
              class="btn bg-gradient-dark"
              type="submit"
            >
              <i class="material-icons opacity-10">add</i> Add
            </button>

          </form>

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

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

</x-layout>
