@extends('blocks.modal', ['modalName' => "survey-stats-modal"])

@section('modal-header')
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col" style="text-align: center;">
            <h4 id="add-event-header" class="mdl-color-text--indigo">Statystyki</h4>
        </div>
    </div>
@overwrite

@section('modal-content')
    <div class="chartWrapper" style="position: relative;">
        <div class="chartAreaWrapper" style="overflow-x: scroll; position: relative; width: 100%;">
            <span id="author" style="font-weight: bold"></span>

            <div class="chartAreaWrapper3" style="position: relative; height: 400px;">
                <canvas id="survey-stats-chart" width="400" height="400"></canvas>
            </div>
        </div>
        <canvas id="myChartAxis" height="300" width="0" style="position: absolute; left: 0; top: 0; pointer-events: none;"></canvas>
    </div>

    <div class="mdl-cell mdl-cell--12-col" style="text-align: center" id="survey-stats-loading">
        <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
    </div>
@overwrite

@section('modal-footer')
@overwrite

@section('modal-scripts')
    <style>
        #survey-stats-modal .modal-dialog { max-width: 70%; width: fit-content; }
        .chartAreaWrapper3 { margin: 0 auto; }
    </style>
    <script>
        const surveyctx = document.getElementById('survey-stats-chart').getContext('2d');
        const surveyChart = new Chart(surveyctx, {
            type: 'bar',
            data: {},
            options: {
                responsive: true,
                scaleShowValues: true,
                maintainAspectRatio: false,
                stepSize: 0.5,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        const surveyChartRef = $('.chartWrapper');
        const surveyFallbackRef = $('#survey-stats-loading');
        var graphsDataParams = {};

        function removeSurveyGraphData() {
            surveyChart.data.labels = [];
            surveyChart.data.datasets = [];
        }

        function populateSurveyGraphData(data) {
            removeSurveyGraphData();

            data.labels.forEach((label) => {
                surveyChart.data.labels.push(label);
            });
            data.datasets.forEach((dataset) => {
                surveyChart.data.datasets.push(dataset);
            });
            
            $('.chartAreaWrapper3').css('width', 300 + 30 * data.labels.length);

            surveyChart.update();
            surveyChartRef.show();
            surveyFallbackRef.hide();
        }

        function collectSurveyStatsData(data) {
            graphsDataParams = '&' + $.param({survey_id: data.id});
            graphsDataParams += '&' + $.param({questions: $.map(data.questions, function(val) {
                    return val.id;
                }).join(',')
            });
            graphsDataParams += '&' + $.param({day: $('#daterange-date').val()});
        }

        function fetchSurveyData() {
            $.ajax("/api/survey/stats?" + graphsDataParams).done(function (data) {
                if(data.data.author.length){
                    $('#author').text("Autor quizu: " + data.data.author)
                }
                else{
                    $('#author').text(data.data.author)
                }
                populateSurveyGraphData(data.data);
            }).fail(function (data) {
                showAddEventError(data.responseJSON.result.display);
            });
        }

        function showSurveyStats(data) {
            surveyChartRef.hide();
            surveyFallbackRef.show();

            collectSurveyStatsData(data);
            fetchSurveyData();
            $('#survey-stats-modal').modal();
        }
    </script>
@overwrite