{% extends "users/base.html" %}
{% block content %}
{% load counter_tag %}
{% if request.user.profile.agency.module_timemanagement %}
<div class="content-section col-12">
  <h3>Zeiterfassung&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Bearbeiten Sie hier Ihre Zeiterfassung." class="far fa-question-circle"></i></small>
    <a type="button" class="btn btn-primary btn-sm" style="position: relative; float: right !important;" href="{% url 'tm-add' %}"><i class="fas fa-plus"></i>&nbsp;Arbeitstag</a>
  </h3>
  <hr>


{% if user|usergperm:"timemanager" %}
<div>
  <ul class="nav nav-tabs " id="absencetabs" role="tablist" >
  {% if user.usertime.usetime == True %}
  <li class="nav-item">
    <a class="nav-link" id="userown-tab" data-toggle="tab" href="#userown" role="tab" aria-controls="userown" aria-selected="false"><i class="fas fa-user-clock"></i>&nbsp;Meine Zeiterfassung</a>
  </li>
  {% endif %}
  <li class="nav-item ml-auto">
    <a class="nav-link" id="team-tab" data-toggle="tab" href="#team" role="tab" aria-controls="team" aria-selected="false"><i class="fas fa-users"></i>&nbsp;Mitarbeiterübersicht</a>
  </li>
</ul>
</div>

<div class="tab-content" id="tmContent">

<div class="tab-pane fade" id="userown" role="tabpanel" aria-labelledby="userown-tab">
  <br />
   {% block tm_userown_rights %}
       {% include "timemanagement/timemanagement_singleview.html" %}
    {% endblock %}
</div>

<div class="tab-pane fade" id="team" role="tabpanel" aria-labelledby="team-tab">
  <br />
   {% block tm_userown_team %}
       {% include "timemanagement/timemanagement_teamview.html" %}
    {% endblock %}
</div>

</div>
{% else %}
<!-- Normal Timeview - no rights! -->
 {% block tm_userown_normal %}
       {% include "timemanagement/timemanagement_singleview.html" %}
    {% endblock %}
{% endif %}

   <div class="modal fade" tabindex="-1" id="fastjumpmodal" data-backdrop="static">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Zeitraum auswählen</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
             <div class="form-group">
              <label for="exampleFormControlSelect1">Jahr auswählen</label>
              {% getsomeyears active_year as years %}
              <select class="form-control" id="choosenyear">
                {% for y in years %}
                  <option val="{{y}}" {% if y == active_year %} selected {% endif %}>{{y}}</option>
                {% endfor %}
              </select>
            </div>
            {% getsomemonths as months %}
            {% for m in months %}
            <button class="btn
            {% if forloop.counter == activemonth %} btn-primary {% else %} btn-secondary {% endif %}
            btn-sm mr-2 mb-2" onclick="javascript:goFastToMonth({{forloop.counter}})">{{m}}</button>
            {% endfor %}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary " data-dismiss="modal">Schließen</button>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
  var choosenyear = "{{active_year}}";
  function goFastToMonth(month){
    location.href = "/tm/" + month +"/" + choosenyear
  }

  document.getElementById("choosenyear").addEventListener("change", function(){
    choosenyear = $('#choosenyear :selected').val();
  })

  function fastChangeModal(){
    $("#fastjumpmodal").modal("toggle");
  }



$(document).ready(function(){

   var activeTab = localStorage.getItem('activeTabTimenagamenet');
       
    if(activeTab != null){       
      
      if($('#' + activeTab + "-tab").find().prevObject.length != 0){
       
        $('#' + activeTab).tab('show');         
        $(".nav-link").removeClass("active");
        
        $("#" + activeTab + "-tab").addClass("active");
        
      }
      else{

         $("#userown-tab").addClass("active");
        $('#userown').tab('show');
       }
    }
    else{
      
      $("#userown-tab").addClass("active");
        $('#userown').tab('show');
    }

    {% if user.usertime.usetime == False and user|usergperm:"absencemanager" %} 
    $(".nav-link").removeClass("active");

    $("#team").addClass("active");
    $('#team-tab').tab('show');
    {% endif %}

});

