{% extends "base.html" %}

{% load crispy_forms_tags %}

{% block content %}
<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading">Log a QSO!</div>
			<div class="panel-body">
				<style scoped>
					#id_call {
						text-transform: uppercase;
					}
					#id_reportRX, #id_reportTX {
						width: 50px;
					}
					#id_ownNo, #id_otherNo {
						width: 75px;
					}
					#id_refStr {
						width: 100px;
						text-transform: uppercase;
					}
					#id_call {
						width: 100px;
					}

					#qso-log-form .form-group:last-child {
						vertical-align: bottom;
					}

				</style>

					<form method="post" id="qso-log-form" class="form-inline" action="{% url "contest:log" %}">
					  <div class="form-group">
						  <label class="control-label">Time</label>
							<div class="controls">
							<p id="id_curr_time" class="form-control-static">{% now "H:i:s" %}</p>
						</div>
					  </div>
						{% crispy form %}
					</form>

			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading">Your QSO log</div>
			<div class="panel-body">
				<table class="table">
					<thead>
						<tr>
							<th>No</th>
							<th>Band</th>
							<th>UTC</th>
							<th>Call</th>
							<th class="hidden-xs">RS-S</th>
							<th class="hidden-xs">RS-R</th>
							<!-- <th class="hidden-xs">No-R</th> -->
							<th>EXC</th>
							<th class="hidden-xs">Remarks</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
				{% for qso in qsos %}
					<tr id="qso-row-{{ forloop.counter0 }}">
						<td>{{ qso.ownNo }}</td>
						<td>{{ qso.band }}</td>
						<td>{{ qso.time|date:"H:i" }}</td>
						<td>{{ qso.call }}</td>
						<td class="hidden-xs">{{ qso.reportTX }}</td>
						<td class="hidden-xs">{{ qso.reportRX }}</td>
						<!-- <td class="hidden-xs">{{ qso.otherNo|default:"&nbsp&nbsp;---" }}</td> -->
						<td>{{ qso.refStr }}</td>
						<td class="hidden-xs">{{ qso.remarks }}</td>
						<td><a href="{% url "contest:logEdit" qso.id %}"><span class="glyphicon glyphicon-pencil"></span></a> <a href="{% url "contest:logDelete" qso.id %}"><span class="glyphicon glyphicon-trash"></span></a></td>
					</tr>
				{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
	// set focus to fucking call field
	// ...i hate javascript so much.
	$('#id_call').focus();

	var log = [{% for qso in qsos %}{call: "{{ qso.call }}", band: "{{ qso.band }}"}{% if not forloop.last %}, {% endif %}{% endfor %}];

	function checkForDupes(e) {
		var call = $("#id_call").val().toUpperCase();
		var band = $("#id_band :selected").text();

		var dupe = false;
		for(var i=0; i<log.length; i++) {
			// hide non-matching QSOs
			if(log[i].call.substr(0, call.length) != call) {
				$("#qso-row-" + i).hide();
			} else {
				$("#qso-row-" + i).show();
			}

			// check if dupe
			if(call == log[i].call && band == log[i].band) {
				dupe = true;
			}
		}

		if(dupe) {
			console.log("DUPE");
			$("#id_call").css('background-color', 'red');
			$("#id_band").css('background-color', 'red');
		} else {
			$("#id_call").css('background-color', 'white');
			$("#id_band").css('background-color', 'white');

		}
	}

	$("#id_call").on("input", checkForDupes);
	$("#id_band").change(checkForDupes);

	// use space to get to the next field for certain fields
	function mvFocusOnSpace(e, newFocusId) {
		if(e.keyCode == 32) {
			$(newFocusId).focus()
			return false;
		}
	}

	$("#id_call").on("keydown", function(e) { return mvFocusOnSpace(e, "#id_refStr"); });
	$("#id_otherNo").on("keydown", function(e) { return mvFocusOnSpace(e, "#id_refStr"); });
	$("#id_refStr").on("keydown", function(e) { return mvFocusOnSpace(e, "#id_call"); });

	// display current time in log form
	function zeropad(n) {
		// srsly, how can javascript not have a printf/zeropad function?
		if(n < 10)
			return "0" + n;
		else
			return "" + n;
	}

	function displayTimeInForm() {
		var d = new Date();
		dstr = zeropad(d.getUTCHours()) + ":" + zeropad(d.getUTCMinutes()) + ":" + zeropad(d.getUTCSeconds());
		$("#id_curr_time").text(dstr);
	}
	window.setInterval(displayTimeInForm, 200);
});

</script>

{% endblock %}