{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool {% endblock %}
{% block content %}
<main>
    <div class="container" align="left">
        <p class="button4"><strong>Gene / Probe Information</strong></p>
        <table width="100%" align="center" bordercolor="black" border="1" style="border-collapse:collapse; word-break:break-all">
            <tbody>
                <tr>
                    <td width="200px" align="center"><strong>Gene / Probe ID</strong></td>
                    <td id="gid" colspan="3"></td>
                </tr>
                <tr id="kegg_info" style="display: none;">
                    <td id="kegg_title" width="285px" align="center"><strong>KEGG ortholog</strong></td>
                    <td width="200px" align="center"><strong>ID</strong></td>
                    <td width="150px" align="center"><strong>Name</strong></td>
                    <td align="center"><strong>Definition</strong></td>
                </tr>
                <tr id="kegg_result" style="display: none;">
                </tr>
            </tbody>
        </table><br><br>
        <div id="map_info" width="100%" style="display: none; ">
            <h2>Mapping your query to KEGG pathways:</h2>    
            <table id="map_table" width="100%" align="center" border="1" style="border-collapse:collapse; " bordercolor="black">
                <thead>
                    <tr>
                        <td align="center"><strong>ID</strong></td>
                        <td align="center"><strong>Description</strong></td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <!-- result -->
                    </tr>
                </tbody>
            </table><br><br>
        </div>

        <div id="GO_info" width="100%" style="display: none;">
            <p class="button4"><strong>Gene Ontology</strong></p>
            <table id="go_table" width="100%" align="center" border="1" style="border-collapse:collapse;" bordercolor="black">
                <tbody>
                    <tr>
                        <td width="120px" align="center"><strong>GO category</strong></td>
                        <td width="280px" align="center"><strong>GO ID</strong></td>
                        <td width="750px" align="center"><strong>GO term</strong></td>
                    </tr>
                    <tr id="biological_process_section">
                        <td rowspan="1" align="center"><strong>Biological process</strong></td>
                    </tr>
                    <tr id="molecular_function_section">
                        <td rowspan="1" align="center"><strong>Molecular function</strong></td>
                    </tr>
                    <tr id="cellular_component_section">
                        <td rowspan="1" align="center"><strong>Cellular component</strong></td>
                    </tr>
                </tbody>
            </table><br><br>
        </div>

        <div id='addition-container'> 
            <h2>Additional information:</h2>
            <table id="additional-info-table" width="100%" align="center" border="1" style="border-collapse:collapse;" bordercolor="black">
                <tbody></tbody>
            </table>
        </div><br><br>
        <!-- 新增: 顯示序列的區塊 -->
        <div id="sequence_info" width="100%" style="display: none;">
            <p class="button4"><strong>Sequence Information</strong></p>
            
            <table class="table text-center" style="width: 100%; max-width: 800px; background-color: white;">
                <thead>
                    <tr>
                        <td align="center"><strong>ID</strong></td>
                        <td align="center"><strong>Sequence Length</strong></td>
                    </tr>
                </thead>
                <tbody id="sequence-tbody"></tbody>
            </table>
            <br><br>
        </div>
        <div id = "coex-container">
            <h6>You can also search for transcript expression levels in specified conditions or start a co-expression analysis:</h6>
            <div class="btn-container" > 
                <button class="custom-btn" onclick="expression()">Transcript Expression Search</button>
                <button class="custom-btn" onclick="coexpression()">Coexpression Analysis</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>
        <!-- gene info -->
        <div class="modal fade" id="gene-info" 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">Transcript Expression Profile:</h2>
                    </div>
                    <div class="modal-body">
                        <div id="gene-charts" style="margin-top: 30px;"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- coexpression -->
        <div class="modal fade" id="coexpression" 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">Set parameter</h2>
                    </div>
                    <div class="modal-body">
                        <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 class="modal-footer">
                        <button class="btn btn-outline-primary" id="step2-submit">Submit</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</main>
<script src="{% static 'js/analysis/gene_search_info.js' %}"></script>
<style>
	.button4 {
		display: inline-block;
		border:solid;
		border-width:2px;
		padding: 0.5em 0.5em;
		background: #FFF;
		letter-spacing: 1px;
		text-decoration: none;
		font-size: 1em;
		font-weight:bold;
		color: #00477D;
	}
    .btn-container {
        display: flex;
        justify-content: center;
        align-items: center;    
        gap: 24px;            
        margin-top: 30px;       
    }
    .custom-btn {
        display: inline-block;
        padding: 12px 28px;
        font-size: 1.35em;
        font-weight: normal;
        color: #3896fb; 
        background: #fff; 
        border: 2.5px solid #3896fb; 
        border-radius: 18px;
        outline: none;
        cursor: pointer;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        box-shadow: none;
        margin: 0;      
    }
    .custom-btn:hover {
        background: #bcd4ffd2;     
        color: #3896fb;
        box-shadow: 0 2px 12px rgba(56,150,251,0.1); 
    }
    .modal-custom {
        margin-top: 10%;
        max-width: 80%;
    }
    #condition_list .modal-dialog {
        max-width: 40%;
    }
    #coexpression .modal-dialog {
        max-width: 60%;
    }

</style>
{% endblock %}