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

function get_eis(){
    $.getJSON(BASE_URL+"/views/dataset/"+FILTER_TAHUN+"/keuangan/data_skpd_per_rekening.json?t="+(new Date().getTime()), function(res){
        $('.preload-display-data-opd').hide()
        $('#display-data-opd').show()

        $('.preload-rating-belanja').hide()
        $('#load-rating-belanja').show()

        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();

            chartBarPersen('chart_opd_realisasi', c, realisasi_pr)
        }
    })

    $.getJSON(BASE_URL+"/views/dataset/"+FILTER_TAHUN+"/pendapatan/pendapatan.json?t="+(new Date().getTime()), function(res){
        $('.preload-pendapatan-daerah').hide()
        $('#load-pendapatan-daerah').show()

        if(res.length){
            chart_pendapatan_daerah_org('widget-pendapatan-daerah-1', res)
            chart_pendapatan_daerah_donut('widget-pendapatan-daerah-2', res)
        }
    })

    $.getJSON(BASE_URL+"/views/dataset/"+FILTER_TAHUN+"/pendapatan/pendapatan_progres.json?t="+(new Date().getTime()), function(res){
        if(res.length){
            realisasi_pendapatan_chart_column(tableStrukturPendapaatan, res)
        }
    })

    $.getJSON(BASE_URL+"/views/dataset/"+FILTER_TAHUN+"/keuangan/data_anggaran.json?t="+(new Date().getTime()), res => {
        $('.preload-belanja-daerah').hide()
        $('#load-belanja-daerah').show()

        if(res.length){
            let i = 1;
            let chart_belanja = [];

            res.forEach(item => {
                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: "",
                        color: getColorBelanja(item)
                    })
                }

                i += 1;
            })

            widget_belanja_daerah_1('widget-belanja-daerah-1', chart_belanja)
        }
    })
}

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

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

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 chartBarPersen(elem, categories, data){
    Highcharts.chart(elem, {
        chart: {
            backgroundColor: '#FCFFC5',
            type: 'bar'
        },
        title: {
            text: 'Persentase Realisasi Belanja per OPD <br> Provinsi Papua Tengah',
            align: 'center'
        },
        xAxis: {
            categories: categories,
            title: {
                text: 'Nama OPD'
            },
            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 getColorForNode(item) {
    if (item.kode == '4') {
        return '#C0C0C0';
    } else if (item.kode == '4.1') {
        return '#33CCCC';
    }else if (item.kode == '4.2') {
        return '#33CC33';
    }else if (item.kode == '4.3') {
        return '#B38600';
    }else if (item.kode == '4.2.1.01.01') {
        return '#33CC33';
    }else if (item.kode == '4.2.1.01.02') {
        return '#14AD14';
    }else if (item.kode == '4.2.1.01.03') {
        return '#008D00';
    }else if (item.kode == '4.2.1.01.04') {
        return '#006D00';
    }else if (item.kode == '4.2.1.03.01') {
        return '#005700';
    }else if (item.kode == '4.2.1.03.04') {
        return '#004c00';
    } else {
        return '#00FF00'; 
    }
}

function getColorBelanja(item) {
    if (item.urai.kode == '5.1') {
        return '#FF8B00';
    } else if (item.urai.kode == '5.2') {
        return '#FF4619';
    }else if (item.urai.kode == '5.3') {
        return '#04756F';
    }else if (item.urai.kode == '5.4') {
        return '#05518D';
    }else {
        return '#fff'; 
    }
}

function chart_pendapatan_daerah_org(element, data){
    const result = [];

    function processGroup(group, parentKode) {
        group.forEach(item => {
            const kode = typeof item.kode === 'number' ? item.kode.toString() : item.kode;
            result.push([parentKode, kode]);
            if (item.rincianobjek) {
                processGroup(item.rincianobjek, kode);
            }
        });
    }

    data.forEach(item => {
        result.push(['4', item.kode.toString()]);
        if (item.kelompok) {
            processGroup(item.kelompok, item.kode.toString());
        }
    });

    const nodes = [];

    function processNode(item) {
        nodes.push({
            id: item.kode.toString(),
            name: `<small class="font-weight-bold text-white">${item.uraian} <br> ${formatRupiah(item.target, 2)}</small>`,
            color: getColorForNode(item)
        });
        if (item.kelompok) {
            item.kelompok.forEach(subItem => processNode(subItem));
        }
        if (item.rincianobjek) {
            item.rincianobjek.forEach(subItem => {
                nodes.push({
                    id: subItem.kode,
                    name: `<small class="font-weight-bold text-white">${subItem.uraian} <br> ${formatRupiah(subItem.target, 2)}</small>`,
                    color: getColorForNode(subItem)
                });
            });
        }
    }
    
    data.forEach(item => processNode(item));

    table = tableStrukturPendapatan(data)

    $('#tableStrukturPendapaatan').html(table)

    Highcharts.chart(element, {
        chart: {
            backgroundColor: '#D7EEFD',
            inverted: true
        },
    
        title: {
            text: 'Struktur Anggaran Pendapatan Pada APBD Provinsi Papua Tengah'
        },
    
        accessibility: {
            point: {
                descriptionFormat: '{add index 1}. {toNode.name}' +
                    '{#if (ne toNode.name toNode.id)}, {toNode.id}{/if}, ' +
                    'reports to {fromNode.id}'
            }
        },
    
        series: [{
            type: 'organization',
            name: 'Pendapatan Daerah',
            keys: ['from', 'to'],
            levels: [{
                level: 0,
                color: 'silver',
                dataLabels: {
                    color: 'black',
                    style: {
                        fontSize: '5px'
                    }
                },
                height: 25
            }, {
                level: 1,
                color: '#33CCCC',
                dataLabels: {
                    color: 'black',
                    style: {
                        fontSize: '5px'
                    }
                },
                height: 25
            }, {
                level: 2,
                color: '#980104'
            }],
            data: result,
            nodes: nodes,
            colorByPoint: false,
            color: '#fff',
            dataLabels: {
                color: 'white'
            },
            borderColor: 'white',
            nodeWidth: 100
        }],
        tooltip: {
            outside: true
        },
        credits: {
            enabled: false
        }
    });
    

}

function chart_pendapatan_daerah_donut(element, jsonData){

    categories = jsonData[0].kelompok.map(item => item.uraian);
    
    // Inisialisasi data
    const data = [];

    // Iterasi melalui kelompok data
    jsonData[0].kelompok.forEach(item => {
        if (categories.includes(item.uraian)) {
            let categoryList = [];
            let dataList = [];
            let colors = [];

            if (item.rincianobjek) {
                categoryList = item.rincianobjek.map(detail => detail.uraian);
                dataList = item.rincianobjek.map(detail => detail.target);
                colors = item.rincianobjek.map(detail => getColorForNode(detail));
            } else {
                categoryList = [item.uraian];
                dataList = [item.target];
                colors = [getColorForNode(item)];
            }
            data.push({
                y: item.target,
                color: getColorForNode(item),
                drilldown: {
                    name: item.uraian,
                    categories: categoryList,
                    data: dataList,
                    colors: colors
                }
            });
        }
    });

    dataPendapatan = [],
    subData = [],
    dataLen = data.length;

    let i,
        j,
        drillDataLen,
        brightness;


    // Build the data arrays
    for (i = 0; i < dataLen; i += 1) {

        // add browser data
        dataPendapatan.push({
            name: categories[i],
            y: data[i].y,
            color: data[i].color
        });

        // add version data
        drillDataLen = data[i].drilldown.data.length;
        for (j = 0; j < drillDataLen; j += 1) {
            const name = data[i].drilldown.categories[j];
            brightness = 0.2 - (j / drillDataLen) / 5;
            subData.push({
                name,
                y: data[i].drilldown.data[j],
                color: Highcharts.color(data[i].color).brighten(brightness).get()
            });
        }
    }

    // Create the chart
    Highcharts.chart(element, {
        chart: {
            backgroundColor: '#DAF5BE',
            type: 'pie'
        },
        title: {
            text: 'Anggaran Pendapatan Provinsi Papua Tengah',
            align: 'center'
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            valueSuffix: ''
        },
        series: [{
            name: 'Pendapatan',
            data: dataPendapatan,
            size: '45%',
            dataLabels: {
                color: '#ffffff',
                distance: '-50%'
            }
        }, {
            name: 'Target',
            data: subData,
            size: '80%',
            innerSize: '60%',
            dataLabels: {
                format: '<b>{point.name}</b>',
                filter: {
                    property: 'y',
                    operator: '>',
                    value: 1
                },
                style: {
                    fontWeight: 'normal'
                }
            },
            id: 'Target'
        }],
        credits: {
            enabled: false
        }
    });

}


function realisasi_pendapatan_chart_column(element, data){

    // Mengonversi data JSON menjadi format yang diperlukan oleh Highcharts
    var seriesData = data.map(function(item) {
        return [item.bulan, item.realisasi];
    });

    // Menghitung nilai maksimum dari semua data
    var maxRealisasi = Math.max.apply(Math, data.map(function(item) {
        return item.realisasi;
    }));

    // Membuat chart menggunakan Highcharts
    Highcharts.chart('realisasi-pendapatan-daerah-1', {
        chart: {
            // #FCFFC5
            backgroundColor: '#FCFFC5',
            type: 'column'
        },
        title: {
            text: 'Realisasi Pendapatan pada APDB Provinsi Papua Tengah'
        },
        xAxis: {
            categories: data.map(function(item) {
                return item.bulan;
            }),
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rupiah'
            },
            labels: {
                formatter: function () {
                    var value = this.value;
                    var absValue = Math.abs(value);
                    var suffix = '';
                    if (absValue >= 1000000000000) {
                        value = value / 1000000000000;
                        suffix = 'T';
                    } else if (absValue >= 1000000000) {
                        value = value / 1000000000;
                        suffix = 'M';
                    } else if (absValue >= 1000000) {
                        value = value / 1000000;
                        suffix = 'JT';
                    } else if (absValue >= 1000) {
                        value = value / 1000;
                        suffix = 'RB';
                    }
                    return Highcharts.numberFormat(value, 0, ',', '.') + ' ' + suffix;
                }
            },
            max: maxRealisasi // Mengatur nilai maksimum sumbu Y
        },
        tooltip: {
            pointFormatter: function() {
                return '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>Rp ' + Highcharts.numberFormat(this.y, 0, ',', '.') + '</b><br/>';
            },
            shared: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                colorByPoint: true
            }
        },
        colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1', '#bfef45', '#f4c242'],
        series: [{
            name: 'Realisasi',
            data: seriesData
        }],
        credits: {
            enabled: false
        }
    });

}

function tableStrukturPendapatan(data) {
    let table = '<table class="table table-sm text-white">';
    table += '<tr style="background-color:#FCFFC5; color: #000;"><td colspan="4" class="font-weight-bold">Tabel Alokasi Anggaran Pendapatan Pada APBD Provinsi Papua Tengah</td></tr>';
    
    function calculateBobot(target, targetInduk) {
        return (target / targetInduk * 100).toFixed(2);
    }

    function createRows(items, targetInduk) {
        items.forEach(item => {
            if (item.kode !== '4') {
                let color = getColorForNode(item);
                let bobot = item.kode == 4 ? (100).toFixed(2) : calculateBobot(item.target, targetInduk);
                table += `<tr style="background-color:${color}">`;
                table += `<td>${item.kode}</td>`;
                table += `<td>${item.uraian}</td>`;
                table += `<td class="text-right">${formatRupiah(item.target, 2)}</td>`;
                table += `<td class="text-center">${bobot} %</td>`;
                table += '</tr>';
                if (item.kelompok) {
                    createRows(item.kelompok, item.target);
                }
                if (item.rincianobjek) {
                    createRows(item.rincianobjek, item.target);
                }
            }
        });
    }

    createRows(data, 4);
    
    table += '</table>';
    return table;
}

function widget_belanja_daerah_1(elem, data){
    Highcharts.chart(elem, {
        chart: {
            backgroundColor: '#DAF5BE',
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>Rp. {point.pagu}</b>'
        },
        accessibility: {
            point: {
                valueSuffix: ''
            }
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45
            }
        },
        credits: false,
        series: [{
            name: 'Pagu',
            colorByPoint: true,
            data: data
        }],
        showInLegend: true
    });
}