accounting_dev/application/views/laporan/neraca.php

<div class="container mt-4">

<!-- ================= FILTER PERIODE -->
<div class="card mb-3">
    <div class="card-body">

        <h4 class="mb-4 fw-bold text-center">NERACA</h4><hr>

        <form id="filterForm" class="row g-2">
            
            <div class="col-md-4">
                <label>Dari Tanggal</label>
                <input type="date" name="tanggal_dari" id="tanggal_dari" class="form-control">
            </div>

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

            <div class="col-md-4 d-flex align-items-end gap-2">
                <button type="submit" class="btn btn-warning w-100">
                    Tampilkan
                </button><br>
                <button type="button" class="btn btn-danger w-100" id="generate_pdf">
                <i class="fa fa-print"></i>Generate PDF</button>
            </div>

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

<div class="row">

<!-- ACTIVA -->
<div class="col-md-6">
<div class="card">
<div class="card-body">

<h5>ACTIVA</h5>

<table class="table">
<tbody id="activaBody"></tbody>
<tfoot>
<tr class="fw-bold">
    <td>Total Activa</td>
    <td id="totalActiva"></td>
</tr>
</tfoot>
</table>

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

<!-- PASIVA -->
<div class="col-md-6">
<div class="card">
<div class="card-body">

<h5>PASIVA</h5>

<table class="table">
<tbody id="pasivaBody"></tbody>
<tfoot>
<tr class="fw-bold">
    <td>Total Pasiva</td>
    <td id="totalPasiva"></td>
</tr>
</tfoot>
</table>

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

</div>
</div>

<script>

$(function(){

    function loadData(tanggal_dari = '', tanggal_sampai = ''){

        $.get("<?= base_url('neraca/get_data'); ?>", {
            tanggal_dari: tanggal_dari,
            tanggal_sampai: tanggal_sampai
        }, function(res){


            let act = '', pas = '';

            // ================= ACTIVA
            res.activa.forEach(a=>{
                act += `<tr>
                    <td>${a.kode} - ${a.nama}</td>
                    <td class="text-end">${Number(a.saldo).toLocaleString()}</td>
                </tr>`;
            });

            // ================= PASIVA
            res.pasiva.forEach(p=>{
                pas += `<tr>
                    <td>${p.kode} - ${p.nama}</td>
                    <td class="text-end">${Number(p.saldo).toLocaleString()}</td>
                </tr>`;
            });

            $('#activaBody').html(act);
            $('#pasivaBody').html(pas);

            $('#totalActiva').text(Number(res.total_activa).toLocaleString());
            $('#totalPasiva').text(Number(res.total_pasiva).toLocaleString());

            // reset warna dulu
            $('#totalActiva, #totalPasiva')
                .removeClass('text-danger text-success');

            // ================= VALIDASI BALANCE
            if(Math.round(res.total_activa) !== Math.round(res.total_pasiva)){

                $('#totalActiva').addClass('text-danger');
                $('#totalPasiva').addClass('text-danger');

                Swal.fire({
                    icon: 'warning',
                    title: 'Neraca Tidak Balance!',
                    text: 'Selisih: ' + Number(res.selisih).toLocaleString()
                });

            } else {

                $('#totalActiva').addClass('text-success');
                $('#totalPasiva').addClass('text-success');
            }

        },'json');
    }



    // ================= LOAD AWAL
    loadData();
    

    // ================= SUBMIT FILTER
    $('#filterForm').on('submit', function(e){
        e.preventDefault();

        
        let dari = $('#tanggal_dari').val();
        let sampai = $('#tanggal_sampai').val();

        loadData(dari, sampai);
    });


    // Prevent double submit
    $(document).on('submit', 'form', function(e){
        e.preventDefault();
    });


    $('#generate_pdf').on('click', function () {

    const tanggal_dari   = $('#tanggal_dari').val()   || '0000-00-00';
    const tanggal_sampai = $('#tanggal_sampai').val() || '0000-00-00';

    let btn = $(this);
    

    btn.prop('disabled', true).html('Generate PDF...');

    $.ajax({
        url: "<?= base_url('generateneraca/generatepdf'); ?>"
            + '/' + tanggal_dari
            + '/' + tanggal_sampai,

        type: "GET",
        xhrFields: {
            responseType: 'blob' // penting untuk PDF
        },
        success: function (response) {
            let blob = new Blob([response], { type: 'application/pdf' });
            let url  = window.URL.createObjectURL(blob);

            // buka di tab baru
            window.open(url, '_blank');

        },
        error: function () {
            Swal.fire('Error', 'Gagal generate PDF', 'error');
        },
        complete: function(){
                btn.prop('disabled', false).html('Generate PDF');
        }
    });
});
});
</script>