{% extends 'base.html' %}
{% load static %}
{% load custom_tags_and_filters %}
{% block title %}Order History{% endblock %}
{% block content %}
	<h1>Order History</h1>

	<h3>Pending Requests</h3>
	<p>{{ user.first_name }}'s requests that haven't been fulfilled yet.</p>
	
	<table class="table">
		<thead>
		<tr>
			<th>Item</th>
			<th style="width: 85px">Qty</th>
			<th>Project</th>
			<th>Date of Request</th>
			<th class="button-column-minimum">Cancel Request?</th>
		</tr>
		</thead>
		<tbody>
		{% for p in pending_orders %}
			{% if not p.deleted %}
			<tr class="pending_request_row_{{ p.id }}">
				<td><label class="form-control-static" for="{{ p.id }}_qty_input">{{ p.consumable }}</label></td>
				<td>
					<input required pattern="[0-9]*" class="form-control" type="number" id="{{ p.id }}_qty_input" value="{{ p.quantity }}" onchange="update_qty_in_pending_order('{{ p.id }}_qty_input', '{{ p.id }}')">
				</td>
				<td><div class="form-control-static">{{ p.project }}</div></td>
				<td><div class="form-control-static">{{ p.date }}</div></td>
				<td class="text-right"><a href="{% url 'cancel_order' p.id %}" class="btn btn-danger" type="delete">Cancel</a></td>
			</tr>
			{% endif %}
		{% empty %}
            <tr><td colspan="7">
                {% if start_date or end_date %}
                    There are no pending requests for {{ user.first_name }} {{ user.last_name }}.
                {% endif %}
            </td></tr>
		{% endfor %}
		</tbody>
	</table>

	<br>

	<h3>Fulfilled Requests</h3>
	<p>{{ user.first_name }}'s requests that have been fulfilled.</p>
	
	<table class="table">
		<thead>
		<tr>
			<th>Item</th>
			<th>Qty</th>
			<th>Project</th>
			<th>Date Fulfilled </th>
			<th>Date of Request</th>
			<th>Order Fulfilled By</th>
		</tr>
		</thead>
		<tbody>
		{% for f in fulfilled_orders %}
			{% if not f.deleted %}
			<tr class="fulfilled_request_row_{{ f.id }}">
				<td>{{ f.consumable }}</td>
				<td>{{ f.quantity }}</td>
				<td>{{ f.project }}</td>
				<td>{{ f.withdraw.date }}</td>
				<td>{{ f.date }}</td>
				<td>{{ f.withdraw.merchant.first_name }} {{ f.withdraw.merchant.last_name }}</td>
			</tr>
			{% endif %}
		{% empty %}
            <tr><td colspan="7">
                {% if start_date or end_date %}
                    There are no fulfilled requests for {{ user.first_name }} {{ user.last_name }}.
                {% endif %}
            </td></tr>
		{% endfor %}
		</tbody>
	</table>

	<br>
	
	<h3>Deleted Requests</h3>
	<p>{{ user.first_name }}'s requests that have been deleted.</p>
	
	<table class="table">
		<thead>
		<tr>
			<th>Item</th>
			<th>Qty</th>
			<th>Project</th>
			<th>Date Deleted</th>
			<th>Date of Request</th>
		</tr>
		</thead>
		<tbody>
		{% for d in deleted_orders %}
			<tr class="fulfilled_request_row_{{ f.id }}">
				<td>{{ d.consumable }}</td>
				<td>{{ d.quantity }}</td>
				<td>{{ d.project }}</td>
				<td>{{ d.date_deleted }}</td>
				<td>{{ d.date }}</td>
			</tr>
		{% empty %}
            <tr><td colspan="7">
                {% if start_date or end_date %}
                    There are no deleted requests for {{ user.first_name }} {{ user.last_name }}.
                {% endif %}
            </td></tr>
		{% endfor %}
		</tbody>
	</table>

	<script type="text/javascript">
        function update_qty_in_pending_order(input_box_id, pending_request_id)
        {
            let input_field = document.getElementById(input_box_id);
            if (input_field.reportValidity())
            {
				let new_qty = input_field.value;
				pending_request_id *= 1  // convert pending_request_id argument from a string to a number
				let data = {
					'update_pending_request_id': pending_request_id,
					'update_quantity': new_qty
				};
				ajax_post('{% url 'update_qty_in_pending_order' %}', data);
            }
        }
    </script>


{% endblock %}