{% 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">
                    <p>Please confirm the followings before you upload files:</p>
                    <ul>
                        <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>
            
                    <form id="update-form" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <label for="file_type">Select the type of update you want:</label>
                        <select name="file_type" class="form-select" id="file-type-select" >
                            <option value="" selected disabled></option>
                            <option value="pathway">Pathway</option>
                            <option value="go">GO</option>
                            <option value="expression">Expression</option>
                            <option value="additions">Additions</option>
                            <option value="fasta">Fasta</option>
                        </select>
                        <br>
                        <!-- 必填: Pathway -->
                        <div id="pathway-section" class="upload-section">
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>Annotation file - Pathway :</strong></h4></label>
                            <input type="file" name="new-file" id="pathway-file" >
                            <span id="pathway-name"></span>
                            <div style="margin-left: 30px;">
                                <label>Sequence ID and annotation ID should be included in the tab-delimited file.</label><br>
                                <label>Column name is required.</label><br>
                                <h6><strong>File format:</strong></h6>
                                <label><input type="radio" name="format" value="KEGG" checked="true"> KEGG ortholog ID (e.g. K01234) <a href="{% static 'examples/Annotation_pathway_KEGG_KO.txt' %}" download>📥 Example Format Download</a></label><br>
                            </div>
                        </div>
                        
                        <!-- 必填: GO -->
                        <div id="go-section" class="upload-section">
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>Annotation file - GO :</strong></h4></label>
                            <input type="file" name="new-file" id="go-file">
                            <span id="go-name"></span>
                            <div style="margin-left: 30px;">
                                <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>
                        
                        <!-- 必填: Expression -->
                        <div id="expression-section" class="upload-section">
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>Annotation file - Expression :</strong></h4></label>
                            <input type="file" name="file_expression"id="expression-file">
                            <span id="expression-name"></span>
                            <div style="margin-left: 30px;">
                                <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="display: none; 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="file_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>

                        
                        <!-- 選填: Additional Annotations -->
                        <div id="additions-section" class="upload-section">
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>Annotation file - Additional (Optional):</strong></h4></label>
                            <input type="file" name="new-file" id="additions-file">
                            <span id="additions-name"></span>
                            <div style="margin-left: 30px;">
                                <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>

                        <!-- 選填: fasta -->
                        <div id="fasta-section" class="upload-section">
                            <img src="{% static 'images/right-arrow.png' %}" style="height: 20px;">
                            <label><h4><strong>FASTA Sequence file (Optional):</strong></h4></label>
                            <input type="file" name="new-file" id="fasta-file" accept=".fasta,.fa,.fas,.fna">
                            <span id="fasta-name"></span>
                            <div style="margin-left: 30px;">
                                <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 'examples/example_sequence.fasta' %}" download>📥 Example Format Download</a><br>
                            </div>
                            <!-- 勾選不一致的控制項 -->
                            <div class="form-check mt-3 mb-2">
                                <input class="form-check-input" type="checkbox" name="seq_expr_mismatch" id="seq_expr_mismatch" value="true" onchange="toggleFastaMappingArea()">
                                <label class="form-check-label text-danger fw-bold" for="seq_expr_mismatch">
                                    Sequence IDs (TID) and Expression/Annotation IDs (GID) do not match (Requires uploading a GID-TID mapping file)
                                </label>
                            </div>

                            <!-- 動態顯示的上傳區域 -->
                            <div id="fasta_mapping_upload_area" style="display:none; background: #fff8f0; border: 1px solid #ffebcc; padding: 15px; border-radius: 8px;">
                                <label class="fw-bold" style="color: #d39e00;"><strong>➢ Please upload the GID-TID mapping file (Required) :</strong></label><br>
                                <input type="file" name="file_fasta_id_mapping" id="fasta-id-mapping-file"><br>
                                <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">Update</button>
                        </div>
                    </form>
                </div>
                
            </div>
        </div>
    </div>
</main>
<script>
    $(document).ready(function () {
        // 即時顯示上傳的檔名
        $('input[type="file"]').change(function () {
            let fileInput = $(this);
            let fileName = fileInput.val().split("\\").pop(); // 取得檔名
            $("#" + fileInput.attr("id") + "-name").text(fileName);
        });
        $("#update-form").on("submit", function (e) {
            e.preventDefault();  

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

            var formData = new FormData(this);
            $.ajax({
                url: "{% url 'update_file' project.id %}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function () {
                    Swal.fire({
                        icon: "success",
                        title: "Update Complete",
                        text: "Your files have been updated successfully!",
                        timer: 1500,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.href = "{% url 'project_list' %}"; 
                    });
                },
                error: function () {
                    Swal.fire({
                        icon: "error",
                        title: "Update Failed",
                        text: "An error occurred while updating. Please try again.",
                    });
                }
            });
        });
        
    });
    document.addEventListener("DOMContentLoaded", function () {
        const fileTypeSelect = document.getElementById("file-type-select");
        const sections = {
            pathway: document.getElementById("pathway-section"),
            go: document.getElementById("go-section"),
            expression: document.getElementById("expression-section"),
            additions: document.getElementById("additions-section"),
            fasta: document.getElementById("fasta-section"),
        };

        // 初始時隱藏所有區塊
        Object.values(sections).forEach(section => section.style.display = "none");

        // 監聽選單變化
        fileTypeSelect.addEventListener("change", function () {
            // 先隱藏所有區塊
            Object.values(sections).forEach(section => section.style.display = "none");

            // 取得選擇的值，顯示對應區塊
            const selectedType = fileTypeSelect.value;
            if (sections[selectedType]) {
                sections[selectedType].style.display = "block";
            }
        });
    });
    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) {
            console.log(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'; // 顯示 Read Count 上傳
        } 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'; // 隱藏 Read Count 上傳
            document.getElementById('readcounts-file').value = ''; // 清空已選檔案
        }
    }
    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';
            mappingInput.setAttribute('required', 'required'); 
        } else {
            mappingArea.style.display = 'none';
            mappingInput.removeAttribute('required'); 
            mappingInput.value = ''; 
        }
    }
        
</script>
{% endblock %}