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

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="mb-0 fw-bold">Neraca Saldo</h4>
            </div>

            <div class="table-responsive">
                <table class="table table-sm table-striped table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 120px;">Kode</th>
                            <th>Akun</th>
                            <th class="text-end">Debit</th>
                            <th class="text-end">Kredit</th>
                        </tr>
                    </thead>
                    <tbody id="tb"></tbody>
                    <tfoot class="table-light">
                        <tr class="fw-bold">
                            <th colspan="2" class="text-end">Total</th>
                            <th class="text-end text-primary" id="td"></th>
                            <th class="text-end text-danger" id="tk"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>

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

<script>
$(function(){

    $.get("<?= base_url('neracasaldo/get_data'); ?>", function(res){

        let html = '';
        let td = 0, tk = 0;

        res.forEach(r=>{

            let debit = parseFloat(r.saldo_debit) || 0;
            let kredit = parseFloat(r.saldo_kredit) || 0;

            td += debit;
            tk += kredit;

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

        $('#tb').html(html);
        $('#td').text(td.toLocaleString());
        $('#tk').text(tk.toLocaleString());

    }, 'json');

});
</script>