function showPieChart() {
    var cb2ScRelOid = parseInt($("#CostBearer2SupportConceptOid").val(), 10);

    if (cb2ScRelOid === null || cb2ScRelOid === undefined) {
        showMessagePopup("Hilfeplanstatistik", "Es wurde kein Hilfeplan ausgewählt");
        return;
    }

    var customerInfo = $("#selectedSupportConceptCustomerInfo").html();
    var selectedSupportConceptInfo = $("#selectedSupportConceptInfo").html();

    $("#statistics-header").html("Hilfeplanstatistik: " + customerInfo + " | " + selectedSupportConceptInfo);
    getSupportConceptStatistics(cb2ScRelOid);
}

function getSupportConceptStatistics(cb2ScRRelOid) {
    var url = getLoadStatisticsUrl();

    $.get(url, { oid: cb2ScRRelOid }).done(function(jsonObject) {
        try {
            var scStatistics = $.parseJSON(jsonObject);

            $("#period-statistics-container").empty();

            $.each(scStatistics.statisticPeriods, function(index, period) {
                $.each(period.header2values, function(index, header2Values) {
                    $("#period-statistics-container").append(
                        '<div class="row">' +
                            '<div class="col text-secondary">' + header2Values.header + "</div>" +
                            '<div class="col-auto">' + header2Values.value + "</div>" +
                        "</div>");
                });

                if(index < (scStatistics.statisticPeriods.length - 1)) {
                    $("#period-statistics-container").append("<hr/>");
                }
            });

            if (scStatistics.showDiagram === true) {
                drawPieChart((100 - scStatistics.percentage).toFixed(2),
                    scStatistics.percentage.toFixed(2),
                    "Frei (in %)",
                    "Verbraucht (in %)");
                $("#statistic-canvas").show();
            } else {
                $("#statistic-canvas").hide();
            }
        } catch (error) {
            showErrorPopup(error);
        }
    });
}

function drawPieChart(v1, v2, free, used) {
    var data = [
        {
            value: v1,
            color: "#00FF00",
            highlight: "#99FF00",
            label: free
        },
        {
            value: v2,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: used
        }
    ];

    var options = {
        scaleShowLabelBackdrop: true,
        scaleBackdropColor: "rgba(255,255,255,0.75)",
        scaleBeginAtZero: true,
        scaleBackdropPaddingY: 2,
        scaleBackdropPaddingX: 2,
        scaleShowLine: true,
        segmentShowStroke: true,
        segmentStrokeColor: "#fff",
        segmentStrokeWidth: 1,
        animationSteps: 1,
        animationEasing: "easeOutBounce",
        responsive: true,
        animateRotate: false,
        animateScale: false,
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\">" +
            "<% for (var i=0; i<segments.length; i++){%>" +
            "<li>" +
            "<span style=\"background-color:<%=segments[i].fillColor%>\"></span>" +
            "<%if(segments[i].label){%><%=segments[i].label%><%}%>" +
            "</li><%}%>" +
            "</ul>"
    };

    var context = $("#statistic-canvas").get(0).getContext("2d");

    new Chart(context).Pie(data, options);
}