{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div id="step1">
            <p>
                It allows users to search the significantly differentially expressed genes or transcripts under the given conditions in the project.<br>
                NOTE:	The execution time of a given task depends on the size of input datasets.<br>
                Generally, per 10,000 genes / transcripts require 9~10 seconds to execute.
            </p>
            <span class="badge rounded-pill step">Step1</span>
            <strong style="margin-left: 20px; margin-top: 5px;">
                Please specify a control and a treatment:
            </strong>
            <div class="deg-container">
                <div class="deg-box">
                    <h3>Control:</h3>
                    {% for condition in user_conditions %}
                    <label>
                        <input type="checkbox" name="control_conditions" value="{{ condition.value }}" class="control-checkbox">
                        {{ condition.label }}
                    </label><br>
                    {% endfor %}
                </div>
            
                <div class="deg-box">
                    <h3>Treatment:</h3>
                    {% for condition in user_conditions %}
                    <label>
                        <input type="checkbox" name="treatment_conditions" value="{{ condition.value }}" class="treatment-checkbox">
                        {{ condition.label }}
                    </label><br>
                    {% endfor %}
                </div>
            </div>
            <div style="text-align: center;">
                <button class="btn btn-success" onclick="extra()">Draw Venn Diagram</button>
                <button class="btn btn-outline-primary" id="nextStep">Next Step</button>
                <button class="btn btn-secondary" id="reset">Reset</button>
            </div>
        </div>
        <div id="step2" style="display: none;">
            <span class="badge rounded-pill">Step2</span>
            <strong style="margin-left: 20px; margin-top: 5px;">
                Please set the fold change and p-value cutoffs
            </strong>
            <div id="step2-container" style="margin-left: 20px; margin-top: 10px;">
                <p style="margin-bottom: 5px; font-weight: bold;">➢ Fold range limitation:</p>
                <div>
                    <input type="text" id="fold_change_min" value="-1" style="display: inline-block; width: 100px;">
                    <p style="display: inline-block; margin: 0 5px;"> >= Fold change (log₂) or Fold change (log₂) >= </p>
                    <input type="text" id="fold_change_max" value="1" style="display: inline-block; width: 100px;">
                </div>
                <div id="p_value_selection" style="margin-top: 10px; ">
                    <select id="p_value_type" style="margin-left: 10px; padding: 5px; border-radius: 4px;">
                        <option value="fdr" selected>FDR</option>
                        <option value="pvalue">P-value</option>
                    </select>
                    <p style="display: inline-block; margin: 0 5px;"><strong><span id="p_value_type_label">FDR</span>: </strong></p>
                    <input type="text" id="p_value" value="" style="display: inline-block; width: 100px;">
                </div>
                {% if project.has_read_count %}
                <p style="margin-bottom: 5px; font-weight: bold;">➢ Select Data Source:</p>
                
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="data_source" id="source_normalized" value="normalized" checked>
                    <label class="form-check-label" for="source_normalized">
                        {{ project.expression_scale }}
                    </label>
                </div>

                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="data_source" id="source_readcount" value="readcount">
                    <label class="form-check-label" for="source_readcount">
                        Read Count
                    </label>
                </div>
                {% else %}
                    <input type="hidden" name="data_source" value="normalized">
                {% endif %}
            </div>        
            <div style="margin-top: 20px; text-align: center;">
                <button class="btn btn-outline-primary" id="submit">Submit</button>
                <button class="btn btn-secondary" id="prevStep">Back</button>
            </div>
        </div>
        <div id="venn-section" style="display: none;">
            <span class="badge rounded-pill">Extra</span>
            <strong style="margin-left: 20px;">Input gene lists for Venn Diagram:</strong>
            
            <div id="venn-inputs" class="d-flex flex-row flex-wrap gap-3 mt-3">
                <div class="venn-group">
                    <textarea class="form-control venn-textarea" rows="10" style="width: 200px;" placeholder="Please input a gene list with IDs (separate by semicolon or line break)"></textarea>
                </div>
            </div>
        
            <div style="text-align: center;">
                <button class="btn btn-outline-success" id="addVennGroup">+ Add Group</button>
                <button class="btn btn-primary" id="submitVenn">Submit</button>
                <button class="btn btn-secondary" id="prevStep2">Back</button>
            </div>
            <div class="card shadow-sm mt-5" id="selectedRegion" style="display: none;">
                <div class="card-header bg-light">
                    <h4>Venn Diagram Result</h4>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <h5 id="selectedRegionTitle" class="text-secondary">Selected Region Genes</h5>
                            <textarea id="regionGenes" class="form-control mb-3" rows="12" readonly placeholder="Click a number on the Venn diagram to see genes here..."></textarea>
                            <div class="d-flex gap-2">
                                <button class="btn btn-sm btn-outline-secondary w-50" onclick="triggerEnrichment('pathway')">
                                    Pathway Enrichment
                                </button>
                                <button class="btn btn-sm btn-outline-primary w-50" onclick="triggerEnrichment('go')">
                                    GO Enrichment
                                </button>
                            </div>
                            <hr class="text-black-50 mb-4">
                            <div class="mt-3 mb-4">
                                <button id="downloadTsvBtn" class="btn btn-success w-100 shadow-sm">
                                    <i class="fas fa-file-export"></i> Download Full Venn Data
                                </button>
                                <small class="text-muted d-block text-center mt-2">
                                    Export all regions and their contained genes.
                                </small>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="alert alert-info py-2 mb-3 text-center shadow-sm" role="alert">
                                <strong>Tip:</strong> Click a number on the Venn diagram to view the gene list.
                            </div>
                            <div id="vennWrapper">
                                <div id="vennContainer"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </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_search.js' %}"></script>
<style>
    .badge {
        font-size: 1.5rem;  /* 調整字體大小 */
        padding: 10px 15px; /* 增加內邊距，讓圓角標籤更大 */
        background-color: #6495ED;
    }
    .deg-container {
        display: flex;           /* 使用 Flexbox */
        justify-content: space-around; /* 左右對齊 */
        padding: 20px;           /* 增加間距 */
        gap: 20px;               /* 設定左右區塊距離 */
    }

    .deg-box {
        width: 40%;              /* 限制寬度 */
        border: 1px solid #ccc;   /* 加框線 */
        padding: 15px;           /* 內距 */
        border-radius: 10px;     /* 圓角 */
        background-color: #f8f8f8; /* 淡背景色 */
    }

    h3 {
        text-align: center;       /* 標題置中 */
        color: #333;             /* 深色標題 */
        margin-bottom: 10px;     /* 下方間距 */
    }
    #step2-container{
        width: 60%;              /* 限制寬度 */
        border: 1px solid #ccc;   /* 加框線 */
        padding: 15px;           /* 內距 */
        border-radius: 10px;     /* 圓角 */
        background-color: #f8f8f8; /* 淡背景色 */
    }
    .modal-custom {
        max-width: 80%;
    }
    #vennWrapper {
        width: 100%;
        min-height: 600px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    #vennContainer {
        width: 650px;
        height: 600px;
    }
</style>    
{% endblock %}