<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">Laporan Keuangan</h4>

                
            </div>

            <div class="row mb-3">

                <div class="col-md-3">
                    <label class="form-label">Tanggal Awal</label>
                    <input type="date" id="tanggal_awal" class="form-control"
                        value="<?= date('Y-m-01'); ?>">
                </div>

                <div class="col-md-3">
                    <label class="form-label">Tanggal Akhir</label>
                    <input type="date" id="tanggal_akhir" class="form-control"
                        value="<?= date('Y-m-t'); ?>">
                </div>

                <div class="col-md-2 d-flex align-items-end gap-2">
                    <button class="btn btn-warning w-100" id="btnFilter">
                        Tampilkan
                    </button>
                    <button type="button" class="btn btn-danger" id="generate_pdf">
                    PDF
                </button>
                </div>

            </div>

            <div class="table-responsive">
                <table class="table table-sm table-striped table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th width="120">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 () {

    loadData();

    $('#btnFilter').click(function () {
        loadData();
    });

    function loadData() {

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

            tanggal_awal: $('#tanggal_awal').val(),
            tanggal_akhir: $('#tanggal_akhir').val()

        }, function (res) {

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

            res.forEach(r => {

                let debit = parseFloat(r.debit) || 0;
                let kredit = parseFloat(r.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');

    }

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

        let btn = $(this);

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

        window.open(
            "<?= base_url('generateneracasaldo/generatepdf'); ?>" +
            "?tanggal_awal=" + $('#tanggal_awal').val() +
            "&tanggal_akhir=" + $('#tanggal_akhir').val(),
            "_blank"
        );

        setTimeout(function () {
            btn.prop('disabled', false).text('Generate PDF');
        }, 1000);

    });

});
</script>