{% extends 'base.html' %}
{% block content %}
    <div class="row">
    <div class="col-2 text-right">
        <b>PubMed ID:</b>
    </div>
    <div class="col-10">
        <textarea rows="1" style="min-width: 90%" id='pmid'>{% if pmid != '' %}{{pmid}}{%else%}23715093{%endif%}</textarea><br>
    </div>
  </div>
  <div class="row">
      <div class="col-5"></div>
      <div class="col-2">
          <button id='run'>Run</button>
      </div>
      <div class="col-5"></div>
  </div>
  <br>
  <div class="row">
      <div class="col">
          <pre><code id='api-code'>curl -X POST '{{api_url}}sentence/' -H 'accept: application/json' -H 'Content-Type: application/json' -d '{ "pmid": {% if pmid != '' %}"{{pmid}}"{%else%}"23715093"{%endif%} }' </code></pre>
      </div>
  </div>
  <div class="row">
    <table class="display compact nowrap" style="width:60%" align="center">
        <tr><td></td><td><b>PubMed ID</b></tr>
        <tr>
            <td><a class="example-call" href="#" id='23715093'>Example 1</a></td>
            <td>23715093</td>
        </tr>
        <tr>
            <td><a class="example-call" href="#" id='19755659'>Example 2</a></td>
            <td>19755659</td>
        </tr>
        <tr>
            <td><a class="example-call" href="#" id='15943554'>Example 3</a></td>
            <td>15943554</td>
        </tr>

    </table>
    </div>
    </div>
    <br>
    <div id='div1'>
        <b>PMID:</b> <span id="pmid-ajax"></span>
        <b>Year:</b> <span id="year-ajax"></span>
        <b>ISSN:</b> <span id="issn-ajax"></span>
    <table id="results" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Subject </th>
                <th>Predicate</th>
                <th>Object</th>
                <th>Sentence</th>
            </tr>
        </thead>
    </table>
    </div>

{% endblock %}
{% block javascript %}
<style>
    pre code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 5px;
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

thead input {
        width: 100%;
    }
</style>
<script>
    $(document).ready(function() {
        $(".example-call").on('click', function(event){
            //console.log(this.id);
            a = this.id;
            $("#pmid").val(a);
            document.getElementById('api-code').innerHTML='curl -X POST \'{{api_url}}sentence/\' -H \'accept: application/json\' -H \'Content-Type: application/json\' -d \'{ "pmid":  "'+a+'" }\'';
        })
        var res_table = $('#results').DataTable( {
            dom: 'Bfrtip',
            buttons: [
            {
                extend: 'colvis',
                columns: ':not(.noVis)'
            },
                'copy', 'csv', 'excel'
            ],
            "scrollY": "300px",
            //"paging": false,
            "processing": true,
            //"serverSide": true,
            "ajax":{
                "type": "POST",
                "url": "/api/sentence/",
                data:function(d){
                    if (document.getElementById("pmid").value.length>0){
                        console.log(document.getElementById("pmid").value.trim())
                        return JSON.stringify(
                        {   
                            'pmid': document.getElementById("pmid").value.trim(),
                        });
                    }else{
                        console.log('empty')
                        return JSON.stringify([])
                    }
                }
            },
            "columns": [
              {"data":"SUBJECT_NAME"},
              {"data":"PREDICATE"},
              {"data":"OBJECT_NAME"},
              {"data":"SENTENCE"},
            ],
            "drawCallback": function( settings ) {
                var api = this.api();
                var data =  api.rows( 0 ).data()[0]
                for(var key in data) {
                    var value = data[key];
                    if (key == 'PMID'){
                        $("#pmid-ajax").html('<a href="https://pubmed.ncbi.nlm.nih.gov/'+value+'/" target="_blank">'+value+'</a>');
                    }
                    else if (key == 'PYEAR'){
                        $("#year-ajax").text(value);
                    }
                    else if (key == 'ISSN'){
                        $("#issn-ajax").html('<a href="https://portal.issn.org/resource/ISSN/'+value+'/" target="_blank">'+value+'</a>');
                    }
                }
            }
            
        } );

        $("button").click(function(){
            console.log('update')
            res_table.ajax.reload()
            });

        $(".example-call").click(function(){
            res_table.ajax.reload()
            });

        $("#pmid").on('change keydown paste input', function(){
          console.log('change')
          var x=$("#pmid").val()
          document.getElementById('api-code').innerHTML='curl -X POST \'{{api_url}}sentence/\' -H \'accept: application/json\' -H \'Content-Type: application/json\' -d \'{ "pmid":  "'+x+'" }\''
        });

    } );
</script>
{% endblock %}