{% include 'includes/header.html' %}
{% include 'includes/warning.html' %}

<!-- Page contents -->
<p class="page_title">Add a new item</p>
<form action= "/iteminsert" name="add_item" enctype="multipart/form-data" method="POST" onsubmit="return validateForm(event);">
<div class="container-flex">
	<div >Name</div>
	<div>
		<input id="item_name" type="text" placeholder="Item name" name="item_name" autofocus >
	</div>
	<div >Box Number</div>
	<div >
               {% if prov_box_num == 0 %}
		<input name="box_num" id="box_num" type="text" size="5" placeholder="Box #" >
               {% else %}
                <input name="box_num" id="box_num" type="text" size="5" value="{{prov_box_num}}" >
               {% endif %}
	</div>
	<div >Category</div>
	<div >
		<input list="item_cat" name="item_cat" placeholder="Uncategorized">
			<datalist id="item_cat">
		        {% for cat_num , cat_name in categories%}
			        <option value="{{cat_name}}">{{cat_name}}</option>
		        {%endfor%}
			</datalist>
	</div>
	<div >Description (Optional)</div>
        <div >
                <textarea rows="4" cols="40" name="item_desc" id="item_desc"></textarea>
        </div>
        <div>
                <input type="radio" id="no" name="photo_yes_no" value="no" checked>
                <label>No photo</label>
        </div>
        <div>
		<input type="radio" id="yes" name="photo_yes_no" value="yes">
               	<label>Photo</label><br>
	</div>
	<div >
       	        <input class="form-control" type="file" id="file" name="file" accept="image/*"><br>
	</div>
	<div>
		<button type="submit" class="imps add button_small">
			Add 
		</button>
	</div>
</div>

</form>

<!-- Modal dialog and form validation HTML -->


<script>

document.getElementById("file").addEventListener("click", radioButtonSwitchPhoto);

function radioButtonSwitchPhoto(){
   alert
   radiobtn = document.getElementById("yes");
   radiobtn.checked = true;
}
</script>

<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() {
  let name_input = document.forms["add_item"]["item_name"].value;
  if (name_input == ""){
    //alert("Item name is required");
    modal.style.display = "block";
    document.getElementById('err_message').innerHTML="An item name is <br>required.";
    span.onclick = function() {
        modal.style.display = "none";
    }
    return false;
  }

  let num_input = document.forms["add_item"]["box_num"].value;
  if (num_input == ""){
    modal.style.display = "block";
    document.getElementById('err_message').innerHTML="You must enter a <br>box number.";
    span.onclick = function() {
        modal.style.display = "none";
    }

    return false;
  }

  let new_num_input = document.forms["add_item"]["box_num"].value;
    if (isNaN(new_num_input)){
      modal.style.display = "block";
      document.getElementById('err_message').innerHTML=" "+new_num_input+" is not a number.";
      span.onclick = function() {
          modal.style.display = "none";
    }
    return false;
  }

  var num_to_check = Number(num_input) ;
  const valid_numbers = {{available_boxes}};
  if (valid_numbers.includes(num_to_check)!=1) {
    //alert("That box number is not valid");
    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;
  }
}
</script>
{% include 'includes/footer.html' %}