{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div style="border: 2px solid #6495ED; padding: 15px; border-radius: 8px; width: 100%; position: relative;">
            <div class="Download-container"> 
                <button class="Download" onclick="DownloadID()"  onmouseover="this.style.backgroundColor='#3d79e9'" onmouseout="this.style.backgroundColor='#6495ED'">Download DEG ID List</button>
                <button class="Download" onclick="DownloadTable()"  onmouseover="this.style.backgroundColor='#3d79e9'" onmouseout="this.style.backgroundColor='#6495ED'">Download DEG Information</button>
            </div>
            <h4 style="color: #6495ED">Your submittion :</h4>
            <p><strong>Control: </strong><span id="control-list"></span></p>
            <p><strong>Treatment: </strong><span id="treatment-list"></span></p>
            <p><strong>Fold Change
                <svg id="fold-change-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#6495ED" viewBox="0 0 16 16" style="cursor: help; margin-left: 4px; vertical-align: -2px; outline: none;">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
                </svg>
                : </strong><span id="fold-change-min"></span>  >= Fold change (log₂) or Fold change (log₂) >= <span id="fold-change-max"></span></p>
            <p><strong><span id="p_value_type"></span>: </strong><span id="p_value"></span></p>
        </div>
        <!-- Highcharts Bar Chart -->
        <div class="chart-container">
            <div id="barChart"></div>
        </div>

        <!-- Highcharts Volcano Plot -->
        <div class="chart-container">
            <div id="volcanoPlot"></div>
        </div>

        <!-- Highcharts Line Chart -->
        <div class="chart-container">
            <div id="expression_chart"></div>
        </div>

        <!-- Heatmap -->
        <div class="chart-container">
            <div id="heatmap"></div>
        </div>        

        <!-- DataTable -->
        <div id="tableFilters"></div>
        <div class="chart-container">
            <table id="dataTable"  width="100%"></table>
        </div>

        <!-- enrichment button -->
        <div class="btn-container">
            <div class="btn-row">
                <button class="custom-btn-p" id="enrich-up-p">Pathway Enrichment Analysis in Up-Regulated Genes</button>
                <button class="custom-btn-p" id="enrich-down-p">Pathway Enrichment Analysis in Down-Regulated Genes</button>
                <button class="custom-btn-p" id="enrich-all-p">Pathway Enrichment Analysis in All DEGs</button>
            </div>
            <div class="btn-row">
                <button class="custom-btn-go" id="enrich-up-go">GO Enrichment Analysis in Up-Regulated Genes</button>
                <button class="custom-btn-go" id="enrich-down-go">GO Enrichment Analysis in Down-Regulated Genes</button>
                <button class="custom-btn-go" id="enrich-all-go">GO Enrichment Analysis in All DEGs</button>
            </div>
        </div>


        <!-- list -->
        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
            <div class="modal-dialog modal-dialog-scrollable modal-custom">
                <div class="modal-content ">
                    <div class="modal-header">
                        <h2 class="modal-title" id="staticBackdropLabel">Matched gene list</h2>
                    </div>
                    <div class="modal-body">
                        <div>
                            <button id="select-all-btn" class="btn btn-primary">Select All</button>
                            <button id="deselect-all-btn" class="btn btn-secondary">Deselect All</button>
                        </div><br>
                        <table id="expression-table" class="display table table-striped"  style="width: 100%;">
                            <thead></thead>
                            <tbody></tbody>
                        </table>
                        <div class="dataTables_info"></div>
                        <div id="no-annotation-section" class="no-annotation-section mt-4"></div>
                    </div>
                    <div class="modal-footer">
                        <button id="modal-submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="{% static 'js/analysis/deg_result.js' %}"></script>
<style>
    .chart-container { 
        width: 100%; 
        margin-bottom: 30px; 
    }
    .filter-btn{
        width: 49%;
        position: relative;
        z-index: 0;
        min-width: 200px;
        border: 2px solid currentColor;
        border-radius: 48px;
        color: #6495ED;
        font-size: 1rem;
        text-align: center;
        overflow: hidden;
        padding: 10px 20px;
    }
    .filter-btn.active {
        background-color: #6495ED;
        color: white;
    }
    .Download-container{
        position: absolute;
        bottom: 15px;
        right: 15px;
    }
    .Download{
        background-color: #6495ED;
        color: white;
        border: none;
        padding: 8px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s ease;
    }
    .modal-custom {
        max-width: 80%;
    }

    .btn-container {
        display: flex;
        flex-direction: column;
        align-items: center;   
        gap: 20px;       
        margin-top: 30px;
    }

    .btn-row {
        display: flex;
        justify-content: center;
        gap: 56px;            
    }

    .custom-btn-p {
        display: inline-block;
        padding: 8px 20px;  
        font-size: 1em;      
        color: #ff0000; 
        background: #fff; 
        border: 2px solid #ff0000;
        border-radius: 12px; 
        cursor: pointer;
        max-width: 300px;      
        text-align: center;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        font-weight: normal;
        white-space: normal;
        word-break: break-word;
    }

    .custom-btn-p:hover {
        background: #ffbfbfd2;     
        color: #ff0000;
        box-shadow: 0 2px 8px rgba(56,150,251,0.06); 
    }

    .custom-btn-go {
        display: inline-block;
        padding: 8px 20px;  
        font-size: 1em;      
        color: #00a64b; 
        background: #fff; 
        border: 2px solid #00a64b;
        border-radius: 12px; 
        cursor: pointer;
        max-width: 300px;      
        text-align: center;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        font-weight: normal;
        white-space: normal;
        word-break: break-word;
    }

    .custom-btn-go:hover {
        background: #b3ffcd;     
        color: #00a64b;
        box-shadow: 0 2px 8px rgba(56,150,251,0.06); 
    }


</style>    
{% endblock %}