{% extends "base.html" %}
{% block title %}Search Results{% endblock %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='jquery-ui/jquery-ui.theme.css') }}"/>
    <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
{% endblock %}
{% block content %}
<!-- Start of body -->

    <div class="container">

      <div class="row">
        <h3>GN searched for the term(s) <b>"{{ terms }}"</b> in 754 datasets and 39,765,944 traits across 10 species<br/>
            and found <b>{{ trait_count }}</b> results that match your query.<br/>
        </h3>
      </div>

      <div class="row" id="ai_result">
      </div>

        <p>To study a record, click on its Record ID below.<br />Check records below and click Add button to add to selection.</p>
        <div>
            <br />
            <button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
            <button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
            <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
            <button class="btn btn-success" id="add" disabled ><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
            <input type="text" id="searchbox" class="form-control" style="width: 180px; display: inline;" placeholder="Search This Table For ...">
            <input type="text" id="select_top" class="form-control" style="width: 120px; display: inline;" placeholder="Select Top ...">
            <form id="export_form" method="POST" action="/export_traits_csv" style="display: inline;">
              <input type="hidden" name="headers" id="headers" value="{% for field in header_fields %}{{ field }},{% endfor %}">
              <input type="hidden" name="database_name" id="database_name" value="None">
              <input type="hidden" name="export_data" id="export_data" value="">
              <button class="btn btn-default" id="export_traits">Download</button>
            </form>
            <br />
            <br />
            <div id="table_container" style="width: 2000px;">
              <table id="trait_table" class="table-hover table-striped cell-border" style="float: left;">
                <tbody>
                  <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
                </tbody>
              </table>
            </div>
        </div>
    </div>

<!-- End of body -->

{% endblock %}

