@include('mk.beranda.style')
<div id="content" class="main-content">
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-lg-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('mk.beranda') }}"><b>Beranda</b></a></li>
                </ol>
            </div>
        </div>
        <div class="row layout-top-spacing">
            <div class="col-lg-12">
                <blockquote class="blockquote media-object">
                    <div class="media">
                        <div class="media-body align-self-center">
                            <div class="btn-group mr-2 sm" style="float: right;">
                                <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Pilihan 
                                    <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-chevron-down">
                                        <polyline points="6 9 12 15 18 9"></polyline>
                                    </svg>
                                </button>
                                <div class="dropdown-menu">
                                    <a href="javascript:void(0)" class="dropdown-item" id="btnPengajuan"><i class="fas fa-file-contract"></i> Pengajuan Pinjaman</a> 
                                    <a href="javascript:void(0)" class="dropdown-item" id="btnNotuf"><i class="fas fa-exclamation-triangle"></i> Notifikasi Pembayaran</a>
                                    <a href="javascript:void(0)" class="dropdown-item" id="btnPembayaran"><i class="fas fa-hand-holding-usd"></i> Pembayaran Pinjaman</a>
                                    <a href="javascript:void(0)" class="dropdown-item" id="btnPelunasan"><i class="fas fa-money-bill-wave"></i> Pelunasan Pinjaman</a>
                                    <a href="javascript:void(0)" class="dropdown-item" id="btnArisan"><i class="fas fa-tasks"></i> Pengajuan Arisan</a>
                                    <a href="javascript:void(0)" class="dropdown-item" id="btnKpi"><i class="fas fa-sync"></i> Sync Nilai KPI</a>
                                    <a href="javascript:void(0)" class="dropdown-item" id="btn-refresh"><i class="fas fa-sync"></i> Sync Data</a>
                                </div>
                            </div> 
                            <p class="d-inline">
                                <b>{{$data_login->nm_panggilan}} <br> {{$level_login->role_level}}</b>
                            </p>
                        </div>
                    </div>
                    <small class="text-left"><cite
                            title="Source Title"><b>{{$tanggal}}</cite></b>
                    </small>
                </blockquote>
            </div>
        </div>
        <div id="lightboxOverlay" style="display:none;">
            <span id="lightboxClose">&times;</span>
            <img id="lightboxImage" src="">
        </div>
        {{-- Ringkasan Lembar Kerja --}}
        @include('mk.beranda.01_storting_kpi')
        {{-- Daftar Penagihan --}}
        @include('mk.beranda.02_daftar_penagihan')
        {{-- Daftar Penagihan Macet --}}
        @include('mk.beranda.03_daftar_penagihan_macet')
        {{-- Daftar Pengajuan --}}
        @include('mk.beranda.04_daftar_pengajuan')
        {{-- Daftar Pembayaran --}}
        @include('mk.beranda.05_daftar_pembayaran')
    </div>
</div>
@include('mk.beranda.modal')
<script>
    $(document).on("click", "#btnKpi", function () {
        Swal.fire({
            title: "Sync Data KPI",
            text: "Apakah yakin ingin syncron data Nilai KPI?",
            icon: "question",
            showCancelButton: true,
            confirmButtonText: "Ya, Sync",
            cancelButtonText: "Batal",
            allowOutsideClick: false
        }).then(result => {

            if (!result.isConfirmed) return;

            // ==== Swal Loading Dengan Progress Bar ====
            let progress = 0;

            Swal.fire({
                title: "Sedang Sync Data Nilai KPI",
                html: `
                    <div style="width:100%; background:#eee; border-radius:5px; height:15px; margin-top:10px;">
                        <div id="progressBarSync" style="
                            width:0%;
                            height:15px;
                            background:#28a745;
                            border-radius:5px;
                            transition: width 0.3s;">
                        </div>
                    </div>
                    <p id="progressText" style="margin-top:10px; font-weight:bold;">0%</p>
                `,
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => {

                    // Animasi progress 0% → 100%
                    let timer = setInterval(() => {
                        progress += Math.floor(Math.random() * 15) + 5; // Naik random biar smooth
                        if (progress > 100) progress = 100;

                        $("#progressBarSync").css("width", progress + "%");
                        $("#progressText").text(progress + "%");

                        if (progress >= 100) {
                            clearInterval(timer);
                        }
                    }, 300);

                    // ==== PROSES AJAX ====
                    $.ajax({
                        url: "/mk/kpi/sync-data-nilai",
                        method: "POST",
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (res) {

                            // tunggu progress minimal 100%
                            let waitDone = setInterval(() => {
                                if (progress >= 100) {
                                    clearInterval(waitDone);
                                    Swal.fire({
                                        icon: "success",
                                        title: "Berhasil!",
                                        text: res.message || "Data KPI berhasil disync!",
                                        timer: 1500,
                                        showConfirmButton: false
                                    });
                                    $(document).ready(function () {
                                        renderDashboard(true);
                                    });
                                    // 🔄 Reload semua DataTables
                                    $('.dataTable').each(function () {
                                        if ($.fn.DataTable.isDataTable(this)) {
                                            $(this).DataTable().ajax.reload(null, false);
                                        }
                                    });
                                }
                            }, 200);

                        },
                        error: function () {
                            Swal.fire("Error", "Terjadi kesalahan saat sync data KPI.", "error");
                        }
                    });

                }
            });

        });
    });
</script>
<script>
    $('#btn-refresh').on('click', function () {
    
        // Ubah tombol jadi loading
        $('#btn-refresh').html('<i class="fas fa-spinner fa-spin"></i> Loading...');
        // Sync Data
        Swal.fire({
            title: 'Sync Data...',
            html: 'Mohon tunggu sebentar.',
            allowOutsideClick: false,
            allowEscapeKey: false,
            allowEnterKey: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });    
        // Memanggil fungsi card isian
        renderDashboard(true);

        // Ambil instance DataTable
        var t1 = $('#table-tagihan').DataTable();
        var t2 = $('#table-tagihan-macet').DataTable();
        var t3 = $('#table-pengajuan').DataTable();
        var t4 = $('#table-bayar').DataTable();
    
        // Hitung reload selesai
        var selesai = 0;
        function cekSelesai() {
            selesai++;
            if (selesai === 1) {
                // Semua datatable selesai reload
                $('#btn-refresh').html('<i class="fa fa-sync"></i> Sync Data');
                Swal.close(); // Tutup loading
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Berhasil Sync Data!',
                    timer: 1500,
                    showConfirmButton: false
                });
            }
        }
    
        // Pasang event xhr untuk masing-masing DataTable
        t1.one('xhr', cekSelesai);
        t2.one('xhr', cekSelesai);
        t3.one('xhr', cekSelesai);
        t4.one('xhr', cekSelesai);
    
        // Reload DataTables
        t1.ajax.reload(null, false);
        t2.ajax.reload(null, false);
        t3.ajax.reload(null, false);
        t4.ajax.reload(null, false);
    
    });
</script>