{% extends "generic-report.html" %}
{% block title %}Overview Report | Bean Counter {% endblock %}
{% block content %}
<div id="content-main">
<form action="./" method="get">
	Month/Year: <select name="month">
		{{ monthOptions }}
	</select>/<select name="year">
		{{ yearOptions }}</select>
	<input type="submit" value="Generate Report" />
</form>
<br />
<div class="stat-block">
<h2>Bottom Line = ${{net|floatformat:"2"}}</h2>
<table id="total-values" class="data">
    <thead>
        <tr><td class="hide">id</td><td>category</td><td>amount</td></tr>
    </thead>
    <tbody>
		<tr><td class="hide">0</td><td>Money In</td><td>{{income|floatformat:"2"}}</td></tr>
		<tr><td class="hide">1</td><td>Money Out</td><td>{{cogs_plus_expense|floatformat:"2"}}</td></tr>

</tbody></table>
</div>
<div class="graph"><canvas id="total" width="500" height="300"></canvas></div>

<hr />

<div class="stat-block">
<h2>Income = ${{income|floatformat:"2"}}</h2>
<table id="income-values" class="data">
    <thead>
        <tr><td class="hide">id</td><td>category</td><td>amount</td></tr>
    </thead>
    <tbody>
	{% for income in income_list %}
		{% ifnotequal income.1 0 %}
		<tr><td class="hide">{{income.0.id}}</td><td>{{income.0.name}}</td><td>{{income.1|floatformat:"2"}}</td></tr>
		{% endifnotequal %}
	{% endfor %}
</tbody></table>
</div>
<div class="graph"><canvas id="income" width="500" height="300"></canvas></div>

<hr />

<div class="stat-block">
<h2>Cost of Goods Sold = ${{cogs|floatformat:"2"}}</h2>
<table id="cogs-values" class="data">
    <thead>
        <tr><td class="hide">id</td><td>category</td><td>amount</td></tr>
    </thead>
    <tbody>
	{% for cogs in cogs_list %}
		{% ifnotequal cogs.1 0 %}
		<tr><td class="hide">{{cogs.0.id}}</td><td>{{cogs.0.name}}</td><td>{{cogs.1|floatformat:"2"}}</td></tr>
		{% endifnotequal %}
	{% endfor %}
</tbody></table>
</div>
<div class="graph"><canvas id="cogs" width="500" height="300"></canvas></div>

<hr />

<div class="stat-block">
<h2>Expense = ${{expense|floatformat:"2"}}</h2>
<table id="expense-values" class="data">
    <thead>
        <tr><td class="hide">id</td><td>category</td><td>amount</td></tr>
    </thead>
    <tbody>
	{% for expense in expense_list %}
		{% ifnotequal expense.1 0 %}
		<tr><td class="hide">{{expense.0.id}}</td><td>{{expense.0.name}}</td><td>{{expense.1|floatformat:"2"}}</td></tr>
		{% endifnotequal %}
	{% endfor %}
</tbody></table>
</div>
<div class="graph"><canvas id="expense" width="500" height="300"></canvas></div>






<script type="text/javascript">
	
	var totalLabels = [{label: 'Money In', v: 0}, {label: 'Money Out', v: 1}];
    var total = new Layout("bar", {'xTicks' : totalLabels});
    total.addDatasetFromTable("dataset1", $("total-values"), xcol = 0, ycol = 2);
    total.evaluate();

	var incomeLabels = [{{income_labels}}];
   	var income = new Layout("pie", {"xTicks" : incomeLabels} );
    income.addDatasetFromTable("dataset1", $("income-values"), xcol = 0, ycol = 2);
    income.evaluate();

	var cogsLabels = [{{cogs_labels}}];
	var cogs = new Layout("pie", {"xTicks" : cogsLabels});
    cogs.addDatasetFromTable("dataset1", $("cogs-values"), xcol = 0, ycol = 2);
    cogs.evaluate();

	var expenseLabels = [{{expense_labels}}];
	var expense = new Layout("pie", {"xTicks" : expenseLabels});
    expense.addDatasetFromTable("dataset1", $("expense-values"), xcol = 0, ycol = 2);
    expense.evaluate();


    
    var totalGraph = new SweetCanvasRenderer($("total"), total);
    totalGraph.render();
	var incomeGraph = new SweetCanvasRenderer($("income"), income);
    incomeGraph.render();
	var expenseGraph = new SweetCanvasRenderer($("expense"), expense);
    expenseGraph.render();
	var cogsGraph = new SweetCanvasRenderer($("cogs"), cogs);
    cogsGraph.render();

</script>
</div>
{% endblock %}