{% extends 'professor_dashboard.html' %}
{% block body %}
<div class="row align-items-center d-flex  justify-content-center">
    <div class="col-12 mb-4">
        <div class="card border-light shadow-sm components-section align-items-center d-flex  justify-content-center">
            <div class="card-body align-items-center d-flex justify-content-center">     
                <div class="row mb-4">
					{% if(callresults is not none) %}
                    <div class="col-lg-12 col-sm-16">
        <h3 class="h3 text-center">DELETE QUESTIONS</h3>  
      </div>
    <div class="card-body">
        <div id="msg1"></div>
        <div class="table-responsive">
            <table class="table table-centered table-nowrap mb-0 rounded">
                <thead class="thead-light">
                <tr>
                    <th class="border-0" scope="col"><input id="check_all" type="checkbox"></th>
                    <th class="border-0" scope="col" >QID</th>
                    <th class="border-0" scope="col" >QUESTION</th>
                    <th class="border-0" scope="col" >MARKS</th>
                </tr>
                 <tbody>
{% for res in callresults%}
              <tr>
                    <td><input type="checkbox" name="row-check" value="{{ res['qid'] }}"></td>
                    <td>{{res['qid']}}</td>
                    <td>{{res['q']}}</td>
                    <td>{{res['marks']}}</td>
                </tr>
{% endfor %}
                      </tbody>
            </table>
        </div>
        <input type="hidden" value="{{tid}}" name="test_id" id="tidjs"/>
        <button id="delete_selected" class="btn btn-block btn-danger">DELETE QUESTIONS</button>
    </div>
</div>
{% else %}
<div class="col-lg-12 col-sm-16">
    <center><lottie-player src="https://assets7.lottiefiles.com/datafiles/vhvOcuUkH41HdrL/data.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player></center>
    <h3 class="h3 text-center">
        No Records Found!
    </h3>  
  </div>
{% endif %}
            </div>
        </div>
    </div>
</div>
<script>
    $(function() {
	$("#check_all").on("click", function () {
		if ($("input:checkbox").prop("checked")) {
			$("input:checkbox[name='row-check']").prop("checked", true);
		} else {
			$("input:checkbox[name='row-check']").prop("checked", false);
		}
	});

	$("input:checkbox[name='row-check']").on("change", function () {
		var total_check_boxes = $("input:checkbox[name='row-check']").length;
		var total_checked_boxes = $("input:checkbox[name='row-check']:checked").length;

		if (total_check_boxes === total_checked_boxes) {
			$("#check_all").prop("checked", true);
		}
		else {
			$("#check_all").prop("checked", false);
		}
	});
	
	$("#delete_selected").on("click", function () {
		var ids = '';
		var comma = '';
        var tiddel = document.getElementById("tidjs").value;
		$("input:checkbox[name='row-check']:checked").each(function() {
			ids = ids + comma + this.value;
			comma = ',';			
		});		
		
		if(ids.length > 0) {
			$.ajax({
				type: "POST",
				contentType: 'application/json',
				url: "/delete_questions/"+tiddel,
				data: JSON.stringify({'qids': ids}),
				dataType: "json",
				cache: false,
				success: function(msg) {
					$("#msg1").html(msg);
                    window.location.reload();
				},
				error: function(jqXHR, textStatus, errorThrown) {
					$("#msg1").html("<span style='color:red;'>" + textStatus + " " + errorThrown + "</span>");
				}
			});
		} else {
			$("#msg1").html('<span style="color:red;">You must select at least one  question for deletion</span>');
		}
	});
});
</script>
{% endblock %}