{% extends "cms/admin_home.html" %}
{% load sekizai_tags static i18n %}

{% block content %}
<div class="row">
<div class="col-md-12 col-sm-12 mb-4">
	<h4>{% trans "Choose Financial Basis" %}</h4>

	<div class="btn-group" role="group" aria-label="Financial Bases">
			<a href="{% url base_view current_year %}" type="button" class="btn btn-outline-secondary {% if basis == 'accrualDate' %}active{% endif %}">{% trans "Accrual Date (Default)" %}</a>
			<a href="{% url base_view current_year %}?basis=paymentDate" type="button" class="btn btn-outline-secondary {% if basis == 'paymentDate' %}active{% endif %}">{% trans "Payment/Receipt Date" %}</a>
			<a href="{% url base_view current_year %}?basis=submissionDate" type="button" class="btn btn-outline-secondary {% if basis == 'submissionDate' %}active{% endif %}">{% trans "Submission Date" %}</a>
	</div>

</div>
<div class="float-left col-sm-8">
	<dl>
		<dt>{% trans "School Revenues (YTD)" %}:</dt><dd>{{ statement.revenues_ytd|floatformat:2 }}</dd>
		<dt>{% trans "School Expenses (YTD)" %}:</dt><dd>{{ statement.expenses_ytd|floatformat:2 }}</dd>
		<dt>{% trans "Pending Expenses" %}:</dt>
		<dd>{% trans "Awaiting Approval and Payment" %}: {{ statement.expenses_awaiting_approval|floatformat:2 }}</dd>
		{% if statement.expenses_awaiting_payment > 0 %}
			<dd>{% trans "Approved, Awaiting Payment" %}: {{ statement.expenses_awaiting_payment|floatformat:2 }}</dd>
		{% endif %}
		{% if statement.expenses_paid_notapproved > 0 %}
			<dd>{% trans "Paid, Not Approved" %}: {{ statement.expenses_paid_notapproved|floatformat:2 }}</dd>
		{% endif %}
		<dt>{% trans "Current Balance" %}:</dt><dd>{{ statement.current_balance|floatformat:2 }}</dd>
	</dl>
</div>

{% if perms.financial.export_financial_data %}
<div class="col-sm-4">
	<h5>{% trans "Export Financial Data (CSV)" %}</h5>
	<div class="btn-group" role="group" aria-label="...">
	  <a href="{% url base_view_csv current_year %}" class="btn btn-outline-secondary">{% trans "This View" %}</a>
	  <a href="{% url 'allexpensesCSV' current_year %}" class="btn btn-outline-secondary">{% trans "All Expenses" %}</a>
	  <a href="{% url 'allrevenuesCSV' current_year %}" class="btn btn-outline-secondary">{% trans "All Revenues" %}</a>
	</div>
</div>
{% endif %}
</div>

<div class="card mt-4">
<h4 class="card-header">{% trans "School Performance Over Time" %}</h4>
<div class="card-body">
	<div id="periodicchart"></div>
	<div class="btn-group" role="group" aria-label="..." id='chartselector_buttons'>
	  <button type="button" class="btn btn-outline-secondary active" data-y-accessor='profit'>{% trans "Profits" %}</button>
	  <button type="button" class="btn btn-outline-secondary" data-y-accessor='registrations'>{% trans "Registrations" %}</button>
	  <button type="button" class="btn btn-outline-secondary" data-y-accessor='revenues'>{% trans "Revenues" %}</button>
	  <button type="button" class="btn btn-outline-secondary" data-y-accessor='expenses'>{% trans "Expenses" %}</button>
	</div>
</div>
</div>


