function showPieChart() {
    const cb2ScRelOid = parseInt($("#sb-cb2ScRelOid").val(), 10);

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

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

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

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

    $.get(url, { oid: cb2ScRRelOid }).done(function(jsonObject) {
        try {
            if(false === checkJson(jsonObject)) {
                logWarning("getSupportConceptStatistics: Der zurückgegebene Wert ist kein gültiges JSON!");
                hideSpinner();
                return;
            }

            var scStatistics = parseJason(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) {
    const data = [
        {
            value: v1,
            color: "#00FF00",
            highlight: "#99FF00",
            label: free
        },
        {
            value: v2,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: used
        }
    ];

    const 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>"
    };

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

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