{% extends "layout.html" %}

{% block content %}

<div class="jumbotron">
    <h1>NVDA Write Correction and Translation</h1>
    <p class="lead">NVDA Yapay zeka ile yazılarınızı otomatik olarak düzenleyin.</p>

</div>

<div class="row">
    <div class="col-md-6">
        <form class="form-group">
            <label><m>Düzenlenecek Metin</m><textarea required class="form-control" name="name" id="name" cols="40" rows="50"></textarea></label>
            <button class="btn-primary" type="button" onclick="sendData()" accesskey="d">Yazıyı Düzenle</button>

    </div>
    <div class="col-md-6">
        <h2>Düzenlenen Metin</h2>
        <div class="response"><p class="text-danger">Henüz düzenlenmiş bir içerik bulunmuyor </p></div>

    </div>
</div>
<label><m>Çeviri için dil seçiniz:</m><select name="ceviri_dili" id="ceviri_dili">
<option value="ingilizce">İngilizce</option>
<option value="türkçe">Türkçe</option>
</select><br> 
<button type="button" class="btn-primary" onclick="translateData()" accesskey="c">Çevir</button><br>
<button class="btn-primary" type="button" id="copy_button" accesskey="k">Kopyala</button><br>
<button class="btn-primary" type="button" onclick="saveTTS()" accesskey="m">Metinden Sese Kaydet</button> 

<script src="https://code.responsivevoice.org/responsivevoice.js?key=i0AVVygI"></script>

<script>
function sendData() {
    // Get the value of the text field
var name = document.getElementById("name").value;

    // Make the AJAX request
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
responsiveVoice.speak("Metniniz düzenlendi", "Turkish Female");
        // Update the div with the response
        var elements = document.getElementsByClassName('response');
for(var i = 0;i < elements.length;i++){
elements[i].innerHTML=this.responseText;
}
      }
    };
    xhr.open("POST", "/command", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("text=" + name);

    // Prevent the form from being submitted
    return false;
  }

//Çeviri için fonksiyon
function translateData() {
    // Get the value of the text field
var translate = document.getElementById("name").value;
var ceviri_dili = document.getElementById('ceviri_dili').value;


    // Make the AJAX request
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
responsiveVoice.speak("Metniniz çevirildi", "Turkish Female");
        // Update the div with the response
        var elements = document.getElementsByClassName('response');
for(var i = 0;i < elements.length;i++){
elements[i].innerHTML=this.responseText;
}
      }
    };
    xhr.open("POST", "/translate", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("translate=" + translate+"&ceviri_dili="+ceviri_dili);

    // Prevent the form from being submitted
    return false;
  }
//Ses dosyasına çevirme
function saveTTS() {
    // Get the value of the text field
var name = document.getElementById("name").value;

    // Make the AJAX request
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
responsiveVoice.speak("Metniniz sese çevirildi ve  masaüstünüzde output.mp3 dosya adıyla oluşturuldu", "Turkish Female");
        // Update the div with the response
        var elements = document.getElementsByClassName('response');
for(var i = 0;i < elements.length;i++){
elements[i].innerHTML=this.responseText;
}
      }
    };
    xhr.open("POST", "/tts", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("text=" + name);

    // Prevent the form from being submitted
    return false;
  }






document.getElementById("copy_button").addEventListener("click", function() {
  var text = document.getElementsByClassName("response")[0].innerText;
  navigator.clipboard.writeText(text).then(function() {
    alert("Metin panoya kopyalandı!");
  }, function(err) {
    alert("Metin panoya kopyalanamadı: " + err);
  });
});

</script>

{% endblock %}