<!-- 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 Unit Misioner</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="row">
                    <div class="form-group  col-md-6">
                      <label for="exampleFormControlSelect1">Periode PKA</label>
                      <select class="form-control" id="periode_thn" name="periode_thn" required>
                      </select>
                    </div>
                    <div class="form-group  col-md-6">
                      <label for="exampleFormControlSelect1">Unit Misioner</label>
                      <select class="form-control" id="unit_misioner" name="unit_misioner" required>
                      </select>
                    </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="table-responsive">
                    <table class="table table-bordered" id="tabel_data_pka" width="100%" cellspacing="0">
                      <thead>
                        <tr>
                          <th>No</th>
                          <th>Unit Misioner</th>
                          <th>Email</th>
                          <th>Jumlah Kegiatan</th>
                          <th>Tanggal Pembuatan</th>
                          <th>Dibuat Oleh</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>
            </div>
          </div>
<script type="text/javascript">
$(document).ready(function(){
    var base_url = "<?=base_url()?>";
    periode_thn = function(param){
      jQuery.ajax({
        url: base_url+"pka/select_periode_thn",
        dataType:'json',
        success:function(response){
          var data = response;
          var $id = $('#periode_thn');
          $id.empty();
          $id.append('<option value="all">- Semua Periode -</option>');
          for (var i = 0; i < data.length; i++) {
            $id.append('<option value="'+data[i].periode_thn+'">' + data[i].periode_thn + '</option>');
          }        
        }            
      });
    }
    periode_thn();
    unit_misioner = function(param){
      jQuery.ajax({
        url: base_url+"unit_misioner/data_unit_misioner",
        dataType:'json',
        success:function(response){
          var data = response;
          var $id = $('#unit_misioner');
          $id.empty();
          $id.append('<option value="all">- Semua Unit Misioner -</option>');
          for (var i = 0; i < data.length; i++) {
            if(data[i].nama == "Umum"){
              $d = 'style="display:none;"';
            }else{
              $d = '';
            }
            $id.append('<option '+$d+' value="'+data[i].kode+'">' + data[i].nama + '</option>');
          }        
        }            
      });
    }
    unit_misioner();
    $('#periode_thn').change(function(){
      var periode_thn = $('#periode_thn').val(); 
      var unit_misioner = $('#unit_misioner').val(); 
      data_pka(unit_misioner,periode_thn.replace('/','-'));
    })
    $('#unit_misioner').change(function(){
      var periode_thn = $('#periode_thn').val(); 
      var unit_misioner = $('#unit_misioner').val(); 
      data_pka(unit_misioner,periode_thn.replace('/','-'));
    })
    data_pka = function(unit_misioner,periode_thn){
        $('#tabel_produk').hide();
        $.ajax({ 
            url: base_url + 'pka/data_pka_um',
            type: "post",
            // data:{<?php echo $this->security->get_csrf_token_name(); ?>:'<?php echo $this->security->get_csrf_hash(); ?>'},
            data:{unit_misioner:unit_misioner,periode_thn:periode_thn},
            dataType: "json",
            async : 'false',
            success: function(result){
              // alert(result)
              // alert(JSON.stringify(result))
              var data = [];
                for ( var i=0 ; i<result.length ; i++ ) {
                  // alert(result[i].kode_pka)
                  // alert(result[i].acc)
                    var no = i+1;
                    if(result[i].acc == "0"){
                      var link_acc = `<a href="javascript:void(0)" onclick="acc('`+result[i].no_pka+`')" class="btn btn-success btn-icon-split btn-sm" title="ACC">
                                        <span class="icon text-white-50">
                                          <i class="fas fa-file-signature"></i>
                                        </span>
                                      </a>`;
                      var link_refisi = `<a href="javascript:void(0)" onclick="refisi('`+result[i].no_pka+`')" class="btn btn-secondary btn-icon-split btn-sm" title="Revisi">
                                        <span class="icon text-white-50">
                                          <i class="fas fa-file-prescription"></i>
                                        </span>
                                      </a>`;
                    }else{
                      var link_acc = "";
                      var link_refisi ="";
                    }
                    // var satuan;
                    // if(result[i].satuan == 1){
                    //     satuan = 'Pcs';
                    // }else{
                    //     satuan = 'Kg';
                    // }
                    // var link_edit = "<a href='javascript:void(0)' onclick=\"getpopup('aksesoris/edit','"++"','popupedit','"+result[i].id_kma+"');\"><span class='btn btn-info fa fa-edit' title='Edit Aksesoris'></span></a>";
                    var link_detail = `<a href="#" onclick="getcontens('page/detail_pka_admin','`+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>`;
                    var d ='<div class="btn-group" role="group" aria-label="Basic example">';
                    var dd = '</div>';
                    data.push([no,result[i].nm_um,result[i].email,result[i].jml+" Kegiatan",result[i].tgl_buat+"<br>"+result[i].waktu_buat,result[i].username,d+link_detail+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_',
                    },
                });
            },
                error: function(jqXHR, textStatus, errorThrown) {
                  $('#loading').modal('show');
                        Command: toastr["error"](errorThrown, "Error");
                },
                beforeSend: function () {
                  $('#loading').modal('show');
                },
                complete: function () {
                    $('#loading').modal('hide');
                }
        });
    }
    data_pka("all","all");
  });
</script>
