Default page

Edit File: detail.php

<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0" id="judul-tagihan">Tagihan <?=$title?></h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
          <li class="breadcrumb-item active"><?=$li_1?></li>
        </ol>
      </div>
    </div>
  </div>
</div>

<section class="content">
  <div class="container-fluid">
    <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <div class="card-tools">
                  <a class="btn btn-sm btn-primary" onclick="add(0)">Tambah</a>
                </div>
              <div class="row">
                <select id="bulan" class="col-2">
                    <option value="">--Pilih Bulan--</option>
                    <?php
                      for ($i=1; $i < 13; $i++) { 
                        echo '<option value="'.$i.'">'.nama_bulan($i).'</option>';
                      }
                    ?>
                </select>&nbsp;&nbsp;&nbsp;
                <select id="tahun" class="col-2">
                    <option value="">--Pilih Tahun--</option>
                    <?php
                      for ($i=2025; $i < 2030; $i++) { 
                        echo '<option value="'.$i.'">'.$i.'</option>';
                      }
                    ?>
                </select>&nbsp;&nbsp;&nbsp;
                <a class="btn btn-sm btn-success" id="find">Switch</a>
              </div>

</div>
            <div class="card-body">
              <table id="transaksiTable" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>No</th>
                    <th>Nama</th>
                    <th>Jumlah</th>
                    <th>Terbayar</th>
                    <th>Sisa</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                  <tr>
                    <th>&nbsp;</th>
                    <th>Total</th>
                    <th id="jml-tagihan">?</th>
                    <th id="bayar-tagihan">?</th>
                    <th id="piutang-siswa">?</th>
                    <th>&nbsp;</th>
                  </tr>
                </tfoot>
              </table>
            </div>
            
          </div>
        </div>
    </div>
  </div>
</section>

<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0">Pengeluaran <?=$title?></h1>
      </div>
    </div>
  </div>
</div>

<section class="content">
  <div class="container-fluid">
    <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <table id="pengeluaranTable" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Tanggal</th>
                    <th>Nama</th>
                    <th>Jumlah</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                  <tr>
                    <th>&nbsp;</th>
                    <th>Sisa Saldo</th>
                    <th id="saldo-akhir" class="text-right">0</th>
                    <th>&nbsp;</th>
                  </tr>
                </tfoot>
              </table>
            </div>
            
          </div>
        </div>
    </div>
  </div>
</section>
<div class="modal fade" id="add">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form class="form-horizontal" method="post" action="<?=base_url('pemasukan')?>/verifikasi" enctype="multipart/form-data">
        <div class="modal-header">
          <h4 class="modal-title">Form Tambah <?=$title?></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="text" name="data_id" class="d-none" value="<?=$id?>">
          <?php
            echo csrf_field();
            echo form_file('upload');
          ?>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" id="edit">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form class="form-horizontal" method="post" id="form-edit">
        <div class="modal-header">
          <h4 class="modal-title" id="form-title"></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="text" name="id_pemasukan" id="pemasukan_id" value="<?=$pemasukan->id?>" class="d-none">
          <input type="text" name="data_id" class="d-none" id="data_id">
          <?=csrf_field()?>
          <?php 
            echo form_text('nama');
            echo form_text('tgl');
            echo form_text('jumlah');
          ?>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
    
  </div>
  
