$(function(){
    get_eis();

    $.getJSON(BASE_URL+"/views/dataset/"+FILTER_TAHUN+"/keuangan/last_update.json", function(res) {
        $('.last_update_keuangan').text(res.last_update)
    })
})

function get_eis(){
    let warna = [         
        'pink',
        'teal',
        'cyan',
        'purple',
        'blue',
        'green',
        'red',
        'yellow',
        'orange',
    ];

    $.getJSON(BASE_URL+"/views/dataset/"+FILTER_TAHUN+"/keuangan/data_anggaran.json?t="+(new Date().getTime()), res => {
        if(res.length){
            $('.tbody-belanja').empty();
            let len = res.length;
            let i = 1;
            let widget = `<div class="row">`;
            let chart_anggaran = [];
            let chart_pendapatan = [];
            let chart_belanja = [];
            let chart_anggaran_categories = [];
            let chart_anggaran_realisasi = [];
            let chart_pendapatan_categories = [];
            let chart_pendapatan_realisasi = [];
            let chart_belanja_categories = [];
            let chart_belanja_realisasi = [];

            res.forEach(item => {
                let tab = "&nbsp;&nbsp;&nbsp;&nbsp;"
                let indent = "";

                for (let index = 0; index < (item.xstyle-1); index++) {
                    indent += tab;
                }

                $('.tbody-belanja').append(`
                    <tr>
                        <td>${indent}${item.urai.kode}</td>
                        <td>${indent}${item.urai.urai}</td>
                        <td class="text-right">${item.pagu_p}</td>
                        <td class="text-center">${item.bobot}</td>
                        <td class="text-right">${item.real_keu}</td>
                        <td class="text-center">${item.real_keu_pr}</td>
                    </tr>
                `);

                let col = "col-md-6";

                if(i == 1 || i == 2){
                    col = "col-md-6";
                }else if(i == 3 || i == 4 || i == 5 || i == 6 || i == 7){
                    col = "col";
                }else if(i == 8 || i == 9 || i == 10){
                    col = "col-md-4";
                }else if(i == 11 || i == 12){
                    col = "col-md-6";
                }

                if(item.xstyle == 1){
                    widget += `</div><div class="row"><div class="col-md-12"><h3>${item.urai.urai}</h3></div></div><div class="row">`;
                }

                if(i == 1 || i == 3 || i == 8 || i == 11){
                    widget += `</div><div class="row">`;
                }

                if(item.pagu_p !== ''){
                    widget += `
                        <div class="${col}">
                            <div class="widget_2 w2-${warna[item.xstyle]}">
                                <div class="w2-title">
                                ${item.urai.kode} ${item.urai.urai}
                                </div>
                                <div class="w2-konten">
                                <span class="w2-icon"><i class="fa fa-list"></i></span>
                                Rp. ${item.pagu_p}
                                </div>
                                <div class="w2-footer">
                                <b>Realisasi Keuangan:</b> <br>Rp. ${item.real_keu} <b>|</b> ${item.real_keu_pr}%
                                </div>
                            </div>
                        </div>
                    `;
                }

                if(item.urai.kode == '4' || item.urai.kode == '5' || item.urai.kode == '6.1' || item.urai.kode == '6.2'){
                    chart_anggaran.push({
                        name: item.urai.kode+" - "+item.urai.urai,
                        y: parseX(item.pagu_p),
                        pagu: formatRupiah(parseX(item.pagu_p)),
                        persen: ""
                    })

                    chart_anggaran_realisasi.push({
                        name: item.urai.kode+" - "+item.urai.urai,
                        y: parseX(item.real_keu),
                        pagu: formatRupiah(parseX(item.real_keu)),
                        persen: "("+item.real_keu_pr+"%)"
                    })

                    chart_anggaran_categories.push(item.urai.kode+" - "+item.urai.urai);
                }

                if(item.xstyle == '2' && String(item.urai.kode).startsWith('4.')){
                    chart_pendapatan.push({
                        name: item.urai.kode+" - "+item.urai.urai,
                        y: parseX(item.pagu_p),
                        pagu: formatRupiah(parseX(item.pagu_p)),
                        persen: ""
                    })

                    chart_pendapatan_realisasi.push({
                        name: item.urai.kode+" - "+item.urai.urai,
                        y: parseX(item.real_keu),
                        pagu: formatRupiah(parseX(item.real_keu)),
                        persen: "("+item.real_keu_pr+"%)"
                    })

                    chart_pendapatan_categories.push(item.urai.kode+" - "+item.urai.urai);
                }

                if(item.xstyle == '2' && String(item.urai.kode).startsWith('5.')){
                    chart_belanja.push({
                        name: item.urai.kode+" - "+item.urai.urai,
                        y: parseX(item.pagu_p),
                        pagu: formatRupiah(parseX(item.pagu_p)),
                        persen: ""
                    })

                    chart_belanja_realisasi.push({
                        name: item.urai.kode+" - "+item.urai.urai,
                        y: parseX(item.real_keu),
                        pagu: formatRupiah(parseX(item.real_keu)),
                        persen: "("+item.real_keu_pr+"%)"
                    })

                    chart_belanja_categories.push(item.urai.kode+" - "+item.urai.urai);
                }

                i += 1;
            })

            chartPie('chart_anggaran', chart_anggaran)
            chartPie('chart_pendapatan', chart_pendapatan)
            chartPie('chart_belanja', chart_belanja)

            chartBar('chart_realisasi_keuangan', chart_anggaran_categories, chart_anggaran, chart_anggaran_realisasi)
            chartBar('chart_realisasi_pendapatan', chart_pendapatan_categories, chart_pendapatan, chart_pendapatan_realisasi)
            chartBar('chart_realisasi_belanja', chart_belanja_categories, chart_belanja, chart_belanja_realisasi)
            
            $('.widget_belanja').html(widget);
        }

        $.getJSON(BASE_URL+"/views/dataset/"+FILTER_TAHUN+"/keuangan/data_skpd_per_rekening.json?t="+(new Date().getTime()), function(res){
            if(res.length){
                $('.tbody_rekening').empty();

                let c = [];
                let pagu = [];
                let realisasi = [];
                let realisasi_pr = [];

                res.forEach((item, i) => {
                    $('.tbody_rekening').append(`
                        <tr>
                            <td class='text-center'>${i+1}</td>
                            <td>
                                <a class='text-info' href='javascript:void(0)' onclick='loadModalDetailOpd("${item.skpd.kodeskpd}")'>${item.skpd.kodeskpd} - ${item.skpd.uraiskpd}</a></td>
                            <td class="text-right">${item.pagu_p}</td>
                            <td class="text-center">${item.bobot}</td>
                            <td class="text-right">${item.real_keu}</td>
                            <td class="text-center">${item.real_keu_pr}</td>
                        </tr>
                    `);

                    let r = parseX(item.pagu_p);
                    let x = parseX(item.real_keu)

                    c.push(item.skpd.uraiskpd)
                    pagu.push({
                        y: r,
                        pagu: item.pagu_p,
                        persen: ""
                    })
                    realisasi.push({
                        y: x,
                        pagu: item.pagu_p,
                        persen: "("+item.real_keu_pr+"%)"
                    })
                    realisasi_pr.push(parseFloat(String(item.real_keu_pr).replaceAll(',','.')))
                })

                chartBar('chart_opd', c, pagu, realisasi)

                realisasi_pr.sort(function(a, b) {
                    return a - b;
                  });
                realisasi_pr.reverse();

                console.log(realisasi_pr)
                chartBarPersen('chart_opd_realisasi', c, realisasi_pr)
            }
        })

        $.getJSON(BASE_URL+"/views/dataset/"+FILTER_TAHUN+"/keuangan/rekap_bidang.json?t="+(new Date().getTime()), function(res){
            if(res.length){
                let c = [];
                let categori = [];
                let pagu = [];
                let realisasi = [];

                $('.tbody_bidang').empty();

                res.forEach((item, i) => {
                    let p1 = String(item.pagu_p).replaceAll('.', '');
                    let p2 = String(p1).replaceAll(',', '.');
                    c.push({
                        name: item.kodebidang+" - "+item.uraibidang,
                        y: parseFloat(p2),
                        full: item.kodebidang+" - "+item.uraibidang,
                        pagu: formatRupiah(parseX(item.pagu_p))
                    })

                    $('.tbody_bidang').append(`
                        <tr>
                            <td class='text-center'>${i+1}</td>
                            <td>${item.kodebidang+" - "+item.uraibidang}</td>
                            <td class="text-right">${item.pagu_p}</td>
                            <td class="text-center">${item.bobot}</td>
                            <td class="text-right">${item.real_keu}</td>
                            <td class="text-center">${item.real_keu_pr}</td>
                        </tr>
                    `);

                    let r = parseX(item.pagu_p);
                    let x = parseX(item.real_keu)

                    categori.push(item.kodebidang+" - "+item.uraibidang)
                    pagu.push({
                        y: r,
                        pagu: item.pagu_p,
                        persen: ""
                    })
                    realisasi.push({
                        y: x,
                        pagu: item.pagu_p,
                        persen: ""
                    })
                })

                chartPie('chart_bidang', c)
                chartBar('chart_bar_bidang', categori, pagu, realisasi)
            }
        })
    })
}

