{% extends "adm/adm_base.html" %}
{% block content %}
{% load counter_tag %}
{% load adm_tags %}
<!-- Mitarbeier ist immer der angemeledete!!! -->
<div class="content-section col-12">
	<div class="row">
		<div class="col-2">
			<img class="img-profile" width="100%"  src="{{ userdata.profile.get_photo_url }}" >
		</div>
		<div class="col-8">
			<h4>{{userdata.get_full_name}} aus {{userdata.profile.agency.name}}</h4>
			<table>
				<tr>
					<td style="min-width: 120px;">Name</td>
					<td>{{userdata.get_full_name}}</td>
				</tr>
				<tr>
					<td>E-Mail</td>
					<td>{{userdata.email}}</td>
				</tr>
				<tr>
					<td>Letzter Login</td>
					<td>{{userdata.last_login|default:"-"}}</td>
				</tr>
				{% if userdata.usertime.usetime %}
				<tr>
					<td>Gleitzeitkonto:</td>
					<td>
						{% loadaccounttime userdata as actualaccounttime %}
						{% if actualaccounttime.1 == 0 %}
							<b><span style="color: green">+{{actualaccounttime.0}}&nbsp;Stunden</span></b>
						{% else %}
							<b><span style="color: red">-{{actualaccounttime.0}}&nbsp;Stunden</span></b>
						{% endif %}
					</td>
				</tr>
				{% endif %}
			</table>
		</div>
	</div>
