
<html>

  <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="static/jquery.min.js"></script>
  
  <title>Review side</title>
  <style>
  /* body{
  background-color: grey;
  } */
  table{
  width:85vw;
  float:"left";
  margin: 2vw
  }
  #sent{
  width: 40vw;
  }
  #id{
  display: none;
  }
  #sumbmitbtn{
  height: 100vh; /* Full-height: remove this if you want "auto" height */
  width: 13vw; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 5vw;
  text-align: center;
  color: white;
  }
  #sumbmitbtn button{
  height: 5vh;
  margin-left:1vw;
  color: black
  }
  p{
  font-size: large;
  }
  
  table { 
              border-collapse: collapse; 
  } 
  th { 
    background-color:black; 
    Color:white; 
  } 
  th, td { 
    width:150px; 
    text-align:center; 
    border:1px solid black; 
    padding:5px 
  
  }
  
  </style>
  </head>
  
  <body>
  
  <table>
  <tr>
    <th id="id">paragraph_id</th>
    <th id="sent">paragraph_text</th>
    <th>Annotation</th>
    <th>Extract</th>
    <th>Correct</th>
    <th>Unclear</th>
    <th>Not correct</th>
  </tr>
  {% for i, row in enumerated_paragraph_texts %}
    <td id="id">{{row[0]}}</td>
    <td id="sent">{{row[1]}}</td>
    <td>{{row[2]}}</td>
    <td>{{row[3]}}</td>
    <td ><input type="checkbox" id="CORRECT" class="check{{i}}"></td>
    <td ><input type="checkbox" id="UNCELAR" class="check{{i}}"></td>
    <td ><input type="checkbox" id="NOT_CORRECT" class="check{{i}}"></td>
  </tr>
  {% endfor %}
  <div id="sumbmitbtn">
    <button>Submit review</button>
    <br><br>
    Antal kontrolerede:<br> 
    <p id="n_kontrolerede">0</p>
    Antal paragraph_texts i alt:<br> 
    <p>{{total}}</p>
  </div>
  </table>
  
  <!--
    Her skal der indsættes en tabel, der viser hver annoteret sætning,
    samt den kattegori, den er blevet annoteret til, og det tekst/tal, 
    der skal extractkes.
    Herudoer skal der være en check-box, der muliggører en andenpart at
    validere og reviewe at annotringer er korrekte. 
  -->  
  
  <script>
  
  function check_count(){
    var n_kontrolerede = $(":checkbox:checked").length;
    $('#n_kontrolerede').text(n_kontrolerede);
  }
  
  $(document).ready(check_count());
  
  $(":checkbox").change(function(){
    var check_class = $(this).attr("class");
    $('.' + check_class).not(this).prop('checked', false);
    check_count()
  });
  
  $("#sumbmitbtn button").on("click", function(){
    var action = "submit"
    // Data per row:
    // sent id, annotator number, annotated korrekt?
    $("#sumbmitbtn button").fadeOut(500);
    $("#sumbmitbtn button").fadeIn(500);
  
    var paragraph_ids = []
    var who_verified = []
    var verifications = []
  
    $(":checkbox:checked").each(function(){
      var paragraph_id = $(this).parents("td").siblings("#id").text()
      var verification = $(this).attr("id")
      var annotator_name = '{{session["username"]}}'
  
      paragraph_ids.push(paragraph_id)
      who_verified.push(annotator_name)
      verifications.push(verification)
    });
  
    console.log(paragraph_ids, who_verified, verifications)
  
    $.ajax({
      type: "POST",
      contentType: "application/json",
      traditional: "true",
      data: JSON.stringify({action, paragraph_ids, 
                            who_verified, 
                            verifications}),
      dataType: "json",
      success: function(){
        console.log("SUCCES")
      }, 
      error: function(xmlHttpRequest, textStatus, errorThrown){
          console.log("something is still wrong the return values")
          document.write(xmlHttpRequest.responseText)
          document.close() 
          },
      })
  
    $(window).scrollTop(0)
  });
  
  </script>
  
  </body>
  
  </html>