function parseX(p){
    let a = String(p).replaceAll('.', '');
    let b = String(a).replaceAll(',', '.');
    return parseFloat(b);
}

function chartPie(elem, data){
    Highcharts.chart(elem, {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>Rp. {point.pagu}</b>'
        },
        accessibility: {
            point: {
                valueSuffix: ''
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: Rp. {point.pagu} ({point.percentage:.1f}%)'
                }
            }
        },
        credits: false,
        series: [{
            name: 'Pagu',
            colorByPoint: true,
            data: data
        }]
    });
}

function chartBar(elem, categories, pagu, realisasi){
    Highcharts.chart(elem, {
        chart: {
            type: 'bar'
        },
        title: {
            text: '',
            align: 'left'
        },
        xAxis: {
            categories: categories,
            title: {
                text: null
            },
            gridLineWidth: 1,
            lineWidth: 0
        },
        yAxis: {
            min: 0,
            title: {
                text: '',
                align: 'high'
            },
            labels: {
                overflow: 'justify',             
                formatter: function() {
                    var ret,
                        numericSymbols = ['ribu', 'juta', 'milyar', 'triliun', 'P', 'E'],
                        i = numericSymbols.length;
                    if(this.value >=1000) {
                        while (i-- && ret === undefined) {
                            multi = Math.pow(1000, i + 1);
                            if (this.value >= multi && numericSymbols[i] !== null) {
                               ret = (this.value / multi) + numericSymbols[i];
                            }
                        }
                    }
                    return 'Rp.' + (ret ? ret : this.value);
                }
            },
            gridLineWidth: 0
        },
        tooltip: {
            valueSuffix: ' ',
            pointFormat: '{series.name}: <b>Rp. {point.pagu}</b>'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    format: 'Rp. {point.pagu} {point.persen}'
                },
                groupPadding: 0.1
            }
        },
        legend: {
            enabled: true,
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Pagu',
            data: pagu
        }, {
            name: 'Realisasi',
            data: realisasi
        }]
    });
}

