@include('inc.header-inc')

<style>
  input{
      background-color: var(--sidebard-color) !important;
      color: var(--text-color) !important; 
    }

  .dataTables_filter, .dataTables_length{
    margin: 10px;
  }
  .btn{
    background: #695CFE;
    color: white;
  }

  .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="/storedepartment" method="POST">
        @csrf
        <div class="form-floating">
          <input type="text" class="form-control" name="department" placeholder="Input Department Name" id="department" aria-describedby="button-addon2" required>
          <label for="department"><span class="text-danger">*</span>Department</label>
        </div>
        <div class="text-center mt-3">
          <button  type="submit" class="btn btn-outline-primary btn-sm px-4 py-1 container-shadow" id="add-btn">Add Department</button>
        </div>
    </form>
  </div>


  <div class="container-shadow border px-2 py-4 mb-3 rounded position-relative">
    <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">
      Department Table Hide
    </button>

    <div id="departmenttable">
      <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" >DEPARTMENT</th>
                <th scope="col" >CREATED AT</th>
                <th scope="col" >ACTION
        </thead>
  
        <tbody>
          @foreach ($department as $key=>$dept)
          <tr>
            <td>{{$key+1}} </td>
            <td>{{ucwords($dept->user->name)}} </td>
              <td>{{ucwords(strtolower($dept->department))}} </td>
              <td>{{date('F d, Y', strtotime($dept->date_added))}} </td>
            
              <td><a href="/editdepartment/{{$dept->id}}"><button class="btn btn-primary icon-btn" >
                <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Edit Department" 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>
                @if($dept->status_code_id != 7)
                <button type="button" class="btn btn-danger icon-btn" data-bs-toggle="modal" data-bs-target="#removeModalDepartment{{$dept->id}}">
                <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Deactivate Department" 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>
                @else
              <button class="btn btn-success icon-btn" data-bs-toggle="modal" data-bs-target="#activateModalDepartment{{$dept->id}}">
                  <svg xmlns="http://www.w3.org/2000/svg" data-bs-toggle="tooltip" title="Activate Department" width="22" height="22" viewBox="0 0 24 36" style="fill: rgb(255, 255, 255);transform: ;msFilter:;"><path d="M20.995 6.9a.998.998 0 0 0-.548-.795l-8-4a1 1 0 0 0-.895 0l-8 4a1.002 1.002 0 0 0-.547.795c-.011.107-.961 10.767 8.589 15.014a.987.987 0 0 0 .812 0c9.55-4.247 8.6-14.906 8.589-15.014zM12 19.897C5.231 16.625 4.911 9.642 4.966 7.635L12 4.118l7.029 3.515c.037 1.989-.328 9.018-7.029 12.264z"></path><path d="m11 12.586-2.293-2.293-1.414 1.414L11 15.414l5.707-5.707-1.414-1.414z"></path></svg>
                </button></a>
                @endif
              </td>
          </tr>
          @include('inc.modal.deleteDepartment')
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</section>



</div> <!-- container div -->

<script>

  var table = $('#pr_table').DataTable({
    "scrollY": "200px",
    "scrollX": "1200px",
  });

  $('#collapseButton').click(function () {
    var btnText = $(this).text();
    if (btnText === "Department Table Show") {
      $(this).text("Department Table Hide");
      $('#departmenttable').show();
    } else {
      $(this).text("Department Table Show");
      $('#departmenttable').hide();
    }
  });

  $("body").on('click', 'button[id=add-btn]', function(){
    if($('#department').val().trim() == ''){
      toasts_error('Department Field is Required.');
      return false;
    }

  });

</script>
@include('inc.modal.modalloader')
@include('inc.footer-inc')