@extends('dashboard.base')

@section('content')
        <div class="container-fluid">
          @include('dashboard.shared.alert')
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
              <div class="card">
                <div class="card-header">
                  <h5 class="m-0">Filter</h5>
                </div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-4 col-sm-12">
                      <input type="text" class="form-control filter" id="keyword" placeholder="Cari...">
                    </div>
                    <div class="col-md-3 col-sm-12">
                      <select name="" id="jabatan" class="form-control filter">
                        <option value="" disabled selected hidden></option>
                        @foreach ($jabatans as $key => $jabatan)
                            <option value="{{$key}}">{{$jabatan}}</option>
                        @endforeach
                      </select>
                    </div>
                    <div class="col-md-3 col-sm-12">
                      <select name="" id="pangkat" class="form-control filter">
                        <option value="" disabled selected hidden></option>
                        @foreach ($pangkats as $key => $pangkat)
                            <option value="{{$key}}">{{$pangkat}}</option>
                        @endforeach
                      </select>
                    </div>
                    <div class="col-md-2 col-xs-12">
                      <select name="" id="jenis-pegawai" class="form-control filter" required>
                        <option value="" selected hidden disabled></option>
                            <option value="1">ASN</option>
                            <option value="2">Hakim</option>
                            <option value="3">PPNPN</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="animated fadeIn">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <h5 class="m-0">Pegawai</h5>
                      <a href="{{ route('pegawai.create') }}" class="btn btn-primary"><span class="cil-plus"></span> Tambah</a>
                    </div>
                    <div class="card-body">
                      <div class="table-responsive table-responsive-sm">
                        <table id="table" class="table table-responsive-sm table-striped table-bordered">
                          <thead>
                            <tr>
                              <th style="width: 10%">No</th>
                              <th>Foto</th>
                              <th>Nama</th>
                              <th>No. Pegawai /  NIP</th>
                              <th>Jabatan</th>
                              <th>No. Telp</th>
                              <th>Email</th>
                              <th>Status</th>
                              <th style="width: 20%"></th>
                            </tr>
                          </thead>
                          <tbody>
                          </tbody>
                        </table>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>

@endsection

@section('javascript')
<script>
    $(document).ready(function() {
        var table = $('#table').DataTable({
          "processing": true,
          "serverSide" : true,
          "language": {
            processing: '<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>'
          },
          ajax: {
            url: "{{ route('pegawai.index') }}",
            type: "GET",
            data: function (d) {
                d.keyword = $("#keyword").val();
                d.jabatan_id = $("#jabatan").val();
                d.pangkat_id = $("#pangkat").val();
                d.jenis_pegawai = $("#jenis-pegawai").val();
            }
          },
          columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'photo', name: 'photo'},
            {data: 'name', name: 'name'},
            {data: 'no_pegawai', name: 'no_pegawai'},
            {data: 'jabatan', name: 'jabatan'},
            {data: 'phone', name: 'phone'},
            {data: 'email', name: 'email'},
            {data: 'status', name: 'status'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
          ]
        });
        $("#pangkat").select2({
          placeholder: "Pilih pangkat / golongan ruang",
          allowClear: true
        });
        $("#jabatan").select2({
          placeholder: "Pilih jabatan",
          allowClear: true
        });
        $("#jenis-pegawai").select2({
          placeholder: "Pilih jenis pegawai",
          allowClear: true
        });
        $(".filter").on('change', function(){
          $(".filter").prop('disabled', true);
          table.ajax.reload(function(){
            $(".filter").prop('disabled', false);
          });
        });
        function delay(fn, ms) {
          let timer = 0
          return function(...args) {
            clearTimeout(timer)
            timer = setTimeout(fn.bind(this, ...args), ms || 0)
          }
        }
        $('#keyword').keyup(delay(function (e) {
          $(".filter").prop('disabled', true);
            table.ajax.reload(function(){
              $(".filter").prop('disabled', false);
            });
        }, 1000));
    } );
    $('#table').on('click', '.form-delete', function(e){
        e.preventDefault();
        var form = $(this);
        $('#confirm').modal()
            .on('click', '#delete-btn', function(){
                form.submit();
            });
    });
</script>
@endsection