{% block js %}
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/scroller/js/dataTables.scroller.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colReorder/js/dataTables.colReorder.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/colResize/dataTables.colResize.js') }}"></script>
    <script language="javascript" type="text/javascript" src="/static/new/javascript/search_results.js"></script>
    <script language="javascript" type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
    <script language="javascript" type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>

    <script type='text/javascript'>
      var getParams = function(url) {
        let parser = document.createElement('a');
        parser.href = url;
        let params = parser.search.substring(1);
        if(params.length > 0) {
          return ('?'+params);
        }
        return params;
      };
    </script>

    <script type='text/javascript'>
      var traitsJson = {{ trait_list|safe }};
    </script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready( function () {
            var tableId = "trait_table";

            columnDefs = [
              {
                'orderDataType': "dom-checkbox",
                'width': "5px",
                'data': null,
                'targets': 0,
                'render': function(data) {
                  return '<input type="checkbox" name="searchResult" class="trait_checkbox checkbox" value="' + data.hmac + '">'
                }
              },
              {
                'title': "Index",
                'type': "natural",
                'width': "30px",
                'targets': 1,
                'data': "index",
                'defaultContent': "N/A"
              },
              {
                'title': "Record",
                'type': "natural",
                'orderDataType': "dom-inner-text",
                'width': "60px",
                'data': null,
                'targets': 2,
                'render': function(data) {
                  return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.name + '</a>'
                }
              },
              {
                'title': "Species",
                'type': "natural",
                'width': "60px",
                'targets': 3,
                'data': "species",
                'defaultContent': "N/A"
              },
              {
                'title': "Group",
                'type': "natural",
                'width': "150px",
                'targets': 4,
                'data': "group",
                'defaultContent': "N/A"
              },
              {
                'title': "Tissue",
                'type': "natural",
                'width': "150px",
                'targets': 5,
                'data': "tissue",
                'defaultContent': "N/A"
              },
              {
                'title': "Dataset",
                'type': "natural",
                'targets': 6,
                'width': "320px",
                'data': "dataset_fullname",
                'defaultContent': "N/A"
              },
              {
                'title': "Symbol",
                'type': "natural",
                'width': "60px",
                'targets': 7,
                'data': "symbol",
                'defaultContent': "N/A"
              },
              {
                'title': "Description",
                'type': "natural",
                'data': null,
                'width': "120px",
                'targets': 8,
                'render': function(data) {
                  try {
                      return decodeURIComponent(escape(data.description))
                  } catch(err) {
                      return escape(data.description)
                  }
                }
              },
              {
                'title': "Location",
                'type': "natural-minus-na",
                'width': "125px",
                'targets': 9,
                'data': "location_repr",
                'defaultContent': "N/A"
              },
              {
                'title': "Mean",
                'type': "natural-minus-na",
                'orderSequence': [ "desc", "asc"],
                'width': "30px",
                'targets': 10,
                'data': null,
                'defaultContent': "N/A",
                'render': function(data) {
                  if (data.mean > 100) {
                    return Math.log2(data.mean).toFixed(3)
                  } else {
                    return data.mean
                  }
                }
              },
              {
                'title': "<div style='text-align: right; padding-right: 10px;'>Peak</div> <div style='text-align: right;'>-logP <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a></div>",
                'type': "natural-minus-na",
                'width': "60px",
                'targets': 11,
                'data': "LRS_score_repr",
                'defaultContent': "N/A",
                'orderSequence': [ "desc", "asc"]
              },
              {
                'title': "Peak Location",
                'type': "natural-minus-na",
                'width': "125px",
                'targets': 12,
                'data': "max_lrs_text",
                'defaultContent': "N/A"
              },
              {
                'title': "Additive<br>Effect<a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\"><sup>?</sup></a>",
                'type': "natural-minus-na",
                'width': "50px",
                'targets': 13,
                'data': "additive",
                'defaultContent': "N/A",
                'orderSequence': [ "desc", "asc"]
              }
            ]

            tableSettings = {
              'createdRow': function ( row, data, index ) {
                    $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
                    $('td', row).eq(1).attr("align", "right");
                    $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
                    if ($('td', row).eq(4).text().length > 30) {
                        $('td', row).eq(4).text($('td', row).eq(4).text().substring(0, 30));
                        $('td', row).eq(4).text($('td', row).eq(4).text() + '...')
                    }
                    $('td', row).eq(5).attr('title', $('td', row).eq(5).text());
                    if ($('td', row).eq(5).text().length > 35) {
                        $('td', row).eq(5).text($('td', row).eq(5).text().substring(0, 35));
                        $('td', row).eq(5).text($('td', row).eq(5).text() + '...')
                    }
                    $('td', row).eq(6).attr('title', $('td', row).eq(6).text());
                    if ($('td', row).eq(6).text().length > 60) {
                        $('td', row).eq(6).text($('td', row).eq(6).text().substring(0, 60));
                        $('td', row).eq(6).text($('td', row).eq(6).text() + '...')
                    }
                    $('td', row).eq(8).attr('title', $('td', row).eq(8).text());
                    if ($('td', row).eq(8).text().length > 60) {
                        $('td', row).eq(8).text($('td', row).eq(8).text().substring(0, 60));
                        $('td', row).eq(8).text($('td', row).eq(8).text() + '...')
                    }
                    $('td', row).slice(10,14).attr("align", "right");
                    $('td', row).eq(1).attr('data-export', $('td', row).eq(1).text());
                    $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
                    $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
                    $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
                    $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
                    $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
                    $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
                    $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
                    $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
                    $('td', row).eq(10).attr('data-export', $('td', row).eq(10).text());
                    $('td', row).eq(11).attr('data-export', $('td', row).eq(11).text());
                    $('td', row).eq(12).attr('data-export', $('td', row).eq(12).text());
                    $('td', row).eq(13).attr('data-export', $('td', row).eq(13).text());
                },
                {% if trait_count <= 20 %}
                "scroller":  false
                {% else %}
                "scroller": true
                {% endif %}
            }
            
            if (traitsJson.length > 0) {
              create_table(tableId, traitsJson, columnDefs, tableSettings);
            } else {
              $("#" + tableId +" td").replaceWith("<td>No data</td>")
            }

        });
        
    </script>
    {% if do_ai_search %}
    <script type='text/javascript'>
      function ai_content_div(search_term, search_result, search_uri) {
        return `
          <div class="col-sm-6">
            <div class="panel panel-info">
              <div class="panel-heading" role="tab" id="ai_heading">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#ai_results" aria-expanded="false" aria-controls="ai_results">
                    AI Search: ${search_term} (Click for more details)
                  </a>
                </h4>
              </div>
              <div id="ai_results" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ai_heading">
                  <div class="panel-body">
                    <p>${ search_result }</p>
                    <p><a class="btn btn-default" href="${ search_uri }" role="button">See References</a></p>
                  </div>
              </div>
            </div>
          </div>
          `
      }

      $(document).ready( function () {
        $.ajax({url: "gnqna",
          contentType: "application/json",
          data: {
            query: "{{ terms }}",
            type: "xapian",
          },
          success: function(result) {
            let ai_div = ai_content_div(result.search_term, result.search_result, result.search_url)
            $("#ai_result").append(ai_div);
          }
        })
      })

    </script>
    {% endif %}
{% endblock %}