{% if title is not empty %}
    <div class="row">
        <div class="col-12">
            <h1 class="text-center mb-5">{{ title }}</h1>
        </div>
    </div>
{% endif %}

<div class="d-flex justify-content-end">
    <form>
        <select class="float-right custom-select" name="limit-records" id="limit-records" onchange="changeData()" {% if sleepweeks is empty %} disabled {% endif %}>
            {% for sleepweek in sleepweeks %}
            <option value="{{ loop.index0 }}">{{ sleepweek.title }}</option>
            {% endfor %}
            <option value="alleWochen">Alle Wochen</option>
        </select>
    </form>
</div>

{% if sleepweeks is not empty %}
<canvas id="appSleepChartCanvas"></canvas>

<script> 
jQuery(document).ready(function (){
    if (jQuery('.btn-primary').css("background-color") != undefined){
        var primaryColor=jQuery('.btn-primary').css("background-color");
        var chartBackgroundColor=primaryColor.replace(')', ', 0.5)').replace('rgb', 'rgba');
    }else{
        var primaryColor = 'rgb(185, 185, 185)';
        var chartBackgroundColor=primaryColor.replace(')', ', 0.5)').replace('rgb', 'rgba');
    }
        var currentSelection = document.getElementById('limit-records').value;
        const labels = [{% for day in sleepweeks[currentSelection|number_format].days|reverse %}"{{day['toBed']|date("d.m.y")}} - {{day['getUp']|date("d.m.y")}}"{% if not loop.last %},{% endif %}{% endfor %}];
        const datas = [{% for day in sleepweeks[currentSelection|number_format].days|reverse %}"{{day['efficiency']}}"{% if not loop.last %},{% endif %}{% endfor %}];
    const data = {
    labels: labels,
    datasets: [{

        label: '',
        data: datas,
        backgroundColor: [chartBackgroundColor
        ],
        borderColor: [primaryColor
        ],
        borderWidth: 1
    }]
    };
    {% if mode == 'line' %}
    var barChart = new Chart(document.getElementById('appSleepChartCanvas'), {
        type: 'line',
        data: data,
        options: {
            scales: {
                y: {
                    min: 0,
                    max: 100
                }
            },
            plugins: {
                legend: {
                    display: false,
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return ' ' + context.formattedValue + ' %';
                        }
                    }
                }
            },
        },
    })
    {% endif %}

    {% if mode == 'bar' %}
    var barChart = new Chart(document.getElementById('appSleepChartCanvas'), {
        type: 'bar',
        data: data,
        options: {
            scales: {
                y: {
                    min: 0,
                    max: 100
                }
            },
            plugins: {
                legend: {
                    display: false,
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return ' ' + context.formattedValue + ' %';
                        }
                    }
                }
            },
        },
    })
    {% endif %}
   
    changeData = function() {
        var index = jQuery( "#limit-records option:selected" ).val();
        
        if(index != 'alleWochen'){
            {% for i in range(0, sleepweeks|length) %}
                if (index == {{ i }}) {
                    barChart.data.labels = [{% for day in sleepweeks[i].days|reverse %}"{{day['toBed']|date("d.m.y")}} - {{day['getUp']|date("d.m.y")}}"{% if not loop.last %},{% endif %}{% endfor %}],
                    barChart.data.datasets[0].data = [{% for day in sleepweeks[i].days|reverse %}"{{day['efficiency']}}"{% if not loop.last %},{% endif %}{% endfor %}],
                    barChart.update();
                }
            {% endfor %}
        } else {
            barChart.data.labels = [{% for sleepweek in sleepweeksSorted %}"{{sleepweek['title']}} ({{(sleepweek.days[sleepweek.days|length-1].toBed)|date("d.m.y")}}-{{(sleepweek.days[0].toBed)|date("d.m.y")}})"{% if not loop.last %},{% endif %}{% endfor %}],
            barChart.data.datasets[0].data = [{% for sleepweek in sleepweeksSorted %}"{{sleepweek['efficiency']}}"{% if not loop.last %},{% endif %}{% endfor %}]
            barChart.update();
        }
    }
});
</script>
{% else %}
    {% include 'coach-output-app-data/coach-output-app-data-nodata.html' %}
{% endif %}