{% extends "layout.html" %}
{% from "utils.html" import flash_messages %}

{% block title %}
  {{ super() }} - {{ current_user.name }} - Gene Panels
{% endblock %}

{% block top_nav %}
  {{ super() }}
  <li>
    <a href="{{ url_for('cases.index') }}">Institutes</a>
  </li>
  <li class="active">
    <span class="navbar-text">Gene Panels</span>
  </li>
{% endblock %}

{% block content_main %}
  <div>
    {{ new_panel() }}
    {% if panel_groups %}
      {% for institute,panels in panel_groups %}
        {{ panel_view(institute,panels) }}
      {% endfor %}
    {% else %}
      <div class="panel-body">No gene panels found.</div>
    {% endif %}
  </div>
{% endblock %} <!-- end of content_main -->

{% macro new_panel() %}
<div id="newpaneldiv_{{panel_id}}">
  <div class="panel panel-default">
    <div class="panel-body">
      <form class="form-horizontal" action="{{ url_for('panels.panels') }}" enctype="multipart/form-data" method="POST">
        <div class="form-group row">
          <label for="" class="col-sm-2 col-form-label">New panel</label>
          <div class="col-sm-3">
              <select name="institute" class="form-control">
                <option>Choose institute...</option>
                {% for institute in institutes %}
                  <option value="{{ institute._id }}">{{ institute.display_name }}</option>
                {% endfor %}
              </select>
          </div>
          <div class="col-sm-3">
              <input type="text" name="new_panel_name" class="form-control" placeholder="Panel ID">
            </div>
            <div class="col-sm-4">
              <input type="text" name="display_name" class="form-control" placeholder="Full name">
            </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-2 col-form-label">CSV file</label>
            <div class="col-sm-6">
              <input type="file" name="csv_file" class="form-control" required>
              <p class="help-block">How do I format my <a href="https://www.clinicalgenomics.se/scout/user-guide/panels/#uploading-a-new-gene-panel-version">gene panel file</a>?</p>
            </div>
            <div class="col-sm-4">
              <button type="submit" class="btn btn-default">Upload</button>
            </div>
        </div>
      </form>
    </div>
  </div>
</div>
{% endmacro %}

{% macro panel_view(institute,panels) %}
  <div class="panel panel-default">
    <div class="panel-heading">
      <strong>{{ institute.display_name }}</strong> - Panels
    </div>
    <div>
        <table class="table table-striped">
        <thead>
          <tr>
            <th width="30%">Name</th>
            <th width="20%">Version</th>
            <th width="15%">Number of genes</th>
            <th width="25%">History</th>
            <th width="10%"></th>
          </tr>
        </thead>
      {% for panel in panels %}
        <!--create table for each panel-->
        <tbody>
          <tr>
            <td><a href="{{ url_for('panels.panel', panel_id=panel._id) }}">{{ panel.display_name }}</a></td>
            <td>{{ panel.version }} ({{ panel.date.date()}})</td>
            <td><span class="badge">{{ panel.genes|length}}</span></td>
            <td><button id="{{panel._id}}" type="button" class="btn btn-primary btn-xs history_btn"><span class="glyphicon glyphicon-zoom-in"></span></button><br>{{ history_view(panel._id, panel.panel_name) }}</td>
            <td><button id="{{panel._id}}" type="button" class="btn btn-warning btn-xs modify_btn"><span class="glyphicon glyphicon-pencil"></span></button><br>{{ history_view(panel._id, panel.panel_name) }}</td>
          </tr>
          {{ modify_panel(panel._id, panel) }}
        </tbody>
      {% endfor %}
      </table>
    </div>
  </div>
{% endmacro %}

{% macro history_view(panel_id, panel_name) %}
  <div id="paneldiv_{{panel_id}}" style="display:none;">
    <ul>
    {% for version in panel_versions[panel_name]|sort(attribute='version', reverse=True) %}
      <li><a href={{ url_for('panels.panel', panel_id=version._id) }}>{{ version.version }} {{ version.date.date() }} {{ version.genes|length }} genes</a></li>
    {% endfor %}
    </ul>
  </div>
{% endmacro %}

{% macro modify_panel(panel_id, panel_obj) %}
  <tr id="modifydiv_{{panel_id}}" style="display:none;">
    <td colspan=5>{{ modify_form(panel_obj) }}</td>
  </tr>
{% endmacro %}

{% macro modify_form(panel_obj) %}
  <br>
  <strong>{{panel_obj.display_name}}</strong><br>
  <form method="POST" action="{{ url_for('panels.panels') }}" enctype="multipart/form-data" class="form-horizontal">
    <input type="hidden" name="panel_name" value="{{panel_obj.panel_name}}">
    <div class="form-group">
      <div class="col-sm-3">
        <div class="radio">
          <label><input type="radio" name="modify_option" value="add" checked>Add genes from CSV file</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="modify_option" value="replace">Replace genes using CSV file</label>
        </div>
      </div><!--end of <div class="col-sm-3">-->

      <div class="form-group">
          <div class="col-sm-6">
            <input type="file" name="csv_file" class="form-control" required>
            <p class="help-block">How do I format my <a href="https://www.clinicalgenomics.se/scout/user-guide/panels/#uploading-a-new-gene-panel-version">gene panel file</a>?</p>
          </div>
          <div class="col-sm-2">
            <button id="submit" type="submit">submit</button>
          </div>
      </div>
    </div><!--end of form-group-->
  </form>
  <br>
{% endmacro %}


{% block scripts %}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$('.history_btn').on('click', function(){
    var bid = $(this)[0].id;
    var sel = '#paneldiv_' + bid;
    if($(sel).is(':visible')){
      $(sel).hide();
    }
    else{
      $(sel).fadeToggle();
    }
});

$('.modify_btn').on('click', function(){
    var bid = $(this)[0].id;
    var sel = '#modifydiv_' + bid;
    if($(sel).is(':visible')){
      $(sel).hide();
    }
    else{
      $(sel).fadeToggle();
    }
});
</script>
{% endblock %}
