{% extends "banner.html" %}

{% block content %}
<div class="container mt-3">
    <div class="row">
        <a class="col" href="/">Home Page</a>
    </div>
    {% if ST and mlst_tab and alleles %}
        <div class="row my-2">
            <h2>MLST Result</h2>

            <div class="col-3">
                <p>Sequencing type is: {{ ST }}</p>
            </div>
            <div class="col">
                <table>{{ alleles|safe }}</table>
            </div>
        </div>
        <div class="btn-group mt-1">
            <button class="btn btn-primary" id="mlstBtn">Heatmap</button>
            <button class="btn btn-secondary" id="alleleTableBtn">Allele Table</button>
        </div>
        <div id="heatmapContent" class="mt-3">
            <img class="img-fluid" src="{{ url_for('static', filename='mlst_heatmap.png') }}" alt="Heatmap of mlst alleles">
        </div>
        <div id="alleleTableContent" class="mt-3 d-none">
            <table>{{ mlst_tab|safe }}</table>
        </div>
    {% elif alleles %}
        <div class="row my-2">
            <h2>MLST Result</h2>

            <div class="col">
                <p> {{ ST }} </p>
            </div>
            <div class="col">
                <table>{{ alleles|safe }}</table>
            </div>
        </div>
    {% elif mlst_tab %}
        <p> {{ST}} </p>
    {% endif %}

    {% if vir100 or vir_less %}
        <div class="container mt-5">
            <h2>Virulence Results</h2>
            {% if vir100 %}
            <h3>Virulence genes with 100% match</h3>
            <table class="table">{{ vir100|safe }}</table>
            {% endif %}
            {% if vir_less %}
            <h3>Virulence genes with match rate between {{ vir_tresh }}% and 100%</h3>
            {{ vir_less|safe }}
            {% endif %}
            <div class="text-start mt-3">
                <button id="zoomBtn" class="btn btn-outline-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" fill="currentColor" class="bi bi-arrows-fullscreen" viewBox="0 0 16 16">
                      <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/>
                    </svg>
                </button>
                <button id="downloadBtn" class="btn btn-outline-secondary">Download Image</button>
                <img id="virulenceImage" class="img-fluid" src="{{ url_for('static', filename='virulence_heatmap.png') }}" alt="Heatmap of virulence genes">
                <div id="imageModal" class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" style="width: 100vw;">
                    <div class="modal-dialog modal-fullscreen" style="max-width: 100%;">
                        <div class="modal-content">
                            <div class="modal-header text-centered">
                                <h5> Presence of virulence genes</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body" style="overflow: auto; max-height: 90vh;">
                                <img id="modalImage" style="width: 2907px; height: auto;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    {% endif %}

    {% if resistance %}
        <div class="container mt-5">
            <h2>Resfinder Results</h2>
            <h3 class="mt-3">Predicted phenotype</h3>
            <table class="table">{{ resistance|safe }}</table>
            <h3 class="mt-3">Acquired AMR gene hits</h3>
            <table class="table">{{ genes|safe }}</table>
            <h3 class="mt-3"> Chromosomal mutations mediating AMR </h3>
            <table class="table">{{ point|safe }}</table>
        </div>
    {% endif %}
</div>

<script src="static/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const mlstBtn = document.getElementById('mlstBtn');
    const alleleTableBtn = document.getElementById('alleleTableBtn');
    const zoomBtn = document.getElementById('zoomBtn');
    const contents = {
        heatmapContent: document.getElementById('heatmapContent'),
        alleleTableContent: document.getElementById('alleleTableContent')
    };

    if (mlstBtn && alleleTableBtn) {
        alleleTableBtn.addEventListener('click', function () {
            contents.heatmapContent.classList.add('d-none');
            contents.alleleTableContent.classList.remove('d-none');
            this.classList.remove('btn-secondary');
            this.classList.add('btn-primary');
            mlstBtn.classList.remove('btn-primary');
            mlstBtn.classList.add('btn-secondary');
        });

        mlstBtn.addEventListener('click', function () {
            contents.heatmapContent.classList.remove('d-none');
            contents.alleleTableContent.classList.add('d-none');
            this.classList.remove('btn-secondary');
            this.classList.add('btn-primary');
            alleleTableBtn.classList.remove('btn-primary');
            alleleTableBtn.classList.add('btn-secondary');
        });
    }
    // Check if the Zoom button exists before adding an event listener
    if (zoomBtn) {
            const imageModal = new bootstrap.Modal(document.getElementById('imageModal'), {
              focus: true
            });

            zoomBtn.addEventListener('click', function () {
                let originalImg = document.getElementById('virulenceImage');
                let modalImage = document.getElementById('modalImage');
                modalImage.src = originalImg.src;

                // Set the image dimensions to 30% of its natural dimensions
                originalImg.onload = function() {
                    modalImage.style.width = originalImg.naturalWidth * 0.3 + 'px';
                    modalImage.style.height = originalImg.naturalHeight * 0.3 + 'px';
                };

                imageModal.show();
            });
    }
    if(document.getElementById('downloadBtn')){
        document.getElementById('downloadBtn').addEventListener('click', function() {
          const image = document.getElementById('virulenceImage');
          const imageUrl = image.src;
          const fileName = 'downloaded_image.jpg';

          const link = document.createElement('a');
          link.href = imageUrl;
          link.download = fileName;

          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
    }
});

</script>
{% endblock %}