@extends('layouts.app')
@section('content')
<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Row-->
            <div class="row g-5 g-xl-8">
                <div class="col-xl-12">
                    <!--begin::List Widget 3-->
                    <div class="card card-xl-stretch mb-xl-8">
                        <div class="card-header py-5">
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bolder fs-3 mb-1">Syncronize Data</span>
                                <span class="text-muted mt-1 fw-bold fs-7">Syncronize Data Pegawai Dari Sikep</span>
                            </h3>
                            <div class="card-toolbar">
                                <ul class="nav">
                                    <li class="nav-item">
                                        <button id="syncdata" class="nav-link btn btn-sm btn-primary fw-bolder px-4">Ambil Data Dari Sikep</button>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!--end::Header-->
                        <!--begin::Body-->
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="py-0 my-0">Klik "Sync Data" Setelah Ambil Data Selesai</h6>
                                </div>
                                <div>
                                    <form method="POST" id="simpandatapegawai">
                                        @csrf
                                        <div id="listdatasync">
                
                                        </div>
                                        <button class="btn btn-sm btn-success fw-bolder px-4" type="submit">Sync Data</button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="card-body pt-2">
                            <div class="table-responsive">
                                <table class="table table-striped table-row-bordered gy-5 gs-7 dt-responsive nowrap" id="datatable" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>id_sikep</th>
                                                <th>username</th>
                                                <th>nip</th>
                                                <th>nip_lama</th>
                                                <th>gelar_depan</th>
                                                <th>gelar_belakang</th>
                                                <th>nama_lengkap</th>
                                                <th>usia</th>
                                                <th>jenis_kelamin</th>
                                                <th>jenis_pegawai</th>
                                                <th>tempat_lahir</th>
                                                <th>tanggal_lahir</th>
                                                <th>nik</th>
                                                <th>ktp</th>
                                                <th>karpeg</th>
                                                <th>agama</th>
                                                <th>nomor_handphone</th>
                                                <th>email</th>
                                                <th>email_pribadi</th>
                                                <th>tmt_pns</th>
                                                <th>status_pegawai</th>
                                                <th>tanggal_pensiun</th>
                                                <th>pangkat</th>
                                                <th>golongan</th>
                                                <th>is_hakim</th>
                                                <th>is_struktural</th>
                                                <th>id_posisi_jabatan</th>
                                                <th>posisi_jabatan</th>
                                                <th>id_kelompok_jabatan</th>
                                                <th>kelompok_jabatan</th>
                                                <th>jabatan</th>
                                                <th>unit_kerja</th>
                                                <th>id_struktur</th>
                                                <th>id_satker</th>
                                                <th>satker</th>
                                                <th>jabatan_unit_kerja</th>
                                                <th>jabatan_satker</th>
                                                <th>kode_satker</th>
                                                <th>kelas_pengadilan</th>
                                                <th>lingkungan_peradilan</th>
                                                <th>alamat_satker</th>
                                                <th>alamat_rumah</th>
                                                <th>telp_rumah</th>
                                                <th>pendidikan</th>
                                                <th>foto_pegawai</th>
                                                <th>foto_korpri</th>
                                                <th>foto_formal</th>
                                                <th>akta_lahir</th>
                                                <th>links</th>
                                            </tr>
                                        </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end:List Widget 3-->
                </div>
            </div>
            <!--end::Row-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Post-->
</div>
<!--end::Content-->
@endsection

@section('css-plugin')
    <link href="{{asset('assets/plugins/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css"/>
@endsection

@section('js-plugin')
    <script src="{{asset('assets/plugins/custom/datatables/datatables.bundle.js')}}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
@endsection

