accounting_dev/application/views/jurnal/layout.php

<div class="container mt-4">
    <div class="card modern-card shadow-sm border-0 rounded-4">
        <div class="card-body p-4">

            <div class="d-flex justify-content-between mb-3">
                <h5>Jurnal Umum</h5>
                <button class="btn btn-warning btn-add">Tambah Jurnal</button>
            </div>
            
            <!--<form id="filterForm" class="row mb-3">-->
            
            <!--    <div class="col-md-4">-->
            <!--        <label>Dari Tanggal</label>-->
            <!--        <input type="date" id="tanggal_dari" class="form-control">-->
            <!--    </div>-->

            <!--    <div class="col-md-4">-->
            <!--        <label>Sampai Tanggal</label>-->
            <!--        <input type="date" id="tanggal_sampai" class="form-control">-->
            <!--    </div>-->

            <!--    <div class="col-md-4 d-flex align-items-end">-->
            <!--        <button type="submit" class="btn btn-warning w-100">-->
            <!--            Tampilkan-->
            <!--        </button>-->
            <!--    </div>-->

            <!--</form>-->

            <div class="table-responsive">
                <table id="tableJurnal" class="table modern-table align-middle w-100">
                    <thead class="table-light">
                        <tr>
                            <th>No</th>
                            <th>Tanggal</th>
                            <th>No Ref</th>
                            <th>Keterangan</th>
                            <th class="text-end">Debit</th>
                            <th class="text-end">Kredit</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr class="fw-bold">
                            <td colspan="4" class="text-end">TOTAL</td>
                            <td class="text-end" id="totalDebitTable">0</td>
                            <td class="text-end" id="totalKreditTable">0</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

        </div>
    </div>
</div>

<!-- MODAL INPUT -->
<div class="modal fade" id="modalJurnal">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">

<div class="modal-header bg-warning text-white">
    <h5>Tambah Jurnal</h5>
    <button class="btn-close" data-bs-dismiss="modal"></button>
</div>

<div class="modal-body">

    <!-- MODE -->
    <div class="mb-3">
        <div class="btn-group w-100">
            <button class="btn btn-warning active" id="modeAuto">Otomatis</button>
            <button class="btn btn-outline-secondary" id="modeManual">Manual</button>
        </div>
    </div>

    <!-- TEMPLATE -->
    <div id="autoSection" class="mb-3">
        <label>Template Jurnal</label>
        <select id="base_jurnal_id" class="form-control select-search">
            <option value="">-- Pilih Template --</option>
        </select>
    </div>

    <!-- FORM -->
    <input type="date" id="tanggal" class="form-control mb-2">
    <textarea id="keterangan" class="form-control mb-3" placeholder="Keterangan"></textarea> 

    <!-- TABLE -->
    <table class="table" id="tableDetail">
        <thead>
            <tr>
                <th>Akun</th>
                <th>Debit</th>
                <th>Kredit</th>
            </tr>
        </thead>
        <tbody></tbody>

        <tfoot>
            <tr class="fw-bold">
                <td class="text-end">TOTAL</td>
                <td id="formTotalDebit">0</td>
                <td id="formTotalKredit">0</td>
                <td></td>
            </tr>
        </tfoot>
    </table>

    <button class="btn btn-warning btn-add-row">Tambah Baris</button>

</div>

<div class="modal-footer">
    <button class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
    <button class="btn btn-warning" id="btnSimpan">Simpan</button>
</div>

</div>
</div>
</div>

<!-- MODAL DETAIL -->
<div class="modal fade" id="modalDetail">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">

<div class="modal-header bg-warning text-white">
    <h5>Detail Jurnal</h5>
    <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>

<div class="modal-body">

    <div class="mb-3">
        <strong>Tanggal:</strong> <span id="d_tanggal"></span><br>
        <strong>No Ref:</strong> <span id="d_noref"></span><br>
        <strong>Keterangan:</strong> <span id="d_keterangan"></span><br>
        <strong>Dibuat oleh:</strong> <span id="d_createdby"></span>
    </div>

    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Akun</th>
                <th>Debit</th>
                <th>Kredit</th>
            </tr>
        </thead>
        <tbody id="detailBody"></tbody>

        <tfoot>
            <tr>
                <th>Total</th>
                <th id="totalDebitDetail">0</th>
                <th id="totalKreditDetail">0</th>
            </tr>
        </tfoot>
    </table>

</div>

</div>
</div>
</div>

<style>
#tableJurnal tbody tr:hover {
    background-color: #fff3cd;
}
</style>

<script>

