@include('inc.header-inc');
<style>
  input{
  background-color: var(--sidebar-color) !important;
  color: var(--text-color) !important;
}
</style>
<section class="container-fluid p-3 py-2 " style="padding-bottom:300px;">
  <div class="card container-shadow py-3 mb-2"> 
    <div class="container-fluid">
        <div class="flex position-relative">
              <span class="fw-semibold fs-4 align-middle justify-content-start text-secondary" style="font-weight: 500; font-size: 1.5em;">{{ ucwords($title) }}</span>
        </div>
    </div>
  </div>

  <div class="container-shadow bg-white ps-3 py-2 border mb-4 rounded" id="breadcrumb-container">
      <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
          <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item active py-1" aria-current="page">Maintenance</li>
              <li class="breadcrumb-item active py-1" aria-current="page">{{ ucwords($title) }}</li>
          </ol>
      </nav>
  </div>

  <div class="container-shadow border px-2 py-3 mb-3 rounded">
    <form action="/updateparticular/{{ $particular->id }}" method="POST">
      @csrf
      @method('PUT')
      <div class="form-floating">
        <input type="text" name="name" placeholder="Input Particulars" aria-label="First name" class="form-control" id="particular" value="{{ $particular->name }}" required>
        <label for="inputEmail4" class="form-label"><span class="text-danger">*</span>Particulars</label>
      </div>
      <div class="text-center mt-3">
        <button type="submit" class="btn btn-primary btn-sm px-3 py-1 container-shadow" id="update-btn">Update</button>
        <a href="/createparticular"><button type="button" class="btn btn-secondary btn-sm px-3 py-1 container-shadow">Back</button></a>
      </div>
    </form>
  </div>

</section>

<script>
$("body").on('click', 'button[id=update-btn]', function(){
    if($('#particular').val().trim() === ''){
      toasts_error("Particular is required.");
      location.reload();
      return false;
    }
});
</script>
@include('inc.modal.modalloader')
@include('inc.footer-inc')