@include('inc.header-inc')
<style>
  th {
    font-size: 1em !important;
  }
  table.dataTable tbody td {
      font-size: 15px;
  }
  input[type="search"]{
    color:var(--text-color);
  }
  .select2-container--default .select2-selection--single{
    background-color: var(--sidebar-color) !important;
    color: var(--text-color) !important;
  }

  .select2-container--open .select2-dropdown--below{
    background-color: var(--sidebar-color) !important;
    color: var(--text-color) !important;
  }
  .form-select, .form-control, #searchInput{
    background-color: var(--body-color) !important;
    color:var(--text-color);
  }
  /* body.dark .form-group{
    background-color:var(--sidebar-color) !important;
  } */
  #radiobtn{
    background-color:var(--body-color) !important; 
    color:var(--text-color) !important;
    border: 1px solid var(--text-color);
  }
  .dataTables_filter, .dataTables_length{
    margin: 10px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow{
    width: 100%;
    font-size: 1.3em;
    padding: 25px 12px;
    height: 27px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20px;
    transition: var(--tran-03);
  }
  .select2-container--default .select2-selection--single{
      padding: 10px 5px !important;
      height: 57px !important;
      width: 100%; 
      font-size: 16px;  
      position: relative;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow
  {
      width: 100%;
      font-size: 1.3em;
      padding: 25px 12px;
      height: 27px;
      position: absolute;
      top: 0px;
      right: 0px;
      width: 20px;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
      text-align: left;
  }
  .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">
    <table class="table" id="pr_table" width="100%" style="width: 100%;">
      <thead >
          <tr>
            <th scope="col">NO.</th>
            <th scope="col" >EMPLOYEE ID</th>
            <th scope="col" >NAME</th>
            <th scope="col">DEPARTMENT</th>
            <th scope="col">POSITION</th>
            <th scope="col">SBU</th>
            <th scope="col">STATUS</th>
            <th scope="col">ACTION</th>
          </tr>
      </thead>
      <tbody>
          @foreach ($user_accounts as $key=>$accounts)
            <tr>
              <td>{{$key + 1}} </td>
              <td>{{$accounts->empId}}</td>
              <td>{{ucwords($accounts->name)}}</td>
              <td>{{strtoupper($accounts->department)}}</td>
              <td>{{ucwords($accounts->position)}}</td>
              <td>
                  @php 
                  $sbu = \App\Models\TblSbu::find($accounts->tbl_sbu_id);
                  if($accounts->tbl_sbu_id != 0){         
                  $sbuName = $sbu->sbu;
                  echo ucwords($sbuName);
                    }else{
                    echo 'Super Admin';
                    }
                  @endphp
              </td>
              <td>
                  @if(empty($accounts->deleted_at))
                    <button class="btn btn-success icon-btn"><p style="font-size: 12px">Active</p></button>
                  @else
                    <button class="btn btn-danger icon-btn">Deactivated</button>
                  @endif
              </td>
            
              <td class="text-right">
                @if(empty($accounts->deleted_at))
                <button type="button" class="btn btn-danger icon-btn" title="Deactivate Account" data-bs-toggle="modal" data-bs-target="#deactivateModal{{ $accounts->id }}">
                  <svg xmlns="http://www.w3.org/2000/svg" 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 type="button" class="btn btn-success icon-btn" data-bs-toggle="modal" title="Activate Account" data-bs-target="#activateModal{{ $accounts->id }}">
                  <svg xmlns="http://www.w3.org/2000/svg" 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>
            
                @endif
                <a href="/editaccount/{{ $accounts->id }}"><button class="btn btn-info icon-btn" title="Edit Account">
                <svg xmlns="http://www.w3.org/2000/svg" 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>
              </td>
          </tr>
          @include('inc.modal.accountActionModal')
          @endforeach
      </tbody >
    </table>
  </div>

</section>
<script>
  var userLevel = {{ auth()->user()->user_level }};
  $(document).ready(function() {
    $('#pr_table').DataTable({
      "scrollY": "450px",
      "scrollX": "1200px",
     dom: '<"filter row"<"col-12"<"row"<"col-12"tr>>><"row"<"col-12"lip>>><"clear">',

      initComplete: function() {
        var table = this;
        var filter = $('.filter');

        filter.prepend('<div class="form-group col-md-3 m-0"></div>');
        filter.find('.form-group').append('<div id="select-group"></div>');
        filter.find('#select-group').append('<div class="form-floating mb-2"><input type="text" class="form-control" id="searchInput" placeholder="example"><label for="statusSelect">Type to Search</label></div>');
        if(userLevel == 8){
        filter.prepend('<div class="form-group text-end col-md-9" style="margin: 0px"><div class="form-floating mb-2"><select class="form-select" style="width: 100%" id="statusSelect" aria-label="Floating label select example" style="width:100%"><option value="">All</option>@foreach($all_sbu as $sbu)<option value="{{$sbu->sbu}}">{{ucwords($sbu->sbu)}}</option>@endforeach</select><label for="statusSelect">Filter By Warehouse</label></div>');
        
        filter.find('#statusSelect').on('change', function() {
          var selectedValue = $(this).val();
          table.api().column(5).search(selectedValue).draw();
        });
      }else{
        filter.prepend('<div class="form-group text-end col-md-9" style="margin: 0px"><div class="form-floating mb-3"><select class="form-select" style="width: 100%" id="deptSelect" aria-label="Floating label select example"><option value="">All</option>@foreach($all_department as $dept)<option value="{{$dept->department}}">{{ucwords($dept->department)}}</option>@endforeach</select><label for="statusSelect">Filter By Department</label></div>');
        filter.find('#deptSelect').on('change', function() {
          var selectedValue = $(this).val();
          table.api().column(3).search(selectedValue).draw();
        });

      }
        $('#searchInput').on('keyup', function() {
          table.api().search(this.value).draw();
        });
      }
      
    });
    $('#statusSelect').select2({
        placeholder: 'Select Warehouse'
    });
    $('#deptSelect').select2({
        placeholder: 'Select Department'
    });
  });
  function openNewWindow(id) {
      window.open('/pdfview/' + id);
  }
  function openimage(id) {
      window.open('/imageview/' + id);
  }
</script>
@include('inc.footer-inc')
@include('inc.modal.modalloader')