{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% block title %}Withdraw consumables{% endblock %}
{% block content %}
	{% if form.errors %}
		<div class="alert alert-danger">
			Oops! Something went wrong. Please correct the errors highlighted below.<br>
			{{ form.non_field_errors }}
		</div>
	{% endif %}
	{% if success %}
		<div class="alert alert-success">{{ success }}</div>
	{% endif %}
	<h1>Withdraw consumables</h1>
	<p>Use this form to charge users for consumable items & supplies.</p>
	<form action="{% url 'consumables' %}" class="form-horizontal" method="post">
		{% csrf_token %}

		<div class="form-group">
			<label class="control-label col-sm-2" for="customer_search">Customer</label>
			<div class="col-sm-4">
				{% if form.cleaned_data.customer %}
					<input type="text" class="form-control" id="customer_search" placeholder="Search for a customer" style="display:none">
					<input type="button" id="chosen_customer" class="btn btn-default" onclick="clear_selected_customer()" value="{{ form.cleaned_data.customer }}">
					<input type="hidden" id="customer" name="customer" value="{{ form.cleaned_data.customer.id }}">
				{% else %}
					<input type="text" class="form-control" id="customer_search" placeholder="Search for a customer">
					<input type="button" id="chosen_customer" class="btn btn-default" style="display:none" onclick="clear_selected_customer()">
					<input type="hidden" id="customer" name="customer">
				{% endif %}
			</div>
			{% if form.customer.errors %}
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form.customer.errors|striptags }}
				</div>
			{% endif %}
		</div>

		<div class="form-group">
			<label class="control-label col-sm-2" for="project">Project</label>
			<div class="col-sm-4">
				<select id="project" name="project" class="form-control" {% if not projects %}disabled{% endif %}>
					{% if projects|length == 0 %}
						<option>{% if form.cleaned_data.customer %}No active projects!{% endif %}</option>
					{% elif projects|length == 1 %}
						<option value="{{ projects.0.id }}">{{ projects.0 }}</option>
					{% elif projects %}
						<option disabled selected>Choose a project to bill</option>
						{% for p in projects %}
							<option value="{{ p.id }}" {% if form.cleaned_data.project.id == p.id %}selected{% endif %}>{{ p }}</option>
						{% endfor %}
					{% endif %}
				</select>
			</div>
			{% if form.project.errors %}
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form.project.errors|striptags }}
				</div>
			{% endif %}
		</div>

		<div class="form-group">
			<label class="control-label col-sm-2" for="consumable">Consumable</label>
			<div class="col-sm-4">
				<select id="consumable" name="consumable" class="form-control">
					{% regroup consumables by category as categories %}
					{% for category in categories %}
						<option>&nbsp;</option>
						<optgroup label="{{ category.grouper|default_if_none:"Uncategorized" }}">
							{% for item in category.list %}
								<option value="{{ item.id }}" {% if form.cleaned_data.consumable.id == item.id %}selected{% endif %}>{{ item.name }}</option>
							{% endfor %}
						</optgroup>
					{% endfor %}
				</select>
			</div>
			{% if form.consumable.errors %}
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form.consumable.errors|striptags }}
				</div>
			{% endif %}
		</div>

		<div class="form-group">
			<label class="control-label col-sm-2" for="quantity">Quantity</label>
			<div class="col-sm-4">
				<input type="number" min="1" inputmode="numeric" pattern="[0-9]*" id="quantity" name="quantity" class="form-control">
			</div>
			{% if form.quantity.errors %}
				<div class="col-sm-6 form-control-static danger-highlight">
					{{ form.quantity.errors|striptags }}
				</div>
			{% endif %}
		</div>

		<input type="submit" class="btn btn-default" value="Make withdraw">
	</form>

	<script type="text/javascript">
		function clear_selected_customer()
		{
			$("#chosen_customer").val('').hide();
			$("#customer_search").typeahead('val', '').show().focus();
			$("#customer").val('');
			$('#project').find('option').remove().end().attr('disabled', 'disabled');
		}

		function fetch_projects(jquery_event, search_selection, dataset_name)
		{
			$('#customer_search').hide();
			$('#chosen_customer').val(search_selection.name).show();
			$('#customer').val(search_selection.id);
			ajax_get("{% url 'get_projects' %}", {'user_id': search_selection.id}, update_projects);
		}

		function update_projects(response, status, xml_http_request)
		{
			$('#project').find('option').remove().end().removeAttr('disabled');
			var projects = response['projects'];

			if(response.projects.length === 0)
				$('#project').append($('<option/>', {text: "No active projects!"})).attr('disabled', 'disabled');
			else if(response.projects.length === 1)
				$('#project').append($('<option/>', {value: response['projects'][0].id, text: response['projects'][0].name}));
			else
			{
				$('#project').append($('<option/>', {
					text: "Choose a project to bill",
					disabled: true,
					selected: true
				}));
				$.each(response['projects'], function(count, project)
				{
					$('#project').append($('<option/>', {value: project.id, text: project.name}));
				});
			}
		}

		function on_load()
		{
			$('#customer_search').autocomplete('users', fetch_projects, {{ users|json_search_base }}).focus();
		}

		$(on_load);

	</script>

{% endblock %}