<style>
#drop_zone {
  border: 5px solid green;
  margin: 10px auto;
  padding: 50px;
  width:  500px;
  height: 100px;
  text-align: center;
}

#error_message {
  color:darkred;
}

table, th, td {
  border: 1px solid green;
  border-collapse: collapse;
}

td, th {
  padding: 4px;
  border-left:0px;
  border-right:0px;
}

button#clear_all {
  color:red;
  font-weight:bold;
  margin: 20px 0px;"
}

table button {
  color: red;
}

pre {
  margin-left:20px;
}
</style>


<script src="/static/lib/papaparse/papaparse-5.0.2.min.js"></script>

<script>
var account_data = [];

function dragOverHandler(ev) {
  ev.preventDefault();
  document.getElementById("drop_zone").style.backgroundColor = "lightgreen";
}

function dragLeaveHandler(ev) {
  ev.preventDefault();
  document.getElementById("drop_zone").style.backgroundColor = "";
}

function dropHandler(ev) {
  console.log('File(s) dropped');
  ev.preventDefault();
  document.getElementById("drop_zone").style.backgroundColor = "";

  // Try to obtain file handle
  var file;
  if (ev.dataTransfer.items) {
    if (ev.dataTransfer.items.length != 1) {
      alert("Bitte nur eine Datei ablegen!");
      return;
    }
    if (ev.dataTransfer.items[0].kind === 'file') {
      file = ev.dataTransfer.items[0].getAsFile();
    }
    else {
      return;
    }
  } else {
    if (ev.dataTransfer.files.length != 1) {
      alert("Bitte nur eine Datei ablegen!");
      return;
    }
    file = ev.dataTransfer.files[0];
  }

  console.log('Got file: file.name = ' + file.name);

  // Read file:
  var reader = new FileReader();
  reader.onload = fileLoadHandler;
  reader.readAsText(file);
}

function fileLoadHandler(event) {
  // Clear everything
  document.getElementById("data").innerHTML = "";
  account_data = [];

  var counter = 0;
  var skiplines = 0;

  var has13 = false;

  // event.target.result contains the text due to calling readAsText()
  var data = Papa.parse(event.target.result).data;

  for (var i = 0; i < data.length; i++) {
    var acc = [];

    if (data[i].length < 4) {
      // Count errors except for empty lines
      if (data[i].length > 1 || (data[i].length == 1 && data[i][0] != "")) {
        skiplines++;
      }
      continue;
    }
      
    // Check if line is valid:
    var line_valid = true;  
    for (var j = 0; j < 4; j++) {
      // Skip line if any name is longer than 128 chars
      if (data[i][j].length > 128) {
        break;
        line_valid = false; 
      }
    }
    if (!line_valid) {
      skiplines++;
      continue;   
    }
      
    data[i][1] = parseInt(data[i][1]);
      
    if (!(data[i][1] >= 0 && data[i][1] <= 13)) {
      skiplines++;
      continue;
    }
    if (data[i][1] == 13) {
      has13 = true;
    }

    for (var j = 0; j < 4; j++) {
      acc.push(data[i][j]);
    }
      
    // Everything looks fine, lets create some nodes!
    var tr = document.createElement("tr");
    tr.id = "tr" + counter;
    var td = document.createElement("td");
    td.innerHTML = "<a href=\"javascript:skipEntry(" + counter + ");\"><button>Löschen</button></a>";
    tr.appendChild(td);
    for (var j = 0; j < 4; j++) {
      var td = document.createElement("td");
      td.innerText = acc[j];
      tr.appendChild(td);
    }
    document.getElementById("data").appendChild(tr);

    // And add the accont data:
    account_data.push({skip: false, data: acc});

    counter++;
  }

  document.getElementById("result").style.display = "";
  if (skiplines > 0) {
      document.getElementById("error_message").innerText = "Es wurden " + skiplines + " Zeilen ausgelassen, die nicht den Vorgaben entsprachen!";
  } else {
      document.getElementById("error_message").innerText = "";
  }

  if (has13) {
    document.getElementById("g8").disabled = true;
    document.getElementById("g9").checked = true;
  }
  else {
    document.getElementById("g8").disabled = false;
    document.getElementById("g8").checked = true;
  }
}

function skipEntry(i) {
  account_data[i].skip = true;

  document.getElementById("tr" + i).remove();
}

