@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="/updateuom/{{ $uom->id }}" method="POST">
      @csrf
      @method('PUT')
      <div class="row g-3">
        <div class="col-md-6">
          <div class="form-floating">
            <input type="text" name="uom" placeholder="E.g: PIECES" aria-label="First name" class="form-control" value="{{ $uom->uom }}" id="uom" required>
            <label for="inputEmail4" class="form-label"><span class="text-danger">*</span>UOM</label>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-floating">
            <input type="text" name="uom_abv" placeholder="E.g: PCS" aria-label="First name" class="form-control" value="{{ $uom->uom_abv }}" id="uom-abv" required>
            <label for="inputPassword4" class="form-label"><span class="text-danger">*</span>UOM Abbreviation</label>
          </div>
        </div>
      </div>
      <div class="text-center mt-3">
        <button type="submit" class="btn btn-primary btn-sm px-3 py-1" id="update-btn">Update</button>
        <a href="/createuom"><button type="button" class="btn btn-secondary btn-sm px-3 py-1">Back</button></a>
      </div>
    </form>
  </div>
</section>

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