{% extends "layout_bs4.html" %}

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

{% block top_nav %}
  {{ super() }}
  <li class="nav-item">
    <a class="nav-link" href="{{ url_for('cases.index') }}">Institutes</a>
  </li>
  <li class="nav-item 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 class="container-float">
  <div class="card mt-3">
    <div class="card-body">
      <form class="form-horizontal" action="{{ url_for('panels.panels') }}" enctype="multipart/form-data" method="POST">
        <div class="form-row">
          <div class="form-group col-sm-2">
            <label class="col-form-label">New panel</label>
          </div>
          <div class="form-group col-sm-3 text-center">
              <select name="institute" class="form-control" required>
                <option value="">Choose institute...</option>
                {% for institute in institutes %}
                  <option value="{{ institute._id }}">{{ institute.display_name }}</option>
                {% endfor %}
              </select>
          </div>
          <div class="col-sm-3 text-center">
              <input type="text" name="new_panel_name" class="form-control" placeholder="Panel ID" required
                pattern="^[a-zA-Z0-9_]*$" title="Only alphanumeric characters (A-Z+a-z+0-9) and underscores allowed.">
            </div>
            <div class="col-sm-4 text-center">
              <input type="text" name="display_name" class="form-control" placeholder="Full name">
            </div>
        </div>
        <div class="form-row ">
          <div class="form-group col-sm-2">
            <label class="col-form-label">CSV file</label>
          </div>
          <div class="col-sm-5 text-center">
            <input type="file" name="csv_file" class="custom-file-input" required onchange="this.nextElementSibling.innerText = this.files[0].name">
            <label class="custom-file-label" for="csv_file">Choose file</label><br>
            <p class="help-block">How do I format my <a href="https://clinical-genomics.github.io/scout/user-guide/panels/#uploading-a-new-gene-panel-version" target="_blank">gene panel file</a>?</p>
          </div>
          <div class="col-sm-5">
            <textarea class="form-control" id="description" name="description" rows="2" placeholder="Description (optional)"></textarea>
          </div>
        </div>
        <div class="row">
          <div class="col text-center">
            <button type="submit" class="btn btn-outline-secondary">Upload</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
{% endmacro %}

{% macro panel_view(institute,panels) %}
  <div class="card panel-default w-100 mt-3 justify-content-center">
    <div class="panel-heading">
      <strong>{{ institute.display_name }}</strong> - Panels
    </div>
    <div class="card-body">
        <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 badge-pill badge-secondary">{{ panel.genes|length}}</span></td>
            <td><button id="{{panel._id}}" type="button" data-toggle="collapse" href="#paneldiv_{{panel._id}}" aria-expanded="false" aria-controls="paneldiv_{{panel._id}}" class="btn btn-primary btn-xs"><span class="fa fa-search-plus"></span></button><br>{{ history_view(panel._id, panel.panel_name) }}</td>
            <td><button id="{{panel._id}}" type="button" data-toggle="collapse" href="#modifydiv_{{panel._id}}" aria-expanded="false" aria-controls="modifydiv_{{panel._id}}" class="btn btn-warning btn-xs"><span class="fa fa-pencil-square-o"></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}}" class="collapse">
    <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}}" class="collapse">
    <td colspan=5>{{ modify_form(panel_obj) }}</td>
  </tr>
{% endmacro %}

{% macro modify_form(panel_obj) %}
  <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="row">
      <div class="col-sm-5">
        <div class="form-group">
          <div class="custom-control custom-radio">
            <input type="radio" id="add_{{panel_obj.display_name}}" name="modify_option" class="custom-control-input" value="add" checked>
            <label class="custom-control-label" for="add_{{panel_obj.display_name}}">Add genes from CSV file</label>
          </div>
          <div class="custom-control custom-radio">
            <input type="radio" id="replace_{{panel_obj.display_name}}" name="modify_option" class="custom-control-input" value="replace">
            <label class="custom-control-label" for="replace_{{panel_obj.display_name}}">Replace genes using CSV file</label>
          </div>
        </div>
      </div><!--end of col-->
      <div class="col-sm-7">
        <div class="form-group">
            <input type="file" name="csv_file" class="custom-file-input" required>
            <label class="custom-file-label" for="csv_file">Choose file</label><br>
            <p class="help-block">How do I format my <a href="https://clinical-genomics.github.io/scout/user-guide/panels/#uploading-a-new-gene-panel-version">gene panel file</a>?</p>
        </div>
      </div><!--end of col-->
    </div><!--end of row-->
    <div class="row">
      <div class="col text-center">
        <button id="submit" type="submit" class="btn btn-outline-secondary">submit</button>
      </div>
    </div>
  </form>
  <br>
{% endmacro %}

{% block scripts %}
{{ super() }}
<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 %}