function chartBarPersen(elem, categories, data){
    Highcharts.chart(elem, {
        chart: {
            type: 'bar'
        },
        title: {
            text: '',
            align: 'left'
        },
        xAxis: {
            categories: categories,
            title: {
                text: null
            },
            gridLineWidth: 1,
            lineWidth: 0
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Persen',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            },
            gridLineWidth: 0
        },
        tooltip: {
            valueSuffix: ' ',
            pointFormat: '{series.name}: <b>{point.y}%</b>'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    format: '{point.y}%'
                },
                groupPadding: 0.1
            }
        },
        legend: {
            enabled: true,
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Realisasi',
            data: data
        }]
    });
}

function loadModalDetailOpd(kodeskpd){
    $('.modal-detail-opd').modal('show');
    $('#modal_tabel_belanja tbody').empty();
    $('#modal_tabel_kegiatan tbody').empty();
    $('.modal-detail-opd').find('.modal-title').html(`<i class="fa fa-spinner fa-spin"></i> Memuat Data...`);

    $.getJSON(BASE_URL+"/views/dataset/"+FILTER_TAHUN+"/keuangan/keudetail/keudetail-"+kodeskpd+".json?t="+(new Date().getTime()), function(res){
        if(res.length){
            let data = res[0]
            $('.modal-detail-opd').find('.modal-title').html(`${data.kodeskpd} - ${data.uraiskpd}`);

            data.data_belanja.forEach(item => {
                let tab = "&nbsp;&nbsp;&nbsp;&nbsp;"
                let indent = "";

                for (let index = 0; index < (item.xstyle-1); index++) {
                    indent += tab;
                }

                $('#modal_tabel_belanja tbody').append(`
                    <tr>
                        <td>${indent}${item.urai.kode}</td>
                        <td>${indent}${item.urai.urai}</td>
                        <td class="text-right">${item.pagu_p}</td>
                        <td class="text-center">${item.bobot}</td>
                        <td class="text-right">${item.real_keu}</td>
                        <td class="text-center">${item.real_keu_pr}</td>
                    </tr>
                `);
            })

            let i = 1;
            data.program.forEach(prog => {
                $('#modal_tabel_kegiatan tbody').append(`
                    <tr style="background: gold">
                        <td class="text-center">${i++}</td>
                        <td><b>${prog.kodeprogram} - ${prog.uraiprogram}</b></td>
                        <td class="text-right">${prog.pagu_p}</td>
                        <td class="text-center">${prog.bobot}</td>
                        <td class="text-right">${prog.real_keu}</td>
                        <td class="text-center">${prog.real_keu_pr}</td>
                    </tr>
                `)

                prog.kegiatan.forEach(keg => {
                    $('#modal_tabel_kegiatan tbody').append(`
                        <tr style="background: aquamarine">
                            <td class="text-center">${i++}</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp; ${keg.kodekegiatan} - ${keg.uraikegiatan}</td>
                            <td class="text-right">${keg.pagu_p}</td>
                            <td class="text-center">${keg.bobot}</td>
                            <td class="text-right">${keg.real_keu}</td>
                            <td class="text-center">${keg.real_keu_pr}</td>
                        </tr>
                    `)

                    keg.subkegiatan.forEach(keg => {
                        $('#modal_tabel_kegiatan tbody').append(`
                            <tr>
                                <td class="text-center">${i++}</td>
                                <td>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; ${keg.kodesubkegiatan} - ${keg.uraisubkegiatan}</td>
                                <td class="text-right">${keg.pagu_p}</td>
                                <td class="text-center">${keg.bobot}</td>
                                <td class="text-right">${keg.real_keu}</td>
                                <td class="text-center">${keg.real_keu_pr}</td>
                            </tr>
                        `)
                    })
                })
            })
        }
    });

}

function formatRupiah(angka, prefix) {
    var number_string = angka.toString().replace(/[^.\d]/g, '').toString(),
        split = number_string.split('.'),
        sisa = split[0].length % 3,
        rupiah = split[0].substr(0, sisa),
        ribuan = split[0].substr(sisa).match(/\d{3}/gi);

    // tambahkan titik jika yang di input sudah menjadi angka ribuan
    if (ribuan) {
        separator = sisa ? '.' : '';
        rupiah += separator + ribuan.join('.');
    }

    rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
    return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
}