Default page

Edit File: list-bc.php

<div class="row">
    <div class="col-12 mb-4">
        <div class="card border-start-lg border-start-primary h-100 card card-header-actions">
            <div class="card-header">
                <div id="export"></div>
                <div class="card-tools">
                    <a class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#filter">Get Data</a>
                    <a class="btn btn-warning btn-sm" href="<?=base_url('transaksi/sync')?>">Sync</a>
                </div>
            </div>                                               
            <div class="card-body">
                
                <table id="myTable" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Tanggal</th>
                            <th>Nama</th>
                            <th>Debit</th>
                            <th>Kredit</th>
                            <th>Saldo</th>
                        </tr>
                    </thead>
                    <tbody id="tabel-bku">
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row d-nonee">
    <div class="col-12 mb-4">
        <div class="card border-start-lg border-start-primary h-100 card card-header-actions">
            <div class="card-header">
                <h5 class="title">Rekap</h5>
            </div>                            
            <div class="card-body">
                
                <table id="rekap" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Tanggal</th>
                            <th>Uraiaan</th>
                            <th>Debit</th>
                            <th>Kredit</th>
                            <th>Saldo</th>
                        </tr>
                    </thead>
                    <tbody id="tabel-rekap">
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="filter" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Form Rekap BKU</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group row mb-4" id="tag_filter">
                    <label for="mulai" class="col-sm-3 col-form-label">Mulai</label>
                    <div class="col-sm-8">
                      <input type="text" name="mulai" class="form-control" id="form_mulai">
                    </div>
                </div>
                <div class="form-group row mb-4" id="tag_selesai">
                    <label for="selesai" class="col-sm-3 col-form-label">Selesai</label>
                    <div class="col-sm-8">
                      <input type="text" name="selesai" class="form-control" id="form_selesai">
                    </div>
                </div>
                <div class="form-group row mb-4" id="tag_jenis">
                    <label for="jp" class="col-sm-3 col-form-label">Jenis</label>
                    <div class="col-sm-8">
                      <select id="jp" class="form-control" multiple style="height: 100%">
                          <option value="">--All--</option>
                          <?php
                            foreach ($pembayaran as $k) {
                                echo '<option value="'.$k->id_pembayaran.'">'.$k->nama.'</option>';
                            }
                          ?>
                      </select>
                    </div>
                </div>
                <div class="form-group row" id="tag_prodi">
                    <label for="prodi" class="col-sm-3 col-form-label">Prodi</label>
                    <div class="col-sm-8">
                        <select class="form-control select2" multiple name="prodi" id="form_prodi">
                            <option value="">--Pilih Prodi--</option>
                            <option value="1">S1 PAI</option>
                            <option value="2">S1 PS</option>
                            <option value="3">S2 PAI</option>
                            <option value="4">S1 MPI</option>
                            <option value="5">S1 ES</option>
                            <option value="6">S1 HES</option>
                            <option value="7">S1 HKI</option>
                            <option value="8">S2 HKI</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row" id="tag_kelompok">
                    <label for="kelompok" class="col-sm-3 col-form-label">Kelompok Mahasiswa</label>
                    <div class="col-sm-8">
                        <select class="form-control select2" multiple style="width: 100%" id="form_kelompok">
                            <option value="">--Pilih Kelompok Mahasiswa--</option>
                            <?php
                                foreach ($kelompok as $k) {
                                    echo '<option value="'.$k->id_kelompok.'">'.$k->nama.'</option>';
                                }
                            ?>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer"><a class="btn btn-primary btn-sm" onclick="getBku()">Filter</a></div>
        </div>
    </div>
</div>

$(document).ready(function(){
        $('#jp').select2({
            placeholder: "-- Filter Jenis --",
            allowClear: true,
            dropdownParent: $('#filter')
        });

$('#form_prodi').select2({
            placeholder: "-- Filter Prodi --",
            allowClear: true,
            dropdownParent: $('#filter')
        });

$('#form_kelompok').select2({
            placeholder: "-- Filter Kelompok --",
            allowClear: true,
            dropdownParent: $('#filter')
        });

$('#form_mulai').datetimepicker({
            viewMode: 'days', // Memastikan tampilan awal adalah Kalender Hari
            sideBySide: true, // [OPSIONAL] Menampilkan kalender dan jam secara berdampingan
            defaultDate: moment(),
            format: 'YYYY-MM-DD',
            locale: 'id', 
            widgetParent: $('#tag_filter'), 
            widgetPositioning: {
                horizontal: 'auto',
                vertical: 'bottom'
            },
        });

$('#form_selesai').datetimepicker({
            viewMode: 'days', // Memastikan tampilan awal adalah Kalender Hari
            sideBySide: true, // [OPSIONAL] Menampilkan kalender dan jam secara berdampingan
            defaultDate: moment(),
            format: 'YYYY-MM-DD',
            locale: 'id', 
            widgetParent: $('#tag_selesai'), 
            widgetPositioning: {
                horizontal: 'auto',
                vertical: 'bottom'
            },
        });

initDataTable();

})

function formatIndo(string) {
        const bulanIndo = [
            "Januari", "Februari", "Maret", "April", "Mei", "Juni",
            "Juli", "Agustus", "September", "Oktober", "November", "Desember"
        ];

const d = new Date(string);
        const tgl = d.getDate();
        const bulan = bulanIndo[d.getMonth()];
        const tahun = d.getFullYear();

return `${tgl} ${bulan} ${tahun}`;
    }

function getBku(){
        $('#filter').modal('hide');

mulai = $('#form_mulai').val();
        selesai = $('#form_selesai').val();
        id_p = $('#jp').val();
        prodi = $('#form_prodi').val();
        kelompok = $('#form_kelompok').val();

$.ajax({
            url : '<?=base_url('transaksi/getBku')?>',
            method : 'POST',
            dataType : 'JSON',
            data : {
                mulai : mulai,
                selesai : selesai,
                id_p : id_p,
                prodi : prodi,
                kelompok : kelompok 
            },
            success : function(d){
                if ($.fn.DataTable.isDataTable('#myTable')) {
                    table.destroy();
                }

$('#tabel-bku').html(d.data);
                $('#tabel-rekap').html(d.rekap);
                //$('#total_debit').html(d.debit);
                //$('#total_kredit').html(d.kredit);
                //$('#total_saldo').html(d.saldo);

initDataTable();

}
        }) 
    }
    
    function cetak(id){
        $('#form_tgl_mulai').datetimepicker({
            viewMode: 'days', // Memastikan tampilan awal adalah Kalender Hari
            sideBySide: true, // [OPSIONAL] Menampilkan kalender dan jam secara berdampingan
            defaultDate: moment(),
            format: 'YYYY-MM-DD HH:mm:ss',
            locale: 'id', 
            widgetParent: $('#tag_tgl_mulai'), 
            widgetPositioning: {
                horizontal: 'auto',
                vertical: 'bottom'
            },
        });

$('#form_tgl_selesai').datetimepicker({
            viewMode: 'days', // Memastikan tampilan awal adalah Kalender Hari
            sideBySide: true, // [OPSIONAL] Menampilkan kalender dan jam secara berdampingan
            defaultDate: moment(),
            format: 'YYYY-MM-DD HH:mm:ss',
            locale: 'id', 
            widgetParent: $('#tag_tgl_selesai'), 
            widgetPositioning: {
                horizontal: 'auto',
                vertical: 'bottom'
            },
        });
        $('#add').modal('show');
    }

</script>