accounting_dev/application/views/laporan/laba_rugi.php

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

            <h4 class="mb-4 fw-bold text-center">Laporan Laba Rugi</h4>

            <form id="filterForm" class="row g-2">
            
                <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 gap-2">
                    <button type="submit" class="btn btn-warning w-100">
                        Tampilkan
                    </button>
                    <button type="button" class="btn btn-danger w-100" id="generate_pdf">
                    Generate PDF
                    </button>
                </div>

            </form>

            <div id="content" class="mt-3"></div>

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

<script>
$(function(){

    function loadData(dari = '', sampai = ''){

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

            let html = '<div class="row">';

            // ================= PENDAPATAN
            html += `
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <h5 class="text-success mb-3">Pendapatan</h5>
                        <table class="table table-sm table-striped">
                            <thead>
                                <tr>
                                    <th>Kode</th>
                                    <th>Akun</th>
                                    <th class="text-end">Jumlah</th>
                                </tr>
                            </thead>
                            <tbody>
            `;

            res.data.forEach(r=>{
                if(r.tipe=='revenue'){
                    let saldo = (parseFloat(r.kredit) - parseFloat(r.debit)) || 0;

                    html += `
                        <tr>
                            <td>${r.kode_akun}</td>
                            <td>${r.nama_akun}</td>
                            <td class="text-end">${saldo.toLocaleString()}</td>
                        </tr>
                    `;
                }
            });

            html += `
                            </tbody>
                            <tfoot>
                                <tr class="fw-bold border-top">
                                    <td></td>
                                    <td>Total Pendapatan</td>
                                    <td class="text-end text-success">${Number(res.revenue).toLocaleString()}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            `;

            // ================= BEBAN
            html += `
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <h5 class="text-danger mb-3">Beban</h5>
                        <table class="table table-sm table-striped">
                            <thead>
                                <tr>
                                    <th>Kode</th>
                                    <th>Akun</th>
                                    <th class="text-end">Jumlah</th>
                                </tr>
                            </thead>
                            <tbody>
            `;

            res.data.forEach(r=>{
                if(r.tipe=='expense'){
                    let saldo = (parseFloat(r.debit) - parseFloat(r.kredit)) || 0;

                    html += `
                        <tr>
                            <td>${r.kode_akun}</td>
                            <td>${r.nama_akun}</td>
                            <td class="text-end">${saldo.toLocaleString()}</td>
                        </tr>
                    `;
                }
            });

            html += `
                            </tbody>
                            <tfoot>
                                <tr class="fw-bold border-top">
                                    <td></td>
                                    <td>Total Beban</td>
                                    <td class="text-end text-danger">${Number(res.expense).toLocaleString()}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            `;

            html += '</div>';

            // ================= LABA
            html += `
                <div class="mt-4">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center">
                            <h5 class="mb-2">Laba Bersih</h5>
                            <h3 class="${res.laba >= 0 ? 'text-success' : 'text-danger'} fw-bold">
                                ${Number(res.laba).toLocaleString()}
                            </h3>
                        </div>
                    </div>
                </div>
            `;

            $('#content').html(html);

        },'json');
    }

    // LOAD AWAL
    loadData();

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

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

        loadData(dari, sampai);
    });



    $('#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('generatelabarugi/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>