{% extends "layout.html" %}
{% set active_page = "orders" -%}
{% set order_items = order.group_by_user() -%}
{% set courier_or_admin = not current_user.is_anonymous() and (current_user.is_admin() or current_user.id == order.courier_id) -%}

{% import "utils.html" as util %}

{% block container %}
<div class="row">
	<div class="col-md-push-1 col-md-10 darker order_overview" id="info"><!-- Shitty html -->
		<h3 id="order-title">Order {{ order.id }}
		<div class="pull-right">
			{% if order.can_close(current_user.id) -%}
			<form action="{{ url_for('order_bp.close_order', order_id=order.id) }}" method="post" style="display:inline">
				<input type="submit" class="btn btn-danger" value="Close"></input>
			</form>
			{% endif %}{% if courier_or_admin %}
				<a class="btn btn-warning" href="{{ url_for('order_bp.order_edit', order_id=order.id) }}">Edit</a>
		{%- endif %}
		</div></h3>
		courier: {{ order.courier.username }}
		{% if order.courier == None and not current_user.is_anonymous() %}
		<form action="{{ url_for('order_bp.volunteer', order_id=order.id) }}" method="post" style="display:inline">
			<input type="submit" class="btn btn-primary btn-sm" value="Volunteer"></input>
		</form>
		{% endif %}
		<br/>
		location: {% if order.location %}
			<a href="{{ url_for('general_bp.location', location_id=order.location_id) }}">{{ order.location_name }}</a>
		{% else %}
			{{ order.location_name }}
		{% endif %}<br/>
		{% if order.location.telephone != None %}
			telephone: <a href="tel://{{ order.location.telephone }}">{{ order.location.telephone }}</a><br/>
		{% endif %}
		start: {{ order.starttime.strftime("%d/%m/%Y %H:%M") }}<br>
		{% if order.stoptime %}
			closing time: {{ order.stoptime.strftime("%H:%M") }} (<span class="time">{{  order.stoptime|countdown }}</span>)
		{% else %}open{% endif %}<br/>
		total price: {{ total_price|euro }} {% if courier_or_admin %}- remaining debts: {{ debts|euro }}{% endif %}
	</div>
	{% if form -%}
	<div class="col-md-push-1 col-md-10 darker order_order" id="form">
		<h4>Order:</h4>
		<form method="post" action="{{ url_for('order_bp.order_item_create', order_id=order.id) }}">
			<span class="pull-right">
				<a class="btn btn-primary" onclick="chooseRandom()">Choose for me</a>
			</span>
			{{ form.csrf_token }}
			<div class="form-group select2-container select2 {{ 'has-errors' if form.dish_id.errors}}">
				{{ form.dish_id.label(class='control-label') }}<br>
				{{ form.dish_id(class='form-control select') }}
				{{ util.render_form_field_errors(form.dish_id) }}
			</div>

			<input type="hidden" name="form_for_dish" value="{{ dish.id }}" />
			<div id="dish_choices">
				{% if dish and dish.choices %}
					{% for (choice_type, choice) in dish.choices %}
						<div class="form-group select2-container select2">
							<label class="control-label" for="choice_{{ choice.id }}">{{ choice.name }}</label><br/>
							<select
								{{ "multiple=multiple" if choice_type=="multi_choice" else "required=required" }}
								name="choice_{{ choice.id }}"
								class="form-control select">
								{% for option in choice.options %}
								<option value="{{ option.id }}"><!--
									-->{{ option.name }}{{ ": " + option.price|euro if option.price else "" }}<!--
									-->{{ " (" + option.description + ")" if option.description else "" }}<!--
								--></option>
								{% endfor %}
							</select>
						</div>
					{% endfor %}
				{% endif %}
			</div>

			<div class="form-group {{ 'has-errors' if form.dish_id.errors }}">
				{{ form.comment.label(class='control-label') }}<br>
				{{ form.comment(class='form-control', placeholder='Fill in comment, when applicable') }}
				{{ util.render_form_field_errors(form.comment) }}
			</div>

			{% if current_user.is_anonymous() %}
				<div class="form-group{{ ' has-error' if form.user_name.errors }}{{ ' required' if form.user_name.flags.required }}">
					{{ form.user_name.label(class='control-label') }}
					{{ form.user_name(class='form-control', placeholder='Fill in your name...') }}
					{{ util.render_form_field_errors(form.user_name) }}
				</div>
			{% endif %}
			<div class="form-group" style="padding-top: 8px;">
				{{ form.submit_button(class='btn btn-primary') }}
				{% if not dish %}
					<div id="submit-reveals-options-msg">If the chosen dish has options, they will be shown when you press submit, before adding the item to the order.</div>
				{% endif %}
			</div>
		</form>
	</div>
	{%- endif %}
