{% extends "users/base.html" %}
{% block content %}
{% load crispy_forms_tags %}
{% load counter_tag %}
{% load mathfilters %}
{% if request.user.profile.agency.module_timemanagement %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<div class="content-section col-12">
  <h3>Abwesenheiten{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Bearbeiten Sie hier Ihre Abwesenheiten." class="far fa-question-circle"></i></small>{% endif %}   
  <!--<small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>-->

    &nbsp;<small><a href="#" onclick="javascript:$('#showICSLink').modal('toggle')"><i class="fas fa-calendar-alt" data-toggle="tooltip" data-placement="top" title="Fügen Sie Ihrem Kalender einen Link hinzu, um alle Abwesenheiten im Blick zu behalten." style="color: #000000;"></i></a></small>


    <button class="btn btn-primary btn-sm" {% if user|usergperm:"absencemanager" %} onclick="javascript:showNewAbsenceByUser()" {% else %} onclick="javascript:loadNewAbsenceByUser({{request.user.pk}})" {% endif %} style="float: right;" id="newabscencebtn"><i class="fas fa-plus"></i>&nbsp;Abwesenheit</button> 
  </h3>  
  <hr>  
  <div >    
  <ul class="nav nav-tabs " id="absencetabs" role="tablist" >
  <li class="nav-item">
    <a class="nav-link active" id="team-tab" data-toggle="tab" href="#team" role="tab" aria-controls="team" aria-selected="false"><i class="fas fa-calendar-alt"></i>&nbsp;Teamübersicht</a>
  </li>
  <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"></i>&nbsp;Meine Abwesenheiten</a>
  </li>
  {% if user|usergperm:"absencemanager" %}
  <li class="nav-item ">
    <a class="nav-link" id="absencemanagercontent-tab"  data-toggle="tab" href="#absencemanagercontent" role="tab" aria-controls="absencemanagercontent" aria-selected="false">    
      <i class="fas fa-inbox"></i>&nbsp;Ausstehende Anträge
    {% if needtoconfirm|length > 0 %} 
    <span class="badge badge-primary badge-counter" style="float: right !important; margin-right: -20px; margin-top: -10px;">{{needtoconfirm|length}}</span>
    {%endif%}
    </a>
  </li>
  <li class="nav-item ">
    <a class="nav-link" id="absencemanagercontent_all-tab"  data-toggle="tab" href="#absencemanagercontent_all" role="tab" aria-controls="absencemanagercontent_all" aria-selected="false">    
      <i class="fas fa-users"></i>&nbsp;Alle Abwesenheiten
    </a>
  </li>
  {% endif %}
</ul>
</div>
<div class="tab-content" id="absencetabsContent">

<div class="tab-pane fade" id="team" role="tabpanel" aria-labelledby="team-tab">
  <div>
    <div id="rendered_table">
      Lade Kalenderdaten...
    </div>    
  </div>
</div>

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

{% if user|usergperm:"absencemanager" %}
<div class="tab-pane fade" id="absencemanagercontent" role="tabpanel" aria-labelledby="team-tab">
  {% block ab_toconfirm %}
       {% include "timemanagement/tm_ab_toconfirm.html" %}
    {% endblock %}
</div>

<div class="tab-pane fade" id="absencemanagercontent_all" role="tabpanel" aria-labelledby="team-tab">
  {% block ab_all %}
       {% include "timemanagement/tm_ab_all.html" %}
    {% endblock %}
</div>
{% endif %}


</div>
</div>
<!-- LOADER OVERLAY -->
<div id="overlay" style="display: none;">
  <div class="loader"></div>
</div>
<!-- MODAL -->
 <div class="modal fade" tabindex="-1" role="dialog" id="startAbsenceProgress" data-backdrop="static">
  <div class="modal-dialog" role="document" style="min-width: 43% !important;">    <div class="modal-content">
      <div class="modal-header">
        <h5>Abwesenheit für <b><span id="username_abscence"></span></b> beantragen</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 id="restholidays_container">
          <!-- ONE YEAR -->
          <h5>
            <b style="color: red">
              <span id="detail_tocontract"></span>&nbsp;Tage&nbsp;/&nbsp;<span id="restholidays"></span>&nbsp;verbleibend im Jahr&nbsp;<span id="holidayyear"></span>  <small>(<span id="detail_rest_2">0</span> Rest)</small>
            </b>
            <button class="btn btn-secondary btn-sm" style="float: right;" onclick="javascript:$('#holiday_detail_div').toggle()"><i class="fas fa-eye" id="show_detailview"></i></button>
          </h5> 
          <!-- TWO YEARS -->    
          <div id="two_years" style="display: none;">          
          <h5><b style="color: red"><span id="detail_tocontract_next"></span>&nbsp;Tage&nbsp;/&nbsp;<span id="restholidays_next"></span>&nbsp;verbleibend im Jahr&nbsp;<span id="holidayyear_next"></span></b>          
          </h5>  
          </div>          
          <div id="holiday_detail_div" style="display: none"> 
            <hr>
            <div class="col-6" style="margin-left: -10px">
            <h6>Detailansicht</h6>           
              <table class="table table-sm">
              <tbody>
                <tr>                  
                  <td>Gewünschte Tage</td>
                  <td><span id="detail_tocontract_overall"></span></td>
                </tr>
                <tr>
                  <td>Resturlaub</td>
                  <td><span id="detail_rest"></span></td>
                </tr>
                <tr>
                  <td>Urlaub nächstes Jahr</td>
                  <td><span id="detail_next"></span> + Rest (<span id="detail_next_rest"></span>)</td>
                </tr>
                <tr>
                  <td><b>Summe Urlaubstage</b></td>
                  <td><b><span id="detail_sum"></span></b></td>                  
                </tr>                
              </tbody>
            </table>
            </div>               
          </div>                
        </div>
        <div id="noholidays_container" style="display: none;">
          <h6>Abwesenheitsgrund ohne Urlaubsanspruch</h6>        
        </div>
        <hr>
        <form method="POST" class="">
          <input type="hidden" name="form_type" value="absenceform">
          {% csrf_token %}
          {{abscenceform.media}}
          <div>
            <div class="row">
              <div class="col-6">                
                {{abscenceform.start |as_crispy_field }}
                {{abscenceform.startday_info |as_crispy_field }}
                
              </div>
              <div class="col-6">
                {{abscenceform.end |as_crispy_field }}
                {{abscenceform.endday_info |as_crispy_field }}                
              </div>              
            </div>
            <hr>
            <div class="row" >
              <div class="col-6">       
                {{abscenceform.reason|as_crispy_field}}
              </div>
              <div class="col-6">       
                {{abscenceform.representator|as_crispy_field}}
              </div>
            </div>
            <div class="row">
              <div class="col-12">       
                {{abscenceform.info|as_crispy_field}}                
              </div>
            </div>
          </div>
          <div id="otherholidays" style="display: none;">
            <hr>
          In diesem Zeitraum haben bereits folgende Mitarbeiter Abwesenheiten:            
          <br />
            <div id="otherholidays_users"></div>
          </div>
          <div id="ownholidays" style="display: none;">
            <hr>
          In diesem Zeitraum haben Sie bereits folgende Abwesenheiten:            
          <br />
            <div id="ownholidays_users"></div>
          </div>
          <!-- Fields for rest-logic -->
          <div style="display: none;">
            {{abscenceform.nextmonth}}               
            {{abscenceform.prevmonth}}               
            {{abscenceform.nextyear}}               
            {{abscenceform.prevyear}}               
            {{abscenceform.activemonth}}               
            {{abscenceform.activeyear}}     
            {{abscenceform.userid}}                      
          </div>          
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" id="start_absence_contract">Abwesenheit beantragen</button>
        <button type="button" class="btn btn" data-dismiss="modal">Abbrechen</button>
      </div>
      </form>
    </div>
  </div>
</div>


<div class="modal fade" tabindex="-1" id="showICSLink" data-backdrop="static">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Links für Abwesenheitskalender</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">            
            <h4><b>Kalenderlinks mit Authentifzierung</b></h4>
           
           {% getBaseURLIcsLink request.user.profile.agency as icsurl %}
           <span>Abwesenheit{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Dieser Link zeigt alle Abwesenheiten der Agentur an. Es wird eine Anmeldung von Nöten. Funktioniert nur in Mailprogrammen oder Smartphones, nicht aber bei Online-Kalenderdiensten wie Google. Hierfür muss die externe Freigabe in den Moduleinstellungen aktiviert werden." class="far fa-question-circle"></i></small>&nbsp;{% endif %}<br /></span><b>{{icsurl}}</b>
           <a href="#\" onclick="javascript:copyURL('{{icsurl}}')"><i class="far fa-copy"></i></a>
           <span id="icsurl" style="display: none;">Kopiert!</span>
           

           {% if request.user|usergperm:"absencemanager" %}
             <br />
             {% getBaseURLIcsLinkAll request.user.profile.agency as icsurlall %}
             <span>Abwesenheit inkl. Grund{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Dieser Link zeigt alle Abwesenheiten der Agentur inkl. Grund für die Abwesenheit an. Es wird eine Anmeldung von Nöten. Funktioniert nur in Mailprogrammen oder Smartphones, nicht aber bei Online-Kalenderdiensten wie Google. Hierfür muss die externe Freigabe in den Moduleinstellungen aktiviert werden." class="far fa-question-circle"></i></small>{% endif %}<br /></span><b>{{icsurlall}}</b>
             <a href="#\" onclick="javascript:copyURLAll('{{icsurlall}}')"><i class="far fa-copy"></i></a>
             <span id="icsurlall" style="display: none;">Kopiert!</span>
           {% endif %}

           {% if request.user.profile.agency.agencycal_publicstatus == 1 %}
             <hr>
             {% getBaseURLIcsEx request.user.profile.agency as icsurlex %}
             <h4><b>Öffentliche Links ohne Authentifizierung (z.B. für Google-Kalender)</b></h4>
             <span>Abwesenheit{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Dieser Link zeigt alle Abwesenheiten der Agentur an. Es wird keine Anmeldung benötigt. Geben Sie diesen Link auf keinen Fall an Dritte weiter!" class="far fa-question-circle"></i></small>&nbsp;{% endif %}<br /></span><b>{{icsurlex}}</b>
             <a href="#\" onclick="javascript:copyURLEx('{{icsurlex}}')"><i class="far fa-copy"></i></a>
             <span id="icsurlex" style="display: none;">Kopiert!</span>
             {% if request.user|usergperm:"absencemanager" %}
             <br />
             {% getBaseURLIcsExAll request.user.profile.agency as icsurlexall %}
             <span>Abwesenheit inkl. Grund{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Dieser Link zeigt alle Abwesenheiten der Agentur inkl. Grund für die Abwesenheit an. Es wird keine Anmeldung benötigt. Geben Sie diesen Link auf keinen Fall an Dritte weiter!" class="far fa-question-circle"></i></small>&nbsp;{% endif %}<br /></span><b>{{icsurlexall}}</b>
             <a href="#\" onclick="javascript:copyURLExAll('{{icsurlexall}}')"><i class="far fa-copy"></i></a>
             <span id="icsurlexall" style="display: none;">Kopiert!</span>
             {% endif %}
           
           {% endif %}

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary " data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>

<!-- MODAL -->
 <div class="modal fade" tabindex="-1" id="updateAbsenceToConfirm" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Abwesenheitsantrag</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 id="confirmcontent"></div>          
      </div>
      <div class="modal-footer">          
        <button type="button" class="btn" data-dismiss="modal" onclick="javascript:closeOnly()">Schließen</button>
      </div>        
    </div>
  </div>
</div>

 <div class="modal fade" tabindex="-1" id="updateAbsenceToConfirmSecond" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Abwesenheitsantrag</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 id="confirmcontentsecond"></div> 
      </div>
      <div class="modal-footer">          
        <button type="button" class="btn btn-primary" onclick="javascript:confirmAbscenceFinal()">Bestätigung</button>
        <button type="button" class="btn btn" data-dismiss="modal">Abbrechen</button>
      </div>        
    </div>
  </div>
</div>
  <style>
  .tm-ab-tdhover:hover{
    background-color: #858796 !important;
  } 
#timetable_team .ui-selecting {
  background: #858796;
}
#timetable_team .ui-selected {
  background: #858796;
  color: white;
}
#timetable_team {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
#timetable_team  {
  margin: 0px;
  padding: 0.4em;
  font-size: 1em;
  height: 10px;
}
  </style>
  <style type="text/css">
      .commentimg {
        border-radius: 50%;
        width: 18%;
      }
    </style>
<style>



  /* DATATABLES */
.paginate_button {
  padding: 0px !important;
  border: 0px !important;
}
  </style>

<style>
.loader {
  position: relative;
  border: 7px solid #d3d3d3;
  border-radius: 50%;
  border-top: 7px solid red;
  width: 70px;
  height: 70px;
  left:50%;
  top:35%;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}
#overlay{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: .4;
}
.container{
    position:relative;
    height: 300px;
    width: 200px;
    border:1px solid red;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
<script>
function copyURL(urldata){
    var $temp = $("<input>");
    $("#showICSLink").append($temp);
    $temp.val(urldata).focus();
    $temp.val(urldata).select();
    document.execCommand("copy");
    $temp.remove();
    $("#icsurl").show();
}

function copyURLAll(urldata){
    console.log(urldata);
    var $temp = $("<input>");
    $("#showICSLink").append($temp);
    $temp.val(urldata).focus();
    $temp.val(urldata).select();
    document.execCommand("copy");
    $temp.remove();
    $("#icsurlall").show();
}

function copyURLEx(urldata){
    console.log(urldata);
    var $temp = $("<input>");
    $("#showICSLink").append($temp);
    $temp.val(urldata).focus();
    $temp.val(urldata).select();
    document.execCommand("copy");
    $temp.remove();
    $("#icsurlex").show();
}

function copyURLExAll(urldata){
    console.log(urldata);
    var $temp = $("<input>");
    $("#showICSLink").append($temp);
    $temp.val(urldata).focus();
    $temp.val(urldata).select();
    document.execCommand("copy");
    $temp.remove();
    $("#icsurlexall").show();
}




var absencetowork = "";
var absencestring_confirm = "";
var absencestring_noconfirm = "";
var newconfstat = "";
var closeonly = false;

function closeOnly(){
  closeonly = true;
}

/*
$("#show_detailview").hover(
  function() {
    $("#holiday_detail_div").show();
  }, function() {
    $("#holiday_detail_div").hide();
  }
);
*/

function confirmAbscenceFinal(){
  $.ajax({
    type: "GET",
    url: "{% url 'tm-ajax' %}",
    data:{
      action : "confirmornotabscence",     
      absencetowork : absencetowork,
      newconfstat : newconfstat,
      info : $("#id_confirm_info").val(),
      activemonth : $("#id_activemonth").val(),
      activeyear : $("#id_activeyear").val(),      
    },
    success : function(data){
      location.href = "/tm/abs/" + data["activemonth"] +"/" + data["activeyear"]
    }
  });
}

function openModalABChangeTable(idtopen){ 
  closeonly = false;
  absencetowork = idtopen;
   $.ajax({
    type: "GET",
    url: "{% url 'tm-ajax' %}",
    data:{
      action : "getrenderedform",     
      abscenceid : idtopen
    },
    beforeSend: function(request) {
      request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    },
    success : function(data){
      $("#confirmcontent").html(data);
      $("#updateAbsenceToConfirm").modal("show");  
    }
  });
}

function noconfirmAbsence(id){
  newconfstat = 2;
  $("#updateAbsenceToConfirm").modal("toggle");  
    $('#updateAbsenceToConfirm').on('hidden.bs.modal', function () {
      if(closeonly == false){
        $("#updateAbsenceToConfirmSecond").modal("toggle");
        $("#confirmcontentsecond").html(absencestring_noconfirm);
      }      
    });
  
}

function confirmAbsence(id){
  newconfstat = 0;
  $("#updateAbsenceToConfirm").modal("toggle");
  $('#updateAbsenceToConfirm').on('hidden.bs.modal', function () {
    if(closeonly == false){
      $("#updateAbsenceToConfirmSecond").modal("toggle");
      $("#confirmcontentsecond").html(absencestring_confirm);
    }    
  });
}

//Initial Load
function loaddjango(){

  $("#id_activemonth").val("{{activemonth}}")
  $("#id_activeyear").val("{{activeyear}}")
  $("#id_prevmonth").val("{{prevmonth}}")
  $("#id_nextmonth").val("{{nextmonth}}")
  $("#id_prevyear").val("{{prevyear}}")
  $("#id_nextyear").val("{{nextyear}}")

  $.ajax({
    type: "GET",
    url: "{% url 'tm-ajax' %}",
    data:{
      action : "getrenderedtable",     
      activeyear : {{activeyear}},
      activemonth : {{activemonth}} 
    },
    beforeSend: function(request) {
      // TODO: Muss die nächste Zeile auskommentiert sein oder nicht? Hier einmal LIVE testen
      //request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    },
    success : function(data){
      $("#rendered_table").html(data);
    }
  });
}



$(document).ready(function(){
  loaddjango();  

   var activeTab = localStorage.getItem('activeTabAbsence');
       
    if(activeTab){       
      if(activeTab != "team"){
        //$("#newabscencebtn").prop("disabled", true);
      }
      else{
        $("#newabscencebtn").attr("disabled", false);
      }


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

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


});

$('#absencetabs a').on('click', function (e) {
    e.preventDefault();
    lastview_name = $(this)[0]['hash'].substring(1);
    if(lastview_name != "team"){
      $("#newabscencebtn").prop("disabled", true);
    }
    else{
      $("#newabscencebtn").prop("disabled", false);
    }
    localStorage.setItem('activeTabAbsence', lastview_name);          
  });


  function prevMonth(){
  $.ajax(
  {
    type: "GET",
    url: "{% url 'tm-ajax' %}",
    data:{
      action : "getrenderedtable",
      activeyear : {{prevyear}},
      activemonth : {{prevmonth}}
    },
    beforeSend: function(request) {
    	$("#overlay").fadeIn();
        request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    },
    success : function(data){
    	$("#overlay").fadeOut();
      $("#rendered_table").html(data);
    }
  });
}


function nextMonth(){
  $.ajax({
    type: "GET",
    url: "{% url 'tm-ajax' %}",
    data:{
      action : "getrenderedtable",
      activeyear : {{nextyear}},
      activemonth : {{nextmonth}}
    },
    beforeSend: function(request) {
    	$("#overlay").fadeIn();
      	request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    },
    success : function(data){
    	$("#overlay").fadeOut();
      $("#rendered_table").html(data)
    }
  });
}

/*

  Functions for Kalender
*/
function fastChangeModal(){
  $("#fastjumpmodal").modal("toggle");
}


function loadNewAbsenceByUser(userid){
  $("#chooseUserForNewAbsence").modal("toggle");  
  recalculateChoosenDays(userid);
}

function showNewAbsenceByUser(){

 $("#chooseUserForNewAbsence").modal("toggle");   
}

function goFastToMonth(month){
  location.href = "/tm/abs/" + month +"/" + choosenyear
}

//function recalculateChoosenDays(userid=false){
function recalculateChoosenDays(userid){
	seldates = [];
  //Compa für I-Explorer
  if(userid==undefined){
    userid = false;
  }
	
  //Click on Table
  if(userid == false){

    for(i = 0; i < selectedElements.length; i++){
  		seldates.push(selectedElements[i].split("_")[3]);
  		userid = selectedElements[i].split("_")[2];
  	}
  	seldates.sort();
  	date_start = new Date(seldates[0])
  	date_end =  new Date(seldates[seldates.length-1])


    if(+date_start == +date_end){
      sameday = true;
    }
    else{
      sameday = false;
    }
  }
  //Click on Button
  else{
    //Show Modal with all users of agency
    $("#chooseUserForNewAbsence").modal("toggle");

    //Set initial Date-Infos
    var today = new Date();
    var tempdate_user = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    
    date_start = new Date(tempdate_user);
    date_end = new Date(tempdate_user);    
    sameday = true;    
    userid = userid.toString();
  }
  $("#div_id_end").show();
  $("#div_id_end_ishalf").show();

  $("#id_start").data("DateTimePicker").date(date_start);
  $("#id_end").data("DateTimePicker").date(date_end);

  localStorage.setItem("ab_userid", userid);
  $("#id_userid").val(userid);


  $.ajax({
    type: "GET",
    url: "{% url 'tm-ajax' %}",
    data:{
      action : "getrestholidays",
      userid : localStorage.getItem("ab_userid"),
      startdate : date_start.getFullYear() + "__" + (date_start.getMonth()+1) + "__" + date_start.getDate(),
      enddate : date_end.getFullYear() + "__" + (date_end.getMonth()+1) + "__" + date_end.getDate(),
      //start_half : $("#id_start_ishalf").prop("checked"),
      //end_half : $("#id_end_ishalf").prop("checked"),
      startday_info : $("#id_startday_info").val(),
      endday_info : $("#id_endday_info").val(),
    },
    success : function(data){

      if(data["other_absences"] != false){
        $("#otherholidays").show();
        $("#otherholidays_users").html(data["other_absences"]);
      }
      else{
        $("#otherholidays").hide();
      }

      if(data["userown_absences"] != false){
        $("#ownholidays").show();
        $("#ownholidays_users").html(data["userown_absences"]);
      }
      else{
        $("#ownholidays").hide();
      }

      $("#startAbsenceProgress").modal("show");


      $("#holidayyear").html(date_start.getFullYear());
      $("#restholidays").html(data["restholiday_thisyear"]);
      $("#detail_rest").html(data["restholiday_lastyear"]);
      $("#detail_rest_2").html(data["restholiday_lastyear"]);
      $("#detail_resthol").html(data["restholiday_lastyear"]);
      $("#detail_next").html(data["restholiday_nextyear"]);
      $("#detail_next_rest").html(data["restholiday_nextyear_rest"]);
      $("#detail_tocontract").html(data["need_days"]);
      $("#detail_tocontract_overall").html(data["need_days"]);

      $("#detail_sum").html(data["restholiday_thisyear"]+data["restholiday_lastyear"]+data["restholiday_nextyear"]+data["restholiday_nextyear_rest"]);

      if(data["restholiday_thisyear"] < 0 || data["restholiday_lastyear"] < 0 || data["restholiday_nextyear"] < 0){
        $("#start_absence_contract").prop("disabled", true);
      }
      else{
       $("#start_absence_contract").prop("disabled", false);
      }

      $("#username_abscence").html(data["choosenuser_name"]);

      /*

      if(seldates.length == 1){
        $("#div_id_end").hide();
        $("#div_id_endday_info").hide();
      }
      else{

      */
      $("#div_id_end").show();
      $("#div_id_endday_info").show();
      /*}*/
    }
  });
}

</script>



{% else %}
<h3>Das Modul Abwesenheits- und Zeiterfassung wurde in ihrer Agentur deaktiviert.</h3>
{% endif %}



{% if missinguserdata|length > 0 %}
<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 Mitarbeiterinformationen</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Zur Berechnung der Abwesenheiten und Urlaub müssen alle Mitarbeiter ein Einstellungsdatum haben. Dies fehlt bei folgenden Mitarbeitern:</p>
        {% for m in missinguserdata %}
          {{m.first_name}} {{m.last_name}}<br />
        {% endfor %}
        <br />
        Bitte ergänzen Sie das Datum, da sonst keine Urlaubstage berechnet werden können.
      </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>
{% endif %}






{% endblock content %}