<div class="card mt-4">
<h4 class="card-header">{% trans "Details By Period" %}</h4>
<div class="card-body">
	<table class="table">
	<thead>
		<tr>
			<td rowspan="2"></td><td rowspan="2">{% trans "# Registrations" %}</td><td rowspan="2">{% trans "Total Revenue" %}</td><td colspan="4">{% trans "Total Expenses" %}</td><td rowspan="2">{% trans "Net Profit" %}</td>
		</tr>
		<tr>
			<td>{% trans "Instruction" %}</td><td>{% trans "Venue Rental" %}</td><td>{% trans "Other" %}</td><td>{% trans "Total" %}</td>
		</tr>
	</thead>
	<tbody>
	{% for this_period in statement.statementByPeriod %}
		<tr>
			<td>
				{% if perms.financial.view_finances_detail %}
				<a href="{% spaceless %}
					{% if period_type == 'date' %}
						{% url 'financialDateDetailView' this_period.period_date.year this_period.period_date.month this_period.period_date.day %}
					{% else %}
						{% url 'financialMonthDetailView' this_period.period_date.year this_period.period_date.month %}
					{% endif %}
					{% endspaceless %}">
					{{ this_period.period_name }}
				</a>
				{% else %}
					{{ this_period.period_name }}
				{% endif %}
			</td>
			<td>{{ this_period.registrations }}</td>
			<td>{{ this_period.revenues|floatformat:2 }}</td>
			<td>{{ this_period.expenses.instruction|floatformat:2 }}</td>
			<td>{{ this_period.expenses.venue|floatformat:2 }}</td>
			<td>{{ this_period.expenses.other|floatformat:2 }}</td>
			<td>{{ this_period.expenses.total|floatformat:2 }}</td>
			<td>{{ this_period.net_profit|floatformat:2 }}</td>
		</tr>
	{% endfor %}
	</tbody>
	</table>

	{% if is_paginated %}
	    <div class="pagination">
	        <span class="page-links">
	            {% if page_obj.has_previous %}
	                <a href="?page={{ page_obj.previous_page_number }}">{% trans "previous" %}</a>
	            {% endif %}
	            <span class="page-current">
	                {% blocktrans with thisPage=page_obj.number numPages=page_obj.paginator.num_pages %}
	                Page {{ thisPage }} of {{ numPages }}.
	                {% endblocktrans %}
	            </span>
	            {% if page_obj.has_next %}
	                <a href="?page={{ page_obj.next_page_number }}">{% trans "next" %}</a>
	            {% endif %}
	        </span>
	    </div>
	{% endif %}

</div>
</div>

{% addtoblock "css" %}
	<link rel="stylesheet" type="text/css" href="{% static 'metricsgraphics/metricsgraphics.css' %}"/>
{% endaddtoblock %}
{% addtoblock "js" %}
	<script src="{% static 'moment/moment.min.js' %}"></script>	
{% endaddtoblock %}
{% addtoblock "js" %}
	<script src="{% static 'd3/d3.min.js' %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
	<script src="{% static 'metricsgraphics/metricsgraphics.min.js' %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
	<script type="text/javascript">
	var period_data = [
	{% for this_period in statement.statementByPeriod reversed %}
		{
			'date': new Date('{{ this_period.period_date|date:"Y-m-d" }}'),
			'profit': {{ this_period.net_profit }},
			'registrations': {{ this_period.registrations }},
			'revenues': {{ this_period.revenues }},
			'expenses': {{ this_period.expenses.total }},
		},
	{% endfor %}
	]

	var chart_params = {
	  title: "{% trans 'School Performance By Period' %}",
	  description: "{% trans 'Profits, Revenues, Expenses, and Total Registrations' %}",
	  data: period_data,
	  full_width: true,
	  height: 300,
	  target: "#periodicchart",
	  x_accessor: "date",
	  y_accessor: "profit",
	  interpolate: "monotone",
	  area: false
	}

	$(document).ready(function() {

		MG.data_graphic(chart_params);

		$('#chartselector_buttons button').click(function() {
		    var new_y_accessor = $(this).data('y-accessor');
		    chart_params.y_accessor = new_y_accessor;

		    // change button state
		    $(this).addClass('active').siblings().removeClass('active');

		    // update data
		    delete chart_params.xax_format;
		    MG.data_graphic(chart_params);
		});

	});
	</script>
{% endaddtoblock %}
{% endblock %}