{{-- Bagian Omset --}}
<div class="row layout-spacing">
    <!-- Biaya Admin -->
    <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="card stat-card" onclick="infoBiayaAdmin()">
            <div class="card-body">
                <h4>Biaya Administrasi <br> Bulanan</h4>
                <h2 id="kasBiayaAdministrasi">0,-</h2>
                <small id="kasBiayaAdministrasiTeks"></small>
            </div>
        </div>
    </div>

    <!-- Dana Kehilangan -->
    <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="card stat-card" onclick="infoBiayaDK()">
            <div class="card-body">
                <h4>Dana Kehilangan <br> Bulanan</h4>
                <h2 id="kasResikoKehilangan">0,-</h2>
                <small id="kasResikoKehilanganPerTeks"></small>
            </div>
        </div>
    </div>

    <!-- Saldo Fee Dealer -->
    <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="card stat-card" onclick="infoBiayaFeeDealer()">
            <div class="card-body">
                <h4>Saldo Fee Dealer <br> Bulanan</h4>
                <h2 id="kasJasaPinjaman">0,-</h2>
                <small id="kasJasaPinjamanPerTeks"></small>
            </div>
        </div>
    </div>
</div>
{{-- Iuran Arisan --}}
<div class="row layout-spacing">
    <!-- Iuran Arisan Heboh -->
    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="card stat-card" onclick="infoIuranHeboh()">
            <div class="card-body">
                <h4>Iuran Heboh <br> Bulanan</h4>
                <h2 id="kasIuranArisanHeboh">0,-</h2>
                <small id="kasIuranArisanHebohTeks"></small>
            </div>
        </div>
    </div>
    <!-- Iuran Arisan Motor -->
    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="card stat-card" onclick="infoIuranMotor()">
            <div class="card-body">
                <h4>Iuran Motor <br> Bulanan</h4>
                <h2 id="kasIuranArisanMotor">0,-</h2>
                <small id="kasIuranArisanMotorPerTeks"></small>
            </div>
        </div>
    </div>
    <!-- Operasional Arisan Heboh -->
    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="card stat-card" onclick="infoOperasionalHeboh()">
            <div class="card-body">
                <h4>Operasional Heboh <br> Bulanan</h4>
                <h2 id="kasOperasionalHeboh">0,-</h2>
                <small id="kasOperasionalHebohTeks"></small>
            </div>
        </div>
    </div>
    <!-- Operasional Arisan Motor -->
    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="card stat-card" onclick="infoOperasionalMotor()">
            <div class="card-body">
                <h4>Operasional Motor <br> Bulanan</h4>
                <h2 id="kasOperasionalMotor">0,-</h2>
                <small id="kasOperasionalMotorPerTeks"></small>
            </div>
        </div>
    </div>
</div>
<div class="row layout-spacing">
    <!-- BIAYA OPERASIONAL -->
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="card stat-card" onclick="infoOperasionalArisan()">
            <div class="card-body">
                <h4>Total Operasional <br> Bulanan</h4>
                <h2 id="kasOperasionalArisan">0,-</h2>
                <small id="kasOperasionalArisanTeks"></small>
            </div>
        </div>
    </div>
    <!-- OMSET ARISAN -->
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="card stat-card" onclick="infoTotalPenghasilanArisan()">
            <div class="card-body">
                <h4>Total Omset <br> Bulanan</h4>
                <h2 id="kasTotalOmsetArisan">0,-</h2>
                <small id="kasTotalOmsetArisanTeks"></small>
            </div>
        </div>
    </div>
</div>

<script>
    // ======================
// INFO CARD
// ======================
function infoBiayaAdmin() {
    Swal.fire({
        title: "Informasi",
        text: `Perhitungan Omset Biaya Administrasi pada periode bulan yang dipilih.`,
        icon: "info",
    });
}

function infoBiayaDK() {
    Swal.fire({
        title: "Informasi",
        text: `Perhitungan Omset Dana Kehilangan pada periode bulan yang dipilih.`,
        icon: "info",
    });
}

function infoBiayaFeeDealer() {
    Swal.fire({
        title: "Informasi",
        text: `Perhitungan Omset Fee Dealer pada periode bulan yang dipilih.`,
        icon: "info",
    });
}

function infoIuranHeboh() {
    Swal.fire({
        title: "Informasi",
        text: `Total Iuran Masuk Arisan Heboh periode bulan yang dipilih.`,
        icon: "info",
    });
}

function infoIuranMotor() {
    Swal.fire({
        title: "Informasi",
        text: `Total Iuran Masuk Arisan Motor periode bulan yang dipilih.`,
        icon: "info",
    });
}

function infoOperasionalHeboh() {
    Swal.fire({
        title: "Informasi",
        text: `Total Pemberian Hak Arisan Heboh periode bulan yang dipilih.`,
        icon: "info",
    });
}

function infoOperasionalMotor() {
    Swal.fire({
        title: "Informasi",
        text: `Total Pemberian Hak Arisan Motor periode bulan yang dipilih.`,
        icon: "info",
    });
}

function infoOperasionalArisan() {
    Swal.fire({
        title: "Informasi",
        text: `Total Pemberian Hak Arisan Heboh + Motor periode bulan yang dipilih.`,
        icon: "info",
    });
}