</div>
<div class="row" id="items">
	<div class="col-md-push-1 col-md-5 darker order_items" id="items-list">
		<h3>Items</h3>
		<table class="table table-hover table-condensed">
			<thead>
				<tr><th>Name</th><th>Item</th><th>Price</th>{% if courier_or_admin %}<th>Paid?</th>{% endif %}<th>Delete</th></tr>
			</thead>
			<tbody>
			{% for item in order.items -%}
				<tr>
					<td>{{ item.get_name() }}</td>
					<td><span title="{{ item.comment if item.comment }}">{{ item.dish_name }}{{ "*" if item.comment }}</span></td>
					<td>{{ item.price|euro }}</td>
					{% if courier_or_admin %}
						<td>
							{% if not item.paid %}
								<form action="{{ url_for('order_bp.item_paid', order_id=order.id, item_id=item.id) }}" method="post" style="display:inline">
									<input type="submit" class="btn btn-xs btn-primary" value="Pay"></input>
								</form>
							{% else %} <span class="glyphicon glyphicon-chevron-down"></span>
							{% endif %}
						</td>
					{% endif %}
					<td>
					{% if item.can_delete(order.id, current_user.id, session.get('anon_name', '')) -%}
						<form action="{{ url_for('order_bp.delete_item', order_id=order.id, item_id=item.id) }}" method="post" style="display:inline">
							<button class="btn btn-link" type="submit"><span class="glyphicon glyphicon-remove"></span></button>
						</form>
					{%- endif %}<br/></td>
				</tr>
			{%- endfor %}
			</tbody>
		</table>
	</div>
	<div class="col-md-push-2 col-md-4 darker box order_ordered" id="items-ordered">
		<h3>Ordered dishes: {{ order.items.count() }}</h3>
		<a class="divLink" href="{{ url_for('order_bp.items_showcase', order_id=order.id) }}"></a>
		{% for key, value in order.group_by_dish().items() -%}
			<div class="product">
				{{ key }}: {{ value["count"] }}
				{% if value["comments"]|any -%}
					<ul class="comments">
					{% for comment in value["comments"] -%}
						<li>{% if comment %}{{ comment }}
						{% else %}<i>No comment</i>
						{% endif %}</li>
					{% endfor %}
					</ul>
				{%- endif %}
			</div>
		{%- endfor %}
	</div>
</div>
<div class="row">
	<div class="col-md-push-1 col-md-5 darker order_depts" id="debts">
			<h3>Debts</h3>
			<table class="table table-hover table-condensed">
				<thead>
					<tr><th>Name</th><th>Total</th><th>To pay</th>{% if courier_or_admin %}<th>Paid?</th>{% endif %}</tr>
				</thead>
				<tbody>
				{% for key, value in order_items.items() -%}
					<tr>
						<td>{{ key }}</td>
						<td>{{ value["total"]|euro }}</td>
						<td>{{ value["to_pay"]|euro }}</td>
						{% if courier_or_admin %}
							<td>
								{% if not value["to_pay"] == 0 %}
									<form action="{{ url_for('order_bp.items_user_paid', order_id=order.id, user_name=key) }}" method="post" style="display:inline">
										<input type="submit" class="btn btn-xs btn-primary" value="Pay"></input>
									</form>
								{% else %}
									<span class="glyphicon glyphicon-chevron-down"></span>
								{% endif %}
							</td>
						{% endif %}
					</tr>
				{%- endfor %}
				</tbody>
			</table>
	</div>
</div>
{% endblock %}

{% block styles %}
	{{ super() }}
	<link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}" />
	<link rel="stylesheet" href="{{ url_for('static', filename='css/select2-bootstrap.min.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}">
{% endblock %}
{% block scripts %}
	{{ super() }}
	<script src="{{ url_for('static', filename='js/select2.min.js') }}"></script>
	<script type="text/javascript">
		function sortArg(sortable) {
			return sortable.sort();
		}
		var select = $(".select").select2({"sorter": sortArg});

		var options = select[0].options;
		function chooseRandom() {
			var index = Math.floor((Math.random() * options.length))
			var choice = options[index]
			select.val(choice.value).trigger("change")
		}

{% if order.location %}
		function updateChoices() {
			$("#submit-reveals-options-msg").hide(0);
			$dish_choices = $("#dish_choices");
			$dish_choices.addClass("loading");

			var dish_id = $("#dish_id").val();
			var url = "{{ url_for('general_bp.location_dish', location_id=order.location.id, dish_id='DISHID') }}".replace("DISHID", encodeURI(dish_id));
			$dish_choices.find("select").attr("disabled", "disabled");

			$.get(url)
				.done(function(data) {
					$dish_choices.html("");

					for (var i in data) {
						var choice = data[i];
						var id = "choice_" + choice["id"];

						var label = $("<label class='control-label'/>")
							.attr("for", id)
							.text(choice["name"] +
								(choice["price"] ? ": € " + choice["price"] / 100 : "") +
								(choice["description"] ? " (" + choice["description"] + ")" : "")
							);

						var choiceSelect = $("<select class='form-control select' />")
							.attr("id", id)
							.attr("name", id);
						if (choice.type === "multi_choice") {
							choiceSelect.attr("multiple", "multiple");
						} else {
							choiceSelect.attr("required", "required");
						}

						for (var j in choice["options"]) {
							var option = choice["options"][j];
							choiceSelect.append(
								$("<option />").text(
									option["name"] +
									(option["price"] ? ": € " + option["price"] / 100 : "") +
									(option["description"] ? " (" + option["description"] + ")" : "")
								).attr("value", option["id"])
							);
						}

						$dish_choices
							.append(
								$("<div class='form-group select2-container select2'>")
									.append(label, "<br/>", choiceSelect),
								" "
							);
						choiceSelect.select2({"sorter": sortArg});
					}
					$dish_choices.removeClass("loading");
				}).fail(function() {
					$("#dish_choices").html("Could not load choices");
					$dish_choices.removeClass("loading");
					$("#submit-reveals-options-msg").show(0);
				});
		}
		$("#dish_id").on("change", updateChoices);
		updateChoices();
{% endif %}
	</script>
{% endblock %}