@include('inc.header-inc')

<style>
  input{
    background-color: var(--sidebar-color) !important;
    color: var(--text-color)!important;
  }
  .dataTables_filter, .dataTables_length{
    margin: 10px;
  }
  .dataTables_scroll{
    border:1px solid silver;
    border-radius:5px;
  }
  .icon-btn{
      height: 30px;
   }
</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="/storeuom" method="POST">
        @csrf
        <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" id="uom" required placeholder="example">
              <label for="inputEmail4" class="form-label"><span class="text-danger">*</span>Unit Of Measurement</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" id="uom-abv" required placeholder="example">
              <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" id="add-btn" class="btn btn-primary btn-sm px-4 py-1 container-shadow">Add UOM</button>
        </div>
    </form>
  </div>

  <div class="container-shadow border px-2 py-4 mb-3 rounded position-relative">
    <div class="text-center">
      <button style="background: #695CFE !important;z-index:100" class="btn btn-primary btn-sm px-3 py-1 mt-2 position-absolute top-0 start-50 translate-middle-x container-shadow" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" id="collapseButton" aria-controls="collapseOne">
        UOM Table Hide
      </button>
    </div>
    <div id="uomtable">
      <table class="display nowrap" id="pr_table" width="100%" style="width: 100%;">
          <thead>
              <tr>
                  <th scope="col">#</th>
                  <th scope="col" >ADDED BY</th>
                  <th scope="col" >UOM</th>
                  <th scope="col" >UOM ABBREVIATION</th>
                  <th scope="col" >CREATED AT</th>
                  <th scope="col" >ACTION</th>
                </tr>
          </thead>
          <tbody>
            @foreach ( $tbluom as $key=>$uom )
            <tr>      
                <td>{{ $key + 1 }}</td>
                <td>{{ ucwords($uom->user->name) }}</td>
                <td>{{ ucwords(strtolower($uom->uom)) }}</td>
                <td>{{ ucwords(strtolower($uom->uom_abv)) }}</td>  
                <td>{{ date('F-d-Y', strtotime( $uom->date_added)) }}</td>
                <td><a href="/edituom/{{ $uom->id }}"><button class="btn btn-primary icon-btn">
                  <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Edit UOM" width="22" height="22" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;"><path d="m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z"></path><path d="M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z"></path></svg>
                  </button></a>
              
                  <button type="button" class="btn btn-danger icon-btn" data-bs-toggle="modal" data-bs-target="#removeModalUom{{ $uom->id }}">
                  <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Remove UOM" width="22" height="22" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;"><path d="M7 11h10v2H7z"></path><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"></path></svg>
                  </button>
                </td>
            </tr>
            @include('inc.modal.deleteUom')
            @endforeach
          </tbody>
      </table>
    </div>
  </div>
</section>

<script>
  var table = $('#pr_table').DataTable({
    "scrollY": "200px",
    "scrollX": "1200px",
  });
  $('#collapseButton').click(function () {
    var btnText = $(this).text();
    if (btnText === "UOM Table Show") {
      $(this).text("UOM Table Hide");
      $('#uomtable').show();
    } else {
      $(this).text("UOM Table Show");
      $('#uomtable').hide();
    }
  });

  $("body").on('click', 'button[id=add-btn]', function(){
    if($('#uom').val().trim() == ''){
      toasts_error('Unit of Measurement is required.');
      return false;
    }
    if($('#uom-abv').val().trim() == ''){
      toasts_error('UOM Abbreviation is Required.');
      return false;
    }
  });
</script>

@include('inc.modal.modalloader')
@include('inc.footer-inc')