<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>Buku Besar</h5>

            </div>
            
<div class="row mb-3">
    <div class="col-md-4">
        <label>Akun</label>
        <select id="account_id" class="form-control select-search"></select>
    </div>

    <div class="col-md-3">
        <label>Dari</label>
        <input type="date" id="start_date" class="form-control">
    </div>

    <div class="col-md-3">
        <label>Sampai</label>
        <input type="date" id="end_date" class="form-control">
    </div>

    <div class="col-md-2 d-flex align-items-end">
        <button class="btn btn-primary w-100" id="btnFilter">Filter</button>
    </div>
</div>

<div class="table-responsive">
    <table id="tableLedger" class="table modern-table align-middle w-100">
    <thead>
        <tr>
            <th>Tanggal</th>
            <th>No Ref</th>
            <th>Keterangan</th>
            <th>Debit</th>
            <th>Kredit</th>
            <th>Saldo</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
</div>

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

<script>
$(function(){

    // LOAD ACCOUNTS
    $.get("<?= base_url('bukubesar/get_accounts'); ?>", function(res){
        let opt = '';
        res.forEach(a=>{
            opt += `<option value="${a.id}">${a.kode_akun} - ${a.nama_akun}</option>`;
        });
        $('#account_id').html(opt);
    },'json');

    function loadData(){

        let account_id = $('#account_id').val();
        let start = $('#start_date').val();
        let end   = $('#end_date').val();

        $.get("<?= base_url('bukubesar/get_data'); ?>", {
            account_id: account_id,
            start_date: start,
            end_date: end
        }, function(res){

            let html = '';

            res.forEach(r=>{
                html += `
                    <tr>
                        <td>${r.tanggal}</td>
                        <td>${r.no_ref}</td>
                        <td>${r.keterangan}</td>
                        <td class="text-success">${parseFloat(r.debit).toLocaleString()}</td>
                        <td class="text-danger">${parseFloat(r.kredit).toLocaleString()}</td>
                        <td class="fw-bold">${parseFloat(r.saldo).toLocaleString()}</td>
                    </tr>
                `;
            });

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

        },'json');
    }

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

});
</script>