<!-- Page Heading -->
          <!-- <h1 class="h3 mb-2 text-gray-800">Tables</h1>
          <p class="mb-4">DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the <a target="_blank" href="https://datatables.net">official DataTables documentation</a>.</p> -->
          <!-- DataTales Example -->
          <div class="card shadow mb-4">
            <div class="card-header py-3">
              <h6 class="m-0 font-weight-bold text-primary">Data PKA</h6>
            </div>
            <div class="card-body">
              <!-- <a href='javascript:void(0)' onclick="getcontens('page/tambah_pka');" class="btn btn-primary btn-icon-split btn-sm mb-4">
                    <span class="icon text-white-50">
                      <i class="fas fa-plus"></i>
                    </span>
                    <span class="text">Tambah Data PKA</span>
              </a> -->
              <div class="table-responsive">
                <table class="table table-bordered" id="tabel_data_pka" width="100%" cellspacing="0">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th>Periode</th>
                      <th>Unit Misioner</th>
                      <th>Email</th>
                      <th>Tanggal Pembuatan</th>
                      <th>Dibuat Oleh</th>
                      <th style="width: 130px;">Status</th>
                      <th>Aksi</th>
                    </tr>
                  </thead>
                  <!-- <tfoot>
                    <tr>
                      <th>Name</th>
                      <th>Position</th>
                      <th>Office</th>
                      <th>Age</th>
                      <th>Start date</th>
                      <th>Salary</th>
                    </tr>
                  </tfoot> -->
                  <tbody>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
<script type="text/javascript">
$(document).ready(function(){
    var base_url = "<?=base_url()?>";
    var data_pka = function(){
        $('#tabel_produk').hide();
        $.ajax({ 
            url: base_url + 'pka/data_pka',
            type: "post",
            // data:{<?php echo $this->security->get_csrf_token_name(); ?>:'<?php echo $this->security->get_csrf_hash(); ?>'},
            // data:{},
            dataType: "json",
            async : 'false',
            success: function(result){
              // alert(JSON.stringify(result))
              var data = [];
                for ( var i=0 ; i<result.length ; i++ ) {
                  // alert(result[i].kode_pka)
                    var no = i+1;
                    var link_detail = `<a href="javascript:void(0)" onclick="getcontens('page/detail_pka','`+result[i].no_pka+`');" class="btn btn-primary btn-icon-split btn-sm" title="Detail">
                                        <span class="icon text-white-50">
                                          <i class="fas fa-eye"></i>
                                        </span>
                                      </a>`;
                    if(result[i].evaluasi == 1){
                      var link_evaluasi = `<a href="javascript:void(0)" onclick="getpopup('Popup/detail_evaluasi_pka','popupevaluasi','`+result[i].no_pka+`');" class="btn btn-info btn-icon-split btn-sm" title="Evaluasi">
                                        <span class="icon text-white-50">
                                          <i class="fas fa-sticky-note"></i>
                                        </span>
                                      </a>`;
                    }else{
                      var link_evaluasi ="";
                    }
                    if (result[i].acc == "0") {
                      var status = `
                        <span class="mr-2">
                          <i class="fas fa-circle text-warning"></i> Sedang Diproses
                        </span>`;
                    }else if(result[i].acc == "1"){
                      var status = `
                        <span class="mr-2">
                          <i class="fas fa-circle text-success"></i> Berhasil Diterima
                        </span>`;
                    }else{
                      var status = `
                        <span class="mr-2">
                          <i class="fas fa-circle text-danger"></i> Revisi
                        </span>`;
                    }
                    if (result[i].evaluasi == "1" & result[i].acc == "1") {
                      var ev = `
                      <span class="mr-2">
                          <i class="fas fa-circle text-info"></i> Sudah Evaluasi
                        </span>`;
                    }else if (result[i].evaluasi == "2" & result[i].acc == "1") {
                      var ev = `
                      <span class="mr-2">
                          <i class="fas fa-circle text-secondary"></i> Belum Evaluasi
                        </span>`;
                    }else if (result[i].evaluasi == "0" & result[i].acc == "1") {
                      var ev = `
                      <span class="mr-2">
                          <i class="fas fa-circle text-secondary"></i> Belum Evaluasi
                        </span>`;
                    }else{
                      var ev = ``;
                    }
                    var d = `<div class="btn-group" role="group" aria-label="Basic example">`;
                    var dd = `</div>`;
                    data.push([no,result[i].periode_thn,result[i].nm_um,result[i].email,result[i].tgl_buat+"<br>"+result[i].waktu_buat,result[i].username,status+"<br>"+ev,d+link_detail+" "+link_evaluasi+dd]);
                }
                $('#tabel_data_pka').DataTable({
                    //"bJQueryUI"     : true,
                    data                : data,
                    deferRender         : true,
                    processing          : true,
                    ordering            : true,
                    retrieve            : false,
                    paging              : true,
                    deferLoading        : 57,
                    bDestroy            : true,
                    autoWidth           : false,
                    bFilter             : true,
                    iDisplayLength      : 10,
                    responsive: true,
                    language: {
                      searchPlaceholder: 'Cari',
                      sSearch: '',
                      lengthMenu: '_MENU_',
                    },
                });
            },
            beforeSend: function () {
            },
            complete: function () {
                // $('#tabel_produk').show();
            }
        });
    }
    data_pka();
  });
</script>