</div>
<script type="text/javascript">
  const id_p = '<?=$pemasukan->id?>';
  let transaksiTable, pengeluaranTable; // Variabel global untuk instance DataTables
  let csrfName = $('input[name="Buyas_APPS"]').attr('name'); // Nama token
  let csrfTokenHash = $('input[name="Buyas_APPS"]').val(); // Nilai token
  const name = '<?=$title?>';
  // Fungsi untuk memuat data via AJAX
  function loadData(bulan, tahun) {
      $.ajax({
          url: "<?php echo base_url('pemasukan/rekap'); ?>",
          method: "POST",
          data: {
              // Tambahkan data filter ke request AJAX
              bulan : bulan,
              tahun : tahun,
              id_p : id_p,
              [csrfName] : csrfTokenHash
          },
          dataType: "json",
          success: function(response) {
              $('#judul-tagihan').html('Tagihan ' + name + ' Bulan ' + bulan + '-' + tahun)
              csrfTokenHash = response.csrf_token_hash;
              $('input[name="Buyas_APPS"]').val(response.csrf_token_hash)

// Hancurkan instance DataTables yang lama jika ada
              if ($.fn.DataTable.isDataTable('#transaksiTable')) {
                  transaksiTable.destroy();
              }

if ($.fn.DataTable.isDataTable('#pengeluaranTable')) {
                  pengeluaranTable.destroy();
              }

transaksiTable = $('#transaksiTable').DataTable({
                  responsive : true, 
                  buttons: {
                      buttons: [
                          {
                              extend: 'excel',
                              footer: true,
                              exportOptions: {
                                columns: ':not(:last-child)'
                              }
                          },
                          {
                              extend: 'pdf',
                              footer: true,
                              exportOptions: {
                                columns: ':not(:last-child)'
                              }
                          },
                          {
                              extend: 'print',
                              footer: true,
                              exportOptions: {
                                columns: ':not(:last-child)'
                              }
                          }
                      ],
                  },
                  
                  data: response.data.masuk,
                  columns: [                  
                      { data: 'no', className: 'text-center' },
                      { data: 'nama' },
                      { data: 'jumlah_tagihan', className: 'text-right' },
                      { data: 'jumlah_pembayaran', className: 'text-right' },
                      { data: 'kekurangan_pembayaran', className: 'text-right' },
                      { data: 'aksi', className: 'text-center' },
                  ],
                  // Konfigurasi tambahan DataTables
                  paging: false,
                  scrollY: 400,
                  scrollCollapse: true,
                  searching: false,
                  ordering: false,
                  /*
                    <th id="jml-tagihan">?</th>
                    <th id="bayar-tagihan">?</th>
                    <th id="piutang-siswa">?</th>
                  */
                  footerCallback: function(row, data, start, end, display) {
                      $('#jml-tagihan').html(response.data.tt)
                      $('#bayar-tagihan').html(response.data.jb)
                      $('#piutang-siswa').html(response.data.sisa)
                  }
              });
              // Inisialisasi ulang DataTables dengan data baru
              pengeluaranTable = $('#pengeluaranTable').DataTable({
                  responsive : true, 
                  buttons: {
                      buttons: [
                          {
                              extend: 'excel',
                              footer: true,
                              exportOptions: {
                                columns: ':not(:last-child)'
                              }
                          },
                          {
                              extend: 'pdf',
                              footer: true,
                              exportOptions: {
                                columns: ':not(:last-child)'
                              }
                          },
                          {
                              extend: 'print',
                              footer: true,
                              exportOptions: {
                                columns: ':not(:last-child)'
                              }
                          }
                      ],
                  },
                  data: response.data.keluar,
                  columns: [
                      { data: 'tgl', className: 'text-center' },
                      { data: 'nama' },
                      { data: 'jumlah', className: 'text-right' },
                      { data: 'aksi', className: 'text-center' },
                  ],
                  // Konfigurasi tambahan DataTables
                  paging: false,
                  scrollY: 400,
                  scrollCollapse: true,
                  searching: false,
                  ordering: false,
                  footerCallback: function(row, data, start, end, display) {
                      //$('#tp').html(response.data.tp)
                      $('#saldo-akhir').html(response.data.saldo)
                  }
              });
              var newRowData = {
                  tgl: '',
                  nama: 'Total Pengeluaran',
                  jumlah: response.data.tp,
                  aksi: ''
              };
              pengeluaranTable.row.add(newRowData);
              // Gambar ulang tabel untuk menampilkan baris baru
              pengeluaranTable.draw();

pengeluaranTable.buttons().container().appendTo('#pengeluaranTable_wrapper .col-md-6:eq(0)');
              transaksiTable.buttons().container().appendTo('#transaksiTable_wrapper .col-md-6:eq(0)');
          },
          error: function(xhr, status, error) {
              console.error("Gagal memuat data:", error);
              // Tampilkan pesan error ke pengguna
          }
      });
  }

$('#edit').modal('show');
  }

function add(id){
    $('#add').modal('show');
  }

$(document).ready(function() {
      loadData('<?=date('n')?>','<?=date('Y')?>');
      // **[2] Ketika tombol 'Cari' ditekan, muat data berdasarkan tanggal yang dipilih**
      $('#find').on('click', function() {
          let bulan = $('#bulan').val();
          let tahun = $('#tahun').val();
          loadData(bulan, tahun);
      });
  });
</script>