{% extends '../template.html' %}
{% block title %}Report - Agent{% endblock %}
{% block subcontent %}
<h1>Report - Agent</h1>
<h2><a href="{% nav admin_report_agent %}">List Agent</a> | <a href="{% nav admin_report_agent_performance %}">Agent Performance</a> | Agent Attendance</h2>
<b>Date : <font size=3><input type="text" id="date_picker" value="{{tgl}}"></font></b><br/><br/>
<input type="button" onClick=window.print() value=Print />
<br/>---------------------------------------------------------------------------------<br/>
{% block print %}
<b>Absensi Agent Tanggal {{tgl}}</b><br/><br/>
{% if report.length > 0 %}		
<table class="data">
	<tr>
		<th>Time</th>
		<th>Agent</th>
		<th>Role</th>
		<th>Status</th>
	</tr>
	{% for r in report %}
		<tr class="{{r.id}}" valign="top">
			<td>{{r.jam}}</td>
			<td>{{r.username}}</td>
			<td>{{r.role}}</td>
			<td>{{r.activity}}</td>
		</tr>
	{% endfor %}
</table>
<div id="current_time" year="{{current.year}}" month="{{current.mon}}" day="{{current.mday}}" hour="{{current.hours}}" minute="{{current.minutes}}" second="{{current.seconds}}"></div>
{% else %}
	- Data Kosong -<br/><br/>
{% endif %}
{% endblock %}
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	var select_temp = "";
	$(document).ready(function() {
		$("#date_picker").glDatePicker({
			cssName: "android",
			selectedDate:new Date("{{tgl_js}}"),
			startDate: new Date("{{tgl_js}}"),
		    allowOld: true,
			onChange: function(target, newDate)
				{
					var month= ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Des"];
					target.val
					(
						newDate.getDate()  + "-" +
						month[newDate.getMonth()] + "-" +
						newDate.getFullYear() 
					);
					
					location.href = "{% nav admin_report_agent_attendance %}?tgl=" + newDate.getDate()  + "-" + (newDate.getMonth() + 1) + "-" + newDate.getFullYear();
				}
		});
	});
</script>
{% endblock %}