{% extends 'theme-6.html.twig' %}

{# Title #}
{% block title %}Tower{% endblock %}

{# CSS #}
{% block stylesheets %}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% endblock %}

{% block row %}

<div class="col-md-12">
    <p>Date: <input type="text" id="datepicker"></p>
    <canvas id="myChart"></canvas>

</div>

{% endblock %}


{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    var ret = "{{content}}";
    var dataSet = JSON.parse(ret.replace(/&quot;/g, '"'));
    var label = [];
    var data = [];



    dataSet.forEach(item => {

        var hms = item["diff"]; // your input string
        var a = hms.split(':'); // split it at the colons

        // minutes are worth 60 seconds. Hours are worth 60 minutes.
        var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
        if (seconds < 300) {
            data.push(seconds);
            label.push(item["day"]);
        }
        //result.push(Object.values(item));
    });

    $(function () {
        $("#datepicker").datepicker({
            altFormat: "yy-mm-dd",
            // The format the user actually sees
            dateFormat: "yy-mm-dd",
            onSelect: function (date) {
                window.myBar.data.labels = [];
                window.myBar.data.datasets.forEach((dataset) => {
                    dataset.data = [];
                });
                console.log(date);
                data = [];
                label = [];
                dataSet.forEach(item => {

                    var hms = item["diff"]; // your input string
                    var a = hms.split(':'); // split it at the colons
                    var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
                    if (item["day"] == date) {
                        console.log(seconds, date, item["day"]);
                        data.push(seconds);
                        label.push(item["day"]);
                        window.myBar.data.labels.push(item["day"]);
                        window.myBar.data.datasets.forEach((dataset) => {
                            dataset.data.push(seconds);
                        });
                    }

                    //result.push(Object.values(item));
                });
                console.log(data);


                console.log(window.myBar.data.labels);
                console.log(window.myBar.data.datasets);
                window.myBar.update();
            }
        });

    });


    var color = Chart.helpers.color;
    var barChartData = {
        labels: label,
        datasets: [{
            label: 'temps de lecture',
            backgroundColor: "#2E4A5E",
            borderColor: "#34495E",
            borderWidth: 1,
            data: data
        }]
    };
    $(document).ready(function () {
        $("#spinner").hide();
    });

    window.onload = function () {
        var ctx = document.getElementById('myChart').getContext('2d');
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Temps de lecture'
                }
            }
        });

    };
</script>

{% endblock %}