@include('ka.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('ka.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="btnBayarIuran"><i class="fas fa-hand-holding-usd"></i> Pembayaran Iuran</a>
                            <a href="javascript:void(0)" class="dropdown-item" id="btnArisan"><i class="fas fa-plus-circle"></i> Tambah Anggota</a>
                                    <a href="javascript:void(0)" class="dropdown-item" id="btnRefresh"><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>
        @include('ka.beranda.vd_01')
        @include('ka.beranda.vd_02')
        @include('ka.pembayaran.m_bayar_iuran')
        @include('ka.operasional.pengajuan.add')
        {{-- @include('ka.pembayaran.m_pelunasan') --}}
    </div>
</div>
{{-- <div id="lightboxOverlay">
    <span id="lightboxClose">&times;</span>
    <img id="lightboxImage" src="" alt="Jaminan Besar">
</div> --}}
<script>
    $('#btnRefresh').on('click', function () {

        // ================================
        // AJAX KIRIM DATA KE SERVER
        // ================================
        $.ajax({
            url: '/kk/beranda/update-database-angsuran', 
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function (res) {
                console.log('Update Data Angsuran berhasil:', res);
            },
            error: function (xhr) {
                console.error('Gagal update:', xhr);
            }
        });

        // ================================
        // Ubah tombol jadi loading
        // ================================
        $('#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();
            }
        });

        // Memanggil fungsi card isian
        loadsaldoRealisasi(true);
        loadsaldoAktif(true);
        loadsaldoTarget(true);
        loadsaldoMacet(true);
        loadsaldoStorting(true);

        var t1 = $('#table-marketing').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>