{% extends 'base.html' %}
{% load static %}
{% block title %}Review contests{% endblock %}
{% block extrahead %}
	<script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "datetimepicker/bootstrap-datetimepicker.css" %}"/>
{% endblock %}
{% block content %}
	<h1>Review Contests</h1>

	<p>This page summarizes all unvalidated transactions that have contest submissions ready for admin approval. Transactions highlighted in
	<span class="warning-highlight">orange</span> indicates that the transaction has contests remaining to be approved.</p>

	<p>By clicking on a transaction row, its contests will be listed in a new window. Contests are listed below the current transaction data,
		where a contest highlighted in <span class="danger-highlight">red</span> indicate the requested changes. Contests highlighted in
		<span class="success-highlight">green</span> have previously been approved by an admin. If changes has been made to the original
		values of the transaction, a copy of the original transaction will be saved and highlighted in <span style="color: #ccc">gray</span>.</p>

	{% if sc_contests.exists %}
	<h3>Staff Charges</h3>
	<table class="table">
		<thead>
		<tr>
			<th>ID</th>
			<th>Staff Member</th>
			<th>Customer</th>
			<th>Project</th>
			<th>Start</th>
			<th>End</th>
		</tr>
		</thead>
		<tbody>
		{% regroup sc_contests by transaction as staff_charges %}
		{% for s in staff_charges %}
		<tr {% if s.grouper.id in sc_contest_list %}class="warning-highlight"{% endif %} id="sc_{{ s.grouper.id }}"
				style="border-top: 2px solid #ddd; cursor: pointer" onclick="fetch_contest_details('{% url 'review_sc_contests' s.grouper.id %}', 'staff_charge')">
			<td id="sc_{{ s.grouper.id }}_id">{{ s.grouper.id }}</td>
			<td id="sc_{{ s.grouper.id }}_staff_member">{{ s.grouper.staff_member }}</td>
			<td id="sc_{{ s.grouper.id }}_customer">{{ s.grouper.customer }}</td>
			<td id="sc_{{ s.grouper.id }}_project">{{ s.grouper.project }}</td>
			<td id="sc_{{ s.grouper.id }}_start">{{ s.grouper.start }}</td>
			<td id="sc_{{ s.grouper.id }}_end">{{ s.grouper.end }}</td>
		</tr>
		{% endfor %}
		</tbody>
	</table>
	{% endif %}

	{% if ue_contests.exists %}
	<h3>Usage Events</h3>
	<table class="table">
		<thead>
		<tr>
			<th>ID</th>
			<th>Operator</th>
			<th>Customer</th>
			<th>Project</th>
			<th>Start</th>
			<th>End</th>
			<th>Tool</th>
		</tr>
		</thead>
		<tbody>
		{% regroup ue_contests by transaction as usage_events %}
		{% for u in usage_events %}
			<tr {% if u.grouper.id in ue_contest_list %}class="warning-highlight"{% endif %} id="ue_{{ u.grouper.id }}"
					style="border-top: 2px solid #ddd; cursor: pointer" onclick="fetch_contest_details('{% url 'review_ue_contests' u.grouper.id %}', 'usage_event')">
				<td id="ue_{{ u.grouper.id }}_id">{{ u.grouper.id }}</td>
				<td id="ue_{{ u.grouper.id }}_operator">{{ u.grouper.operator }}</td>
				<td id="ue_{{ u.grouper.id }}_user">{{ u.grouper.user }}</td>
				<td id="ue_{{ u.grouper.id }}_project">{{ u.grouper.project }}</td>
				<td id="ue_{{ u.grouper.id }}_start">{{ u.grouper.start }}</td>
				<td id="ue_{{ u.grouper.id }}_end">{{ u.grouper.end }}</td>
				<td id="ue_{{ u.grouper.id }}_tool">{{ u.grouper.tool }}</td>
			</tr>
		{% endfor %}
		</tbody>
	</table>
	{% endif %}

	<!-- Modal body for reviewing transactions -->
	<div class="modal fade" id="review_transaction_contests" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content" style="overflow-x: scroll"></div>
		</div>
	</div>
	<div class="modal fade" id="review_aar_contests" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content" style="overflow-x: scroll"></div>
		</div>
	</div>

	<script>
		function display_contests(response, transaction_type)
		{
			let modal_jq = transaction_type == 'area_access_record' ? $( '#review_aar_contests' ) : $( '#review_transaction_contests' );
			modal_jq.find( '.modal-content' ).html(response);
			modal_jq.modal('show');
		}

		function fetch_contest_details(url, transaction_type)
		{
			let failure_dialog = ajax_failure_callback("Unable to display contests");
			ajax_get(url, undefined, function(response) { return display_contests(response, transaction_type) }, failure_dialog);
		}

		$('#review_aar_contests').on('hidden.bs.modal', function () {
			$("#review_aar_contests .modal-content").empty();
		});

		$('#review_transaction_contests').on('hidden.bs.modal', function () {
			$("#review_transaction_contests .modal-content").empty();
		});

		function approve_sc_change(url, button, staff_charge, c_counter, c_reason)
		{
			$(button).hide();
			$("#sc_contest_row_" + c_counter).attr('class', 'success-highlight');

			// Update models
			let failure_dialog = ajax_failure_callback("Unable to approve contest");
			ajax_post(url, undefined, undefined, failure_dialog);

			if( c_reason != "area" )
			{
				// Add row for original Staff Charge if not yet created
				if( $("#staff_charge_orig").length == 0 )
				{
					// Build table row to add
					let orig_sc_row = "<tr style='color: #ccc'>";
					orig_sc_row += "<td id='staff_charge_orig' colspan='2'>Original Transaction</td>";
					orig_sc_row += "<td>" + $( "#sc_customer" ).text() + "</td>";
					orig_sc_row += "<td>" + $( "#sc_project"  ).text() + "</td>";
					orig_sc_row += "<td>" + $( "#sc_start"	  ).text() + "</td>";
					orig_sc_row += "<td>" + $( "#sc_end" 	  ).text() + "</td>";
					orig_sc_row += "<td></td>";
					orig_sc_row += "</tr>";

					// Add row
					$("tr[id^='sc_contest_row_']").last().after(orig_sc_row);
				}

				// Update staff charge rows
				switch( c_reason )
				{
					case "customer":
						$("#sc_customer").text($("#sc_contest_customer_" + c_counter).text());
						$("#sc_" + staff_charge + "_customer").text($("#sc_contest_customer_" + c_counter).text());
						break;
					case "project":
						$("#sc_project").text($("#sc_contest_project_" + c_counter).html());
						$("#sc_" + staff_charge + "_project").text($("#sc_contest_project_" + c_counter).html());
						break;
					case "datetime":
						$("#sc_start").text($("#sc_contest_start_" + c_counter).html());
						$("#sc_end").text($("#sc_contest_end_" + c_counter).html());

						$("#sc_" + staff_charge + "_start").text($("#sc_contest_start_" + c_counter).html());
						$("#sc" + staff_charge + "_end").text($("#sc_contest_end_" + c_counter).html());
						break;
				}
			}

			// Check if there are any remaining contests to approve
			if( $( "#review_transaction_contests .btn-success:visible" ).length == 0 )
			{
				$("#sc_" + staff_charge).prop('class', '');
			}
		}

		function approve_ue_change(url, button, usage_event, c_counter, c_reason)
		{
			// Update contest row styles
			$(button).hide();
			$("#ue_contest_row_" + c_counter).attr('class', 'success-highlight');

			// Update models
			let failure_dialog = ajax_failure_callback("Unable to approve contest");
			ajax_post(url, undefined, undefined, failure_dialog);

			// Add row for original Usage Event if not yet created
			if( $("#usage_event_orig").length == 0 )
			{
				// Build table row to add
				var orig_ue_row = "<tr style='color: #ccc'>";
				orig_ue_row += "<td id='usage_event_orig' colspan='2'>Original Transaction</td>";
				orig_ue_row += "<td>" + $( "#ue_user" 	 ).text() + "</td>";
				orig_ue_row += "<td>" + $( "#ue_project" ).text() + "</td>";
				orig_ue_row += "<td>" + $( "#ue_start" 	 ).text() + "</td>";
				orig_ue_row += "<td>" + $( "#ue_end" 	 ).text() + "</td>";
				orig_ue_row += "<td>" + $( "#ue_tool" 	 ).text() + "</td>";
				orig_ue_row += "<td></td>";
				orig_ue_row += "</tr>";

				// Add row
				$("tr[id^='ue_contest_row_']").last().after(orig_ue_row);
			}

			// Update usage event row displayed in modal and in main page
			switch( c_reason )
			{
				case "customer":
					$("#ue_user").text($("#ue_contest_user_" + c_counter).text());
					$("#ue_" + usage_event + "_user").text($("#ue_contest_user_" + c_counter).text());
					break;
				case "project":
					$("#ue_project").text($("#ue_contest_project_" + c_counter).html());
					$("#ue_" + usage_event + "_project").text($("#ue_contest_project_" + c_counter).html());
					break;
				case "datetime":
					$("#ue_start").text($("#ue_contest_start_" + c_counter).html());
					$("#ue_" + usage_event + "_start").text($("#ue_contest_start_" + c_counter).html());

					$("#ue_end").text($("#ue_contest_end_" + c_counter).html());
					$("#ue_" + usage_event + "_end").text($("#ue_contest_end_" + c_counter).html());
					break;
				case "tool":
					$("#ue_tool").text($("#ue_contest_tool_" + c_counter).html());
					$("#ue_" + usage_event + "_tool").text($("#ue_contest_tool_" + c_counter).html());
					break;
			}

			// Check if there are any remaining contests to approve
			if( $( "#review_transaction_contests .btn-success:visible" ).length == 0 )
			{
				$("#ue_" + usage_event).prop('class', '');
			}
		}
	</script>
{% endblock %}