function clearEverything() {
  account_data = [];

  // Reset display
  document.getElementById("data").innerHTML = "";
  document.getElementById("result").style.display = "none";
}

function copyDataBeforeSend() {
  var isg9 = document.getElementById("g9").checked;
  console.log(isg9);    
      
  // Copy data of non-removed accounts into array to send
  var send_data = [];
    for (var i = 0; i < account_data.length; i++) {

    if (account_data[i].data[1] >= 11 && isg9) {
       account_data[i].data[1] += 100;
    }
    account_data[i].data[1] += "";
    if (!account_data[i].skip) {
      send_data.push(account_data[i].data);
    }
  }

  // Sort by group name
  send_data.sort(function (a, b) {return (a[0]).localeCompare(b[0]);});

  // Set form data
  document.getElementById("send_data").value = JSON.stringify(send_data);
}
</script>


<body ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragleave="dragLeaveHandler(event);" style="overflow-y:scroll;">
   <div style="width:800px; margin: 10px auto;">

      <h1>Gruppen per CSV-Upload anlegen</h1>
      <p><a href="/">Zur Startseite</a></p>
      <p><a href=".">Zur Gruppenübersicht</a></p>
      
     <p>Hier können Sie Gruppen und Accounts über eine CSV-Datei anlegen. Schieben Sie dazu die CSV-Datei auf das grüne Feld.</p>

     <p>Die hochzuladene CSV-Datei muss den folgenden Kriterien genügen:
        <ul>
           <li>Die CSV-Datei muss Komma- oder Tab-getrennt sein</li>
           <li>Die Datei muss in UTF-8 (Unicode UTF-8) kodiert sein</li>
           <li>Die Datei muss mindestens vier Spalten enthalten. Alle weiteren Spalten werden ignoriert.
              <ol>
                 <li>Der Name der Gruppe. (Es können mehrere Gruppen in einer Datei definert sein.)</li>
                 <li>Die Jahrgangsstufe des Teilnehmers.</li>
                 <li>Der Vorname des Teilnehmers.</li>
                 <li>Der Nachname des Teilnehmers.</li>
              </ol>
              Diese vier Spalten entsprechen den ersten vier Spalten der CSV-Dateien für den Upload zum Informatik-Biber.
           </li>
        </ul>

        Ein Beispiel könnte so aussehen:
        <pre>
Gruppenname,Stufe,Vorname,Nachname
7a,7,Gabi,Musterfrau
7a,7,Max,Mustermann
Info19,12,Ferdinand,Fallbeispiel</pre>
        </p>

     <p>Im Anschluss auf den Upload haben Sie hier noch die Möglichkeit einzelne Zeilen zu löschen (z. B. Kopfzeilen) bevor Sie die Gruppen anlegen. Angelegte Gruppen lassen sich nicht mehr löschen.</p>
  </div>
   
  <div id="drop_zone">
    <p>CSV-Datei hier hineinschieben …</p>
  </div>

  <div id="result" style="display:none; width:800px; margin: 10px auto;">
    <div style="float:left;margin:40px;width:300px;">
      <form action="csv" method="post" onsubmit="copyDataBeforeSend();" style="margin:40px">
        <input type="hidden" name="group_data" id="send_data">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <input type="radio" name="gymnasium" value="g8" id="g8"> <label for="g8"> G8 </label> <input type="radio" name="gymnasium" value="g9" id="g9"> <label for="g9"> G9 </label><br>&nbsp;<br>
        <input type="submit" style=" color:blue;" value="Gruppen erstellen"></input><br>
      </form>
      <p>Bitte prüfen Sie vorher, dass alle Daten korrekt sind und Umlaute richtig dargestellt werden. Löschen Sie eventuell vorhandene Kopfzeilen. Kein Name darf länger als 100 Zeichen lang sein.
      <br>Die Auswahl G8/G9 betrifft nur Schülerinnen und Schüler ab Jahrgangsstufe 11.</p>
      <p id="error_message"></p>
    </div>
    <a href="javascript:clearEverything();" style=""><button id="clear_all">Alle Löschen</button></a><br/>
    <table>
      <thead>
        <tr><th></th><th>Gruppe</th><th>Jgst.</th><th>Vorname</th><th>Nachname</th></tr>
      </thead>
      <tbody id="data">
      </tbody>
    </table>
  </div>
</body>
