manjapro_v6/pages/ganerate_voucher.php

 <!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <div class="row">
              <div class="col-sm-6">
                <h3 class="card-title">Generate Voucher Auto Pilot</h3>
              </div>
              <div class="col-sm-6">
                <ol class="float-sm-right mb-0">
                  <!--<a type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#staticBackdrop">Tambah</a>-->
                </ol>
              </div>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <div class="row">
              <div class="col-md-6">
                <div class="row">
                  <div class="col-md-3 mb-2">
                      
                  </div>
                  <div class="col-md-6">
                    <center>
                      <p>Akumulasi Keuangan Voucher</p>
                    </center>
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-4 col-6">
                      <!-- small box -->
                      <div class="small-box bg-info" id="penjualanBox">
                          <div class="inner">
                              <h4 id="totalValue">0</h4>
                              <p>Total Penjualan</p>
                          </div>
                          <div class="icon">
                              <i class="ion ion-card"></i>
                          </div>
                      </div>
                  </div>
                  <div class="col-lg-4 col-6">
                      <!-- small box -->
                      <div class="small-box bg-danger" id="lunasBox">
                          <div class="inner">
                              <h4 id="ditahanValue">0</h4>
                              <p>Saldo Ditahan</p>
                          </div>
                          <div class="icon">
                              <i class="ion ion-card"></i>
                          </div>
                      </div>
                  </div>
                  <div class="col-lg-4 col-6">
                      <!-- small box -->
                      <div class="small-box bg-success" id="pendingBox">
                          <div class="inner">
                              <h4 id="tersediaValue">0</h4>
                              <p>Saldo Tersedia</p>
                          </div>
                          <div class="icon">
                              <i class="ion ion-card"></i>
                          </div>
                      </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="row">
                  <div class="col-md-3 mb-2">
                  </div>
                  <div class="col-md-6">
                    <center>
                      <p>Akumulasi Voucher</p>
                    </center>
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-3 col-6">
                      <!-- small box -->
                      <div class="small-box bg-info" id="pendingBox">
                          <div class="inner">
                              <h4 id="jumtotalValue">0</h4>
                              <p>Total Voucher</p>
                          </div>
                          <div class="icon">
                              <i class="ion ion-android-wifi"></i>
                          </div>
                      </div>
                  </div>
                  <div class="col-lg-3 col-6">
                      <!-- small box -->
                      <div class="small-box bg-warning" id="pendingBox">
                          <div class="inner">
                              <h4 id="jumbelumValue">0</h4>
                              <p>Belum Aktif</p>
                          </div>
                          <div class="icon">
                              <i class="ion ion-wifi"></i>
                          </div>
                      </div>
                  </div>
                  <div class="col-lg-3 col-6">
                      <!-- small box -->
                      <div class="small-box bg-success" id="pendingBox">
                          <div class="inner">
                              <h4 id="jumsedangValue">0</h4>
                              <p>Sedang Aktif</p>
                          </div>
                          <div class="icon">
                              <i class="ion ion-android-wifi"></i>
                          </div>
                      </div>
                  </div>
                  <div class="col-lg-3 col-6">
                      <!-- small box -->
                      <div class="small-box bg-danger" id="pendingBox">
                          <div class="inner">
                              <h4 id="jumsudahValue">0</h4>
                              <p>Sudah Kedaluarsa</p>
                          </div>
                          <div class="icon">
                              <i class="ion ion-wifi"></i>
                          </div>
                      </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!--ISI KONTEN-->
            
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container-fluid -->
</section>
<!-- /.content -->

<script>
//   // Fungsi untuk menetapkan bulan saat ini sebagai nilai default di dropdown
//   function setDefaultMonth() {
//     // Dapatkan bulan dan tahun saat ini
//     var now = new Date();
//     var currentMonth = now.getMonth() + 1; // getMonth() menghasilkan bulan 0-11, jadi kita tambahkan 1
//     var currentYear = now.getFullYear();

//     // Format bulan dalam format YYYY-MM
//     var currentMonthString = currentYear + '-' + (currentMonth < 10 ? '0' + currentMonth : currentMonth);

//     // Atur nilai default pada dropdown
//     document.getElementById('pilihBulan').value = currentMonthString;

//     // Panggil fungsi untuk mengambil data berdasarkan bulan saat ini
//     fetchDataAgen();
//   }

  // Fungsi untuk mengambil data agen berdasarkan bulan yang dipilih
  function fetchDataAgen() {

    // Ambil nilai ID dan generate_time dari server-side (misalnya dari halaman PHP sebelumnya)
    var idDataServer = <?php echo $SvId; ?>; // Ganti dengan ID yang sesuai atau ambil dari variabel PHP
    
    // Buat request dengan menggunakan XMLHttpRequest
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "list_data/data_akumulasi_pendapatan.php?id=" + idDataServer, true);

    // Ketika request selesai diproses
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // 4 berarti request telah selesai
            if (xhr.status === 200) { // Jika status sukses (200)
                // Parse data JSON dari PHP
                var response = JSON.parse(xhr.responseText);
                
                // Pastikan data tersedia sebelum mengaksesnya
                if (response && response.length > 0) {
                    // Ambil data dari response (jika ada)
                    var data = response[0];

                    // Ambil nilai atau set ke 0 jika tidak ada
                    var total = parseFloat(data.total) || 0;  
                    var ditahan = parseFloat(data.ditahan) || 0;    
                    var tersedia = parseFloat(data.tersedia) || 0;    
                    // var jumlah_voucher = parseInt(data.total_voucher) || 0;
                    // var jumlah_voucher_belum_aktif = parseInt(data.total_voucher_belum_aktif) || 0;
                    // var jumlah_voucher_aktif = parseInt(data.total_voucher_aktif) || 0;
                    // var jumlah_voucher_expaired = parseInt(data.total_voucher_expaired) || 0;

                    // Format angka dengan pemisah ribuan
                    total = total.toLocaleString(); 
                    ditahan = ditahan.toLocaleString();   
                    tersedia = tersedia.toLocaleString();   

                    // Masukkan data ke dalam elemen HTML yang sesuai
                    document.getElementById('totalValue').innerText = "Rp. "+total;
                    document.getElementById('ditahanValue').innerText = "Rp. "+ditahan;
                    document.getElementById('tersediaValue').innerText = "Rp. "+tersedia;
                    // document.getElementById('jumtotalValue').innerText = jumlah_voucher.toLocaleString();
                    // document.getElementById('jumbelumValue').innerText = jumlah_voucher_belum_aktif.toLocaleString();
                    // document.getElementById('jumsedangValue').innerText = jumlah_voucher_aktif.toLocaleString();
                    // document.getElementById('jumsudahValue').innerText = jumlah_voucher_expaired.toLocaleString();
                } else {
                    // Jika data tidak ditemukan atau kosong
                    document.getElementById('result').innerHTML = "Tidak ada data untuk bulan yang dipilih.";
                }
            } else {
                // Jika ada masalah dengan request
                document.getElementById('result').innerHTML = "Error: Tidak dapat mengambil data.";
            }
        }
    };

    // Kirimkan request
    xhr.send();
  }

  // Panggil fungsi setDefaultMonth saat halaman dimuat
  window.onload = fetchDataAgen();
</script>