{% include 'includes/header.html' %}
{% include 'includes/warning.html' %}
<!-- Page content -->
<p class="page_title">Enter box number to show contents </p>
<form action="/boxshowcontent/" method = "POST" name="select_box" onsubmit="return validateForm(event);">
	<div>
		<input type="text" id="box-num" name="box-num" size="5" autofocus>
	</div>
	<div>
		<button type="submit" class="imps box_full button_small"default>Box</button>
	</div>
</form>

<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}

function validateForm() {
const numForm = document.forms.select_box;
let num_input = document.forms["select_box"]["box-num"].value;
var num_to_check = Number(num_input) ;

if (num_input == ""){
//alert("Box number is required");
modal.style.display = "block";
document.getElementById('err_message').innerHTML="You must enter a box number.";
span.onclick = function() {
modal.style.display = "none";
}
return false;
}

// Check the the number is a number not string

if (isNaN(num_input)){
modal.style.display = "block";
document.getElementById('err_message').innerHTML="Box numbers must be numerals.";
span.onclick = function() {
modal.style.display = "none";
}
return false;
}


// Check the the number is a box that is currently in use

const valid_numbers = {{available_boxes}};
if (valid_numbers.includes(num_to_check)!=1) {
modal.style.display = "block";
document.getElementById('err_message').innerHTML="Box "+num_to_check+" is not in use. <br>Please select a different<br> box number.";
span.onclick = function() {
modal.style.display = "none";
}
return false;
}

route_var="/boxshowcontent/"+num_to_check;
numForm.action=route_var;
document.getElementById("select_box").submit();
}
</script>
{% include 'includes/footer.html' %}