@extends('blocks.modal', ['modalName' => "stats-quiz-graph-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%;">
            <div class="chartAreaWrapper2" style="position: relative; height: 300px;">
                <canvas id="stats-quiz-graph-chart" width="400" height="300"></canvas>
            </div>
        </div>
        <canvas id="myQuizChartAxis" height="300" width="0" style="position: absolute; left: 0; top: 0; pointer-events: none;"></canvas>
    </div>

    <div id="canvas-quiz-fallback" style="width: 100%; height: 300px; display: grid; text-align: center;">
        <span id="loading-data-text" style="align-self: center;">Wczytywanie danych</span>
    </div>


    <div id="add-event-submit-add-section" class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col">
            <button id="stats-quiz-graph-year-view"
                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                Wykres miesięczny
            </button>
            <button id="stats-quiz-graph-full-view" style="margin-left: 1em;"
                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                Wykres roczny
            </button>
            <label style="margin-left: 2em;">
                Za okres:
                <input class="form-control" id="graphDate" type="date">
            </label>
        </div>
        <div class="mdl-cell mdl-cell--12-col" style="margin-top: 1em;">
            <h4>Komentarze do quizów</h4>
            <div class="allComments" id="quizComments">

            </div>
        </div>

    </div>

@overwrite

@section('modal-footer')

@overwrite

@section('modal-scripts')
    <style>
        #stats-quiz-graph-modal .modal-dialog { width: 70%; }
        .chartAreaWrapper2 { margin: 0 auto; }
        .allComments{
            max-height: 350px;
            overflow: auto;
        }
    </style>
    <script>
        var statsQuizCTX = document.getElementById('stats-quiz-graph-chart').getContext('2d');
        var statsQuizChart = new Chart(statsQuizCTX, {
            type: 'line',
            data: {},
            options: {
                responsive: true,
                scaleShowValues: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        ticks: {
                            autoSkip: false,
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        var quizChartRef = $('.chartWrapper');
        var fallbackQuizRef = $('#canvas-quiz-fallback');
        var graphsQuizDataParams = {};
        var startDate = new Date();


        function dateInputValue(){
            const now = new Date();

            let month = now.getMonth()+1;
            if(now.getMonth()+1 < 10)
                month = "0"+ (now.getMonth()+1);

            let day = now.getDate();
            if(now.getDate() < 10)
                day = "0"+ now.getDate();

            return now.getFullYear() + "-" + month + '-' + day;
        }

        function removeStatsQuizGraphData() {
            statsQuizChart.data.labels = [];
            statsQuizChart.data.datasets = [];
        }

        function populateStatsQuizGraphData(data) {
            removeStatsQuizGraphData();

            data.labels.forEach((label) => {
                statsQuizChart.data.labels.push(label);
            });
            data.datasets.forEach((dataset) => {
                statsQuizChart.data.datasets.push(dataset);
            });

          //  $('.chartAreaWrapper2').css('width', 150 + 30 * data.labels.length);

            statsQuizChart.update();
            quizChartRef.show();
            fallbackQuizRef.hide();
        }

        function insertQuizComment(comments){
            const commentContainer = $("#quizComments");
            commentContainer.html("");

            $.each(comments, (i, comment) => {
                const html = $.parseHTML(commentQuizTemplate(comment));
                commentContainer.append(html);
            });
        }

        function fetchStatsQuizGraphData() {
            if(graphsQuizDataParams['person_name'] === "Pozostałe"){
               $("#stats-quiz-graph-full-view, #stats-quiz-graph-year-view").hide();
            }else
                $("#stats-quiz-graph-full-view, #stats-quiz-graph-year-view").show();


            const date = $("#graphDate");
            if(date.val().length === 0)
                date.val(dateInputValue());

            const month = date.val();

            const params = 'date='+ month + '&' + filtersQuizParams + '&' + $.param(graphsQuizDataParams);
            $.ajax("/api/stats/quiz/graphdata?" + params).done(function (data) {
                populateStatsQuizGraphData(data.result.data);
                insertQuizComment(data.result.data.comments)
            }).fail(function (data) {
                showAddEventError(data.responseJSON.result.display);
            });
        }

        $("#stats-quiz-graph-year-view").click(function () {
            $(this).addClass('mdl-button--accent');
            $("#stats-quiz-graph-full-view").removeClass('mdl-button--accent');
            quizChartRef.hide();
            fallbackQuizRef.show();
            graphsQuizDataParams['period'] ='month';
            fetchStatsQuizGraphData();
        });

        $("#stats-quiz-graph-full-view").click(function () {
            $(this).addClass('mdl-button--accent');
            $("#stats-quiz-graph-year-view").removeClass('mdl-button--accent');

            quizChartRef.hide();
            fallbackQuizRef.show();
            graphsQuizDataParams['period'] = 'year';
            fetchStatsQuizGraphData();
        });

        $(document).on('change', "#graphDate", ()=>{
            quizChartRef.hide();
            fallbackQuizRef.show();
            fetchStatsQuizGraphData();
        });

        const commentQuizTemplate = (comment) =>{
            return `<div style="margin: 1.5em; background-color: #f2f2f2; border-radius: 5px;">
                        <div style="display: flex; align-items: center; font-size: 0.9em; padding: 10px 20px;">
                            <span class="mdc-tab__icon material-icons" aria-hidden="true">account_circle</span>
                            ${comment["user"]}
                            <span style="margin-left: 3em;">${formatDate2(comment["datetime"])}</span>
                        </div>
                        <div style="height:1px; width: 90%; margin: 0 auto; background-color: #c0c0c0;"></div>
                        <p style="padding: 1em; font-size: 1.1em;">${comment["comment"]}</p>
                </div>`;
        };
    </script>
@overwrite