<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>



<!-- Page Heading -->

           
          <div class="d-sm-flex align-items-center justify-content-between mb-4">

            <h1 class="h3 mb-0 text-gray-800">PKA Periode <i class="periode_thn"></i></h1>

            <div class="btn-group" role="group" aria-label="Basic example">

              <a href="javascript:void(0)" id="cetak_exel" class="d-none d-sm-inline-block btn btn-sm btn-success shadow-sm"><i class="fas fa-file-excel text-white-50"></i> &nbsp Export to Excel</a>

              <a href="javascript:void(0)" id="cetak_exel_full" class="d-none d-sm-inline-block btn btn-sm btn-info shadow-sm"><i class="fas fa-file-excel text-white-50"></i> &nbsp Export to Excel Full</a>

              <a href="javascript:void(0)" id="cetak_pdf" class="d-none d-sm-inline-block btn btn-sm btn-danger shadow-sm"><i class="fas fa-file-pdf text-white-50"></i> &nbsp Export to PDF</a>

            </div>

            

          </div>

          <input type="hidden" id="periode">

          <!-- Content Row -->

          <div class="row">



            <!-- Earnings (Monthly) Card Example -->

            <div class="col-xl-4 col-md-6 mb-4">

              <div class="card border-left-primary shadow h-100 py-2">

                <div class="card-body">

                  <div class="row no-gutters align-items-center">

                    <div class="col mr-2">

                      <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Kegiatan </div>

                      <div class="h5 mb-0 font-weight-bold text-gray-800" id="tot_kegiatan"> </div>

                    </div>

                    <div class="col-auto">

                      <i class="fas fa-receipt fa-2x text-gray-500"></i>

                    </div>

                  </div>

                </div>

              </div>

            </div>



            <!-- Earnings (Monthly) Card Example -->

            <div class="col-xl-4 col-md-6 mb-4">

              <div class="card border-left-danger shadow h-100 py-2">

                <div class="card-body">

                  <div class="row no-gutters align-items-center">

                    <div class="col mr-2">

                      <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Pengeluaran </div>

                      <div class="h5 mb-0 font-weight-bold text-gray-800" id="pengeluaran"></div>

                    </div>

                    <div class="col-auto " >

                      <i class="fas fa-dollar-sign fa-2x text-gray-500"></i>

                    </div>

                  </div>

                </div>

              </div>

            </div>



            <!-- Earnings (Monthly) Card Example -->

            <div class="col-xl-4 col-md-6 mb-4">

              <div class="card border-left-success shadow h-100 py-2">

                <div class="card-body">

                  <div class="row no-gutters align-items-center">

                    <div class="col mr-2">

                      <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Penerimaan</div>

                      <div class="row no-gutters align-items-center">

                        <div class="col-auto">

                          <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800" id="penerimaan"></div>

                        </div>

                      </div>

                    </div>

                    <div class="col-auto">

                      <i class="fas fa-hand-holding-usd fa-2x text-gray-500"></i>

                    </div>

                  </div>

                </div>

              </div>

            </div>

    <div class="container-fluid">

        <div class="card border-left-info shadow h-100 py-2">

          <div class="card-body">

            <canvas id="myChart"></canvas>

          </div>

        </div>

        

    </div>

        

