<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">
                <button type="submit" class="btn btn-warning w-100">
                    Tampilkan
                </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);
    });

});
</script>