Default page

Viewing : list.php

<div class="d-flex justify-content-between align-items-sm-center flex-column flex-sm-row mb-3">
    <div class="me-4 mb-3 mb-sm-0">
        <h1 class="mb-0"><?=$title?></h1>
    </div>
</div>

<div class="row">
    <div class="col-6 mb-4">
        <div class="card border-start-lg border-start-primary h-100 card card-header-actions">
            <div class="card-header">
                <h3 class="mb-0">Mahasiswa</h3>
            </div>                                               
            <div class="card-body">
                <?php
                    foreach ($mhs as $k) {
                        $m['options'][] = $k->nama.' ('.$k->nim.')';
                        $m['value'][] = $k->id;
                    }
                    
                    echo form_select('mhs', $m);
                ?>
                <div class="form-group row" id="tag_smt">
                    <label for="smt" class="col-sm-3 col-form-label">Smt</label>
                    <div class="col-sm-8">
                        <div class="form-control" id="form_smt"></div>
                    </div>
                </div>
                <div class="form-group row" id="tag_jurusan">
                    <label for="jurusan" class="col-sm-3 col-form-label">Jurusan</label>
                    <div class="col-sm-8">
                        <div class="form-control" id="form_jurusan"></div>
                    </div>
                </div>
                <div class="form-group row" id="tag_beasiswa">
                    <label for="beasiswa" class="col-sm-3 col-form-label">Beasiswa</label>
                    <div class="col-sm-8">
                        <div class="form-control" id="form_beasiswa"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 mb-4">
        <div class="card border-start-lg border-start-primary h-100 card card-header-actions">
            <form method="post" enctype="multipart/form-data" id="form-cekout">
                <div class="card-header">
                    <h3 class="mb-0">Chekout</h3>
                </div>
                <div class="card-body" id="chekout">
                     <table class="table table-striped table-bordered" style="width:100%">
                        <thead  style="text-align: center;">
                            <tr>
                                <th>Nama</th>
                                <th>SMT</th>
                                <th>Jumlah</th>
                            </tr>
                        </thead>
                        <tbody id="form-ck">
                            
                        </tbody>
                    </table>
                    <div class="row mt-3">
                        <div class="col-8 text-end fw-bold">TOTAL:</div>
                        <div class="col-4 fw-bold">
                            <span id="total_tagihan">Rp 0</span> 
                            <input type="hidden" name="grand_total" id="input_grand_total" value="0">
                        </div>
                    </div>
                </div>
                <div class="d-none">
                    <input type="text" name="id_mhs" id="id_mhs" value="">
                </div>
                <div class="card-footer" align="center">
                    <a onclick="save()" class="btn btn-sm btn-primary">Save</a>
                </div>
            </form>
        </div>
    </div>
</div>

