{% extends "layout.html" %}

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


{% block css %}
  {{ super() }}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/css/bootstrap-select.min.css" integrity="sha512-g2SduJKxa4Lbn3GW+Q7rNz+pKP9AWMR++Ta8fgwsZRCUsawjPvF/BxSMkGS61VsR9yinGoEgrHPGPn2mrj8+4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{% 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 d-flex align-items-center">
    <span class="navbar-text">Gene Panels</span>
  </li>
{% endblock %}

{% block content_main %}
  <div>
    {{ new_panel() }}
    {{ search_gene_card() }}
    {% if panel_groups %}
      <span class="float-end me-3 mt-3">
        <input type="checkbox" name="hideLine" checked onclick="toggleRow(this)"> Hide removed panels</input>
      </span>
      <div id="panel-list">

        <!-- Filters -->
        <div class="d-flex gap-3 mt-3">
          <input class="search form-control w-auto" placeholder="Search panels..." />
          <select id="instituteFilter" class="form-select w-auto">
            <option value="">All institutes</option>
            {% for institute, panels in panel_groups %}
              <option value="{{ institute._id }}">{{ institute.display_name }} ({{institute._id}})</option>
            {% endfor %}
          </select>
        </div>

        <!-- Table -->
        <table class="table table-striped table-bordered w-100">
          <thead>
            <tr>
              <th>Institute</th>
              <th>Name</th>
              <th>ID</th>
              <th>Version</th>
              <th>Number of genes</th>
              <th>History</th>
              <th>Modify</th>
              <th>Remove</th>
            </tr>
          </thead>
          <tbody class="list">
            {% for institute, panels in panel_groups %}
              {% for panel in panels %}
              <tr {% if panel.hidden %} class="hidableRow collapse" {% endif %}>
                <td class="institute">{{ institute.display_name }} ({{ institute._id }})</td>
                <td class="panelName">
                  <a href="{{ url_for('panels.panel', panel_id=panel._id) }}" target="_blank" rel="noopener noreferrer">{{ panel.display_name }}</a>
                  {% if current_user.email in panel.maintainer %}
                    <span class="badge bg-dark" data-bs-toggle="tooltip" title="You are a maintainer of this panel"><span class="fa fa-tools"></span></span>
                  {% endif %}
                  {% if panel.hidden %}
                    <span class="badge bg-danger">Removed</span>
                  {% endif %}
                </td>
                <td class="panelID">{{ panel.panel_name }}</td>
                <td>{{ panel.version }}</td>
                <td><span class="badge rounded-pill bg-secondary">{{ panel.genes|length }}</span></td>
                <td>
                  <!-- HISTORY button opens modal -->
                  <button type="button" class="btn btn-primary btn-xs" data-bs-toggle="modal"
                          data-bs-target="#historyModal_{{ panel._id }}">
                    <span class="fa fa-search-plus"></span>
                  </button>
                </td>
                <td>
                  <!-- MODIFY button opens modal -->
                  <button class="btn btn-warning btn-xs" data-bs-toggle="modal" data-bs-target="#modifyModal_{{ panel._id }}">
                    <span class="fa fa-pen-square"></span>
                  </button>
                <td>
                  {% if panel.hidden %}
                    <form action="{{ url_for('panels.panel_restore', panel_id=panel._id) }}" method="POST">
                      <button class="btn btn-success btn-xs"><span class="fa fa-undo"></span></button>
                    </form>
                  {% else %}
                    <button class="btn btn-danger btn-xs" data-bs-toggle="modal"
                            data-bs-target="#remove-gene-panel-modal-{{ panel._id }}">
                      <span class="fa fa-trash"></span>
                    </button>
                  {% endif %}
                </td>
              </tr>

              {% endfor %}
            {% endfor %}
          </tbody>
        </table>
      </div>

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

<!-- Create a Bootstrap card containing text bar and submit button for searching -->
{% macro search_gene_card() %}
<div class="container-float">
  <div class="card mt-3">
    <div class="card-body">

      <!-- Search Form -->
      <form action="{{ url_for('panels.panels') }}" method="POST">
        <div class="row">
          <div class="col-5">
            <input type="text" name="searchGene" class="form-control typeahead_gene mb-1" data-provide="typeahead" autocomplete="off" placeholder="Search Gene in Panels" required
                   pattern="^[0-9]+\s*\|\s*.*" title="Search for gene symbol. Type name or number and the field autocompletes a full description. Allowed patterns have a numerical hgnc id and a pipe character.">
          </div>
          <div class="col">
            <button type="submit" name="action" value="searchGeneSubmit" class="btn btn-secondary">Search</button>
          </div>
        </div>
      </form>

      <!-- Search Results -->
      <div id="SearchResults" class="mt-3">
        {% if search_result %}
        <strong><em>{{ search_string }}</em> found in:</strong>
        <br>
        <table class="table table-striped" aria-describedby="Searchresults">
          <thead>
            <tr>
              <th style="width: 15%">Panel Name</th>
              <th style="width: 10%">Institute</th>
              <th style="width: 75%">Versions</th>
            </tr>
          </thead>
          <tbody>
            {% for item in search_result %}
            <tr>
              <td>{{ item['_id'] }}</td>
              <td>{{ item['institute'] }}</td>
              <td class="p-2">
                <div class="d-flex flex-wrap gap-3 align-items-center">
                  {% for version in item['versions'] %}
                  <span>{{ version }}</span>
                  {% endfor %}
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>

        {% elif search_string %}
        <strong><em>{{ search_string }}</em> not found.</strong>
        {% endif %}
      </div>

    </div> <!-- end card-body -->
  </div> <!-- end card -->
</div> <!-- end container-float -->
{% endmacro %}


{% macro new_panel() %}
<div class="container-float">
  <div class="card">
    <div class="card-body">
      <form action="{{ url_for('panels.panels') }}" enctype="multipart/form-data" method="POST">
        <div class="row">
          <div class="col-sm-2">
            <label class="col-form-label">New panel</label>
          </div>
          <div class="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 }} ({{institute._id}})</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), hyphens, 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="mt-2 row">
          <div class="col-sm-2">
            <label class="control-label col-form-label">Gene panel file</label>
          </div>
          <div class="col-sm-5 text-center">
            <input type="file" name="panel_file" class="custom-file-input" required>
            <p class="mt-2 help-block">How do I format my <a href="https://clinical-genomics.github.io/scout/user-guide/panels/#uploading-a-new-gene-panel-version" rel="noopener" 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-secondary">Upload</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
{% endmacro %}

{% macro history_view(panel_id, panel_name) %}
  <ul class="list-group list-group-flush">
    {% for version in panel_versions[panel_name] | sort(attribute='version', reverse=True) %}
      <a
        href="{{ url_for('panels.panel', panel_id=version._id) }}"
        class="list-group-item list-group-item-action d-flex align-items-center gap-2 text-decoration-none"
      >
        <span class="fw-semibold">{{ version.version }}</span>
        <small class="text-muted">{{ version.date.date() }}</small>
        <span class="badge bg-secondary rounded-pill">{{ version.genes|length }} genes</span>
      </a>
    {% endfor %}
  </ul>
{% 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 panel_history_modal(panel) %}
<div class="modal fade" id="historyModal_{{ panel._id }}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">History for {{ panel.display_name }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {{ history_view(panel._id, panel.panel_name) }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endmacro %}

{% macro remove_gene_panel_modal(institute, panel) %}
  <form action="{{ url_for('panels.panel_delete', panel_id=panel._id) }}"
        method="POST">
    <div class="modal fade" id="remove-gene-panel-modal-{{ panel._id }}">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Remove gene panel "{{panel.display_name}}"?</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            Are you sure that you would like to remove gene panel <strong>{{panel.display_name}}</strong> from <strong>{{institute._id}}</strong>?
          </div>
          <div class="modal-footer">
            <button class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Remove panel</button>
          </div>
        </div>
      </div>
    </div>
  </form>
{% endmacro %}

{% macro panel_edit_modal(panel) %}
  <div class="modal fade" id="modifyModal_{{ panel._id }}" tabindex="-1" aria-hidden="false">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modify {{ panel.display_name }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form method="POST" action="{{ url_for('panels.panels') }}" enctype="multipart/form-data" class="form-horizontal">
            <input type="hidden" name="panel_name" value="{{panel.panel_name}}">
            <div class="row">
              <div class="col-sm-5">
                <div class="custom-control custom-radio">
                  <input type="radio" id="add_{{panel.display_name}}" name="modify_option" class="custom-control-input" value="add" checked>
                  <label class="custom-control-label" for="add_{{panel.display_name}}">Add genes from text file</label>
                </div>
                <div class="custom-control custom-radio">
                  <input type="radio" id="replace_{{panel.display_name}}" name="modify_option" class="custom-control-input" value="replace">
                  <label class="custom-control-label" for="replace_{{panel.display_name}}">Replace genes using text file</label>
                </div>
              </div><!--end of col-->
              <div class="col-sm-7">
                <input type="file" name="panel_file" class="custom-file-input" required>
                <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" rel="noopener" target="_blank">gene panel file</a>?</p>
              </div><!--end of col-->
            </div><!--end of row-->
            <div class="row">
              <div class="col text-center">
                <button id="submit" type="submit" class="btn btn-secondary">Submit</button>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
{% endmacro %}


{% block scripts %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js" integrity="sha384-EEbPKCLAcxVCiXCi8k9bdeuayzAxVSmBzP/wLpmpd0LVW+Lvh2mjS1W02kdYm5z1" referrerpolicy="no-referrer" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/js/bootstrap-select.min.js" integrity="sha512-yrOmjPdp8qH8hgLfWpSFhC/+R9Cj9USL8uJxYIveJZGAiedxyIxwNw4RsLDlcjNlIRR4kkHaDHSmNHAkxFTmgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js" integrity="sha512-93wYgwrIFL+b+P3RvYxi/WUFRXXUDSLCT2JQk9zhVGXuS2mHl2axj6d+R6pP+gcU5isMHRj1u0oYE/mWyt/RjA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {
  const options = {
    valueNames: ['institute', 'panelName', 'panelID']
  };
  const panelList = new List('panel-list', options);

  // Custom filter by institute dropdown
  const instituteFilter = document.getElementById('instituteFilter');
  instituteFilter.addEventListener('change', function() {
    const val = this.value.toLowerCase();
    panelList.filter(function(item) {
      if (!val) return true; // no filter
      return item.values().institute.toLowerCase().includes(val);
    });
  });
});

document.addEventListener("DOMContentLoaded", () => {
  const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  const tooltips = tooltipTriggerList.map(el => new bootstrap.Tooltip(el));
});

function toggleRow(hideCheck) {
  var els = document.getElementsByClassName("hidableRow");
  for(var i=0;i<els.length;i++){
    collapse = bootstrap.Collapse.getOrCreateInstance(els[i])
    if(hideCheck.checked){
      collapse.hide();
    }
    else{
      collapse.show();
    }
  }
}

$(function(){
      function getNameTerms(query, process) {
        $.get("{{ url_for('genes.api_genes') }}", {query: query}, function(data) {
          process(data)
        });
      }

      $(".typeahead_gene").typeahead({
        name: 'dynamic_gene_add',
        source: getNameTerms,
        minLength: 3,
      });

  });

</script>
{% endblock %}