{% extends 'layout.html' %}
{% block body %}
  <p class="h2" style="color:rgb(213, 216, 190);">Attendance By Group</p>
  <br>
  <div class="row">
    <div class="col-md-6">
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-secondary" type="button">Search!</button>
        </span>
        <input type="text" id="myInput" onkeyup="myFunction()" class="form-control" placeholder="Search for...">
      </div>
    </div>
  </div>
  <br>
  <div class=“container”>
    <div class=“row”>
      <div>
        <table class="table table-dark" id="myTable">
          <thead>
            <tr>
              <th scope="col" class="text-md-center " style="color:#eaf5f1;" onclick="sortTable(0)">Roll Number</th>
              <th scope="col" class="text-md-center " style="color:#eaf5f1;">Name</th>
              <th scope="col" class="text-md-center " style="color:#eaf5f1;" onclick="sortTable(0)">Group</th>
              <th scope="col" class="text-md-center " style="color:#eaf5f1;">Total Days Present</th>
              <th scope="col" class="text-md-center " style="color:#eaf5f1;">Percentage</th>
            </tr>
          </thead>
          <tbody>
          {% if val_len == 0 %}
              <tr>
                <td><h3 style="color:rgb(183, 183, 183);">No Data Found! Please Give a Proper Values</h3></td>
              </tr>

          {% else %}
            {% for row in allValues %}
            <tr>
              <td class="text-md-center">{{row}}</td>
              <td class="text-md-center">{{names_dic[row].upper()}}</td>
              <td class="text-md-center">{{gp}}</td>
              <td class="text-md-center">{{allValues[row]}}</td>
              <td class="text-md-center">{{((allValues[row]/days)*100)|round(2)}}{{' %'}}</td>
            </tr>
            {% endfor %}
          {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="container">
    <button type="button" class="btn btn-secondary btn-sm" name="print" onclick="myPrint()" id ="this_button">Print</button>
  </div>
  <script>
	function sortTable(n) {
	  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
	  table = document.getElementById("myTable");
	  switching = true;
	  // Set the sorting direction to ascending:
	  dir = "asc"; 
	  /* Make a loop that will continue until
	  no switching has been done: */
	  while (switching) {
		// Start by saying: no switching is done:
		switching = false;
		rows = table.getElementsByTagName("TR");
		/* Loop through all table rows (except the
		first, which contains table headers): */
		for (i = 1; i < (rows.length - 1); i++) {
		  // Start by saying there should be no switching:
		  shouldSwitch = false;
		  /* Get the two elements you want to compare,
		  one from current row and one from the next: */
		  x = rows[i].getElementsByTagName("TD")[n];
		  y = rows[i + 1].getElementsByTagName("TD")[n];
		  /* Check if the two rows should switch place,
		  based on the direction, asc or desc: */
		  if (dir == "asc") {
			if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
			  // If so, mark as a switch and break the loop:
			  shouldSwitch = true;
			  break;
			}
		  } else if (dir == "desc") {
			if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
			  // If so, mark as a switch and break the loop:
			  shouldSwitch = true;
			  break;
			}
		  }
		}
		if (shouldSwitch) {
		  /* If a switch has been marked, make the switch
		  and mark that a switch has been done: */
		  rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
		  switching = true;
		  // Each time a switch is done, increase this count by 1:
		  switchcount ++; 
		} else {
		  /* If no switching has been done AND the direction is "asc",
		  set the direction to "desc" and run the while loop again. */
		  if (switchcount == 0 && dir == "asc") {
			dir = "desc";
			switching = true;
		  }
		}
	  }
	}
    function myPrint() {
      window.print();
    }
    function myFunction() {
      // Declare variables
      var input, filter, table, tr, td, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
  </script>
{% endblock %}