{% extends 'base.html' %}

{% block content %}

<!-- <iframe src="https://pad.vvvvvvaria.org/wordmord.test" height="800" width="800"></iframe> -->
<table>
  <tr>
    <td colspan="3">
<form method="POST">
      <!-- <input type="text" id="my_field" value="" wrap="soft"> -->
   <textarea name="file" id="my_field" wrap="soft" placeholder="Επικόλληση του συνδέσμου του PDF του Ποινικού Κώδικα που βρήκατε στο ηλεκτρονικό ταχυδρομείο σας ή στο ΔΙΑΒΑΣΕΜΕ.txt, εδώ.
"></textarea>
</form>
</td>
</tr>
  <tr>
    <td colspan="3">

      <button id="button3" onclick="readme()">ΔΙΑΒΑΣΕΜΕ.txt</button>
      <button id="button5" onclick="decode()">ΠΡΟΒΟΛΗ ΠΟΙΝΙΚΟΥ ΚΩΔΙΚΑ <img src="{{url_for('static', filename='images/closed.gif')}}"></button>
      <button id="button2" onclick="copy()"> ΑΝΤΙΓΡΑΦΗ ΚΩΔΙΚΑ</button>
      <button id="button1" onclick="transform()">ΜΕΤΑΛΛΑΓΜΕΝΟΣ ΚΩΔΙΚΑΣ</button>
      <button id="button4" onclick="window.open('{{url_for('static', filename='pdf/ΣΧΕΔΙΟ_ΜΕΤΑΛΛΑΓΜΕΝΟΥ_ΠΟΙΝΙΚΟΥ_ΚΩΔΙΚΑ_01.pdf')}}');">ΚΑΤΕΒΑΣΕ ΜΕΤΑΛΛΑΓΜΕΝΟ ΚΩΔΙΚΑ <img src="{{url_for('static', filename='images/open.gif')}}"> </button>

    </td>
  </tr>

  <tr>
    <td>
      <div id="initialpdf">
        <iframe id="inputpdf" src="" height="800rem" width="750rem"></iframe>
      </div>
    </td>
    <td>
<textarea name="empty" contenteditable="true" id="empty_frame" wrap="soft" placeholder="Επιλέξτε και αντιγράψτε το περιεχόμενο του PDF. 
Κάντε επικόλληση του περιεχομένου του Ποινικού Κώδικα εδώ. 
Υπάρχει δυνατότητα επεξεργασίας του επικολλημένου κειμένου. 

Μπορείτε να στείλετε τις τροποποιήσεις που προτείνετε στο mailing list του WordMord https://we.lurk.org/mailman3/lists/wordmord.we.lurk.org/"></textarea>

</td>
    <td class="prevent">
      <iframe id="showmonster" src="{{url_for('static', filename='pdf/ΣΧΕΔΙΟ_ΜΕΤΑΛΛΑΓΜΕΝΟΥ_ΠΟΙΝΙΚΟΥ_ΚΩΔΙΚΑ_01.pdf')}}" height="750rem" width="800rem"></iframe>
<!--<iframe id="showmonster" src="{{url_for('static', filename='pdf/result.pdf')}}" height="800rem" width="750rem"></iframe>-->

    </td>
    
  </tr>


</table>

<script>
var decoded_url

let edited_hocr = document.getElementById("empty_frame").value;

window.addEventListener('DOMContentLoaded', (e) => {
    let input = document.getElementById("empty_frame");
    
    // load default.txt into text area
    try {
        let fileToLoad = 'static/hocr/gynaikoktonia.hocr';
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open('GET', fileToLoad, false);
        xmlhttp.send();
        input.innerHTML = xmlhttp.responseText;
    } catch(DOMException) {
        input.innerHTML = "Error loading file. Maybe related to filepath or CORS?";
    }
});

  function decode() {
    var url = document.getElementById("my_field").value;
    var urlDecode = decodeURIComponent(url);
    decoded_url = url;
    // console.log(urlDecode);




    document.getElementById("my_field").value = urlDecode;
    const showpdf = document.getElementById("inputpdf");
    var textarea = document.getElementById('my_field');
    var result


    function updateResult() {
      result.textContent = textarea.value;
    }

    textarea.addEventListener('keyup', updateResult);
    showpdf.src = textarea.value;
    const pdf = document.getElementById("initialpdf");
    pdf.style.visibility = "visible";
    const button2 = document.getElementById("button2");
    button2.style.visibility = "visible";
    textarea.style.color = "blue";

  }


function readme(){
  window.open('{{url_for('static',filename='ΔΙΑΒΑΣΕΜΕ.txt')}}');
  const button5 = document.getElementById("button5");
    button5.style.visibility = "visible";
}

  function transform() {
     $.ajax(
            {
              type : 'POST',
              url : "/transform",
              contentType: "application/json;charset=UTF-8",
              dataType:'json',
              data    : JSON.stringify( { "pdf" : decoded_url },{"hocr": edited_hocr } ),
              success : function(data)
                {
                  console.log(data);
                  // window.open('{{url_for('static',filename='pdf/result.pdf')}}')
                }
              }/*success : function() {}*/
            );/*$.ajax*/

    const show = document.getElementById("showmonster");
    show.style.visibility = "visible";
    const button4 = document.getElementById("button4");
    button4.style.visibility = "visible";
        var emptyframe = document.getElementById('empty_frame');
    emptyframe.style.color = "blue";
  }

  function copy() {
    const show = document.getElementById("empty_frame");
    show.style.visibility = "visible";
    const button1 = document.getElementById("button1");
    button1.style.visibility = "visible";

  }




  $(document).ready(function() {
    $('form').find("input[type='text'],textarea").val("");
  });
  // extract the text of a pdf/ copy on clipboard


</script>

{% endblock %}