$('#absencetabs a').on('click', function (e) {
    e.preventDefault();
    lastview_name = $(this)[0]['hash'].substring(1);
    localStorage.setItem('activeTabTimenagamenet', lastview_name);              
  });


  </script>

{% if user.usertime.usetime_start == None and user|usergperm:"absencemanager" == False %}
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" id="missingdatainfo">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Fehlende Informationen</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Achtung! Es wurde kein Datum gefunden, ab wann die Zeiterfassung beginnen soll. Bitte tragen Sie dies in Ihrem Mitarbeiterkonto unter Einstellungen, Mitarbeiter, Ihre Vertragsdaten nach.
        <br />
        <small>Dies können nur Mitarbeiter eintragen, die das Recht haben, Mitarbeiter zu verwalten.</small>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $("#missingdatainfo").modal("toggle");
  })

  $('#missingdatainfo').on('hidden.bs.modal', function (e) {
    location.href = "{% url 'dasettings' %}";
})
</script>

{% elif userhasworkdays == False  and user.usertiem.usetime  %}
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" id="initialload">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Arbeitstage auffüllen</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Es wurden keine Arbeitstage bis zum Beginn der Zeiterfassung am {{user.usertime.usetime_start|date:"d.m.Y"}} gefunden. Sollen diese Tage mit der Regelarbeitszeit aufgefüllt werden, welche bei den Vertragsdaten hinterlegt wurde? Abwesenheiten werden nicht berücksichtigt!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="javascript:loadInitiDays()">Ja</button>
        <button type="button" class="btn btn" data-dismiss="modal">Nein</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">

  $(document).ready(function(){
    $("#initialload").modal("toggle");
  });

  function loadInitiDays(){
    $.ajax(
        {
          type: "GET",
          url: "{% url 'tm-ajax' %}",
          data:{
            action : "initial_load",
          },
          success: function( data )
          {
            location.href = location.href;
          }
       });
  }

</script>
{% endif %}

<div class="modal fade" id="errorDelWorkday" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Arbeitstag gelöscht</h5>
            </div>
            <div class="modal-body">
                Der Arbeitstag wurde vollständig entfernt. 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="processWorkDay" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Arbeitstag wird gelöscht</h5>
            </div>
            <div class="modal-body">
                Der Arbeitstag wird gelöscht. Bitte warten.
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  $('#errorDelWorkday').on('hidden.bs.modal', function (e) {
    location.href = location.href;
  })
</script>
{% for workday in workdays %}
<div class="modal fade" id="confirm-delete_{{workday.pk}}" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Arbeitstag löschen</h5>
            </div>
            <div class="modal-body">
                Möchten Sie wirklich den Arbeitstag am {{workday.start|date:"d.m"}} löschen?
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="dodel_{{workday.pk}}" >Löschen</button>
                <button type="button" class="btn" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
  $("#dodel_{{workday.pk}}").click(function(){
    $.ajax(
        {
          type: "GET",
          url: "{% url 'tm-ajax' %}",
          data:{
            action : "remove_workday",
            workday: {{workday.pk}},
          },
          beforeSend: function(){
            $("#confirm-delete_{{workday.pk}}").modal("toggle");
          },
          success: function(data)
          {
            /*if(data["success"] == true){
              $('#confirm-delete_{{workday.pk}}').on('hidden.bs.modal', function (e) {
                $("#errorDelWorkday").modal("toggle");
              });
            }
            else{

            }*/
            location.href = location.href;
          },
          error: function(xhr){
            location.href = location.href;
          }
       });
});
</script>
{% endfor %}
<style>
  /* DATATABLES */
.paginate_button {
  padding: 0px !important;
  border: 0px !important;
}
  </style>
<script>
$(document).ready(function(){

  $('#table_timemanagement').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"
        },
      },
      "buttons" : {
        "className" : "btn-danger"
      },
      "pageLength": 50,
      "order": [[ 1, "asc" ]]
    });
});

</script>
{% else %}
<h3>Das Modul Abwesenheits- und Zeiterfassung wurde in ihrer Agentur deaktiviert oder die Zeiterfassung wurde im Modul deaktiviert.</h3>
{% endif %}
{% endblock content %}