{% extends "layout_bs4.html" %}

{% block title %}
  {{ super() }} - {{ institute.display_name }} - {{ case.display_name }}
{% 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">
    <a class="nav-link" href="{{ url_for('cases.cases', institute_id=institute._id) }}">
      {{ institute.display_name }}
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="{{ url_for('cases.case', institute_id=institute._id, case_name=case.display_name ) }}">
      {{ case.display_name }}
    </a>
  </li>
  <li class="nav-item active">
    <span class="navbar-text">MatchMaker</span>
  </li>
{% endblock %}

{% block content_main %}
{% set panel = panel|int %}
<div class="container-float">
  <div class="card mt-3">
    <div class="card-body">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">Submitted: <strong>{{case.mme_submission.created_at.strftime('%Y-%m-%d %H:%M')}}</strong></li>
          <li class="breadcrumb-item">Last updated: <strong>{{case.mme_submission.updated_at.strftime('%Y-%m-%d %H:%M')}}</strong></li>
        </ol>
      </nav>
      <br>
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item"><a href="#" class="nav-link {% if panel == 1 %}active{% endif %}" data-toggle="tab" onclick="hide_div(1)"><h4>Patient Overview</h4></a></li>
        <li class="nav-item"><a href="#" class="nav-link {% if panel == 2 %}active{% endif %}" data-toggle="tab" onclick="hide_div(2)"><h4>External Matches</h4></a></li>
        <li class="nav-item"><a href="#" class="nav-link {% if panel == 3 %}active{% endif %}" data-toggle="tab" onclick="hide_div(3)"><h4>Internal Matches</h4></a></li>
      </ul>
      <div class="tab-content" id="tabs">
        <div class="tab-pane" id="1">
          {{ patient_data() }}
        </div>
        <div class="tab-pane" id="2">
          {{ show_matches('external') }}
        </div>
        <div class="tab-pane" id="3">
          {{ show_matches('internal') }}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}


{% macro patient_data() %}
<br>
<div class="ml-3">
  <p>Features (HPO terms):
    {% for hpo in case.mme_submission.features %}
      <span class="badge badge-primary">{{hpo.id}}</span>
    {% endfor %}
  </p>
  <p>Disorders (OMIM terms):
    {% for omim in case.mme_submission.disorders %}
      <span class="badge badge-info">{{omim.id}}</span>
    {% endfor %}
  </p>
  <p>Submitted patients:
    {% for patient in case.mme_submission.patients %}
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Patient id: <strong>{{patient.id}}</strong></li>
        <li class="list-group-item">Patient label: <strong>{{patient.label}}</strong></li>
        <li class="list-group-item">Sex: <strong>{{patient.sex}}</strong></li>
        <div class="list-group-item">genomic features:<br>
            <div class="row">
            {% for g_feat in patient.genomicFeatures %}
              <div class="card">
                  <div class="card-body">
                    {% for key, value in g_feat.items() %}
                      {% if key == 'gene' %}
                        {{key}}:&nbsp;<span class="badge badge-secondary">{{value.id}}</span>
                        <hr>
                      {% elif key == 'variant' %}
                        {% for ikey, item in value.items() %}
                          {{ikey}}:<strong>{{item}}</strong><br>
                        {% endfor %}
                      {% elif key == 'type' %} <!-- this will be variant effect -->
                        {{key}}:<strong>{{value.label}}</strong>
                        <br>
                      {% else %} <!-- this will be zygosity -->
                        {{key}}:<strong>{{value}}</strong>
                        {% if value == 1 %}
                          (heteroz. or hemiz. if on X in males)
                        {% elif value == 2 %}
                          (homozygous)
                        {% endif %}
                      {% endif %}
                    {% endfor %}
                  </div>
              </div>
            {% endfor %}
            </div>
        </div>
      </ul>
    {% endfor %}
  </p>
</div>
{% endmacro %}