@section('js')
<script>
    var t = $('#datatable').DataTable({
        "pageLength": 50,
        responsive: true,
        "dom":
		"<'row'" +
		"<'col-sm-6 d-flex align-items-center justify-content-start'l>" +
		"<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
		">" +

		"<'table-responsive'tr>" +

		"<'row'" +
		"<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
		"<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
		">"
    });

    var jumlah;
    var posisi_sekarang = 2;
    var arr1 = {};

    var delay = ( function() {
        var timer = 0;
        return function(callback, ms) {
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

    function addRowPegawai (datapeg) {

        for (let a of datapeg) {

            t.row.add( [
                a.id,
                a.username,
                a.nip,
                a.nip_lama,
                a.gelar_depan,
                a.gelar_belakang,
                a.nama_lengkap,
                a.usia,
                a.jenis_kelamin,
                a.jenis_pegawai,
                a.tempat_lahir,
                a.tanggal_lahir,
                a.nik,
                a.ktp,
                a.karpeg,
                a.agama,
                a.nomor_handphone,
                a.email,
                a.email_pribadi,
                a.tmt_pns,
                a.status_pegawai,
                a.tanggal_pensiun,
                a.pangkat,
                a.golongan,
                a.is_hakim,
                a.is_struktural,
                a.id_posisi_jabatan,
                a.posisi_jabatan,
                a.id_kelompok_jabatan,
                a.kelompok_jabatan,
                a.jabatan,
                a.unit_kerja,
                a.id_struktur,
                a.id_satker,
                a.satker,
                a.jabatan_unit_kerja,
                a.jabatan_satker,
                a.kode_satker,
                a.kelas_pengadilan,
                a.lingkungan_peradilan,
                a.alamat_satker,
                a.alamat_rumah,
                a.telp_rumah,
                a.pendidikan,
                a.foto_pegawai,
                a.foto_korpri,
                a.foto_formal,
                a.akta_lahir,
                a._links.self.href,
            ] ).draw(false);

            $('#listdatasync').append( "<input type='hidden' name='peg[]' value='"+JSON.stringify(a).replace(/[\/\(\)\']/g, "&apos;")+"'>" );
        }
    };

    function panggilSelanjutnya(){

        if( posisi_sekarang > jumlah ){

            console.log('all done');

            jumlah = 0;
            posisi_sekarang = 2;

            $('#syncdata').prop('disabled', false);
            $('#syncdata').html(`Sync Data Sekarang`);

            t.columns.adjust().responsive.recalc();
            return;
        }
        delay(function(){

            let formData = [];
    
            formData.push({ name: "_token", value: "{{ csrf_token() }}" });
            formData.push({ name: "datareq", value: "https://sikep.mahkamahagung.go.id/api-pro/v1/pegawai?page="+posisi_sekarang });
    
            $.ajax({
                type: "POST",
                data: $.param(formData),
                url: "{{url('getapi')}}",
                dataType: 'json',
                success: function (result, status, xhr) {
                    datapeg = result.data.items;

                    addRowPegawai(datapeg);

                    console.log('Halaman '+posisi_sekarang);

                    $('#progressbarupload').css("width",(posisi_sekarang/jumlah)*100+"%");

                    posisi_sekarang++;
                    panggilSelanjutnya();

                },
                error: function (xhr, status, error) {
                    alert(error);
                },
                complete: function () {
                }
            });
        }, 500 );
    }

    $(document).ready(function() {

        $('#simpandatapegawai').submit(function(){
            bootbox.dialog({
                message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Loading...</p>',
                closeButton: false
            });
        });


        $('#syncdata').on('click', function(){
            let that = $(this);

            that.prop('disabled', true);
            that.html(`<span class="spinner-border spinner-border-sm mr-3" role="status" aria-hidden="true"> </span><span class="visually-hidden">Loading...</span>`);
            
            t.clear().draw();
            $('#listdatasync').empty();
            
            jumlah = 0;
            posisi_sekarang = 2;
            $('#progressbarupload').css("width","0%");

            console.log('Mulai Ambil Data...');

            let formData = [];
    
            formData.push({ name: "_token", value: "{{ csrf_token() }}" });
            formData.push({ name: "datareq", value: "https://sikep.mahkamahagung.go.id/api-pro/v1/pegawai" });
    
            $.ajax({
                type: "POST",
                data: $.param(formData),
                url: "{{url('getapi')}}",
                dataType: 'json',

                success: function (result, status, xhr) {
                jumlah = result.data._meta.pageCount;
                console.log(jumlah);
                datapeg = result.data.items;

                addRowPegawai(datapeg);
                panggilSelanjutnya();
               
            },
            error: function (xhr, status, error) {
                alert(error);
            },
            complete: function () {
              console.log('Halaman 1');
            }
          });

        });
    });
</script>
@endsection