@extends('dashboard.utama')
@section('content')
<div class="row">
  <!-- Striped rows -->
  <div class="col-md-12 my-4">
    <h2 class="h4 mb-1">Data Pegawai</h2>
    @if (Session::has('status'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      {{ Session::get('status') }}<button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    @endif
    <div class="card shadow">
      <div class="card-body">
        <div class="toolbar row mb-3">
          <div class="col">
            <form class="form-inline">
              <div class="form-row">
              </div>
            </form>
          </div>
          <div class="col ml-auto">
            <div class="dropdown float-right">
              <button class="btn btn-primary float-right ml-3 " type="button" id="actionMenuButton" data-toggle="modal" data-target="#tambahpegawai"  aria-expanded="false"> Tambah Data </button>
              {{-- <button class="btn btn-primary float-right ml-3" href="{{route('tambahmeter')}}" type="button">Tambah Data</button> --}}
            </div>
          </div>
        </div>
        <!-- table -->
        <table class="table datatables" id="dataTable-1">
          <thead>
            <tr role="row">
              <th>#</th>
              <th>NIP</th>
              <th>Nama Pegawai</th>
              <th>Jabatan</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
    
          </tbody>
        </table>
       
      </div>
    </div>
  </div> <!-- simple table -->
</div> <!-- end section -->
<div class="modal fade" id="tambahpegawai" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Tambah Data Pegawai </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('savepegawai')}}" method="POST">
          @csrf
          <div class="container-fluid">
            <div class="col-md-12">
            <div class="card shadow mb-8">
              <div class="card-body">
                <div class="form-row">
                  <div class="col-md-10 mb-3">
                    <label for="validationCustom3">NIP Pegawai</label>
                    <input type="text" class="form-control" id="nip_peg" name="nip_peg" required>
                    <div class="valid-feedback"> Looks good! </div>
                  </div>
                  <div class="col-md-10 mb-3">
                    <label for="validationCustom4">Nama Pegawai</label>
                    <input type="text" class="form-control" id="nama_peg" name="nama_peg" required>
                    <div class="valid-feedback"> Looks good! </div>
                  </div>
                <div class="col-md-10 mb-3">
                  <label for="validationCustom4">Jabatan Pegawai</label>
                  <input type="text" class="form-control" id="jab_peg" name="jab_peg" required>
                  <div class="valid-feedback"> Looks good! </div>
                </div>
              </div><!-- /.form-row -->
            </div>
          </div>
        </div> 
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" style="float: right margin-right:50px"  class="btn btn-primary" >Simpan</button>
          </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="modal inmodal fade" id="modal-edit" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Edit Data Ukuran</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('updatepegawai')}}" method="POST" >
          @csrf
          <div class="container-fluid">
            <div class="col-md-12">
            <div class="card shadow mb-8">
              <div class="card-body">
                  <div class="form-row">
                    <div class="col-md-10 mb-3">
                      <label for="validationCustom4">Nip</label>
                      <input type="text" class="form-control" id="nip" name="nip" required >
                    </div>
                    <input type="hidden" class="form-control" id="nips" name="nips" required >
                    <div class="col-md-10 mb-3">
                      <label for="validationCustom4">Nama</label>
                      <input type="text" class="form-control" id="nama" name="nama" required >
                    </div>
                    <div class="col-md-10 mb-3">
                      <label for="validationCustom4">Jabatan</label>
                      <input type="text" class="form-control" id="jabs" name="jabs" required >
                    </div>
                </div><!-- /.form-row -->
            </div>
            </div>
            </div> 
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" style="float: right margin-right:50px" class="btn btn-primary">SIMPAN</button>
            </div>
        </div>
      </form>
      </div>
    </div>
  </div>
</div>
</div>
@endsection
@section('page_javascripts')
<script >
  $(".alert-dismissible").fadeTo(5000, 500).slideUp(500, function(){
  $(".alert-dismissible").alert('close');
});
</script>
<script>
   function show_confirm(id) {
          var form =  $(this).closest("form");
          var name = $(this).data("name");
          event.preventDefault();
          Swal.fire({
              title: 'Are you sure?',
              text: "You won't be able to revert this!",
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
            if (result.isConfirmed) {
              $.ajax({
                  url: "{{route('hapuspegawai')}}/"+id,
                  type: 'post',
                  data: {_token: "{{ csrf_token() }}"},
                  success: function(response){
                    Swal.fire(
                      'Deleted!',
                      'Your file has been deleted.',
                      'success'
                    )
                    $('#dataTable-1').DataTable().ajax.reload();
                  }
                });
               
          }
        })
      };
</script>
<script>
 var table = $('#dataTable-1').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
          url:"{{ route('datapegawai')}}",
        },
        "columns": [
            {data: 'dibuat'},
            {data: 'nip'},
            {data: 'namapegawai'},
            {data: 'jabatan'},
            {data: 'action', orderable: false, searchable: false}
            //{data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        "lengthMenu": [[15, 100, -1], [15, 100, "Semua"]],
        "order": [[3, 'desc']],
                /*"dom": "lTfigt",
                 "tableTools": {
                 "sSwfPath": "{{asset('js/plugins/dataTables/swf/copy_csv_xls_pdf.swf')}}"
                 }*/
          columnDefs: [
            {
                searchable: false,
                orderable: false,
                targets: 0,
            },
        ],
    });
    table.on( 'draw.dt', function () {
    var PageInfo = $('#dataTable-1').DataTable().page.info();
         table.column(0, { page: 'current' }).nodes().each( function (cell, i) {
            cell.innerHTML = i + 1 + PageInfo.start;
        } );
    });
</script>
<script>
  function edit(id) {
    /*console.log(id);*/
      $.ajax({
       url : "{{route('editpegawai')}}/"+id,
       type: "GET",
       dataType: "JSON",
       success: function(data)
       {
         document.getElementById('nip').value = data.nip;
         document.getElementById('nips').value = data.nip;
         document.getElementById('nama').value = data.namapegawai;
         document.getElementById('jabs').value = data.jabatan;
         $('#modal-edit').modal('show');
       }
   });
 }
 </script>
@endsection