<script type="text/javascript">

  $(document).ready(function(){

    var base_url = "<?=base_url()?>";

    var periode_thn_view = function(){

      jQuery.ajax({

        url: base_url+"dashboard/periode_thn_view",

        dataType:'json',

        success:function(response){  

          $(".periode_thn").html(response);

          $("#periode").val(response);

        },

                error: function(jqXHR, textStatus, errorThrown) {

                  $('#loading').modal('show');

                        Command: toastr["error"](errorThrown, "Error");

                }

                // ,

                // beforeSend: function () {

                //   $('#loading').modal('show');

                // },

                // complete: function () {

                //     $('#loading').modal('hide');

                // }        

      });

    }

    periode_thn_view();

    var tot_kegiatan = function(){

      jQuery.ajax({

        url: base_url+"dashboard/tot_kegiatan_admin",

        dataType:'json',

        success:function(response){  

          // alert(response)

          $("#tot_kegiatan").html(response+" Kegiatan");

        },

                error: function(jqXHR, textStatus, errorThrown) {

                  $('#loading').modal('show');

                        Command: toastr["error"](errorThrown, "Error");

                }     

      });

    }

    tot_kegiatan();

    var pengeluaran = function(){

      jQuery.ajax({

        url: base_url+"dashboard/dashboard_pengeluaran_admin",

        dataType:'json',

        success:function(response){

          // alert(response)

          // alert(formatRupiah(response,"Rp. "));      

          $("#pengeluaran").html(formatRupiah(response,"Rp. "));

        },

                error: function(jqXHR, textStatus, errorThrown) {

                  $('#loading').modal('show');

                        Command: toastr["error"](errorThrown, "Error");

                }

                // ,

                // beforeSend: function () {

                //   $('#loading').modal('show');

                // },

                // complete: function () {

                //     $('#loading').modal('hide');

                // }        

      });

    }

    pengeluaran();

    var penerimaan = function(){

      jQuery.ajax({

        url: base_url+"dashboard/dashboard_penerimaan_admin",

        dataType:'json',

        success:function(response){

          // alert(response)

          // alert(formatRupiah(response,"Rp. "));      

          $("#penerimaan").html(formatRupiah(response,"Rp. "));

        },

                error: function(jqXHR, textStatus, errorThrown) {

                  $('#loading').modal('hide');

                        Command: toastr["error"](errorThrown, "Error");

                }

                // ,

                // beforeSend: function () {

                //   $('#loading').modal('show');

                // },

                // complete: function () {

                //     $('#loading').modal('hide');

                // }        

      });

    }

    penerimaan();

    $("#cetak_exel").click(function(){

      var periode = $("#periode").val();

      // window.open("http://www.dumetschool.com", "DUMET School", "height=700, width=500, scrollbars=yes");

      window.location = base_url+"Laporan_excel/cetak_excel_dashboard_admin/"+periode.replace('/', '-');

    });

    $("#cetak_exel_full").click(function(){

      var periode = $("#periode").val();

      // window.open("http://www.dumetschool.com", "DUMET School", "height=700, width=500, scrollbars=yes");

      window.location = base_url+"Laporan_excel/cetak_excel_dashboard_admin_full/"+periode.replace('/', '-');

    });

    $("#cetak_pdf").click(function(){

      var periode = $("#periode").val();

      window.open(base_url+"Laporan_pdf/cetak_pdf_dashboard_admin/"+periode.replace('/', '-'), "PKA", "fullscreen=yes, scrollbars=yes");

      // window.location = base_url+"Laporan_excel/cetak_excel_dashboard_admin/"+periode.replace('/', '-');

    });

    

    

    //////////////////////////////////////////////////

    var chart = function(){

      jQuery.ajax({

        url: base_url+"dashboard/chart_log",

        dataType:'json',

        success:function(response){

          // alert(JSON.stringify(response.data))

          var ctx = document.getElementById('myChart').getContext('2d');

          var chart = new Chart(ctx, {

            // The type of chart we want to create

            type: 'line',

    

            // The data for our dataset

            data: {

              labels: response.label,

              datasets: [{

                label: 'Data Pengunjung Bulan '+response.bulan,

                fill: false,

                lineTension: 0.1,

                backgroundColor: "rgba(75,192,192,0.4)",

                borderColor: "rgba(75,192,192,1)",

                borderCapStyle: 'butt',

                borderDash: [],

                borderDashOffset: 0.0,

                borderJoinStyle: 'miter',

                pointBorderColor: "rgba(75,192,192,1)",

                pointBackgroundColor: "#fff",

                pointBorderWidth: 6,

                pointHoverRadius: 5,

                pointHoverBackgroundColor: "rgba(75,192,192,1)",

                pointHoverBorderColor: "rgba(220,220,220,1)",

                pointHoverBorderWidth: 2,

                pointRadius: 1,

                pointHitRadius: 10,

                data: response.data

              }]

            },

    

            // Configuration options go here

            options: {}

          });

        },

        error: function(jqXHR, textStatus, errorThrown) {

          $('#loading').modal('hide');

          Command: toastr["error"](errorThrown, "Error");

        }     

      });

    }

    chart();

    // setInterval(function(){

    //   chart(); 

    //   $( document ).ajaxStart(function() {

    //     $('#loading').modal('hide');  

    // });

    // }, 20000);

    

  })

</script>

<script>

// Mengatur waktu akhir perhitungan mundur

var periode_sampai = "<?=$periode_sampai?>";

var countDownDate = new Date(periode_sampai+" 23:59:59").getTime();



// Memperbarui hitungan mundur setiap 1 detik

var x = setInterval(function() {



  // Untuk mendapatkan tanggal dan waktu hari ini

  var now = new Date().getTime();

    

  // Temukan jarak antara sekarang dan tanggal hitung mundur

  var distance = countDownDate - now;

    

  // Perhitungan waktu untuk hari, jam, menit dan detik

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));

  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    



  if(String(hours).length ==1){

    var jam = "0"+hours;

  }else{

    var jam = hours;

  }

  if(String(minutes).length ==1){

    var menit = "0"+minutes;

  }else{

    var menit = minutes;

  }

  if(String(seconds).length ==1){

    var detik = "0"+seconds;

  }else{

    var detik = seconds;

  }

  // Keluarkan hasil dalam elemen dengan id = "demo"

  document.getElementById("demo").innerHTML = days + " Hari " + jam + ":"

  + menit + ":" + detik + "";

    

  // Jika hitungan mundur selesai, tulis beberapa teks 

  if (distance < 0) {

    clearInterval(x);

    document.getElementById("demo").innerHTML = "EXPIRED";

  }

}, 1000);

</script>