let headers = document.querySelectorAll('.percentage_header');
headers.forEach(header => header.addEventListener('click', sortAll));

var sortDir = 1;

var mainTable = document.querySelector('.main_results_table');
var mainTableRows =  Array.from(mainTable.querySelectorAll('.main_table_rows'));

var individualRowsFromMainTableRows = document.querySelectorAll('.individual_rows');

function sortAll() {

  individualRowsFromMainTableRows.forEach(function(row) {
    individualStudentResults = Array.from(individualRowsFromMainTableRows.querySelectorAll(".single_test_row"));
    individualStudentResults.sort(function(a,b){
      if(a.querySelector(".percentage_value") == undefined) return 1;
      if(b.querySelector(".percentage_value") == undefined) return 0;
      return sortDir == -1 ? (a.querySelector(".percentage_value").textContent > b.querySelector(".percentage_value").textContent) : (a.querySelector(".percentage_value").textContent < b.querySelector(".percentage_value").textContent);
      // return parseFloat(a.querySelector(".theory_percentage_value").textContent) - parseFloat(b.querySelector(".theory_percentage_value").textContent) * sortDir;
    })
    individualStudentResults.forEach(individualStudentResult => individualRowsFromMainTableRows.appendChild(individualStudentResult));
  })

  mainTableRows.sort((a, b) => sortDir * (getVal(a) - getVal(b)));
  mainTableRows.forEach(mainTableRow => mainTable.appendChild(mainTableRow));
  sortDir = -sortDir
}

function getVal(rw) {
    var a = parseFloat(rw.querySelector('.individual_rows .single_test_row .percentage_value').textContent);
    return a ? a : 0;
}