{% if title is not empty %}
<div class="col-12">
    <h1 class="text-center mb-5">{{ title }}</h1>
</div>
{% endif %}
{% if nodata == 1 %}
<div class="col-12" id="outputContainer">
    {% for weekindex in 0..(sleepEffData|length /7 - 1) %}
    <div class="card w-100 mb-3">
        <div class="card-header">
            <button class="w-100 btn btn-link p-0 {% if loop.first %}show{% else %}collapsed{% endif %}"
                data-toggle="collapse" data-target="#collapse-week-{{ weekindex }}"
                aria-expanded="{% if loop.first %}true{% else %}false{% endif %}"
                aria-controls="collapse-week-{{ weekindex }}">
                <div style="text-align: initial;">
                    <div>
                <h4 class="m-0 align-items-center">
                    <i class="fas fa-chevron-right ts-accordion-chevron mr-2"></i>
                    Woche {{weekindex + 1}} ({{ sleepEffData[(weekindex*7)].dateApData |date("d.m.Y")}} - {{
                    sleepEffData[(weekindex*7+6)].dateApData |date("d.m.Y")}})
                </h4>
            </div>
{% if  avgSleepEff[weekindex] is not null %}

            <div class="mx-3">
               <div class="badge" style="border: 1px solid lightgray; font-weight: 500;">
                Schlafeffizienz (Mittelwert): {{avgSleepEff[weekindex]}}%</div>
               <div class="badge" style="border: 1px solid lightgray; font-weight: 500;">Schlafdauer (Mittelwert): {{avgDur[weekindex]}} Stunden</div>
            </div>
            {% endif %}
            </div>
            </button>
        </div>
        <div class="card-body collapse {% if loop.first %}show{% endif %}" id="collapse-week-{{ weekindex }}"
            data-parent="#outputContainer">
            {% for dayindex in (weekindex*7)..(weekindex*7+6) %}
            <div id="accordion-wrapper-week-{{ dayindex }}">
                <ul class=" list-group list-group-flush ml-3">
                    {% for i in 0..(sleepEffData|length /7 - 1) %}
                    {% if dayindex // 7 == i %}
                    <div class="sleep-efficiency-card ts-accordion">
                        <div class="card-header" id="card-heading">
                            <button class="btn btn-link collapsed d-flex align-items-center" data-toggle="collapse"
                                data-target="#collapse-{{ dayindex }}" aria-expanded="false"
                                aria-controls="collapse-{{ dayindex }}">
                                <i class="fas fa-plus ts-accordion-plus"></i>
                                {{sleepEffData[dayindex].dateApData |date("d.m.Y")
                                }}&nbsp;-&nbsp;{{sleepEffData[dayindex].dateMpData |date("d.m.Y") }}
                            </button>
                        </div>
                        <div id="collapse-{{ dayindex }}" class="collapse" aria-labelledby="card-heading"
                            data-parent="#accordion-wrapper-week-{{ dayindex }}">
                            <small style="color: grey;">Ihre Angaben: </small>
                            <li class="list-group-item">
                                <b>Ins Bett gegangen:</b>
                                {% if sleepEffData[dayindex].tobedData is not null %}
                                {{sleepEffData[dayindex].tobedData |date("d.m.Y, H:i")}} Uhr
                                {%else%} Nicht bearbeitet
                                {% endif %}
                            </li>
                            <li class="list-group-item">
                                <b>Aufgestanden:</b>
                                {% if sleepEffData[dayindex].getupData is not null %}
                                {{sleepEffData[dayindex].dateMpData |date("d.m.Y")}},
                                {{sleepEffData[dayindex].getupData}} Uhr
                                {%else%} Nicht bearbeitet
                                {% endif %}
                            </li>
                            <li class="list-group-item">
                                <b>Insgesamt geschlafen:</b>
                                {% if sleepEffData[dayindex].durData is not null %}
                                {{sleepEffData[dayindex].durData}} Stunden
                                {%else%} Nicht bearbeitet
                                {% endif %}
                            </li>
                            <li class="list-group-item">
                                <b>Abend-Protokoll:</b>
                                {% if sleepEffData[dayindex].status == "11" or sleepEffData[dayindex].status == "01"
                                %}
                                <i class="fas fa-check text-success"></i>&nbsp;Abgeschlossen
                                {%else%} <i class="fas fa-times text-danger"></i>&nbsp;Nicht abgeschlossen
                                {% endif %}
                            </li>
                            <li class="list-group-item">
                                <b>Morgen-Protokoll:</b>
                                {% if sleepEffData[dayindex].status == "11" or sleepEffData[dayindex].status == "10"
                                %}
                                <i class="fas fa-check text-success"></i>&nbsp;Abgeschlossen
                                {%else%} <i class="fas fa-times text-danger"></i>&nbsp;Nicht abgeschlossen
                                {% endif %}
                            </li>
                            <li class="list-group-item">
                                <b>Schlafeffizienz:</b>
                                {% if sleepEffData[dayindex].sleepEff is not null %}
                                {{sleepEffData[dayindex].sleepEff}}%
                                {%else%} Bitte bearbeiten Sie alle Protokolle!
                                {% endif %}
                            </li>
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

<style>
.btn-link:visited,
.btn-link:active,
.btn-link:focus,
.btn-link:hover {
    color: black !important;
}
</style>





{% if title is not empty %}

{% endif %} {% if nodata == 1 %}
<div class="d-flex justify-content-end">
  <form>
    <select
      class="float-right custom-select"
      name="limit-records"
      id="limit-records"
      onchange="changeData()"
      {%
      if
      sleepEffData
      is
      empty
      %}
      disabled
      {%
      endif
      %}
    >
      {% for weekindex in 0..(sleepEffData|length /7 - 1) %}
      <option value="{{ loop.index0 }}">
        Woche {{weekindex + 1}} ({{ sleepEffData[(weekindex*7)].dateApData
        |date("d.m.Y")}} - {{ sleepEffData[(weekindex*7+6)].dateMpData
        |date("d.m.Y")}})
      </option>
      {% endfor %}
      <option value="alleWochen">Alle Wochen</option>
    </select>
  </form>
</div>

<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;

    var labelsClean = [];
    var datasClean = [];
    var durDatasClean = [];
    var tobedDatasClean = [];
    var getupDatasClean = [];
    var asleepDatasClean = [];
    var awakenightDatasClean = [];
    var awakeDatasClean = [];
    var napDatasClean = [];
    var currentData = {};
    var labels = [];
    var datas = [];
    var durDatas = [];
    var tobedDatas = [];
    var asleepDatas = [];
    var awakenightDatas = [];
    var awakeDatas = [];
    var getupDatas = [];
    var napDatas = [];
  
    updateValues(0);

      var barChart = new Chart(document.getElementById('appSleepChartCanvas'), {
          type: 'line',
          data: currentData,
          options: {
          scales: {
            y: {
                min: 0,
                max: 100,
                ticks: {
                    callback: function(value, index, ticks) {
                    return value + '%';
                    },
                }
            },
          },
              plugins: {
                  legend: {
                      display: false,
                  },
                  tooltip: {
                      callbacks: {
                          label: function(context) {
                              return ' ' + context.formattedValue + '%';
                          },
                        afterBody: function(context) {
                            var renderAll = [];
                            renderAll.push(`Schlafdauer: ${durDatasClean[context[0].dataIndex]} Stunden`);
                            renderAll.push(`Ins Bett gegangen: ${tobedDatasClean[context[0].dataIndex]} Uhr`);
                            renderAll.push(`Einschlafdauer: ${asleepDatasClean[context[0].dataIndex]} Stunden`);
                            renderAll.push(`Nachts wach: ${awakenightDatasClean[context[0].dataIndex]} Stunden`);
                            renderAll.push(`Aufgewacht: ${awakeDatasClean[context[0].dataIndex]} Uhr`);
                            renderAll.push(`Aufgestanden: ${getupDatasClean[context[0].dataIndex]} Uhr`);
                            renderAll.push(`Tagschlaf am Tag zuvor: ${napDatasClean[context[0].dataIndex]} Stunden`);
                            return renderAll;
                        },
                      }
                  }
              },
          },
      })

      changeData = function() {
          var indexSelected = jQuery( "#limit-records option:selected" ).val();
          if(indexSelected != 'alleWochen'){
              {% for i in range(0, sleepEffData|length) %}
                  if (indexSelected == {{ i }}) {
                    //call updateValues(indexSelected) caused problems
                    var labelsChanged = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].dateApData |date("d.m.Y")}} - {{ sleepEffData[index].dateMpData |date("d.m.Y")}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    var datasChanged = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}{{sleepEffData[index].sleepEff}},{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];

                    labels = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].dateApData |date("d.m.Y")}} - {{ sleepEffData[index].dateMpData |date("d.m.Y")}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                
                    datas = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}{{sleepEffData[index].sleepEff}},{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    durDatas = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].durData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    tobedDatas = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].tobedData |date("H:i")}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    asleepDatas = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].asleepData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    awakenightDatas = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].awakenightData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    awakeDatas = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].awakeData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    getupDatas = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].getupData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    napDatas = [{% for index in (i*7)..(i*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].napData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    labelsClean = labels.filter(n => n);
                    datasClean = datas.filter(n => n);
                    durDatasClean = durDatas.filter(n => n);
                    tobedDatasClean = tobedDatas.filter(n => n);
                    getupDatasClean = getupDatas.filter(n => n);
                    asleepDatasClean = asleepDatas.filter(n => n);
                    awakenightDatasClean = awakenightDatas.filter(n => n);
                    awakeDatasClean = awakeDatas.filter(n => n);
                    napDatasClean = napDatas.filter(n => n);
                    var labelsChangedClean = labelsChanged.filter(n => n);
                    var datasChangedClean = datasChanged.filter(n => n);
                    barChart.data.labels = labelsChangedClean,
                    barChart.data.datasets[0].data = datasChangedClean,
                    barChart.update();
                      
                  }
              {% endfor %}
          }
          else {
            var labelsChanged = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].dateApData |date("d.m.Y")}} - {{ sleepEffData[index].dateMpData |date("d.m.Y")}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
            var datasChanged = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}{{sleepEffData[index].sleepEff}},{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];

            





            labels = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].dateApData |date("d.m.Y")}} - {{ sleepEffData[index].dateMpData |date("d.m.Y")}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                
                    datas = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}{{sleepEffData[index].sleepEff}},{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    durDatas = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].durData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    tobedDatas = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].tobedData |date("H:i")}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    asleepDatas = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].asleepData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    awakenightDatas = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].awakenightData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    awakeDatas = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].awakeData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    getupDatas = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].getupData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    napDatas = [{% for index in range(0, sleepEffData|length) %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].napData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
                    
                    labelsClean = labels.filter(n => n);
                    datasClean = datas.filter(n => n);
                    durDatasClean = durDatas.filter(n => n);
                    tobedDatasClean = tobedDatas.filter(n => n);
                    getupDatasClean = getupDatas.filter(n => n);
                    asleepDatasClean = asleepDatas.filter(n => n);
                    awakenightDatasClean = awakenightDatas.filter(n => n);
                    awakeDatasClean = awakeDatas.filter(n => n);
                    napDatasClean = napDatas.filter(n => n);
                    var labelsChangedClean = labelsChanged.filter(n => n);
                    var datasChangedClean = datasChanged.filter(n => n);
                    barChart.data.labels = labelsChangedClean,
                    barChart.data.datasets[0].data = datasChangedClean,
                    barChart.update();
          }
      }

       function updateValues(optionsIndex) {
        labels = [{% for index in (optionsIndex*7)..(optionsIndex*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].dateApData |date("d.m.Y")}} - {{ sleepEffData[index].dateMpData |date("d.m.Y")}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
    
        datas = [{% for index in (optionsIndex*7)..(optionsIndex*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}{{sleepEffData[index].sleepEff}},{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
        
        durDatas = [{% for index in (optionsIndex*7)..(optionsIndex*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].durData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
        
        tobedDatas = [{% for index in (optionsIndex*7)..(optionsIndex*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].tobedData |date("H:i")}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
        
        asleepDatas = [{% for index in (optionsIndex*7)..(optionsIndex*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].asleepData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
        
        awakenightDatas = [{% for index in (optionsIndex*7)..(optionsIndex*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].awakenightData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
        
        awakeDatas = [{% for index in (optionsIndex*7)..(optionsIndex*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].awakeData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
        
        getupDatas = [{% for index in (optionsIndex*7)..(optionsIndex*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].getupData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
        
        napDatas = [{% for index in (optionsIndex*7)..(optionsIndex*7)+6 %}{% if sleepEffData[index].status == "11" or sleepEffData[index].status == "10" %}"{{ sleepEffData[index].napData}}",{% endif %}{% if not loop.last %},{% endif %}{% endfor %}];
        
        labelsClean = labels.filter(n => n);
        datasClean = datas.filter(n => n);
        durDatasClean = durDatas.filter(n => n);
        tobedDatasClean = tobedDatas.filter(n => n);
        getupDatasClean = getupDatas.filter(n => n);
        asleepDatasClean = asleepDatas.filter(n => n);
        awakenightDatasClean = awakenightDatas.filter(n => n);
        awakeDatasClean = awakeDatas.filter(n => n);
        napDatasClean = napDatas.filter(n => n);

         currentData = {
          labels: labelsClean,
          datasets: [{
            label: '',
            data: datasClean,
            backgroundColor: [chartBackgroundColor
            ],
            borderColor: [primaryColor
            ],
            borderWidth: 1
          }]
        };
      }

  });
</script>
{% endif %}