{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% load static %}
{% block title %}Usage and billing information{% endblock %}
{% block extrahead %}
	<script type="text/javascript" src="{% static "pickadate/picker.js" %}"></script>
	<script type="text/javascript" src="{% static "pickadate/picker.date.js" %}"></script>
	<script type="text/javascript" src="{% static "pickadate/picker.time.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "pickadate/default.css" %}"/>
	<link rel="stylesheet" type="text/css" href="{% static "pickadate/default.date.css" %}"/>
	<link rel="stylesheet" type="text/css" href="{% static "pickadate/default.time.css" %}"/>
{% endblock %}
{% block content %}
	<h1>Usage and billing information
		<small> between {{ start_date|date:"F jS, Y" }} and {{ end_date|date:"F jS, Y" }}</small>
	</h1>
	<p>
		This page presents a monthly report of your NanoFab usage and billing information. Approved adjustments are reflected in the Billing information data but not in the Usage data.
	</p>
	<div style="height: 20px"></div>
	<form class="form-horizontal" role="form">
		<div class="form-group">
			<label class="control-label col-sm-2">Select month</label>
			<div class="col-sm-2">
				<select id="month_list" class="form-control" style="margin-right: 5px;" onchange="set_dates_from_month(this.value)">
					<option selected></option>
					{% for month in month_list %}
						<option>{{ month|date:"F, Y" }}</option>
					{% endfor %}
				</select>
			</div>
		</div>
		<div class="form-group">
			<div class="control-label col-sm-2">
				or from
			</div>
			<div class="col-sm-2">
				<input type="text" id="start_date" name="start_date" class="form-control select-date" placeholder="Choose a date">
			</div>
			<div class="control-label col-sm-1" style="width: 3%">
				to
			</div>
			<div class="col-sm-2">
				<input type="text" id="end_date" name="end_date" class="form-control select-date" placeholder="Choose a date">
			</div>
			{% if not project_autocomplete %}
				<div class="col-sm-2">
					<input type="submit" class="btn btn-success" value="Update">
				</div>
			{% endif %}
		</div>
		<input id="type" name="type" type="hidden" value="{{ kind|default:'' }}"/>
		<input id="id" name="id" type="hidden" value="{{ identifier|default:'' }}"/>

		<script>
			$('#start_date').pickadate({format: "mm/dd/yyyy", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, selectYears: true, selectMonths: true, closeOnSelect: true, onStart: set_start_date});
			$('#end_date').pickadate({format: "mm/dd/yyyy", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, selectYears: true, selectMonths: true, closeOnSelect: true, onStart: set_end_date});
			function set_start_date()
			{
				if('{{ start_date }}')
					this.set('select', '{{ start_date|date:"Y-m-d" }}', {format: 'yyyy-mm-dd'})
			}
			function set_end_date()
			{
				if('{{ end_date }}')
					this.set('select', '{{ end_date|date:"Y-m-d" }}', {format: 'yyyy-mm-dd'})
			}
			function set_dates_from_month(month_input) {
				var month = moment(month_input, "MMMM, YYYY");
				var firstOfMonth = month.startOf('month').format('MM/DD/YYYY');
				var lastOfMonth = month.endOf('month').format('MM/DD/YYYY');

				var start_picker = $('#start_date').pickadate('picker');
				var end_picker = $('#end_date').pickadate('picker');
				start_picker.set('select', firstOfMonth, { format: 'mm/dd/yyyy' });
				end_picker.set('select', lastOfMonth, { format: 'mm/dd/yyyy' });
			}
			function set_dropdown_selected() {
			    if ('{{ start_date }}' && '{{ end_date }}') {
					var start = moment('{{ start_date|date:'m/d/Y' }}');
					var end = moment('{{ end_date|date:'m/d/Y' }}');
					if (start.month() == end.month() && start.year() == end.year() && start.format('MM/DD/YYYY') == start.startOf('month').format('MM/DD/YYYY') && end.format('MM/DD/YYYY') == end.endOf('month').format('MM/DD/YYYY')) {
					    var month = start.format("MMMM, YYYY");
						$('#month_list').val(month)
					}
				}
			}
			$(set_dropdown_selected());
		</script>

		{% if project_autocomplete %}
			<div class="form-group">
				<label class="control-label col-sm-2" for="search"><strong>For</strong></label>
				<div class="col-sm-4" id="search_container" style="width: 36.4%;">
					<input id="search" type="text" class="form-control" style="width: 100%" autofocus {% if selection %}placeholder="{{ selection }}"{% else %}placeholder="Search for an account, application or project"{% endif %}>
				</div>
				<div class="col-sm-2">
					<input type="submit" class="btn btn-success" value="Update">
				</div>
			</div>
			<script>
				function get_account(jquery_event, search_selection)
				{
					$('#type').val(search_selection.type);
					$('#id').val(search_selection.id);
				}
				function on_load()
				{
					$('#search').autocomplete('accounts_and_projects_for_usage', get_account, {% json_search_base_with_extra_fields accounts_and_applications %});
				}
				$(on_load);
			</script>

			<style>
				#search_container .tt-dropdown-menu
				{
					min-width: 400px;
					max-height: 600px;
				}
			</style>

		{% endif %}

	</form>

	<div style="height: 5px; border-top: 1px dotted #eee"></div>
	{% if not project_autocomplete or project_autocomplete and selection %}
		{% block usage_content %}{% endblock %}
	{% endif %}
{% endblock %}