<!DOCTYPE html>
<html lang="en">


<?php $this->load->view("admin/header"); ?>

<body>

  <?php $this->load->view("admin/side_topbar"); ?>

  <div id="wrapper">
    <div class="main-content">
      <div class="row small-spacing">
        <div class="col-xs-12">
          <div class="box-content card">
            <h4 class="box-title">List Pegawai </h4>
            <!-- /.dropdown js__dropdown -->
            <div class="card-content">
              <div class="form-group">
                <button type="button" class="btn btn-primary btn-sm waves-effect waves-light" onclick="buka_modal_tambah()">Tambah Pegawai</button> <button type="button" class="btn btn-success btn-sm waves-effect waves-light" onclick="buka_modal_cetak()">Cetak List Pegawai</button>
              </div>
              <div style="overflow-x: auto">
                <table id="table_list_karyawan" class="table table-striped table-bordered display" style="width:100%">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th>NIP</th>
                      <th>Nama</th>
                      <th>No Telpon</th>
                      <th>Jabatan</th>
                      <th>Pangkat</th>
                      <th>Aksi</th>
                    </tr>
                  </thead>

                </table>
              </div>
            </div>

            <!-- /#flot-chart-1.flot-chart -->
          </div>
          <!-- /.box-content -->
        </div>
        <!-- /.col-xs-12 -->



      </div>
      <!-- /.row -->

      <?php $this->load->view('admin/footer') ?>

    </div>
    <!-- /.main-content -->
  </div>

  <div class="modal fade" id="modal_karyawan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-1" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
      <form class="modal-content" onsubmit="return tambah_edit(event)" id="form_tambah_karyawan">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel-1"></h4>
          <!-- <p style="font-size: 10px;"><i>(Geserkan marker ke titik kordinat dinas)</i></p> -->
        </div>
        <div class="modal-body">
          <div class="form-group text-center" id="div_img" style="display: none;">
            <img src="" class="avatar" id="img_container" />
          </div>
          <div class="form-group">
            <label for="nik">Foto</label>
            <input type="file" class="form-control" id="foto" required="true">
          </div>
          <div class="form-group">
            <label for="nik">NIP Pegawai</label>
            <input type="hidden" id="status_form">
            <input type="text" class="form-control" id="nik" placeholder="Masukkan NIK Pegawai" minlength="14" maxlength="18" onkeypress="return isNumberKey(event)" required>
          </div>
          <div class="form-group">
            <label for="nama">Nama</label>
            <input type="text" class="form-control" id="nama" placeholder="Masukkan Nama Pegawai" required>
          </div>
          <div class="form-group">
            <label for="nama">No Telepon</label>
            <input type="text" class="form-control" id="no_telpon" placeholder="Masukkan No Telepon Pegawai" minlength="10" maxlength="14" onkeypress="return isNumberKey(event)" required>
          </div>
          <div class="form-group">
            <label for="jabatan">Jabatan</label>
            <select name="jabatan" id="jabatan" class="form-control" required>
              <option value="" disabled selected>-Pilih Jabatan</option>
              <option value="Kepala Dinas">Kepala Dinas</option>
              <option value="Sekretaris">Sekretaris</option>
              <option value="Bendahara Keuangan">Bendahara Keuangan</option>
              <option value="Kepala Bidang">Kepala Bidang</option>
              <option value="Analisis Kebijakan">Analisis Kebijakan</option>
              <option value="Adyatama Kepariwisataan dan Ekonomi">Adyatama Kepariwisataan dan Ekonomi</option>
              <option value="Kasubag Perencanaan">Kasubag Perencanaan</option>
              <option value="Fungsional Umum">Fungsional Umum</option>
              <option value="Kasubag Kepegawaian">Kasubag Kepegawaian</option>
              <option value="Staf">Staf</option>
            </select>
          </div>
          <div class="form-group">
            <label for="pangkat">Pangkat</label>
            <select name="pangkat" id="pangkat" class="form-control" required>
              <option value="" disabled selected>-Pilih Pangkat</option>
              <option value="Tiada">Tiada</option>
              <option value="I A">I A</option>
              <option value="I B">I B</option>
              <option value="I C">I C</option>
              <option value="I D">I D</option>
              <option value="II A">II A</option>
              <option value="II B">II B</option>
              <option value="II C">II C</option>
              <option value="II D">II D</option>
              <option value="III A">III A</option>
              <option value="III B">III B</option>
              <option value="III C">III C</option>
              <option value="III D">III D</option>
              <option value="IV A">IV A</option>
              <option value="IV B">IV B</option>
              <option value="IV C">IV C</option>
              <option value="IV D">IV D</option>
            </select>
          </div>
          <div class="form-group">
            <label for="keanggotaan">Keanggotaan</label>
            <select name="keanggotaan" id="keanggotaan" class="form-control" required>
              <option value="" disabled selected>-Pilih Keanggotaan</option>
              <option value="Sekretariat">Sekretariat</option>
              <option value="Olahraga">Olahraga</option>
              <option value="Pemuda">Pemuda</option>
              <option value="Ekonomi Kreatif">Ekonomi Kreatif</option>
              <option value="Pariwisata">Pariwisata</option>
              <option value="Keuangan">Keuangan</option>

            </select>
          </div>
          <div class="form-group">
            <label for="status">Status</label>
            <select name="status" id="status" class="form-control" required>
              <option value="" disabled selected>-Pilih Status</option>
              <option value="PNS">PNS</option>
              <option value="Kontrak">Kontrak</option>
            </select>
          </div>
          <div class="form-group">
            <label for="jenis_kelamin">Jenis Kelamin</label>
            <select name="jenis_kelamin" id="jenis_kelamin" class="form-control" required>
              <option value="" disabled selected>-Pilih Opsi</option>
              <option value="Laki-laki">Laki-laki</option>
              <option value="Perempuan">Perempuan</option>
            </select>
          </div>
          <div class="form-group">
            <label for="tanggal_lahir">Tanggal Lahir</label>
            <input type="date" class="form-control" id="tanggal_lahir" required>
          </div>
          <div class="form-group">
            <label for="tempat_lahir">Tempat Lahir</label>
            <input type="text" class="form-control" id="tempat_lahir" required>
          </div>
          <div class="form-group">
            <label for="alamat">Alamat</label>
            <textarea name="alamat" id="alamat" cols="30" rows="10" class="form-control" style="resize: none;" placeholder="Masukkan Alamat" required></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" id="button_simpan_edit" class="btn btn-primary btn-xs waves-effect waves-light"></button>
          <button type="button" class="btn btn-danger btn-xs waves-effect waves-light" data-dismiss="modal">Batalkan</button>
        </div>
      </form>
    </div>
  </div>

  <div class="modal fade" id="modal_list_pegawai" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-1">
    <div class="modal-dialog modal-lg" role="document">
      <form class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel-1">Cetak List Pegawai</h4>
          <!-- <p style="font-size: 10px;"><i>(Geserkan marker ke titik kordinat dinas)</i></p> -->
        </div>
        <div class="modal-body">
          <div class="form-group" id="isi_surat"></div>

        </div>

      </form>
    </div>
  </div>

  <?php $this->load->view('admin/scripts') ?>

  <script src="<?= base_url() ?>assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
  <script src="<?= base_url() ?>assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>

  <script async>
    var id_dinas = <?= $id_dinas ?>;

    var data_karyawan;

    var table;

    function datatables() {
      table = $('#table_list_karyawan').DataTable({
        // "searching": false,
        "lengthMenu": [
          [5, 10, 15, -1],
          [5, 10, 15, "All"]
        ],
        "pageLength": 10,
        "ordering": true,
        "processing": true,
        "serverSide": true,
        // "order": [[ 4, 'desc' ]], 

        "ajax": {
          "url": server_url + "admin/karyawan",
          "type": "POST",
          data: {
            proses: 'table_karyawan'
          },

        },

        "columnDefs": [{
          "targets": [0],
          "orderable": false,
        }, ],
      });
    }
    datatables()

    document.getElementById("foto").onchange = function() {
      let foto_produk = document.getElementById('foto').files[0];
      check_file(foto_produk)
    }

    function buka_modal_tambah() { // buka modal untuk tambah karyawan
      $(".modal-title").html("Form Tambah Pegawai")
      $("#status_form").val("tambah")
      $("#button_simpan_edit").html("Tambah Pegawai")
      // reset form_tambah_karyawan
      $("#div_img").attr('style', "display : none")
      $("#form_tambah_karyawan")[0].reset()
      $('#modal_karyawan').modal('show');
    }

    async function karyawan_edit(nik) {
      // console.log(nik);
      $(".modal-title").html("Form Edit Pegawai")
      $("#status_form").val("edit")
      $("#button_simpan_edit").html("Edit Pegawai")
      $("#foto").attr('required', false)
      $("#foto").val(null)
      $("#div_img").removeAttr("style")


      let data;
      try {
        data = await $.ajax({
          url: server_url_api + "karyawan?nik=" + nik + "&id_dinas=" + id_dinas,
          type: 'get',
          async: false,
          beforeSend: function(res) {
            block_ui("Mengambil Data Pegawai");
          },
        });
        data = data.data
        data_karyawan = data;
        await $.unblockUI();
        $("#nik").val(data.nik)
        $("#nama").val(data.nama)
        $("#no_telpon").val(data.no_telpon)
        $("#jabatan").val(data.jabatan)
        $("#tanggal_lahir").val(data.tanggal_lahir)
        $("#alamat").html(data.alamat)
        $("#nik").attr("disabled", true)
        $("#img_container").attr("src", server_url + data.image)
        selectElement('pangkat', data.pangkat);
        selectElement('status', data.status);
        selectElement('jenis_kelamin', data.jenis_kelamin);
        selectElement('keanggotaan', data.keanggotaan);
        $("#tempat_lahir").val(data.tempat_lahir)
        $('#modal_karyawan').modal('show');
      } catch (error) {
        await $.unblockUI();
        const statusCode = error.status;
        console.log(error)
        console.log(statusCode)
        if (statusCode == 0 || statusCode == 500) return toastr.error("Jaringan atau server bermasalah, sila refresh kembali halaman");

        const message = error.responseJSON.message
        toastr.error(message);


      }
    }

    function tambah_edit(e) {
      e.preventDefault();
      const status_form = $("#status_form").val()

      const foto = document.getElementById('foto').files[0]
      const nik = $("#nik").val()
      const nama = $("#nama").val()
      const no_telpon = $("#no_telpon").val()
      const jabatan = $("#jabatan").val()
      const alamat = $("#alamat").val()
      const pangkat = $("#pangkat").val()
      const status = $("#status").val()
      const tanggal_lahir = $("#tanggal_lahir").val()
      const tempat_lahir = $("#tempat_lahir").val()
      const jenis_kelamin = $("#jenis_kelamin").val()
      const keanggotaan = $("#keanggotaan").val()

      // console.log(pangkat,status,tanggal_lahir)
      let data = new FormData()
      data.append('nik', nik)
      data.append('proses', status)
      data.append('foto', foto == undefined ? 'tiada' : foto)
      data.append('nama', nama)
      data.append('no_telpon', no_telpon)
      data.append('jabatan', jabatan)
      data.append('alamat', alamat)
      data.append('id_dinas', id_dinas)
      data.append('status_form', status_form)
      data.append('pangkat', pangkat)
      data.append('status', status)
      data.append('tanggal_lahir', tanggal_lahir)
      data.append('tempat_lahir', tempat_lahir)
      data.append('jenis_kelamin', jenis_kelamin)
      data.append('keanggotaan', keanggotaan)
      if (status_form == "tambah") {

        swal({
          text: `Tambah Pegawai Dengan\nNIK : ${nik},\nNama : ${nama}`,
          icon: "info",
          buttons: {
            cancel: true,
            confirm: true,
          },
          // dangerMode: true,
        }).then((yes) => {
          if (yes) {
            // console.log("tambah karyawan", nik, nama, jabatan, alamat)
            $.ajax({
              url: server_url_api + "karyawan",
              type: 'post',
              contentType: false,
              processData: false,
              data,
              beforeSend: function(res) {
                $('#modal_karyawan').modal('hide');
                block_ui("Menambah Pegawai");
              },
              success: function(response) {
                $.unblockUI();
                // window.location.reload();
                console.log(response)
                $('#table_list_karyawan').dataTable().fnDestroy();
                datatables()
                toastr.success(response.message);
              },
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                $.unblockUI();
                // console.log(errorThrown)
                // console.log(textStatus)
                const statusCode = XMLHttpRequest.status;
                const responseJSON = XMLHttpRequest.responseJSON;
                console.log(statusCode);
                console.log(responseJSON)
                if (statusCode != 500 || statusCode != 0) {
                  toastr.error(responseJSON.message);
                } else {
                  toastr.error("Jaringan atau server bermasalah, sila refresh kembali halaman");
                }


              }
            });
          }
        });
      }

      if (status_form == 'edit') {
        // console.log(nik,nama,no_telpon,jabatan,alamat)
        // if (nik == data_karyawan.nik && nama == data_karyawan.nama && no_telpon == data_karyawan.no_telpon && jabatan == data_karyawan.jabatan && alamat == data_karyawan.alamat) return toastr.warning("Tiada Perubahan Data Karyawan");

        // console.log("sini berlaku edit")

        swal({
          text: `Edit Data Pegawai ?`,
          icon: "info",
          buttons: {
            cancel: true,
            confirm: true,
          },
          // dangerMode: true,
        }).then((yes) => {
          if (yes) {
            // console.log("tambah karyawan",nik,nama,jabatan,alamat)
            $.ajax({
              url: server_url_api + "karyawan",
              type: 'post',
              contentType: false,
              processData: false,
              data,
              beforeSend: function(res) {
                $('#modal_karyawan').modal('hide');
                block_ui("Edit Data Pegawai");
              },
              success: function(response) {
                $.unblockUI();
                // window.location.reload();
                $('#table_list_karyawan').dataTable().fnDestroy();
                datatables()
                // console.log(response)
                toastr.success(response.message);
              },
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                $.unblockUI();
                // console.log(errorThrown)
                // console.log(textStatus)
                const statusCode = XMLHttpRequest.status;
                const responseJSON = XMLHttpRequest.responseJSON;
                console.log(statusCode);
                console.log(responseJSON)
                if (statusCode != 500 || statusCode != 0) {
                  toastr.error(responseJSON.message);
                } else {
                  toastr.error("Jaringan atau server bermasalah, sila refresh kembali halaman");
                }


              }
            });
          }
        });
      }
      // console.log("sini tambah atau edit", status)
    }

    function hapus_karyawan(nik) {
      // console.log(nik)
      swal({
        text: `Hapus Data Pegawai Dengan\nNIK : ${nik}\n?`,
        icon: "warning",
        dangerMode: true,
        buttons: {
          cancel: true,
          confirm: true,
        },
        // dangerMode: true,
      }).then((yes) => {
        if (yes) {
          // console.log("hapus karyawan")
          $.ajax({
            url: server_url_api + "karyawan",
            type: 'delete',
            data: {
              id_dinas: id_dinas,
              nik: nik,
            },
            beforeSend: function(res) {
              $('#modal_karyawan').modal('hide');
              block_ui("Hapus Pegawai");
            },
            success: function(response) {
              $.unblockUI();
              // window.location.reload();
              $('#table_list_karyawan').dataTable().fnDestroy();
              datatables()
              console.log(response)
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
              $.unblockUI();
              // console.log(errorThrown)
              // console.log(textStatus)
              const statusCode = XMLHttpRequest.status;
              const responseJSON = XMLHttpRequest.responseJSON;
              console.log(statusCode);
              console.log(responseJSON)
              if (statusCode != 500 || statusCode != 0) {
                toastr.error(responseJSON.message);
              } else {
                toastr.error("Jaringan atau server bermasalah, sila refresh kembali halaman");
              }


            }
          });
        }
      });

    }

    function tukar_id(id) {
      // console.log(id)
      swal({
        text: `Reset ID Smartphone Pegawai Dengan\nNIK : ${id}\n?`,
        icon: "warning",
        dangerMode: true,
        buttons: {
          cancel: true,
          confirm: true,
        },
        // dangerMode: true,
      }).then((yes) => {
        if (yes) {
          // console.log("hapus karyawan")
          $.ajax({
            url: server_url_api + "reset_id",
            type: 'put',
            data: {
              id_dinas: id_dinas,
              nik: id,
            },
            beforeSend: function(res) {
              $('#modal_karyawan').modal('hide');
              block_ui("Reset ID Smartphone Pegawai");
            },
            success: function(response) {
              $.unblockUI();
              // window.location.reload();
              $('#table_list_karyawan').dataTable().fnDestroy();
              datatables()
              console.log(response)
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
              $.unblockUI();
              // console.log(errorThrown)
              // console.log(textStatus)
              const statusCode = XMLHttpRequest.status;
              const responseJSON = XMLHttpRequest.responseJSON;
              console.log(statusCode);
              console.log(responseJSON)
              if (statusCode != 500 || statusCode != 0) {
                toastr.error(responseJSON.message);
              } else {
                toastr.error("Jaringan atau server bermasalah, sila refresh kembali halaman");
              }


            }
          });
        }
      });
    }

    function cek_laporan(nik, stat) {
      if (stat == 'tidak') {
        toastr.info("Pegawai Ini Tidak Memiliki Laporan Kegiatan");
        return
      }

      window.location.href = server_url + "admin/karyawan/" + nik;
    }

    function buka_modal_cetak() {
      const laporan = `<embed src="${server_url}admin/cetak_list_pegawai" frameborder="1" width="100%" height="600px">`;
      $("#isi_surat").empty();
      $("#isi_surat").append(laporan);
      $('#modal_list_pegawai').modal('show');
    }
  </script>


</body>

<!-- Dibuat oleh Kicap Karan. https://www.kicap-karan.com -->

</html>