$(function(){
    get_eis();
})

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

    $.getJSON(BASE_URL+"/?m=keuangan&f=get_eis&tahun="+tahun, res => {
        if(res.bappeda_0.length){
            $('.tbody-belanja').empty();
            let len = res.bappeda_0.length;
            let i = 1;
            let widget = `<div class="row">`;
            res.bappeda_0.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>${item.kode}</td>
                        <td>${indent}${item.urai}</td>
                        <td class="text-right">${formatRupiah(item.pagu_p)}</td>
                        <td class="text-center">${parseFloat(item.bobot).toFixed(2)}</td>
                        <td class="text-right">${formatRupiah(item.real_keu)}</td>
                        <td class="text-center">${parseFloat(item.real_keu_pr).toFixed(2)}</td>
                    </tr>
                `);

                let col = "col-md-3";

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

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

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

                i += 1;
            })

            $('.widget').html(widget);
        }


        if(res.bidang.length){
            $('.tbody-bidang').empty();

            let c = [];

            res.bidang.forEach(bid => {
                $('.tbody-bidang').append(`
                    <tr>
                        <td>${bid.kodebidang} ${bid.uraibidang}</td>
                        <td class="text-right">${formatRupiah(bid.sum)}</td>
                        <td class="text-right">${bid.persen.toFixed(2)}</td>
                    </tr>
                `);

                c.push({
                    name: bid.kodebidang+' '+bid.uraibidang,
                    y: bid.persen,
                    sum: formatRupiah(bid.sum),
                    persen: bid.persen.toFixed(2)
                })
            })

            chartBidang(c)
        }else{
            $('#chartBidang').html(`<i>Belum ada data.</i>`);
            $('.tbody-bidang').html(`<tr>
                <td colspan="3">Belum ada data.</td>
            </tr>`);
        }

    })
}

function chartBidang(data){
    Highcharts.chart('chartBidang', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.sum}</b>'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.persen}%'
                }
            }
        },
        credits: false,
        series: [{
            name: 'Total',
            colorByPoint: true,
            data: data
        }]
    });
}

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 : '');
}