{% extends 'sharedTemplates/base.html' %}
{% block title %}{{ reference }}{% endblock %}
{% block body %}
    <div class="container">

         <div class="collapse" id="collapse_info">
         <div id="infoBox" class="card mt-3 shadow">
              <button
              type="button"
              class="btn p-0 position-absolute"
              style="top: 0.5rem; right: 0.5rem; color: #6c757d; font-size: 1.25rem; line-height: 1;"
              data-toggle="collapse"
              data-target="#collapse_info"
              aria-label="Close"
            >
              &times;
            </button>
      <div class="card-body">
  <h5 class="card-title">Information</h5>
  <p class="card-text">
    This table provides a detailed overview of segment annotations across all samples.<br><br>
    For each entry, the following information is displayed:
    <ul>
      <li><strong>Sample</strong>: the name of the annotated sample.</li>
      <li><strong>Short name</strong>: the simplified gene segment name.</li>
      <li><strong>Start/End coord</strong>: the genomic coordinates of the segment on the contig.</li>
      <li><strong>Status</strong>: whether the segment is a known or novel annotation.</li>
      <li><strong>SNPs / Insertions / Deletions</strong>: the number of detected variants compared to the reference.</li>
    </ul>
    Use the search bar to filter annotations. Click the blue <strong>MSA</strong> button to view a multiple sequence alignment for that segment across samples.
  </p>
</div>

          </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mt-5">
            <h2 class="mt-0">Overall report</h2>
            <a class="btn gap-2" data-toggle="collapse" href="#collapse_info" role="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
                </svg>
            </a>
        </div>
        <div class="card card-body shadow">
            <div class="row d-flex align-items-center g-3">
                <div class="col">
                    <input type="text" id="searchInput" class="form-control" placeholder="Search in annotation data...">
                </div>
                <div class="col-auto">
                    <button class="btn btn-warning" type="button" id="amountTable"></button>
                </div>
            </div>
            <div class="table-responsive" style="height: 1000px;">
                <table class="table table-hover mt-3" id="DataTable">
                    <thead>
                    <tr>
                        {% for column in data_table.columns[:-4] %}
                            <th class="column-header sortable" data-column={{ column }}>{{ column }}</th>
                        {% endfor %}
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for row in data_table.iterrows() %}
                        <tr>
                            {% for value, column in zip(row[1][:-4], data_table.columns[:-2]) %}
                                <td class="column-data">
                                    {{ value }}
                                </td>
                            {% endfor %}
                            <td>
                                <form action="{{ url_for('msa_sequence') }}" method="POST">
                                    <input type="hidden" name="reference" value="{{ row[1]["Target name"] }}">
                                    <input type="hidden" name="allele" value="{{ row[1]["Library name"] }}">

                                    <input type="hidden" name="query" value="{{ row[1]["Library sequence"] }}">
                                    <input type="hidden" name="subject" value="{{ row[1]["Target sequence"] }}">
                                    <button type="submit" class="btn btn-primary">
                                        MSA
                                    </button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>



    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const table = document.getElementById('DataTable');
            const headers = table.querySelectorAll('thead th.sortable');

            headers.forEach((header, index) => {
                header.addEventListener('click', function () {
                    const currentAsc = header.classList.contains('asc');
                    sortTableByColumn(table, index, !currentAsc);

                    headers.forEach(h => h.classList.remove('asc', 'desc'));
                    if (!currentAsc) {
                        header.classList.add('asc');
                    } else {
                        header.classList.add('desc');
                    }
                });
            });

            function sortTableByColumn(table, columnIndex, ascending = true) {
                const tBody = table.querySelector('tbody');
                const rows = Array.from(tBody.querySelectorAll('tr'));

                rows.sort((rowA, rowB) => {
                    const cellA = rowA.querySelectorAll('td')[columnIndex].textContent.trim();
                    const cellB = rowB.querySelectorAll('td')[columnIndex].textContent.trim();

                    const numA = parseFloat(cellA.replace(',', '.'));
                    const numB = parseFloat(cellB.replace(',', '.'));
                    const aIsNumeric = !isNaN(numA);
                    const bIsNumeric = !isNaN(numB);

                    if (aIsNumeric && bIsNumeric) {
                        return ascending ? numA - numB : numB - numA;
                    } else {
                        if (cellA.toLowerCase() < cellB.toLowerCase()) r / eturn
                        ascending ? -1 : 1;
                        if (cellA.toLowerCase() > cellB.toLowerCase()) return ascending ? 1 : -1;
                        return 0;
                    }
                });

                rows.forEach(row => tBody.appendChild(row));
            }
        });
    </script>
{% endblock %}