{% extends "layout_bs4.html" %}

{% block content_main %}
  <div class="container-float mt-3">
      <ul class="nav nav-tabs nav-justified">
        <li class="nav-item"><a href="#" class="nav-link {% if panel == 'general' %}active{% endif %}" data-toggle="tab" onclick="hide_div('general')"><h4>General statistics</h4></a></li>
        <li class="nav-item"><a href="#" class="nav-link {% if panel == 'cases' %}active{% endif %}" data-toggle="tab" onclick="hide_div('cases')"><h4>Case statistics</h4></a></li>
        <li class="nav-item"><a href="#" class="nav-link {% if panel == 'variants' %}active{% endif %}" data-toggle="tab" onclick="hide_div('variants')"><h4>Variant statistics</h4></a></li>
      </ul>

      <!--filter panel -->
      <div>
        {{ dashboard_search_form() }}
        {% if total_cases == 0 %}
          <div class="alert alert-danger">Your search didn't return any results!</div>
        {% elif total_cases %}
          {{ general_stats_panels() }}
          {{ cases_stats_panels() }}
          {{ variants_stats_panels() }}
        {% endif %}
      </div>

  </div>
{% endblock %}


{% macro dashboard_search_form() %}
<div class="card">
  <form class="mt-3 ml-3" id='form' class="form-horizontal" method='POST' action="{{ url_for('dashboard.index') }}" accept-charset="utf-8">
      <input type="hidden" value="{{panel}}" name="panel" id="panel">
      <div class="form-row align-items-center mb-3">
        <!--Search institute select-->
        <div class="col-2 ml-3">
          {{ dashboard_form.search_institute(class="form-control") }}
        </div>

        <!--Search type select field-->
        <div class="col-3 ml-3">
          {{ dashboard_form.search_type(class="form-control", id="search_type") }}
        </div>
        <!--Search term textfield-->
        <div class="col-4 ml-3">
          {{ dashboard_form.search_term(class="form-control", placeholder="Search term", id="search_term") }}
        </div>

        <!--Search term textfield-->
        <div class="col-1 ml-3">
          {{ dashboard_form.search(class="form-control") }}
        </div>

      </div> <!--end of class="form-row align-items-center"-->
    </form>
  </div>
{% endmacro %}

{% macro general_stats_panels() %}
<div class="mt-3 text-center" id="general">
  <div class="row">
    <div class="col-md-4">
      <h1>Samples</h1>
      <div>
        <canvas id="ngsType" height="150"></canvas><br>
        <table class="table table-sm text-left">
          {% for group in analysis_types %}
            <tr>
              <td>Total {{ group.name|upper }} samples (not cases)</td>
              <td>{{ group.count }}</td>
            </tr>
          {% endfor %}
        </table>
      </div>
    </div> <!--  end of sample statistics div -->
    <div class="col-md-4">
      <h1>Cases</h1>
      <div>
          <canvas id="casesType" height="150"></canvas><br>
          <table class="table table-sm text-left">
            {% for group in cases %}
              <tr>
                <td>Cases {{ group.status|capitalize }}: {{ group.count }}</td>
                <td>{{(group.percent * 100)|round(1)}}%</td>
              </tr>
            {% endfor %}
          </table>
      </div>
    </div> <!--  end of case statistics div -->
    <div class="col-md-4">
      <h1>Pedigree info</h1>
      <div>
        <canvas id="pedigreeTypes" height="150"></canvas><br>
        <table class="table table-sm text-left">
          {% for topic in pedigree %}
            <tr>
              <td>{{ topic.title }} Cases</td>
              <td>{{ (topic.percent * 100)|round(1) }}%</td>
            </tr>
          {% endfor %}
        </table>
      </div>
    </div> <!--  end of pedigree info div -->

  </div> <!-- end of class="row"-->
</div>
{% endmacro %}

{% macro cases_stats_panels() %}
<div class="mt-3" id="cases">
  <div class="row">
    <div class="col-md-8">
        <canvas id="cases-bar-horiz" height="100"></canvas>
    </div>
    <div class="col-md-4">
      <table class="table table-sm text-left">
        {% for topic in overview %}
          <tr>
            <td>{{ topic.title }} Cases: {{ topic.count }}</td>
            <td>{{ (topic.percent * 100)|round(1) }}%</td>
          </tr>
        {% endfor %}
      </table>
    </div>
  </div>
</div>
{% endmacro %}


{% macro variants_stats_panels() %}
<div class="container-float mt-3 text-center" id="variants">
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-4 d-flex justify-content-right align-items-center">
        <canvas id="var-validations" width="600" height="300"></canvas>
    </div>
    <div class="col-md-4">
      <table class="table text-left">
        {% for topic in variants %}
        <tr>
          <td>{{ topic.title }} Cases: : {{ topic.count }}</td>
          <td>{{ (topic.percent * 100)|round(1) }}%</td>
        </tr>
        {% endfor %}
      </table>
        <br>
        <div class="card mt-3" >
          <form id="dowload_var_stats" action="{{ url_for('variants.download_verified')}}" method="GET">
            <button type="submit" name="verified_vars" value="verified" class="btn btn-primary btn-md">Download all verified variants for your cases</button>
          </form>
        </div>
    </div>
    <div class="col-md-2"></div>
  </div>

</div>
{% endmacro %}

{% block scripts %}
  {{ super() }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
  <script src="{{ url_for('dashboard.static', filename='charts.js') }}"></script>
  <script type="text/javascript">

    var sel = document.getElementById("search_type");
    var text = document.getElementById("search_term");

    $(document).ready(function(){
      text.disabled = (sel.value == "");
      {% if not total_cases %}
        hide_div("all");
      {% else %}
        hide_div('{{panel}}');
      {% endif %}
    });

    if(sel){
      sel.onchange = function(e) {
        text.disabled = (sel.value == "");
      };
    }

    function hide_div(show_div){
      panels = ["general", "cases", "variants"];
      for (index = 0; index < panels.length; ++index) {
        var div_el = document.getElementById(panels[index]);
        if (panels[index] == show_div){ //show div
          div_el.style.display = "block";
          // Assign a new value to hidden panel form field
          panel_field = document.getElementById("panel");
          panel_field.value=show_div;
          // Hide search type select and search term in the filters if panel=="variants"
          if (show_div=="variants"){
            sel.style.display = "none";
            text.style.display = "none";
          }
          else{
            sel.style.display = "block";
            text.style.display = "block";
          }
        }
        else{ // hide the other 2 divs
          div_el.style.display = "none";
        }
      }
    }

    {% if cases %}
      //create analysis type chart ===> general stats
      createChart(document.getElementById("ngsType").getContext('2d'), analysisTypeData( {{analysis_types|safe }} ))
      //create cases types chart
      createChart(document.getElementById("casesType").getContext('2d'), casesType( {{cases[1:]|safe}} ))
      //create pedigree info chart
      createChart(document.getElementById("pedigreeTypes").getContext('2d'), pedigreeTypes( {{pedigree|safe}} ))

      // create cases detailed stats chart ===> case stats
      createChart(document.getElementById("cases-bar-horiz").getContext('2d'), casesDetailed( {{overview|safe}}, {{cases[0].count}} ))

      // create variants detailed stats chart ===> variants stats
      createChart(document.getElementById("var-validations").getContext('2d'), varValidations( {{variants|safe }}))
    {% endif %}

  </script>
{% endblock %}
