@extends('blocks.modal', ['modalName' => "stats-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: 400px;">
                <canvas id="stats-graph-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 id="canvas-fallback" style="width: 100%; height: 400px; display: grid; text-align: center;">
        <span id="loading-data-text" style="align-self: center;">Wczytywanie danych</span>
    </div>
@overwrite

@section('modal-footer')
    <div id="add-event-submit-add-section" class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col mdl-typography--text-left">
            <button id="stats-graph-eight-weeks-view"
                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                Wykres 8-tygodniowy
            </button>
            <button id="stats-graph-year-view"
                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                Wykres roczny
            </button>
            <button id="stats-graph-full-view"
                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                Wykres całościowy
            </button>
        </div>
    </div>
@overwrite

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

        var chartRef = $('.chartWrapper');
        var fallbackRef = $('#canvas-fallback');
        var graphsDataParams = {};
        var startDate = new Date();

        function removeStatsGraphData() {
            statsChart.data.labels = [];
            statsChart.data.datasets = [];
        }

        function populateStatsGraphData(data) {
            removeStatsGraphData();

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

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

            statsChart.update();
            chartRef.show();
            fallbackRef.hide();
        }

        function getStatsGraphCheckboxesIds() {
            var chkArray = [];
            $('.graph-checkboxes input[type="checkbox"]').each(function() {
                if ($(this)[0].checked) chkArray.push($(this)[0].id);
            });
            return chkArray;
        }

        function fetchStatsGraphData() {
            $.ajax("/api/stats/graphdata?" + $.param(graphsDataParams)).done(function (data) {
                populateStatsGraphData(data.result.data);
            }).fail(function (data) {
                showAddEventError(data.responseJSON.result.display);
            });
        }

        $("#stats-graph-eight-weeks-view").click(function () {
            chartRef.hide();
            fallbackRef.show();
            graphsDataParams['period'] = 'acht';
            fetchStatsGraphData();
        });

        $("#stats-graph-year-view").click(function () {
            chartRef.hide();
            fallbackRef.show();
            graphsDataParams['period'] ='year';
            fetchStatsGraphData();
        });

        $("#stats-graph-full-view").click(function () {
            chartRef.hide();
            fallbackRef.show();
            graphsDataParams['period'] = 'full';
            fetchStatsGraphData();
        });
    </script>
@overwrite