{% extends '../template.html' %}
{% block title %}Report - Agent{% endblock %}
{% block subcontent %}
{% block print %}
<h1>Report - Agent</h1>
<h2><a href="{% nav admin_report_agent %}">List Agent</a> | Agent Performance | <a href="{% nav admin_report_agent_attendance %}">Agent Attendance</a></h2>
<form>
	<b>Agent: 
	<select name="option" id="">
		<option value="0">---- All ----</option>
		{% for a in agent %}
		<option value="{{a.id}}" {% if id == a.id %}selected="selected"{% endif %}>{{a.username | capitalize }}</option>
		{% endfor %}
	</select>
	<br/><br/>
	Time :
	<select name="type">
		<option {% if type == "hourly" %}selected="selected"{% endif %} value="hourly">Hourly</option>
		<option {% if type == "daily" %}selected="selected"{% endif %} value="daily">Daily</option>
		<option {% if type == "monthly" %}selected="selected"{% endif %} value="monthly">Monthly</option>
	</select>
	<span {% if type != "hourly" %}style="display:none;"{% endif %} class="hourly">
		- {% date hourly year[2011-2030] %}
	</span>
	<span {% if type != "daily" %}style="display:none;"{% endif %} class="daily">
		- {% date daily year[2011-2030] nodate %}
	</span>
	<span {% if type != "monthly" %}style="display:none;"{% endif %} class="monthly">
		- {% date monthly year[2011-2030] nodate nomonth%}
	</span>	<input type="submit" value="Go"/></b>
</form>
<br/>
<input type="button" onClick=window.print() value=Print />
<br/><br/>
<div style="margin-left:15px;">
	<table class="data" cellpadding="0" cellspacing="0" border="1">
		<tr>
			<th rowspan=2 width=20><center>{{ type }}</center></th>
			<th colspan=3><center>Call (inbound)</center></th>
			<th colspan=2><center>Call (outbound)</center></th>
			<th colspan=2><center>Order</center></th>
		</tr>
		<tr>
			<th width=60><center>Order</center></th>
			<th width=60><center>Complaint</center></th>
			<th width=60><center>Remark</center></th>
			<th width=60><center>1st Call</center></th>
			<th width=60><center>Remark</center></th>
			<th width=60><center>Cancel</center></th>
			<th width=60><center>Divert</center></th>
		</tr>
		{% for r in report %}
		<tr>
			<td>{{r.val}}</td>
			<td><font color={% if r.order != "0" %}"red"{% else %}"grey"{% endif %}>{{r.order}}</font></td>
			<td><font color={% if r.complaint != "0" %}"red"{% else %}"grey"{% endif %}>{{r.complaint}}</font></td>
			<td><font color={% if r.remark_in != "0" %}"red"{% else %}"grey"{% endif %}>{{r.remark_in}}</font></td>
			<td><font color={% if r.fcall != "0" %}"red"{% else %}"grey"{% endif %}>{{r.fcall}}</font></td>
			<td></td>
			<td><font color={% if r.cancel != "0" %}"red"{% else %}"grey"{% endif %}>{{r.cancel}}</font></td>
			<td><font color={% if r.divert != "0" %}"red"{% else %}"grey"{% endif %}>{{r.divert}}</font></td>
		</tr>
		{% endfor %}
	</table>
</div>
{% endblock %}
{% endblock %}
{% block script %}
<script type="text/javascript">
	var d = new Date("{{date}}");
	$(document).ready(function() {
		$(".loading").hide();
		$("table.data").show().css('width',$("#container").width() - 200);
		$("select[name=type]").change(function() {
			if ($(this).val() == "daily") {
				$(".daily").show();$(".hourly").hide();$(".monthly").hide();
			}
			else if ($(this).val() == "monthly") {
				$(".daily").hide();$(".hourly").hide();$(".monthly").show();
			}
			else if ($(this).val() == "hourly") {
				$(".daily").hide();$(".monthly").hide();$(".hourly").show();
			}
		});
		var y = (d.getFullYear()-2010);
		$("select[name=hourly_date] option:nth-child("+d.getDate()+")").attr('selected', "selected");
		$("select[name=hourly_month] option:eq("+d.getMonth()+")").attr('selected', "selected");
		$("select[name=hourly_year] option:nth-child("+y+")").attr('selected', "selected");
	});
</script>
{% endblock %}