
<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 %}
<tr></tr>
  <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="KORREKT" class="check{{i}}"></td>
  <td ><input type="checkbox" id="TVETYDIGT" class="check{{i}}"></td>
  <td ><input type="checkbox" id="IKKE_KORREKT" 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>