{% include 'includes/header.html' %}
{% include 'includes/warning.html' %}
<!-- Page contents -->
<div class="row pb-3">
<p class="page_title">Delete a box</p>
<br>
</div>
<form name="del_box_form" id="del_box_form" action="/delboxconf" method = "POST" onsubmit="return validateForm();">
<input type="hidden" name="box_del_from" value="/boxdel">
<div class="container-flex>
        <div class="row mt-auto">
                <div class="col">Enter box number to delete: 
			<input autofocus type="text" size="5" id="box_to_del" name="box_to_del" value="{{box_to_del}}">
                </div>
        </div>
	<div style="padding-top: 10px;">
		<b>Choose what to do with items assigned ot this box:</b>
	</div>
		<p>
			<input type="radio" id="orphan" name="item_handling" value="orphan" checked> Delete box only, leave items.
		</p>
		<p>
                        <input type="radio" id="move" name="item_handling" value="move"> Delete box, move all items to a different box.
		</p>
		<p>
                	<input type="radio" id="delete" name="item_handling" value="delete"> Delete box and all items in it.
		</p>
	<div class="row mt-4">
		<div class="col align-auto-self-start"> 
                        <button type="submit" id="submit_button" class="imps trash button_small">
                        	&nbsp;Next
			</button>
		</div>
        </div>   
</div>
</form>

<!-- Modal dialog and form validation HTML -->
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

document.getElementById("submit_button").addEventListener("click", function(event){
  event.preventDefault()
  validateForm();
});

function validateForm() {
    var no_box_selected_flag;
    var no_such_box_flag;
    var not_empty_flag;

    no_box_selected_flag="false";
    let box_num = document.forms["del_box_form"]["box_to_del"].value;
    if (box_num == ""){
        modal.style.display = "block";
        document.getElementById('err_message').innerHTML="You must enter a box number.";
        no_box_selected_flag = "true";
        span.onclick = function() {
            modal.style.display = "none";
        }
        return false;
    }

  // Check the the number is a numeral

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

  //Check if box is in use

    const boxes_in_use = {{box_nums|tojson}};
    //convert to string array for comparison to box_num from form
    boxes_in_use_str = boxes_in_use.map(function(e){return e.toString()});
    no_such_box_flag = "true";
    for (let i=0; i < boxes_in_use.length; i++){
        cur_type = typeof(boxes_in_use_str[i]);
        if (boxes_in_use_str[i] == box_num){
           no_such_box_flag = "false";
        }
    }
    if (no_such_box_flag == "true"){
        modal.style.display = "block";
        document.getElementById('err_message').innerHTML="Box "+box_num+" is not in use. <br>Please select a <br>different box number.";
        span.onclick = function() {
            modal.style.display = "none";
        }
       return false;
    }

//    const not_empty_boxes = {{not_empty_box_num_list|tojson}};
    //convert to string array for comparison
//    used_boxes = not_empty_boxes.map(function(e){return e.toString()});

//    empty_flag = "true";
//    for (let i=0; i < used_boxes.length; i++){
//        cur_type = typeof(used_boxes[i]);
//        if (used_boxes[i] == box_num){
//           empty_flag = "false";
//        }
//    }
//    if (empty_flag == "false"){
//        modal.style.display = "block";
//        document.getElementById('err_message').innerHTML="Box "+box_num+" is not empty.";
//        document.forms["del_box_form"].preventDefault();
//        span.onclick = function() {
//            modal.style.display = "none";
//        }
//    }
//    if (no_box_selected_flag=="false" && no_such_box_flag == "false" && empty_flag == "true"){
//       document.getElementById("del_box_form").submit();
//    }

    var ele = document.getElementsByName('item_handling');
        for (i = 0; i < ele.length; i++) {
            if (ele[i].checked)
                item_handling = (ele[i].value);
        }

    if (item_handling == "move"){
        document.getElementById('del_box_form').action = "/boxmoveitemsconf";
        document.getElementById('del_box_form').submit();
    }
    else if (item_handling == "orphan"){
        document.getElementById('del_box_form').action = "/boxorphanitemsconf";
        document.getElementById('del_box_form').submit();
    }
    else if (item_handling == "delete"){
        document.getElementById('del_box_form').action = "/delboxconf";
        document.getElementById('del_box_form').submit();
    }
    
}

</script>
{% include 'includes/footer.html' %}