@model PantheonRA.WebApi.Contracts.ZDashPanel
@{
    var chartId = "zChart-" + Model.Qid;
    var filterId = "zFilter-" + Model.Qid;
    var valuesId = "zValues-" + Model.Qid;
    var labelsId = "zLabels-" + Model.Qid;
    var colorsId = "zColors-" + Model.Qid;
    var typeId = "zType-" + Model.Qid;
}
@foreach (var l in Model.DataGraph.Labels)
{
    @Html.Hidden(labelsId + "-" + l.Key, Json.Encode(l.Value), new { id = labelsId + "-" + l.Key})
}
@foreach (var f in Model.DataGraph.Values)
{
    @Html.Hidden(valuesId + "-" + f.Key, Json.Encode(f.Value), new { id = valuesId + "-" + f.Key })
}
@Html.Hidden(colorsId, Json.Encode(Model.DataGraph.Colors), new { id = colorsId })
@Html.Hidden(typeId, Model.TypeWeb)

<div class="dash-panel-header">
    <p class="dash-panel-title">@Model.Title</p>
    <p class="dash-panel-description">@Model.Description</p>

    @if (Model.HasFilter)
    {
        <div class="row">
            <div class="col-xs-6">

            </div>
            <div class="col-xs-6">
                <div class="form-group selectpicker-dropdown m-b-none">
                    <select id="@filterId"
                            class="form-control custom-select"
                            title="@Loc.SearchFilter">
                        @foreach (var f in Model.FilterValuesList)
                        {
                            if (f == Model.FilterValue)
                            {
                                <option value="@f" selected>@f</option>
                            }
                            else
                            {
                                <option value="@f">@f</option>
                            }
                        }
                    </select>
                </div>
            </div>
        </div>
    }
</div>

<canvas id="@chartId"></canvas>

<script>
    $(document).ready(function () {
        let data = {
            labels: [ ],
            datasets: [ ],
        };

        let config = {
            type: '@Model.TypeChart',
            data: data,
            options: {
                indexAxis: '@Model.Axis',
                plugins: {
                    legend: {
                        display: true,// '@Model.TypeChart' == 'bar' ? false : true,
                        position: 'top',
                    },
                    title: {
                        display: false,
                    },
                },
                responsive: true,
                scales: {
                        x: {
                            stacked: false,
                            ticks: {
                                display: "@Model.TypeChart" == "pie" ? false : true
                            },
                            grid: {
                                drawBorder: "@Model.TypeChart" == "pie" ? false : true,
                                drawTicks: "@Model.TypeChart" == "pie" ? false : true,
                                display: "@Model.TypeChart" == "pie" ? false : true
                            }
                        },
                        y: {
                            stacked: false,
                            ticks: {
                                display: "@Model.TypeChart" == "pie" ? false : true
                            },
                            grid: {
                                drawBorder: "@Model.TypeChart" == "pie" ? false : true,
                                drawTicks: "@Model.TypeChart" == "pie" ? false : true,
                                display: "@Model.TypeChart" == "pie" ? false : true
                            }
                        }
                    }
                }
            };

        let zChart = new Chart(
            document.getElementById('@chartId'),
            config
        );

        let firstKey = '@Model.HasFilter'.toLowerCase() == 'true'
            ? '@Model.DataGraph.Values.FirstOrDefault(q => q.Key == Model.FilterValue).Key'
            : '@Model.DataGraph.Values.FirstOrDefault().Key';

        updateGraph(firstKey);

        $('#' + '@filterId').on('change', function () {
            updateGraph(this.value);
        });

        function updateGraph(filterKey) {
            let objLabels = $("#@labelsId-" + filterKey).val();

            if (!objLabels || objLabels.length == 0) {
                return;
            }

            let labels = JSON.parse(objLabels);
            let values = JSON.parse($("#@valuesId-" + filterKey).val());
            let colors = JSON.parse($("#@colorsId").val());
            let type = $("#@typeId").val();
            let datasets = new Array;

            zChart.data.labels = [];
            zChart.data.datasets = [];
            zChart.update();

            for (let i = 0; i < values.length; i++) {
                let data = values[i];
                let orderNum = values.length > 1 ? (i + 1).toString() : '';
                let colorIndex = i % colors.length;

                let dataset = {
                    label: '@Model.Title ' + orderNum,
                    backgroundColor: type == 'PIE' ? colors : colors[colorIndex],
                    data: data,
                };

                datasets.push(dataset);
            }

            zChart.data.labels = labels;
            zChart.data.datasets = datasets;

            zChart.update();
        }
    });
</script>