<hr>
<nav>
  <div class="nav nav-tabs" id="usersingleelements" role="tablist">
    <a class="nav-link active" id="nav-groups-tab" data-bs-toggle="tab" href="#nav-groups" role="tab" aria-controls="nav-groups" aria-selected="true">Gruppen</a>
    <a class="nav-link" id="nav-contractdata-tab" data-bs-toggle="tab" href="#nav-contractdata" role="tab" aria-controls="nav-contractdata" aria-selected="false">Vertragsdaten</a>
    <a class="nav-link" id="nav-contract-tab" data-bs-toggle="tab" href="#nav-contract" role="tab" aria-controls="nav-contract" aria-selected="false">Arbeitstage</a>
    <a class="nav-link" id="nav-absence-tab" data-bs-toggle="tab" href="#nav-absence" role="tab" aria-controls="nav-absence" aria-selected="false">Abwesenheiten</a>
    <a class="nav-link" id="nav-year-tab" data-bs-toggle="tab" href="#nav-year" role="tab" aria-controls="nav-year" aria-selected="false">Jahresübersicht</a>
     <a class="nav-link" id="nav-logins-tab" data-bs-toggle="tab" href="#nav-logins" role="tab" aria-controls="nav-logins" aria-selected="false">Logins</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-groups" role="tabpanel" aria-labelledby="nav-groups-tab">
  	<br />
  	<h5>Gruppenübersicht</h5>
  		<small>Tabelle zeigt alle Gruppen, in denen der Nutzer ist.</small>
		<table class="table table-hover" id="users_groups" >
		  <thead>
		  <tr>
		    <th scope="col">Gruppenname</th>
		    <th scope="col">Interner Name</th>
		    <th scope="col">Löschschutz</th>
		    <th scope="col">Administrativ</th>
		  </tr>
		</thead>
		<tbody >
			{% for g in userdata.groups.all %}
			{% getAgencyGroupName g as aggdata %}
			<tr>
				<td>{{aggdata.agencygroupname}}</td>
				<td>{{g.name}}</td>
				<td>{% if aggdata.savefordel %} Ja {% else %} Nein {% endif %}</td>
				<td>{% if aggdata.is_admin %} Ja {% else %} Nein {% endif %}</td>
			</tr>
			{% endfor %}
		</tbody>
		</table>

		<script type="text/javascript">
			$(document).ready(function(){
		       $('#users_groups').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>
  </div>

  <div class="tab-pane fade" id="nav-contractdata" role="tabpanel" aria-labelledby="nav-contractdata-tab">
	<br />
	<h5>Vertragsdaten<small>&nbsp;UserTime-ID {{usertimedata.pk}}</small></h5>
	Arbeitszeit
	<table>
		<thead>
			<tr>
				<td>Montag</td>
				<td>Dienstag</td>
				<td>Mittwoch</td>
				<td>Donnerstag</td>
				<td>Freitag</td>
				<td>Samstag</td>
				<td>Sonntag</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>{{usertimedata.wd_mo}}</td>
				<td>{{usertimedata.wd_tu}}</td>
				<td>{{usertimedata.wd_we}}</td>
				<td>{{usertimedata.wd_th}}</td>
				<td>{{usertimedata.wd_fr}}</td>
				<td>{{usertimedata.wd_sa}}</td>
				<td>{{usertimedata.wd_so}}</td>
			</tr>
		</tbody>
	</table>
	<br />
	<table>
		<tr>
			<td>Urlaub verfällt am</td>
			<td><b>{{usertimedata.loose_holidedate}}</b></td>
		</tr>
		<tr>
			<td>Einstellungsdatum</td>
			<td><b>{{usertimedata.startdate|date:"d.m.Y"}}</b></td>
		</tr>
		<tr>
			<td>Zeiterfassung Startwert</td>
			<td><b>{{usertimedata.startcount}}</b></td>
		</tr>
		<tr>
			<td>Zeiterfassung Nutzen</td>
			<td><b>{{usertimedata.usetime}}</b></td>
		</tr>
		<tr>
			<td>Zeiterfassung ab dem</td>
			<td><b>{{usertimedata.usetime_start|date:"d.m.Y"}}</b></td>
		</tr>
	</table>
  </div>

  <div class="tab-pane fade" id="nav-contract" role="tabpanel" aria-labelledby="nav-contract-tab">
  	<br />
		<h5>Arbeitstage</h5>
		<a class="btn btn-sm btn-primary" href="{% url 'adm-workday-add' userdata.pk %}">+ Arbeitstag</a><br />
		<br />
		<table class="table table-hover" id="user_workdays" >
		  <thead>
		  	<tr>
		      <th scope="col">ID</th>
		      <th scope="col">Start</th>
		      <th scope="col">Ende</th>
		      <th scope="col">Ziel</th>
		      <th scope="col"></th>
			</tr>
		</thead>
		<tbody >
			{% for wd in workdays %}
			<tr>
				<td>{{wd.pk}}</td>
				<td>{{wd.start|date:"d.m.Y H:i"}}</td>
				<td>{{wd.end|date:"d.m.Y H:i"}}</td>
				<td>{{wd.target}}</td>
				<td><a class="btn btn-secondary btn-sm " href="{% url 'adm-workday-update' wd.pk %}"><i class="fas fa-pen"></i></a>&nbsp;<a class="btn btn-sm " href="{% url 'adm-workday-delete' wd.pk %}"><i class="fas fa-trash"></i></a></td>
			</tr>
			{% endfor %}
		</tbody>
		</table>
		<script type="text/javascript">
			$(document).ready(function(){
		       $('#user_workdays').DataTable({
		       	columnDefs: [
			        { 'targets': 1, type: 'date-euro' },
			        { 'targets': 2, type: 'date-euro' }
			       ],
			       order: [
			                [1, 'asc'] // date column
			            ],
		       	  "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": 20,
			      "buttons" : {
			        "className" : "btn-danger"
			      }
			    }); 	
			})
		</script>

  </div>

  <div class="tab-pane fade" id="nav-absence" role="tabpanel" aria-labelledby="nav-absence-tab">
  	<br />
		<h5>Abwesenheiten</h5>
		<table class="table table-hover" id="user_absences" >
		  <thead>
		  	<tr>
		      <th scope="col">ID</th>
		      <th scope="col">Art</th>
		      <th scope="col">Start</th>
		      <th scope="col">Ende</th>
		      <th scope="col">Ganz/Vor/Na</th>
		      <th scope="col">Ganz/Vor/Na</th>
		      <th scope="col">Erstellt am</th>
		      <th scope="col">Status</th>
		      <th scope="col">Urlaub N</th>
		      <th scope="col">Urlaub R</th>
		      <th scope="col">Urlaub Next N</th>
		      <th scope="col">Urlaub Next Rest</th>
			</tr>
		</thead>
		<tbody >
			{% for ab in absences %}
			<tr>
				<td>{{ab.pk}}</td>
				<td>{{ab.reason.name}}</td>
				<td>{{ab.start|date:"d.m.Y"}}</td>
				<td>{{ab.end|date:"d.m.Y"}}</td>
				<td>{% if ab.startday_info  == "1" %} Vormittags {% elif ab.startday_info  == "2" %} Nachmittags {% else %} Ganzer Tag {% endif %}</td>
				<td>{% if ab.endday_info  == "1" %} Vormittags {% elif ab.endday_info  == "2" %} Nachmittags {% else %} Ganzer Tag {% endif %}</td>
				<td>{{ab.created_date|date:"d.m.Y"}}</td>
				<td>{% if ab.confirm_status == 0 %} OK {% elif ab.confirm_status == 1 %} Beantragt {% else %} Abgelehnt {% endif %} </td>
				<td>{{ab.holidays_normal}}</td>
				<td>{{ab.holidays_rest}}</td>
				<td>{{ab.holidays_normal_next}}</td>
				<td>{{ab.holidays_rest_next}}</td>
			</tr>
			{% endfor %}
		</tbody>
		</table>
		<script type="text/javascript">
			$(document).ready(function(){
		       $('#user_absences').DataTable({
		       	columnDefs: [
			        { 'targets': 1, type: 'date-euro' },
			        { 'targets': 2, type: 'date-euro' }
			       ],
			       order: [
			                [1, 'asc'] // date column
			            ],
		       	  "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": 10,
			      "buttons" : {
			        "className" : "btn-danger"
			      }
			    }); 	
			})
		</script>	

  </div>

  <div class="tab-pane fade" id="nav-year" role="tabpanel" aria-labelledby="nav-year-tab">
  	<br />
		<h5>Jahresübersicht</h5>
		
		<table class="table table-hover" id="user_absence_year" >
		  <thead>
		  	<tr>
		      <th scope="col"></th>
		      <th scope="col">Jahr</th>
		      <th scope="col">Tage Gesamt</th>
		      <th scope="col">Tage Verbraucht</th>
		      <th scope="col">Rest Vorjahr</th>
			</tr>
		</thead>
		<tbody >
			{% for yi in yearinfo %}
			<tr>
				<td>{{forloop.counter}}</td>
				<td>{{yi.year}}</td>
				<td>{{yi.days}}</td>
				<td>{{yi.days_inuse}}</td>
				<td>{{yi.restdays}}</td>
			</tr>
			{% endfor %}
		</tbody>
		</table>
		<script type="text/javascript">
			$(document).ready(function(){
		       $('#user_absence_year').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": 10,
			      "buttons" : {
			        "className" : "btn-danger"
			      }
			    }); 	
			})
		</script>
  </div>

  <div class="tab-pane fade" id="nav-logins" role="tabpanel" aria-labelledby="nav-logins-tab">
  	<br />
	<h5>Logins (letzten 50)</h5>
	{% for ele in logdata reversed %}
		{{forloop.revcounter}}. {{ele|date:"d.m.Y, H:i"}}<br />
	{% endfor %}

  </div>
</div>

</div>
<script type="text/javascript">

 $('#usersingleelements a').on('click', function (e) {
      e.preventDefault();
      $(this).tab('show');
    });

</script>

{% endblock content %}