$(function(){

    let accounts = [];
    let mode = 'auto';

    // ================= LOAD ACCOUNTS
    function loadAccounts(){
        return $.get("<?= base_url('jurnal/get_accounts'); ?>", function(res){
            accounts = res;
        },'json');
    }

    // ================= LOAD BASE JURNAL
    function loadBaseJurnal(){
        return $.get("<?= base_url('jurnal/get_base_jurnal'); ?>", function(res){

            let opt = '<option value="">-- Pilih Template --</option>';
            res.forEach(b=>{
                opt += `<option value="${b.id}">${b.kode} - ${b.nama}</option>`;
            });

            $('#base_jurnal_id').html(opt);

        },'json');
    }

    function accountOptions(){
        let opt = '<option value="">Pilih Akun</option>';
        accounts.forEach(a=>{
            opt += `<option value="${a.id}">${a.kode_akun} - ${a.nama_akun}</option>`;
        });
        return opt;
    }

    // ================= ADD ROW
    function addRow(data=null){

        let isAuto = (mode === 'auto');

        let debitVal = data?.debit || '';
        let kreditVal = data?.kredit || '';

        let hideDebit = isAuto && data?.posisi === 'kredit';
        let hideKredit = isAuto && data?.posisi === 'debit';

        let row = `
        <tr>
            <td>
                <select class="form-control account_id" ${isAuto ? 'disabled' : ''}>
                    ${accountOptions()}
                </select>
            </td>

            <td>
                <input type="text" class="form-control debit format-rupiah"
                    value="${debitVal}"
                    ${hideDebit ? 'style="display:none"' : ''}
                >
            </td>

            <td>
                <input type="text" class="form-control kredit format-rupiah"
                    value="${kreditVal}"
                    ${hideKredit ? 'style="display:none"' : ''}
                >
            </td>

            <td class="text-center">
                ${isAuto ? '' : '<button class="btn btn-danger btn-remove">X</button>'}
            </td>
        </tr>
        `;

        $('#tableDetail tbody').append(row);

        if(data){
            $('#tableDetail tbody tr:last .account_id').val(data.account_id);
        }
    }

    // ================= LOAD TEMPLATE DETAIL
    function loadTemplateDetail(id){

        if(!id) return;

        $.get("<?= base_url('jurnal/get_base_jurnal_detail/'); ?>" + id, function(res){

            $('#tableDetail tbody').html('');

            res.forEach(r=>{
                addRow({
                    account_id: r.account_id,
                    posisi: r.posisi, // penting!
                    debit: r.posisi === 'debit' ? 0 : '',
                    kredit: r.posisi === 'kredit' ? 0 : ''
                });
            });

            hitungTotalForm();

        },'json');
    }


$('#modeAuto').click(function(){

    mode = 'auto';

    $(this).addClass('btn-warning active').removeClass('btn-outline-warning');
    $('#modeManual').removeClass('btn-warning active').addClass('btn-outline-secondary');

    $('#autoSection').show();

    // ✅ RESET TOTAL FORM
    $('#tableDetail tbody').html('');
    $('#keterangan').val(''); // ✅ FIX 
    $('#tanggal').val(''); // ✅ FIX
    $('#base_jurnal_id').val('');

    // reset total juga
    $('#formTotalDebit').text('0');
    $('#formTotalKredit').text('0');

    // sembunyikan tombol tambah
    $('.btn-add-row').hide();
});

$('#modeManual').click(function(){
    mode = 'manual';

    $(this).addClass('btn-warning active').removeClass('btn-outline-secondary');
    $('#modeAuto').removeClass('btn-warning active').addClass('btn-outline-warning');

    $('#autoSection').hide();
    $('#tableDetail tbody').html('');

    $('.btn-add-row').show(); // ⬅️ tampilkan lagi

    addRow();
});

    // ================= PILIH TEMPLATE
    $('#base_jurnal_id').change(function(){
        loadTemplateDetail($(this).val());
    });

    // ================= ADD ROW BUTTON
    $('.btn-add-row').click(function(){

        if(mode === 'manual'){
            addRow();
        }else{
            Swal.fire('Info','Mode otomatis pakai template','info');
        }

    });

    // ================= REMOVE ROW
    $(document).on('click','.btn-remove',function(){
        $(this).closest('tr').remove();
        hitungTotalForm();
    });

    // ================= HITUNG TOTAL
    function hitungTotalForm(){
        let td=0, tk=0;

        $('#tableDetail tbody tr').each(function(){
            td += parseFloat($(this).find('.debit').val()) || 0;
            tk += parseFloat($(this).find('.kredit').val()) || 0;
        });

        $('#formTotalDebit').text(td.toLocaleString('id-ID'));
        $('#formTotalKredit').text(tk.toLocaleString('id-ID'));
    }

    $(document).on('keyup change','.debit, .kredit',hitungTotalForm);

    // ================= OPEN MODAL
$('.btn-add').click(async function(){

    await loadAccounts();
    await loadBaseJurnal();

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

    $('#tableDetail tbody').html('');
    $('#base_jurnal_id').val('');

    // reset total juga
    $('#formTotalDebit').text('0');
    $('#formTotalKredit').text('0');

    $('#modeAuto').click(); // default
});

$('#btnSimpan').click(function(){

    let account_id = [];
    let debit = [];
    let kredit = [];

    let totalDebit = 0;
    let totalKredit = 0;

    $('#tableDetail tbody tr').each(function(){

        let d = parseFloat($(this).find('.debit').val()) || 0;
        let k = parseFloat($(this).find('.kredit').val()) || 0;

        account_id.push($(this).find('.account_id').val());
        debit.push(d);
        kredit.push(k);

        totalDebit += d;
        totalKredit += k;
    });

    // ✅ VALIDASI DI SINI
    if(totalDebit !== totalKredit){
        Swal.fire('Warning','Total Debit dan Kredit harus sama!','warning');
        return;
    }

    if(totalDebit === 0 && totalKredit === 0){
        Swal.fire('Warning','Harap Isi Semua Kolom!','warning'); // ✅ FIX add all collumn must be filled
        return;
    }
    
    // lanjut simpan
    $.post("<?= base_url('jurnal/save'); ?>", {
        tanggal: $('#tanggal').val(),
        keterangan: $('#keterangan').val(),
        account_id: account_id,
        debit: debit,
        kredit: kredit
    }, function(res){

        if(res.status){
            $('#modalJurnal').modal('hide');
            $('#tableJurnal').DataTable().ajax.reload(null,false);
            Swal.fire('Sukses',res.message,'success');
        } else {
            Swal.fire('Error',res.message,'error');
        }

    },'json');
});

    // DATATABLE
let table = $('#tableJurnal').DataTable({
    processing:true,
    serverSide:true,
    pageLength:10, // default 10
    lengthMenu:[ [10,25,50,100], [10,25,50,100] ],
    order:[[1,'desc']],
    ajax:{
        url:"<?= base_url('jurnal/get_data'); ?>",
        type:"POST"
    },
    columnDefs:[
        { targets:[4,5], className:'text-end' }
    ],
    drawCallback:function(){

        let api = this.api();
        let td = 0, tk = 0;

        api.rows().every(function(){
            let d = this.data();

            td += parseFloat(d[4].replace(/\./g,'')) || 0;
            tk += parseFloat(d[5].replace(/\./g,'')) || 0;
        });

        $('#totalDebitTable').text(td.toLocaleString('id-ID'));
        $('#totalKreditTable').text(tk.toLocaleString('id-ID'));
    }
});

    // DELETE
    $(document).on('click','.btn-delete',function(){
        let id = $(this).data('id');

        Swal.fire({
            title:'Hapus?',
            icon:'warning',
            showCancelButton:true
        }).then(r=>{
            if(r.isConfirmed){
                $.get("<?= base_url('jurnal/delete/'); ?>"+id,function(){
                    table.ajax.reload(null,false);
                });
            }
        });
    });

});

// DETAIL
$(document).on('click','.btn-detail',function(){

    let id = $(this).data('id');

    $.get("<?= base_url('jurnal/detail/'); ?>" + id, function(res){

        $('#d_tanggal').text(res.header.tanggal);
        $('#d_noref').text(res.header.no_ref);
        $('#d_keterangan').text(res.header.keterangan);
        $('#d_createdby').text(res.user.nama);

        let html = '';
        let totalDebit = 0;
        let totalKredit = 0;

        res.detail.forEach(row => {

            totalDebit += parseFloat(row.debit);
            totalKredit += parseFloat(row.kredit);

            html += `
                <tr>
                    <td>${row.kode_akun} - ${row.nama_akun}</td>
                    <td>${parseFloat(row.debit).toLocaleString('id-ID')}</td>
                    <td>${parseFloat(row.kredit).toLocaleString('id-ID')}</td>
                </tr>
            `;
        });

        $('#detailBody').html(html);
        $('#totalDebitDetail').text(totalDebit.toLocaleString('id-ID'));
        $('#totalKreditDetail').text(totalKredit.toLocaleString('id-ID'));

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

    },'json');

});


</script>