{{-- Bagian Script --}}
{{-- Bagian Card --}}
<script>
    const API_TTL = '/mk/myprofile/ttl-api/{{$login->id}}';

    $(document).ready(function () {
        refreshApiCards(true);
        loadAllMenuBadges();
    });

    /* ===============================
       ANIMATE NUMBER
       =============================== */
    function animateCount(el, start, end, duration = 1200) {
        const frameRate = 30;
        const totalFrames = Math.round(duration / (1000 / frameRate));
        let frame = 0;

        const counter = setInterval(() => {
            frame++;
            const progress = frame / totalFrames;
            const current = Math.round(start + (end - start) * progress);

            el.textContent = current.toLocaleString('id-ID');

            if (frame === totalFrames) clearInterval(counter);
        }, 1000 / frameRate);
    }

    /* ===============================
       FETCH API (SATU KALI)
       =============================== */
    function fetchApiSummary(callback) {
        $.get(API_TTL)
            .done(res => {
                if (res.success) callback(res);
            })
            .fail(() => console.error('Gagal mengambil data API'));
    }

    /* ===============================
       RENDER CARD
       =============================== */
    function renderCard(elId, value, animated = true) {
        const el = document.getElementById(elId);
        const oldValue = parseInt(el.textContent.replace(/\D/g, '')) || 0;

        if (animated) {
            el.innerHTML = '0';
            animateCount(el, oldValue, value);
        } else {
            el.textContent = value.toLocaleString('id-ID');
        }
    }

    /* ===============================
       PUBLIC REFRESH FUNCTION
       =============================== */
    function refreshApiCards(animated = true) {
        // Aktifkan skeleton
        $('#pinjamanAktif, #pinjamanHistory,#saldoAktif, #saldoHistory').html('<span class="skeleton"></span>');

        fetchApiSummary(data => {
            renderCard('pinjamanAktif', data.ttl_aktif, animated);
            renderCard('pinjamanHistory', data.ttl_pinjaman, animated);
            renderCard('saldoAktif', data.saldo_aktif, animated);
            renderCard('saldoHistory', data.saldo_history, animated);
        });
    }
</script>
{{-- Bagian Datatables --}}
<script>
    $(document).ready(function() {
        const login_id = "{{$login->id}}";

        var tableGaji = $('#table-api').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            paging: true,
            searching: true,
            ordering: false,
            scrollX: true,
            scrollY: '60vh',
            scrollCollapse: true,
            ajax: {
                url: `/mk/myprofile/data-pinjaman/${login_id}`,
                type: 'GET'
            },
            columnDefs: [
                { className: "text-left", targets: [1, 2, 3] },
                { className: "text-center", targets: [0, 4] }
            ],
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'status', name: 'status' },
                { data: 'pinjaman', name: 'pinjaman' },
                { data: 'kontrak', name: 'kontrak' },
                { data: 'action', name: 'action' }
            ],
            dom: "<'dt--top-section'<'row'<'col-sm-12 col-md-6 d-flex justify-content-md-start justify-content-center'B><'col-sm-12 col-md-6 d-flex justify-content-md-end justify-content-center mt-md-0 mt-3'f>>>" +
                 "<'table-responsive'tr>" +
                 "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>",
            buttons: [
                { extend: 'csv', className: 'btn btn-sm' },
                { extend: 'excel', className: 'btn btn-sm' },
                { extend: 'print', className: 'btn btn-sm' }
            ],
            oLanguage: {
                oPaginate: {
                    sPrevious: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    sNext: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                sInfo: "Showing page _PAGE_ of _PAGES_",
                sSearch: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                sSearchPlaceholder: "Search...",
                sLengthMenu: "Results :  _MENU_",
            },
            stripeClasses: [],
            lengthMenu: [5, 10, 20, 50],
            pageLength: 5
        });
    });
</script>