{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div id="step1">
            <div class="card mt-3" style="width: 60%;" >
                <div class="card-header fs-5 fw-bold " style="background-color: #6495ED; color: #FFF; ">
                    Gene Search
                </div>
                <div class='card-body'>
                    <form id="ajax_form">
                        <label for="gene_id" class="form-label">Please input a keyword, such as keyword, KEGG KO ID, Gene ID or Probe ID.</label><br>
                        {% if random_kegg %}
                            <label>e.g. fatty or {{ random_gene }} or {{ random_kegg }}</label>
                        {% else %}
                            <label>e.g. fatty or {{ random_gene }}</label>
                        {% endif %}
                        <input type="text" class="form-control" id="input" name="input">
                    </form>
                    <hr>
                    <button class="btn btn-outline-primary" id="step1-submit" style="position:relative; left:0%;">submit</button>
                </div>
            </div>
            <hr id="hr" style="display: none;"><br>
            <h2 id="result_text" ></h2><br><br> 
            <h4 id="notfind_text" style="display: none;">1. The input query is not valid.<br>
            2. The gene you input does not have any microarray expression profile and KEGG information.<br><br>
            Please try another keyword. Thank you!</h4>
            <h4 id="notfind_text_blast" style="display: none;">1. The input sequence did not pass the threshold that we set for blast.<br> 
            2. The gene of sequence you input does not have any microarray expression profile and KEGG information.<br><br>
            Please try another sequece. Thank you!</h4>
            
            <div class="card mt-3">
                <table id="result_list" width="100%" align="center" bordercolor="black" border="1" style="display:none; border-collapse:collapse; word-break:break-all">
                        <thead>
                            <tr>
                                <th scope="col" >Gene / Probe ID</th>
                                <th scope="col" >Definition of KEGG ortholog</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- result -->
                        </tbody>
                </table>
            </div>
        </div>
        <div id="step2" style="display: none;">
            <span class="badge rounded-pill" style="background-color: #6495ED;">Set parameters</span>
            <div id="step2-container" style="margin-left: 20px; margin-top: 10px;">
                <strong>➢ Correlation coefficient</strong>
                <div>
                    <input type="radio" name="coefficient" value="pcc" checked> Pearson correlation coefficient (PCC)<br>
                    <input type="radio" name="coefficient" value="spearman"> Spearman's rank correlation coefficient (Spearman's rho)
                </div><br>
                <strong>➢ Correlation</strong>
                <div>
                    <input type="radio" name="correlation" value="Positive" checked> Positive<br>
                    <input type="radio" name="correlation" value="Negative"> Negative<br>
                    <input type="radio" name="correlation" value="both"> Positive or Negative
                </div><br>
                <strong>➢ Cut-off value</strong>
                <div>
                    <p>Note: The minimum cut-off value is 0.7 in positive correlation and maximum cut-off value is -0.7 in negative correlation.</p>
                    <input type="text" id="cut-off" name="cut-off" value="0.8">
                </div>
            </div>        
            <div style="margin-left: 50%; margin-top: 20px; text-align: center;">
                <button class="btn btn-outline-primary" id="step2-submit">Submit</button>
                <button class="btn btn-secondary" id="prevStep">Back</button>
            </div>
        </div>
        <!-- condition_list -->
        <div class="modal fade" id="condition_list" 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">Condition Selection</h2>
                    </div>
                    <div class="modal-body">
                        <form  method="POST">
                            <div>
                                <label>
                                    <input type="checkbox" id="select-all-checkbox" onclick="toggleCheckboxes(this.checked)"> Select All/Delete All
                                </label>
                            </div><br>
                            <div id="condition-options-container">
                                <!-- Dynamically populated conditions will be inserted here -->
                            </div>
                        </form>
                    </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/coexpression_single.js' %}"></script>
<style>
    .badge {
        font-size: 1.5rem;  /* 調整字體大小 */
        padding: 10px 15px; /* 增加內邊距，讓圓角標籤更大 */
    }
    .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: 80%;              /* 限制寬度 */
        border: 1px solid #ccc;   /* 加框線 */
        padding: 15px;           /* 內距 */
        border-radius: 10px;     /* 圓角 */
        background-color: #f8f8f8; /* 淡背景色 */
    }
    .modal-custom {
        max-width: 40%;
        margin-top: 10%;
    }
</style>    
{% endblock %}