function infoTotalPenghasilanArisan() {
    Swal.fire({
        title: "Informasi",
        text: `Total Penghasilan Arisan Heboh + Motor periode bulan yang dipilih.`,
        icon: "info",
    });
}


// ======================
// ANIMASI ANGKA
// ======================
function animateCount(el, start, end, duration = 500) {
    let range = end - start;
    if (range === 0) {
        el.textContent = end.toLocaleString('id-ID') + ',-';
        return;
    }

    let minTimer = 20;
    let stepTime = Math.max(Math.abs(Math.floor(duration / range)), minTimer);
    let startTime = new Date().getTime();
    let endTime = startTime + duration;

    let timer = setInterval(function () {
        let now = new Date().getTime();
        let remaining = Math.max((endTime - now) / duration, 0);
        let value = Math.round(end - (remaining * range));
        el.textContent = value.toLocaleString('id-ID') + ',-';
        if (value == end) clearInterval(timer);
    }, stepTime);
}

// =======================================================
// LOAD SEMUA KARTU SECARA OTOMATIS
// =======================================================
function loadSaldoKasAll(animated = true, tahun = null, bulan = null) {

    let url = '{{ route("o.kas.arisan.getSaldoKas") }}';
    let params = [];

    if (tahun) params.push('tahun=' + tahun);
    if (bulan) params.push('bulan=' + bulan);
    if (params.length > 0) url += '?' + params.join('&');

    $.get(url).done((res) => {
        if (!res.success) return;

        let teksBulan = res.filter_bulan_teks ?? '';
        let teksTahun = res.filter_tahun_teks ?? new Date().getFullYear();

        // Helper untuk animasi
        function setValue(id, value, labelId) {
            const el = document.getElementById(id);
            const old = parseInt(el.textContent.replace(/\D/g, '') || 0);
            const newVal = parseInt(value || 0);

            animated ? animateCount(el, old, newVal)
                     : el.textContent = newVal.toLocaleString('id-ID') + ',-';

            if (labelId) {
                $('#' + labelId).text(`Per ${teksBulan} ${teksTahun}`);
            }
        }

        // ===========================
        // OMSET / ADMIN / KEHILANGAN
        // ===========================
        setValue("kasBiayaAdministrasi", res.saldoAdmin, "kasBiayaAdministrasiTeks");
        setValue("kasResikoKehilangan", res.saldoDanaKehilangan, "kasResikoKehilanganPerTeks");
        setValue("kasJasaPinjaman", res.saldoFeeDealer, "kasJasaPinjamanPerTeks");

        // ===========================
        // ARISAN (Iuran)
        // ===========================
        setValue("kasIuranArisanHeboh", res.saldoArisanHebohBulanan, "kasIuranArisanHebohTeks");
        setValue("kasIuranArisanMotor", res.saldoArisanMotorBulanan, "kasIuranArisanMotorPerTeks");

        // ===========================
        // OPERASIONAL ARISAN
        // ===========================
        setValue("kasOperasionalHeboh", res.saldoOperasionalHeboh, "kasOperasionalHebohTeks");
        setValue("kasOperasionalMotor", res.saldoOperasionalMotor, "kasOperasionalMotorPerTeks");
        setValue("kasOperasionalArisan", res.TotalOperasionalArisan, "kasOperasionalArisanTeks");

        // ===========================
        // OMSET TOTAL
        // ===========================
        setValue("kasTotalOmsetArisan", res.saldoAdminDanaKehilangan, "kasTotalOmsetArisanTeks");

    }).fail(() => console.error('Gagal memuat saldo kas'));
}

// =======================================================
// LOAD SAAT PERTAMA MASUK HALAMAN
// =======================================================
$(document).ready(function () {
    let tahunNow = new Date().getFullYear();
    let bulanNow = new Date().getMonth() + 1;
    loadSaldoKasAll(true, tahunNow, bulanNow);
});

// =======================================================
// REFRESH BUTTON
// =======================================================
$('#btnRefresh').on('click', function () {

    $('#btnRefresh').html('<i class="fas fa-spinner fa-spin"></i> Loading...');

    Swal.fire({
        title: 'Sync Data...',
        html: 'Mohon tunggu sebentar.',
        allowOutsideClick: false,
        allowEscapeKey: false,
        allowEnterKey: false,
        didOpen: () => Swal.showLoading(),
    });

    let tahunNow = new Date().getFullYear();
    let bulanNow = new Date().getMonth() + 1;

    loadSaldoKasAll(true, tahunNow, bulanNow);
    $('#table-kas-arisan').DataTable().ajax.url(
            '{{ route("o.kas.arisan.getHistoryTransaksi") }}'
        ).load();
    var t1 = $('#table-kas-arisan').DataTable();
    var selesai = 0;

    function cekSelesai() {
        selesai++;
        if (selesai === 1) {
            $('#btnRefresh').html('<i class="fa fa-sync"></i> Sync Data');
            Swal.close();
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: 'Berhasil Sync Data!',
                timer: 1500,
                showConfirmButton: false
            });
        }
    }

    t1.one('xhr', cekSelesai);
    t1.ajax.reload(null, false);
});

</script>