{% load l10n %}
{% load mathfilters %}
<div class="row mt-3">
  <div class="col-5 mr-2">
    <div class="card">
      <div class="card-body">
        <!-- CANVAS -->
            <h6>Urlaubsübersicht {{activeyear}}</h6>
            <div class="chart-container" style="">
              <canvas id="datainfo_reason"></canvas>
            </div>
            <hr>
            <h6>Übersicht nach Abwesenheitskategorien {{activeyear}}</h6>
            <div class="chart-container" style="">
              <canvas id="datainfo_restdays"></canvas>
            </div>
            <hr>
            <button class="btn btn-secondary btn-sm" style="float: right;" onclick="javascript:$('#alloverview_detail').toggle()"><i class="fas fa-eye" id="show_detailview"></i></button>
            <div id="alloverview_detail" style="display: none;">
            <h6>Übersicht nach Abwesenheitskategorien</h6>
              <table class="table table-sm">
              <tbody>
                <tr>
                  <td>Verfügbare Urlaube</td>
                  <td>{{yearinfo.days}}&nbsp;Tage</td>
                </tr>
                <tr>
                  <td>Genommener Urlaub</td>
                  <td>{{yearinfo.days_inuse}}&nbsp;Tage</td>
                </tr>
                <tr>
                  <td>Resturlaub aus Vorjahr</td>
                  <td>{{yearinfo.restdays}}&nbsp;Tage</td>
                </tr>
              </tbody>
            </table>
            <h6>Übersicht nach Abwesenheitskategorien</h6>
             <table class="table table-sm">
              <tbody>
                {% for ele in final_reasons %}
                <tr>
                  <td>{{ele.0}}</td>
                  <td>{{ele.1}} Tage</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            </div>
      </div>
    </div>
  </div>


  <div class="col-7" style="margin-left:-10px !important;">
    <div class="table-responsive">
    <table class="table table-hover" id="table_userownab">
        <thead>
        <tr>
          <th scope="col">Start</th>
          <th scope="col">Ende</th>
          <th scope="col">Grund</th>
          <th scope="col">Status</th>
          <th scope="col">Begründung</th>
        </tr>
        </thead>
        <tbody id="">
        {% for abday in userown %}
          <tr>
             <td>{{abday.start|date:"d.M Y"}}</td>
             <td>{{abday.end|date:"d.M Y"}}</td>
             <td>{{abday.reason.name}}</td>
             <td>{% if abday.confirm_status == 0 %} Genehmigt {% elif abday.confirm_status == 1 %} Beantragt {% else %} Abgelehnt {% endif %}</td>
             <td>{{abday.confirm_info}}</td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>

  </div><!-- END TABLE -->
</div>
<script type="text/javascript">
	$(document).ready(function(){
  $('#table_userownab').DataTable({
      "language": {
        "search" : "Suche",
        "info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
        "lengthMenu":     "Zeige _MENU_ Einträge",
        "zeroRecords": "Nichts gefunden",
        "infoEmpty": "Keine Einträge",
        "paginate": {
            "first":      "Erste",
            "last":       "Letzte",
            "next":       "Nächste",
            "previous":   "Zurück"
        },
      },
      "pageLength": 50,
      "buttons" : {
        "className" : "btn-danger"
      }
    });
});
</script>
<script>
      var ctx = document.getElementById("datainfo_restdays");
      var chart_reasons = new Chart(ctx, {
          type: 'doughnut',
          data: {
              labels: [
              {% for ele in final_reasons %}
                '{{ele.0}}',
              {% endfor %}
                ],
              datasets: [{
                  backgroundColor: [
                  {% for ele in final_reasons %}
                    '{{ele.0.color}}',
                  {% endfor %}
                  ],
                  data : [
                   {% for ele in final_reasons %}
                {{ele.1|unlocalize}},
                  {% endfor %} ]

              }]
          },
          options : {
            legend: {
              display: true,
              position: 'bottom',
            }
          }
      });

      var ctx = document.getElementById("datainfo_reason");
      var chart_holiday = new Chart(ctx, {
          type: 'doughnut',
          data: {
              labels: ['Verfügbarer Urlaub', 'Genommener Urlaub'],
              datasets: [{
                  backgroundColor: ['green','#ff304f'],
                  data: [{{kontingent|unlocalize}}, {{inuse|unlocalize}}]
              }]
          },
          options : {
            legend: {
              display: true,
              position: 'bottom',
            }
          }
      });
</script>