{% extends '../template.html' %}
{% block title %}Report - Call History{% endblock %}
{% block subcontent %}
<div id="graph" style="width: 620px; height: 450px; margin: 0 auto"></div>
<br/>
<form style="position:absolute;margin-top:-55px;margin-left:70px;">
	<select name="type">
		<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 != "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"/>
</form>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/highcharts.js"></script>
<script type="text/javascript">

	var chart;
	$(document).ready(function() {
		var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
					'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
		var d = new Date("{{date}}");

		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'graph',
				defaultSeriesType: 'line',
				marginRight: 0,
				marginBottom: 85
			},
			title: {
				text: 'Call Statistics'
			},
			subtitle: {
				text: {% if type == "daily"%}monthNames[d.getMonth()] + " " +{%endif%} d.getFullYear()
			},
			xAxis: {
				{% if type == "daily" %}
				categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
				{% else %}
				categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
				{% endif %}
			},
			yAxis: {
				title: {
					text: 'Total'
				},
				plotLines: [{
					value: 0,
					width: 1,
					color: '#808080'
				}]
			},
			tooltip: {
				formatter: function() {
						return '<b>'+ this.y +' Call</b>';
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -10,
				y: 370,
				borderWidth: 0
			},
			series: [{
				name: 'Total Call',
				data: [{% for d in report.total_call %}{{d}}{%if !loop.last %},{%endif%}{%endfor%}]
			},{
				name: 'Total Order Call',
				data: [{% for d in report.total_order_call %}{{d}}{%if !loop.last %},{%endif%}{%endfor%}]
			},{
				name: 'Total Complaint Call',
				data: [{% for d in report.total_complaint_call %}{{d}}{%if !loop.last %},{%endif%}{%endfor%}]
			},{
				name: 'Total Other Call',
				data: [{% for d in report.total_other_call %}{{d}}{%if !loop.last %},{%endif%}{%endfor%}]
			}]
		});
	});
		
</script>

<script type="text/javascript">
	$(document).ready(function() {
		$("tspan").each(function(){if($(this).text() =="Highcharts.com") $(this).hide(); });
		$("select[name=type]").change(function() {
			if ($(this).val() == "daily") {
				$(".daily").show();$(".monthly").hide();
			}
			else if ($(this).val() == "monthly") {
				$(".daily").hide();$(".monthly").show();
			}
		});
	});
</script>
{% endblock %}