<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">
                <h3 class="mb-0">Tagihan</h3>
                <div id="export"></div>
                <div class="card-tools d-none" id="b_tambah">
                    <a class="btn btn-primary btn-sm" onclick="edit('0')">Edit</a>                    
                    <a class="btn btn-primary btn-sm" onclick="add('0')">Tambah</a> 
                </div>
            </div>                                               
            <div class="card-body">
                <table class="table table-striped table-bordered" id="table-tagihan" style="width:100%">
                    <thead  style="text-align: center;">
                        <tr>
                            <th rowspan="2" style="width: 15%;">Nama Pembayaran</th>
                            
                            <th colspan="14">Semester</th>                            
                        </tr>
                        <tr>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                            <th>7</th>
                            <th>8</th>
                            <th>9</th>
                            <th>10</th>
                            <th>11</th>
                            <th>12</th>
                            <th>13</th>
                            <th>14</th>
                        </tr>
                    </thead>
                    <tbody id="tagihan"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<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">
                <h3 class="mb-0">Riwayat Transaksi</h3>
            </div>                                               
            <div class="card-body">
                <table class="table table-striped table-bordered" id="table-riwayat" style="width:100%">
                    <thead  style="text-align: center;">
                        <tr>
                            <th>Tanggal</th>                            
                            <th>Jumlah</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="riwayat"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form method="post" id="form_<?=$title?>">
                <div class="modal-header">
                    <h5 class="modal-title">Form Tambah Tagihan</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text" name="data_id" class="d-none" id="data_id" value="">
                    <div class="form-group row" id="tag_nama">
                        <label for="nama" class="col-sm-3 col-form-label">Nama</label>
                        <div class="col-sm-8">
                          <div class="form-control" id="nama_mhs"></div>
                        </div>
                    </div>                    
                    <?php
                        echo csrf_field();
                        $pmb = ['options' => [], 'value'=>[]];
                        foreach ($pembayaran as $k) {
                            $pmb['options'][] = $k->nama;
                            $pmb['value'][] = $k->id_pembayaran;
                        }
                        echo form_select('jenis', $pmb);
                        echo form_text('jumlah');
                    ?>
                    <div class="form-group row" id="tag_smt">
                        <label for="smt" class="col-sm-3 col-form-label">SMT</label>
                        <div class="col-sm-8 row">
                            <?php 
                            for ($i = 1; $i <= 14; $i++) {
                                echo '
                                <div class="col-auto mb-2"> 
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="smt[]" id="smt_' . $i . '" value="' . $i . '">
                                        <label class="form-check-label" for="smt_' . $i . '">' . $i . '</label>
                                    </div>
                                </div>
                                ';
                            }
                            ?>
                        </div>
                    </div>    
                </div>
                <div class="modal-footer"><button class="btn btn-primary" type="submit">Save</button></div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form method="post" id="form_edit_tagihan">
                <div class="modal-header">
                    <h5 class="modal-title">Form Edit Tagihan</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped table-bordered" id="table-edit-tagihan" style="width:50%">
                        <thead  style="text-align: center;">
                            <tr>
                                <th rowspan="2" style="width: 15%;">Nama Pembayaran</th>
                                
                                <th colspan="14">Semester</th>                            
                            </tr>
                            <tr>
                                <th>1</th>
                                <th>2</th>
                                <th>3</th>
                                <th>4</th>
                                <th>5</th>
                                <th>6</th>
                                <th>7</th>
                                <th>8</th>
                                <th>9</th>
                                <th>10</th>
                                <th>11</th>
                                <th>12</th>
                                <th>13</th>
                                <th>14</th>
                            </tr>
                        </thead>
                        <tbody id="formEditTagihan">
                            
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer"><button class="btn btn-primary" type="submit">Save</button></div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="modal-riwayat" 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">Detail Transaksi</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-bordered">
                    <thead  style="text-align: center;">
                        <tr>
                            <th>Tanggal</th>
                            <th>Nama</th>
                            <th>SMT</th>
                            <th>Jumlah</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="table-detail-riwayat">
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    let id;
    let tableTagihan;
    let tableEditTagihan;
    let tableRiwayat;
    let nama;
    $(document).ready(function(){
        $('#form_mhs').select2();
        $('#form_mhs').on('change', function(){
            id = $(this).val();
            nama = $(this).find('option:selected').text();
            $('#nama_mhs').html(nama);
            $('#id_mhs').val(id);
            $('#b_tambah').removeClass('d-none');
            $('#data_id').val(id);
            getTagihan(id);
        })

        $('#form_Pemasukan').on('submit', function(e) {
            // 1. Mencegah submit form bawaan (page reload)
            e.preventDefault();

            // Ambil data form, termasuk token CSRF
            let formData = new FormData(this);

            // 2. Kirim data menggunakan AJAX
            $.ajax({
                url: '<?=base_url('pemasukan/addTagihan')?>',
                type: 'POST',
                data: formData,
                processData: false, // Penting untuk FormData
                contentType: false, // Penting untuk FormData
                dataType: 'JSON',
                
                success: function(response) {
                    
                    if (response.status === 'success') {
                        // Tampilkan notifikasi sukses (misalnya menggunakan alert atau library notifikasi)
                        alert('Sukses! ' + response.message); 
                        $('#add').modal('hide'); 
                    } else if (response.status === 'error') {
                        let error_msg = 'Gagal Validasi: ' + response.message + '\n';
                        if (response.errors) {
                            for (const key in response.errors) {
                                error_msg += `- ${response.errors[key]}\n`;
                            }
                        }
                        alert(error_msg);
                    }

                    getTagihan(id);
                }
            });
        });

        $('#form_edit_tagihan').on('submit', function(e) {
            // 1. Mencegah submit form bawaan (page reload)
            e.preventDefault();

            // Ambil data form, termasuk token CSRF
            let formData = new FormData(this);

            // 2. Kirim data menggunakan AJAX
            $.ajax({
                url: '<?=base_url('pemasukan/saveEditTagihan')?>',
                type: 'POST',
                data: formData,
                processData: false, // Penting untuk FormData
                contentType: false, // Penting untuk FormData
                dataType: 'JSON',
                
                success: function(response) {
                    
                    if (response.status === 'success') {
                        // Tampilkan notifikasi sukses (misalnya menggunakan alert atau library notifikasi)
                        alert('Sukses! ' + response.message); 
                        $('#add').modal('hide'); 
                    } else if (response.status === 'error') {
                        let error_msg = 'Gagal Validasi: ' + response.message + '\n';
                        if (response.errors) {
                            for (const key in response.errors) {
                                error_msg += `- ${response.errors[key]}\n`;
                            }
                        }
                        alert(error_msg);
                    }

                    getTagihan(id);
                }
            });
        });
    })

    function save() {
        // 1. Ambil elemen form
        var form = $('#form-cekout')[0];
        var data = new FormData(form);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "<?= base_url('pemasukan/add') ?>", // Sesuaikan URL Controller Anda
            data: data,
            processData: false, // Penting untuk FormData
            contentType: false, // Penting untuk FormData
            cache: false,
            success: function (response) {
                getTagihan(id);
                console.log(response);
                alert('Berhasil Menyimpan Data');
            }
        });
    }

    function detail(batch_id){
        $.ajax({
            url : '<?=base_url()?>/pemasukan/getDetailTr/' + batch_id,
            success : function(d){
                $('#table-detail-riwayat').html(d);
                $('#modal-riwayat').modal('show');
            }

        });
    }

    function getTagihan(id){
        $.ajax({
            url : '<?=base_url()?>/pemasukan/get/' + id,
            dataType : 'JSON',
            success : function(d){
                if ($.fn.DataTable.isDataTable('#table-tagihan')) {
                    tableTagihan.destroy(); 
                    console.log('Table Tagihan di Hancurkan');
                    $('#tagihan').html('');
                }

                if ($.fn.DataTable.isDataTable('#table-riwayat')) {
                    tableRiwayat.destroy(); 
                    console.log('Table Riwayat di Hancurkan');
                    $('#riwayat').html('');
                }
                $('#tagihan').html(d.table);
                $('#form_smt').html(d.smt);
                $('#form_jurusan').html(d.jurusan);
                $('#form_beasiswa').html(d.beasiswa);
                $('#riwayat').html(d.table_transaksi);
                $('#form-ck').html('');
                hitungTotal();
                reloadtableTagihan()
                reloadtableRiwayat()
            }
        })
    }

    function reloadtableRiwayat(){
        tableRiwayat = $('#table-riwayat').DataTable({
            scrollX: true,
            scrollY : 490,
            scrollCollapse: true,
            searching : true,
            ordering : false,
            paging : false,
        });
    }

    function reloadtableTagihan() {
        tableTagihan = $('#table-tagihan').DataTable({
            scrollX: true,
            scrollCollapse: true,
            searching : false,
            paging : false,
            ordering : false,
            dom: 'Bfrtip', 
            buttons: [
                // Tombol Print (Sering juga ditambahkan pengecualian untuk kolom yang tidak terlihat)
                {
                    extend: 'print',
                    title: 'Tagihan ' + nama,
                    className: 'btn btn-primary btn-sm',
                },
                {
                    extend: 'excelHtml5',
                    title: 'Tagihan ' + nama,
                    className: 'btn btn-primary btn-sm',
                },

            ]
        });

        tableTagihan.buttons().container().appendTo('#export');
    }

    function add(id){
        $('#form_jenis').select2({
            dropdownParent: $('#add')
        });
        $('#add').modal('show');
    }

    function edit(){
        $.ajax({
            url : '<?=base_url()?>/pemasukan/editTagihan/' + id,
            success : function(d){
                if ($.fn.DataTable.isDataTable('#table-edit-tagihan')) {
                    tableEditTagihan.destroy(); 
                    console.log('Table di Hancurkan');
                    $('#formEditTagihan').html('');
                }

                $('#formEditTagihan').html(d);
                reloadFormEditTagihan();
            }
        })
        $('#edit').modal('show');
    }

    function reloadFormEditTagihan() {
        tableEditTagihan = $('#table-edit-tagihan').DataTable({
            scrollX: true,
            scrollCollapse: true,
            searching : false,
            paging : false,
            ordering : false,
        });
    }

    function keranjang(id_p, smt, jml, nama){
        console.log("Menambahkan:", id_p, smt, jml, nama);

        // 1. Buat ID Unik untuk Baris 
        let rowId = 'row-' + id_p + '-' + smt; 

        // 2. Cek apakah item sudah ada untuk menghindari duplikasi
        if ($(`#${rowId}`).length > 0) {
            alert(`Item ${nama} SMT ${smt} sudah ada di keranjang.`);
            return; 
        }
        
        // 3. Buat markup HTML untuk baris tabel (TR)
        let newRow = `
            <tr id="${rowId}">
                <td>
                    ${nama} <a onclick="hapusBaris('${rowId}')"><i class="fa fa-trash"></i></a>
                    <input type="hidden" name="id_pembayaran[]" value="${id_p}">
                </td>
                <td align="center">
                    ${smt}
                    <input type="hidden" name="smt[]" value="${smt}">
                </td>
                <td>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text">Rp</span>
                        <input 
                            type="number" 
                            class="form-control input-jumlah-cicilan" 
                            name="jumlah[]" 
                            value="${jml}"
                            min="1" 
                            onchange="hitungTotal()" 
                            onkeyup="hitungTotal()"
                            data-original-amount="${jml}" 
                            style="width: 100px;" 
                        >
                    </div>
                    </td>
            </tr>
        `;

        $('#form-ck').append(newRow);
        hitungTotal(); // Hitung total setelah baris baru ditambahkan
    }

    // Fungsi untuk menghapus baris dari keranjang
    function hapusBaris(rowId) {
        $(`#${rowId}`).remove();
        hitungTotal();
    }
    
    // Helper function untuk format rupiah (Opsional tapi berguna)
    function formatRupiah(angka) {
        let number_string = angka.toString().replace(/[^,\d]/g, ''),
            split = number_string.split(','),
            sisa = split[0].length % 3,
            rupiah = split[0].substr(0, sisa),
            ribuan = split[0].substr(sisa).match(/\d{3}/gi);

        if (ribuan) {
            separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }

        rupiah = split[1] !== undefined ? rupiah + ',' + split[1] : rupiah;
        return rupiah;
    }

    function hitungTotal() {
        let total = 0;
        
        // Iterasi melalui semua input hidden dengan name="jumlah[]"
        $('input[name="jumlah[]"]').each(function() {
            // Ambil nilai (value), konversi ke integer, dan tambahkan ke total
            // Pastikan nilai di input adalah angka murni (misalnya '1000000', bukan '1.000.000')
            total += parseInt($(this).val()) || 0; 
        });

        // Format total ke Rupiah untuk ditampilkan di UI
        const totalRupiah = formatRupiah(total);

        // 1. Tampilkan di Span
        $('#total_tagihan').text('Rp ' + totalRupiah);
        
        // 2. Simpan di Input Hidden untuk pengiriman ke server
        $('#input_grand_total').val(total); 
    }


</script>