{% macro show_matches(type) %}
<!-- show matches of the selected type from the most recent -->
<br>
{% set matching_patients = [] %}
  <div class="m-3">
  {% for patient, match_objs in matches.items() %}
    <div class="panel-group">
    {% set p_name = patient.split('.') %}
    <h4> Showing {{type}} matches for patient {{ p_name[1] }}:</h4>
    {% for match_obj in match_objs %}
      {% if match_obj.match_type == type %}
        {% do matching_patients.append(match_obj.patient_id) %}
        <div class="accordion" id="accordionExample">
          <div class="card">
            <div class="card-header" id="heading_{{match_obj.match_oid}}">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#div_{{match_obj.match_oid}}" aria-expanded="false" aria-controls="collapseTwo">
                  Match {{match_obj.match_date.strftime('%Y-%m-%d %H:%M')}}
                </button>
              </h2>
            </div>
            <div id="div_{{match_obj.match_oid}}" class="collapse" aria-labelledby="heading_{{match_obj.match_oid}}" data-parent="#accordionExample">
              <div class="card-body">
                {% for match_result in match_obj.patients %}
                   <table class="table table-condensed">
                     <thead>
                       <tr>
                         <th scope="col">Score</th>
                         <th scope="col">Patient ID</th>
                         <th scope="col">MME node</th>
                         <th scope="col">Contact</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
                         <td><span class="badge badge-primary badge-pill">{{match_result.score.patient|round(4)}}</badge></td>
                         <td><strong>{{match_result.patient_id}}</strong></td>
                         <td>{{match_result.node.label}}</td>
                         <td>{{match_result.patient.contact.name}}
                           {% if match_result.patient.contact.institution %}
                             <br>{{match_result.patient.contact.institution}}
                           {% endif %}
                           <br>{{match_result.patient.contact.href}}
                         </td>
                       </tr>
                     </tbody>
                   </table>
                   <table class="table table-condensed">
                     <thead>
                       <tr>
                         <th style="width: 30%">Diagnoses</th>
                         <th style="width: 30%">Features</th>
                         <th style="width: 40%">Genomic Features</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
                         <td>
                           {% for omim in match_result.patient.disorders %}
                             <span data-toggle="tooltip" title="{{omim.label or 'description not available'}}" class="badge badge-info">{{omim.id}}</span>
                           {% endfor %}
                         </td>
                         <td>
                           {% for feature in match_result.patient.features %}
                             <span data-toggle="tooltip" title="{{feature.label or 'description not available'}}" class="badge badge-primary">{{feature.label}}({{feature.id}})</span>
                           {% endfor %}
                         </td>
                         <td>
                           <div class="card-columns">
                           {% for g_feat in match_result.patient.genomicFeatures %}
                            {% if g_feat %}

                                <div class="card w-100">
                                  <div class="card-body">
                                    {% for key, value in g_feat.items() %}
                                      {% if key == 'gene' %} <!-- genomic feature gene-->
                                        {{key}}:&nbsp;<span class="badge badge-secondary">{{value.id}}</span>
                                        <hr>
                                      {% elif key == 'variant' %} <!-- genomic feature variant-->
                                        {% for ikey, item in value.items() %}
                                          {% if not ikey == 'shareVariantLevelData' %}
                                            {{ikey}}:<strong>{{item}}</strong><br>
                                          {% endif %}
                                        {% endfor %}
                                      {% elif key == 'zygosity' %} <!-- genomic feature zygosity-->
                                        {{key}}:<strong>{{value}}</strong>
                                        {% if value == 1 %}
                                          (heteroz. or hemiz. if on X in males)
                                        {% elif value == 2 %}
                                          (homozygous)
                                        {% endif %}
                                      {% else %} <!-- genomic feature type-->
                                        {{key}}:<strong>{{value.label}}</strong>
                                        <br>
                                      {% endif %}
                                    {% endfor %}
                                  </div>
                                </div>

                            {% endif %}
                           {% endfor %}
                           </div>
                          </div> <!--end of card body -->
                         </td>
                       </tr>
                     </tbody>
                   </table>
                   <br>
                   <br>
                   <hr>
                {% endfor %} <!-- end of for patient in match_obj.patients -->
              </div>
            </div>
          </div>
        </div>
        <br>
      {% endif %} <!-- end of if match_obj.match_type == type -->
    {% endfor %} <!-- end of for match_obj in match_objs -->
    {% if not matching_patients %}
      <br><br>No matches available for this patient.
    {% endif %} <!-- end of if not matching_patients -->
    </div>
  {% endfor %} <!--end of for patient, match_objs in matches.items() -->
</div>
{% endmacro %}

{% block scripts %}
  {{ super() }}
  <script type="text/javascript">
    $(document).ready(function() {
      hide_div({{panel}})
    });

    function hide_div(show_div){
      for (i=1; i<4; i++) {
        var div_el = document.getElementById(i);
        if (i==show_div){ //show div
          div_el.style.display = "block";
        }
        else{ //hide other divs
          div_el.style.display = "none";
        }
      }
    };
  </script>
{% endblock %}
