{% extends '../template.html' %}
{% block title %}Report - Sales statistic{% 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="bystore">
		<option {% if bystore == 0 %}selected="selected"{% endif %} value=0>All</option>
		{% for k in kstore %}
		<option {% if bystore == k.id %}selected="selected"{% endif %} value={{k.id}}>{{k.kode}}</option>
		{% endfor %}
	</select>
	<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>
		<option {% if type == "15m" %}selected="selected"{% endif %} value="15m">15 Min</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>
	<span {% if type != "15m" %}style="display:none;"{% endif %} class="15m">
		- {% date 15m year[2011-2030] nodate %}
	</span>
	{% if session.user.id_store == 0 %}
	<label><input class="pilihan" value="a" type="checkbox" name="pilihan" />Export</label>
	<input type="submit" value="Go"/>
	{% endif %}
</form>
{% if session.user.id_store != 0 %}
<form style="position:absolute;margin-top:-55px;margin-left:240px;">
	<select name="day">
		<option {% if days == "0" %}selected="selected"{% endif %} value="0">{{date}}</option>
		<option {% if days == "1" %}selected="selected"{% endif %} value="1">1 Hari Lalu</option>
		<option {% if days == "2" %}selected="selected"{% endif %} value="2">2 Hari Lalu</option>
	</select>
	<label><input class="pilihan" value="a" type="checkbox" name="pilihan" />Export</label>
	<input type="submit" value="Go"/>
</form>
{% endif %}
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/highcharts.js"></script>
<script type="text/javascript">
	var d = new Date("{{date}}");
	var chart;
	$(document).ready(function() {
		var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
					'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
		

		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'graph',
				defaultSeriesType: 'line',
				marginRight: 0,
				marginBottom: 75
			},
			title: {
				text: 'Sales Statistics'
			},
			subtitle: {
				text: {% if type == "hourly"%}d.getDate() +" "+monthNames[d.getMonth()] + " " +{%endif%}
				{% if type == "daily"%}monthNames[d.getMonth()] + " " +{%endif%}
				{% if type == "15m"%}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]
				{% endif %}
				
				{% if type== "monthly" %}
				categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
				{% endif %}
				
				{% if type == "hourly" %}
				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]
				{% endif %}
				
				{% if type == "15m" %}
				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]
				{% endif %}
			},
			yAxis: {
				title: {
					text: 'Revenue (Rp)'
				},
				plotLines: [{
					value: 0,
					width: 1,
					color: '#808080'
				}]
			},
			tooltip: {
				formatter: function() {
						return '<b>Rp '+ this.y.formatMoney(0,'.','.') +'</b>';
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -10,
				y: 385,
				borderWidth: 0
			},
			series: [
			{% if session.user.id_store == 0 %}
			{
				name: 'Total Sales',
				data: [{% for d in report.total_sales %}{{d}}{%if !loop.last %},{%endif%}{%endfor%}]
			},
			{% endif %}
			{% if bystore != 0 %}
			{
				name: '{% for k in kstore %}{% if k.id == bystore %}{{ k.kode }}{% endif %}{% endfor %}',
				data: [{% for d in report.store %}{{d}}{%if !loop.last %},{%endif%}{%endfor%}]
			}
			{% endif %}
			]
		});
	});
		
</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") {
				$(".15m").hide();$(".daily").show();$(".hourly").hide();$(".monthly").hide();
			}
			else if ($(this).val() == "monthly") {
				$(".15m").hide();$(".daily").hide();$(".hourly").hide();$(".monthly").show();
			}
			else if ($(this).val() == "hourly") {
				$(".15m").hide();$(".daily").hide();$(".monthly").hide();$(".hourly").show();
			}
			else if ($(this).val() == "15m") {
				$(".15m").show();$(".daily").hide();$(".hourly").hide();$(".monthly").hide();
			}
		});
		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");
		{% if session.user.id_store != "0" %}
		$("select[name=bystore]").attr("disabled",true);
		$("select[name=type]").attr("disabled",true);
		$(".15m").hide()$(".daily").hide();$(".hourly").hide();$(".monthly").hide();
		{% endif %}
	});
</script>
{% endblock %}