{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container2">        
        <div class="col-sm-10 mx-auto mt-5">
            <div class="card mt-3">
                <div class="card-header">
                    <h3 style="text-align:center"><b>Upload Files for {{ project.name }}</b></h3>
                </div>
                <div class="card-body" style="text-align:left">
                    <div class="row g-3 mb-4">
                        <div class="col-12">
                            <p class="fw-bold text-secondary mb-2">Please confirm the followings before you upload files:</p>
                            <ul class="mb-0">
                                <li>The annotation and expression files are required. (Filename Extension: .txt, .tsv, .tab).</li>
                                <li>The column name only uses numbers, letters, and underscores(_).</li>
                                <li>The sequence ID should be the same in each file.</li>
                                <li>The maximum file size is 100 MB.</li>
                            </ul>
                        </div>
                    </div>
                    <hr>
            
                    <form id="upload-form" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="hidden" name="load_example_trigger" id="load-example-trigger" value="false">
                        <input type="hidden" name="load_expression_example" id="load-expression-example" value="false">
                        <input type="hidden" name="load_pathway_example" id="load-pathway-example" value="false">
                        <input type="hidden" name="load_go_example" id="load-go-example" value="false">
                        <input type="hidden" name="load_additions_example" id="load-additions-example" value="false">
                        <input type="hidden" name="load_fasta_example" id="load-fasta-example" value="false">
                        <input type="hidden" name="load_fasta_id_mapping_example" id="load-fasta_id_mapping-example" value="false">
                        <!-- 必填: Expression -->
                        <div>
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>Annotation file - Expression <span class="required">*</span> :</strong></h4></label>
                            <input type="file" name="expression" id="expression-file" required><br>
                            <div class="example-box ms-4 my-2 p-2 bg-light border rounded d-inline-flex align-items-center">
                                <span class="small text-muted">Example: <b>Example_dataset_expression.txt</b></span>
                                <div class="ms-3">
                                    <a href="{% static 'download_packs/Example_dataset/Example_dataset_expression.txt' %}" download class="btn btn-outline-secondary btn-sm py-0 fw-bold">📥 Download</a>
                                    <button type="button" class="btn btn-outline-primary btn-sm py-0 fw-bold ms-1" onclick="loadExampleFile('expression', 'Example_dataset_expression.txt')">⚡ Load</button>
                                </div>
                            </div>
                            <div style="margin-left: 30px;" class="mt-2">
                                <span id="expression-file-name" class="text-success fw-bold d-block mb-2"></span>
                                <div class="mb-3">
                                    <label class="fw-bold">Type of expression profile:</label><br>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="expression_profile_type" id="type_ngs" value="NGS" onclick="toggleExpressionOptions()" checked>
                                        <label class="form-check-label" for="type_ngs">NGS</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="expression_profile_type" id="type_microarray" value="Microarray" onclick="toggleExpressionOptions()">
                                        <label class="form-check-label" for="type_microarray">Microarray</label>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="fw-bold">Expression scale:</label>
                                    <select name="expression_scale" id="expression-scale" class="form-select" style="width: auto; display: inline-block;">
                                        <option value="RPM">RPM</option>
                                        <option value="FPKM">FPKM</option>
                                        <option value="TPM">TPM</option>
                                    </select>
                                </div>
                                <label>The first column is sequnece ID. Then other columns are expression level in each samples.</label><br>
                                <label>Tab-delimited file with column name is required.</label><br>
                                <label>The format of column name is "(Conditions)_(replicates)".</label><br>
                                <label>e.g. Control_1, Control_2, Salt_stress_1.</label><br>
                                <label>Replicates: <a href="{% static 'examples/Expression_sample_mulitple_sample_in_a_condition.txt' %}" download>📥 Example Format Download</a></label><br>
                                <label>Non-repeat: <a href="{% static 'examples/Expression_sample_single_sample_in_a_condition.txt' %}" download>📥 Example Format Download</a></label><br>
                                <div id="readcounts-section" style="margin-top: 15px; border-top: 1px dashed #ccc; padding-top: 10px;">
                                    <label class="text-primary"><strong>➢ Optional: Raw Read Counts for DESeq2/EdgeR analysis</strong></label>
                                    <input type="file" name="readcounts" id="readcounts-file">
                                    <p class="text-muted" style="font-size: 0.85rem;">
                                        If you want to use DESeq2/EdgeR for differential expression analysis, please upload the raw (integer) count table here.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- 必填: Pathway -->
                        <div>
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>Annotation file - Pathway <span class="required">*</span> :</strong></h4></label><br>
                            <div class="example-box ms-4 my-2 p-2 bg-light border rounded d-inline-flex align-items-center">
                                <span class="small text-muted">Example: <b>Example_dataset_pathway.txt</b></span>
                                <div class="ms-3">
                                    <a href="{% static 'download_packs/Example_dataset/Example_dataset_pathway.txt' %}" download class="btn btn-outline-secondary btn-sm py-0 fw-bold">📥 Download</a>
                                    <button type="button" class="btn btn-outline-primary btn-sm py-0 fw-bold ms-1" onclick="loadExampleFile('pathway', 'Example_dataset_pathway.txt')">⚡ Load</button>
                                </div>
                            </div>
                            <div style="margin-left: 30px;" class="mt-2">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="pathway_mode" id="pw_mode_custom" value="custom" checked onchange="toggleModeRadio('pathway')">
                                    <label class="form-check-label fw-bold" for="pw_mode_custom">Upload Custom Annotation File</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="pathway_mode" id="pw_mode_internal" value="internal" onchange="toggleModeRadio('pathway')">
                                    <label class="form-check-label fw-bold" for="pw_mode_internal">Select Species from Internal Database</label>
                                </div>
                                <div id="pathway_custom_area" style="background: #f4f8ff; border: 1px solid #cce0ff; padding: 15px; border-radius: 8px;" class="mb-3">
                                    <input type="file" name="pathway" id="pathway-file" required><br>
                                    <span id="pathway-file-name" class="text-success fw-bold d-block mt-1"></span>
                                    <label>Sequence ID and annotation ID should be included in the tab-delimited file.</label><br>
                                    <label>Column name is required.</label><br>
                                    <h6 class="mt-2"><strong>File format:</strong></h6>
                                    <label><input type="radio" name="format" value="KEGG" checked> KEGG ortholog ID (e.g. K01234) <a href="{% static 'examples/Annotation_pathway_KEGG_KO.txt' %}" download>📥 Example Format Download</a></label>
                                </div>
                                <div id="pathway_internal_area" style="display:none;" class="p-2 border rounded bg-light">
                                    <select id="pathway_species_select" name="pathway_internal_species" class="form-select w-50 mb-2"></select>
                                    <div id="pathway_example_div" class="text-success small mb-1" style="display:none;">
                                        <strong>Example ID:</strong> <span id="pathway_example_id"></span>
                                    </div>
                                    <div class="text-muted small">Gene IDs will be automatically extracted from your <b>Expression</b> file.</div>
                                    <div id="pathway_warning_msg" class="text-danger small mt-2 fw-bold" style="display:none;"></div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <!-- 必填: GO -->
                        <div>
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>Annotation file - GO <span class="required">*</span> :</strong></h4></label><br>
                            <div class="example-box ms-4 my-2 p-2 bg-light border rounded d-inline-flex align-items-center">
                                <span class="small text-muted">Example: <b>Example_dataset_GO.txt</b></span>
                                <div class="ms-3">
                                    <a href="{% static 'download_packs/Example_dataset/Example_dataset_GO.txt' %}" download class="btn btn-outline-secondary btn-sm py-0 fw-bold">📥 Download</a>
                                    <button type="button" class="btn btn-outline-primary btn-sm py-0 fw-bold ms-1" onclick="loadExampleFile('go', 'Example_dataset_GO.txt')">⚡ Load</button>
                                </div>
                            </div>
                            <div style="margin-left: 30px;" class="mt-2">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="go_mode" id="go_mode_custom" value="custom" checked onchange="toggleModeRadio('go')">
                                    <label class="form-check-label fw-bold" for="go_mode_custom">Upload Custom Annotation File</label>
                                </div>
                                 <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="go_mode" id="go_mode_internal" value="internal" onchange="toggleModeRadio('go')">
                                    <label class="form-check-label fw-bold" for="go_mode_internal">Select Species from Internal Database</label>
                                </div>
                                <div id="go_custom_area" style="background: #f4f8ff; border: 1px solid #cce0ff; padding: 15px; border-radius: 8px;" class="mb-3">
                                    <input type="file" name="go" id="go-file" required><br>
                                    <span id="go-file-name" class="text-success fw-bold d-block mt-1"></span>
                                    <label>Sequence ID and annotation ID should be included in the tab-delimited file.</label><br>
                                    <label>Column name is required.</label><br>
                                    <label>1: <a href="{% static 'examples/Annotation_GO.txt' %}" download>📥 Example Format Download</a></label><br>
                                    <label>2: <a href="{% static 'examples/Annotation_GO_2.txt' %}" download>📥 Example Format Download</a></label><br>
                                </div>
                                <div id="go_internal_area" style="display:none;" class="p-2 border rounded bg-light">
                                    <select id="go_species_select" name="go_internal_species" class="form-select w-50 mb-2"></select>
                                    <div id="go_example_div" class="text-success small mb-1" style="display:none;">
                                        <strong>Example ID:</strong> <span id="go_example_id"></span>
                                    </div>
                                    <div class="text-muted small">Gene IDs will be automatically extracted from your <b>Expression</b> file.</div>
                                    <div id="go_warning_msg" class="text-danger small mt-2 fw-bold" style="display:none;"></div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <!-- ID mapping -->
                        <div id="id_mapping_section" class="upload-section mb-4 p-3 border rounded" style="display: none;">
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>ID Mapping file (Optional):</strong></h4></label>
                            <input type="file" name="id_mapping" id="id_mapping-file" class="d-block mt-2">
                            <span id="id_mapping-file-name" class="text-success fw-bold d-block mt-1"></span>
                            <div style="margin-left: 30px; background: #fff3cd; border: 1px solid #ffeeba; padding: 15px; border-radius: 8px;">
                                <label class="text-danger fw-bold">If your Sequence IDs differ from the internal database IDs, please upload a mapping file.</label><br>
                                <label>Tab-delimited file. <strong>The 1st column is your Sequence ID, and the 2nd column is the internal database ID</strong>.</label><br>
                                <label>Column names (headers) are not required.</label>
                            </div>
                        </div>
                        <!-- 選填: Additional -->
                        <div>
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>Annotation file - Additional (Optional):</strong></h4></label>
                            <input type="file" name="additions" id="additions-file"><br>
                            <div class="example-box ms-4 my-2 p-2 bg-light border rounded d-inline-flex align-items-center">
                                <span class="small text-muted">Example: <b>Example_dataset_additional_gene_description.txt</b></span>
                                <div class="ms-3">
                                    <a href="{% static 'download_packs/Example_dataset/Example_dataset_additional_gene_description.txt' %}" download class="btn btn-outline-secondary btn-sm py-0 fw-bold">📥 Download</a>
                                    <button type="button" class="btn btn-outline-primary btn-sm py-0 fw-bold ms-1" onclick="loadExampleFile('additions', 'Example_dataset_additional_gene_description.txt')">⚡ Load</button>
                                </div>
                            </div>
                            <div style="margin-left: 30px;">
                                <span id="additions-file-name" class="text-success fw-bold d-block mb-1"></span>
                                <label>The first column is sequnece ID. Then other columns are annotations of the sequence.</label><br>
                                <label>Tab-delimited file with column name is required.</label><br>
                                <a href="{% static 'examples/Annotation_addition.txt' %}" download>📥 Example Format Download</a><br>
                            </div>
                        </div>
                        <br>
                        <!-- 選填: FASTA -->
                        <div>
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>FASTA Sequence file (Optional):</strong></h4></label>
                            <input type="file" name="fasta" id="fasta-file" accept=".fasta,.fa,.fas,.fna"><br>
                            <div class="example-box ms-4 my-2 p-2 bg-light border rounded d-inline-flex align-items-center">
                                <span class="small text-muted">Example: <b>Example_dataset_fasta.fasta</b></span>
                                <div class="ms-3">
                                    <a href="{% static 'download_packs/Example_dataset/Example_dataset_fasta.fasta' %}" download class="btn btn-outline-secondary btn-sm py-0 fw-bold">📥 Download</a>
                                    <button type="button" class="btn btn-outline-primary btn-sm py-0 fw-bold ms-1" onclick="loadExampleFile('fasta', 'Example_dataset_fasta.fasta')">⚡ Load</button>
                                </div>
                            </div>
                            <div style="margin-left: 30px;" class="mt-1">
                                <span id="fasta-file-name" class="text-success fw-bold d-block mb-1"></span>
                                <div>
                                    <label>Upload a FASTA file to build a custom BLAST database for this project.</label><br>
                                    <label>Standard FASTA format (starts with '>') is required.</label><br> 
                                    <label>Note: Only transcript sequences (e.g., mRNA, cDNA) are accepted.</label><br>
                                    <a href="{% static 'download_packs/Example_dataset/Example_dataset_fasta.fasta' %}" download>📥 Example Format Download</a><br>
                                </div>    
                            </div>

                            <div class="form-check mt-3 mb-2 ms-4">
                                <input class="form-check-input" type="checkbox" name="seq_expr_mismatch" id="seq_expr_mismatch" value="true" onchange="toggleFastaMappingArea()" checked>
                                <label class="form-check-label text-danger fw-bold small" for="seq_expr_mismatch">
                                    Sequence IDs (TID) and Expression/Annotation IDs (GID) do not match (Requires GID-TID mapping file)
                                </label>
                            </div>
                            <!-- fasta mapping -->
                            <div id="fasta_mapping_upload_area" class="ms-4 p-3 border rounded" style="background: #fff8f0; border-color: #ffebcc;">
                                <label class="fw-bold" style="color: #d39e00;"><strong>➢ GID-TID Mapping File :</strong></label>
                                <input type="file" name="fasta_id_mapping" id="fasta_id_mapping-file"><br>
                                <div class="example-box ms-4 my-2 p-2 bg-light border rounded d-inline-flex align-items-center">
                                    <span class="small text-muted">Example: <b>Example_GID_TID_mapping.txt</b></span>
                                    <div class="ms-3">
                                        <a href="{% static 'download_packs/Example_dataset/Example_GID_TID_mapping.txt' %}" download class="btn btn-outline-secondary btn-sm py-0 fw-bold">📥 Download</a>
                                        <button type="button" class="btn btn-outline-primary btn-sm py-0 fw-bold ms-1" onclick="loadExampleFile('fasta_id_mapping', 'Example_GID_TID_mapping.txt')">⚡ Load</button>
                                    </div>
                                </div>
                                <span id="fasta_id_mapping-file-name" class="text-success fw-bold d-block mt-1"></span>
                                <small class="text-muted">
                                    * Must be a Tab-delimited text file (.txt/.tsv). The 1st column is GID, and the 2nd column is TID.<br>
                                    * <strong class="text-danger">Do NOT include column names (headers). The first row must be data.</strong><br>
                                    * Supported formats: One GID to multiple TIDs across separate rows, or multiple TIDs separated by semicolons (e.g., TID1;TID2).
                                </small>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-center mt-4">
                            <button type="submit" class="btn btn-primary px-5 fw-bold">Upload</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    // 讀取伺服器端傳來的物種清單 JSON
    const speciesData = JSON.parse('{{ species_json|escapejs }}');
    
    $(document).ready(function () {
        $('input[type="file"]').change(function () {
            let fieldId = $(this).attr('id').replace('-file', '');
            
            $(`#${fieldId}-file-name`).text('').hide(); 
            
        });
        // 初始化下拉選單
        initDropdowns();

        // 監聽 Pathway 物種變動
        $('#pathway_species_select').change(function() {
            let val = $(this).val();
            $('#pathway_warning_msg').hide();
            updateExampleText('pathway', val);
            checkSpeciesMismatch();

            if (val) {
                let sp = speciesData.find(s => s.sid === val);
                if (sp && sp.has_go === 0) {
                    // 自動切換 GO 模式到 Custom
                    $('#go_mode_custom').prop('checked', true);
                    toggleModeRadio('go');
                    $('#pathway_warning_msg').text(`⚠️ ${sp.name} lacks internal GO data. GO mode switched to Custom automatically.`).show();
                }
            }
        });

        // 監聽 GO 物種變動
        $('#go_species_select').change(function() {
            let val = $(this).val();
            $('#go_warning_msg').hide();
            updateExampleText('go', val);
            checkSpeciesMismatch();

            if (val) {
                let sp = speciesData.find(s => s.sid === val);
                if (sp && sp.has_ko === 0) {
                    // 自動切換 Pathway 模式到 Custom
                    $('#pathway_mode_custom').prop('checked', true);
                    toggleModeRadio('pathway');
                    $('#go_warning_msg').text(`⚠️ ${sp.name} lacks internal Pathway data. Pathway mode switched to Custom automatically.`).show();
                }
            }
        });

        // 🚀 初始化控制：立刻根據 Radio Button 預設值切換區塊可視度與啟用狀態
        toggleModeRadio('pathway'); // 預設會啟用 Custom, 隱藏並禁用 Internal select
        toggleModeRadio('go');      // 預設會啟用 Custom, 隱藏並禁用 Internal select

        // 表單提交事件 (Ajax 送出)
        $("#upload-form").on("submit", function (e) {
            e.preventDefault();  
            
            let pwMode = $('input[name="pathway_mode"]:checked').val();
            let goMode = $('input[name="go_mode"]:checked').val();
            let pwVal = $('#pathway_species_select').val();
            let goVal = $('#go_species_select').val();

            // 防呆：如果切到內部選單，卻放空沒有選物種
            if (pwMode === 'internal' && !pwVal) {
                Swal.fire({ icon: 'warning', title: 'Selection Required', text: 'Please select a species for Pathway database.' });
                return;
            }
            if (goMode === 'internal' && !goVal) {
                Swal.fire({ icon: 'warning', title: 'Selection Required', text: 'Please select a species for GO database.' });
                return;
            }

            // 防呆：如果兩邊都挑內建資料庫，但物種選得不一樣
            if (pwMode === 'internal' && goMode === 'internal' && pwVal !== goVal) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Species Mismatch',
                    text: 'You have selected different species for Pathway and GO. Please align them or switch to Custom.',
                    confirmButtonColor: '#3085d6'
                });
                return; 
            }

            Swal.fire({
                title: "Uploading...",
                text: "Please wait while your files are being uploaded.",
                allowOutsideClick: false,
                didOpen: () => { Swal.showLoading(); }
            });

            var formData = new FormData(this);

            $.ajax({
                url: "{% url 'upload_file' project.id %}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function () {
                    Swal.fire({
                        icon: "success",
                        title: "Upload Complete",
                        text: "Your files have been uploaded successfully!",
                        timer: 1500,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.href = "{% url 'project_list' %}"; 
                    });
                },
                error: function () {
                    Swal.fire({
                        icon: "error",
                        title: "Upload Failed",
                        text: "An error occurred while uploading. Please try again.",
                    });
                }
            });
        });
    });

    // 動態渲染下拉選單內容
    function initDropdowns() {
        let baseOpts = `<option value="" disabled selected>-- Select Species --</option>`;

        $('#pathway_species_select').html(baseOpts);
        $('#go_species_select').html(baseOpts);

        speciesData.forEach(sp => {
            if (sp.has_ko === 1) $('#pathway_species_select').append(`<option value="${sp.sid}">${sp.name}</option>`);
            if (sp.has_go === 1) $('#go_species_select').append(`<option value="${sp.sid}">${sp.name}</option>`);
        });
    }

    function loadExampleFile(fieldId, fakeName) {
        $(`#${fieldId}-file-name`).text(`⚡ Loaded Example: { ${fakeName} }`).show();
        
        $(`#${fieldId}-file`).val('').prop('required', false);
        
        $('#load-example-trigger').val('true');
        $(`#load-${fieldId}-example`).val('true'); 
    }

    function toggleModeRadio(type) {
        let mode = $(`input[name="${type}_mode"]:checked`).val();
        
        if (mode === 'internal') {
            $(`#${type}_internal_area`).show();
            $(`#${type}_custom_area`).hide();
            $(`#${type}_species_select`).prop('disabled', false); // 解鎖啟用
            $(`#${type}-file`).prop('required', false).val('');   // 取消必填並清除
            $(`#${type}-file-name`).text('');
        } else {
            $(`#${type}_internal_area`).hide();
            $(`#${type}_custom_area`).show();
            $(`#${type}_species_select`).prop('disabled', true).val(''); // 強制鎖死選單
            $(`#${type}-file`).prop('required', true);                  // 恢復必填
            $(`#${type}_example_div`).hide();
        }
        
        checkIdMappingVisibility();
    }

    // 控制 ID Mapping 卡片的動態可視度
    function checkIdMappingVisibility() {
        let pwMode = $('input[name="pathway_mode"]:checked').val();
        let goMode = $('input[name="go_mode"]:checked').val();
        let isInternalUsed = (pwMode === 'internal') || (goMode === 'internal');
        $('#id_mapping_section').toggle(isInternalUsed);
    }

    // 橫向檢查兩側內建選單的物種是否產生衝突
    function checkSpeciesMismatch() {
        let pwMode = $('input[name="pathway_mode"]:checked').val();
        let goMode = $('input[name="go_mode"]:checked').val();
        let pwVal = $('#pathway_species_select').val();
        let goVal = $('#go_species_select').val();

        if (pwMode === 'internal' && goMode === 'internal' && pwVal && goVal && pwVal !== goVal) {
            Swal.fire({
                icon: 'warning', title: 'Species Mismatch',
                text: 'Pathway and GO species selections do not match!',
                toast: true, position: 'top-end', showConfirmButton: false, timer: 3000
            });
        }
    }

    // 更新並秀出 Example ID 的小幫手
    function updateExampleText(type, sid) {
        const div = $(`#${type}_example_div`);
        const span = $(`#${type}_example_id`);
        if (sid) {
            const sp = speciesData.find(s => s.sid === sid);
            if (sp && sp.example_id) {
                span.text(sp.example_id);
                div.show();
            } else {
                div.hide();
            }
        } else {
            div.hide();
        }
    }
    
    // NGS 與 Microarray 的下拉選單與欄位切換
    function toggleExpressionOptions() {
        const isNGS = document.getElementById('type_ngs').checked;
        const scaleSelect = document.getElementById('expression-scale');
        const readcountSection = document.getElementById('readcounts-section');
        scaleSelect.innerHTML = '';

        if (isNGS) {
            const options = ['RPM', 'FPKM', 'TPM'];
            options.forEach(opt => {
                let el = document.createElement('option');
                el.value = opt; el.textContent = opt;
                scaleSelect.appendChild(el);
            });
            readcountSection.style.display = 'block';
        } else {
            const options = [
                { val: 'Original', txt: 'Original value' },
                { val: 'Log2', txt: 'Log2 value' }
            ];
            options.forEach(opt => {
                let el = document.createElement('option');
                el.value = opt.val; el.textContent = opt.txt;
                scaleSelect.appendChild(el);
            });
            readcountSection.style.display = 'none';
            document.getElementById('readcounts-file').value = '';
            $('#readcounts-file-name').text('');
        }
    }

    // FASTA GID-TID 轉換表區域顯示控制
    function toggleFastaMappingArea() {
        const isChecked = document.getElementById('seq_expr_mismatch').checked;
        const mappingArea = document.getElementById('fasta_mapping_upload_area');
        const mappingInput = document.getElementById('fasta-id-mapping-file');
        
        if (isChecked) {
            mappingArea.style.display = 'block';
        } else {
            mappingArea.style.display = 'none';
            mappingInput.value = ''; 
            $('#fasta_id_mapping-file-name').text('');
        }
    }
</script>

<style>
    .required {
        color: red;
        font-weight: bold;
    }
    .upload-section {
        background-color: #fafbfc;
        transition: all 0.2s ease;
    }
    .upload-section:hover {
        background-color: #f7f9fa;
        border-color: #b4c6d8 !important;
    }
    .example-box {
        background-color: #f1f3f5;
    }
</style>
{% endblock %}