{% extends "base.html" %}
{% block title %}免疫原性预测{% endblock %}
{% block styles %}
<!-- 如果需要自定义样式，可以在这里添加 -->
<style>
    /* 添加简单的加载指示器样式 */
    .loader {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        animation: spin 2s linear infinite;
        display: none;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>
{% endblock %}
{% block content %}
<section class="max-w-4xl mx-auto p-5 mt-5 bg-white border border-gray-300 rounded-lg shadow-md">
    <h2 class="text-xl font-bold text-gray-800 border-b-2 border-gray-200 pb-2 mb-5">免疫原性预测</h2>
    <form id="immunogenicity-prediction-form" method="POST" enctype="multipart/form-data"
        action="{{ url_for('immunogenicity_prediction.handle_immunogenicity_prediction') }}">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <!-- 文件上传组件 -->
            <div class="mb-4 mr-2">
                <label for="input-file" class="block mb-2 text-gray-800">输入文件:</label>
                <div class="flex items-center justify-center w-full">
                    <label for="input-file"
                        class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-md cursor-pointer hover:border-teal-500 transition duration-200">
                        <span
                            style="display: inline-block; padding: 5px 10px; background-color: #2d8aee; color: white; border-radius: 5px; font-weight: bold; font-size: 12px; text-align: center;">上传</span>
                        <span id="upload-message" class="mt-2 text-xs text-gray-600">拖放文件到这里或点击上传</span>
                        <input type="file" id="input-file" name="input_file" class="hidden" required>
                    </label>
                </div>
            </div>

            <!-- 其他表单字段 -->
            <div class="mb-4 mr-2">
                <label for="model" class="block mb-2 text-gray-800">Model:</label>
                <select
                    class="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                    id="model" name="model" required>
                    <option value="hlancpred">HLAncPred</option>
                    <!-- 可以在这里添加其他模型选项 -->
                </select>
            </div>
            <div class="mb-4 mr-2">
                <label for="allele" class="block mb-2 text-gray-800">Allele:</label>
                <select
                    class="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                    id="allele" name="allele" required>
                    <option value="G0101">G0101</option>
                    <option value="G0103">G0103</option>
                    <option value="G0104">G0104</option>
                    <option value="E0101">E0101</option>
                    <option value="E0103">E0103</option>
                </select>
            </div>
            <div class="mb-4 mr-2">
                <label for="job-type" class="block mb-2 text-gray-800">Job Type:</label>
                <select
                    class="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                    id="job-type" name="job_type" required>
                    <option value="1">Predict</option>
                    <option value="2">Scan</option>
                </select>
            </div>
            <div class="mb-4 mr-2">
                <label for="window-length" class="block mb-2 text-gray-800">Window Length:</label>
                <select
                    class="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                    id="window-length" name="window_length" required>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                </select>
            </div>
            <div class="mb-4 mr-2">
                <label for="display" class="block mb-2 text-gray-800">Display:</label>
                <select
                    class="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                    id="display" name="display" required>
                    <option value="1">Only binders</option>
                    <option value="2">All peptides</option>
                </select>
            </div>
            <div class="col-span-2 mb-4 mr-2">
                <label for="output-file" class="block mb-2 text-gray-800">输出文件名 (可选):</label>
                <input type="text" id="output-file" name="output_file"
                    class="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
                    placeholder="默认: outfile">
            </div>
        </div>
        <div class="form-actions text-center mt-4">
            <button type="submit" id="immunogenicity-prediction-btn"
                class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition duration-200">开始预测
            </button>
            <button type="button" id="reset-btn"
                class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition duration-200 ml-2">重置
            </button>
            <div class="loader ml-4" id="loader"></div>
        </div>
    </form>
    <div id="message" class="mt-4"></div>
    <div id="result" class="mt-5"></div>
</section>

<script>
    document.getElementById('input-file').addEventListener('change', function () {
        var input = document.getElementById('input-file');
        var uploadMessageDiv = document.getElementById('upload-message');
        if (input.files.length > 0) {
            uploadMessageDiv.innerHTML = input.files[0].name;
            uploadMessageDiv.style.color = 'gray';
        } else {
            uploadMessageDiv.innerHTML = '拖放文件到这里或点击上传';
            uploadMessageDiv.style.color = 'gray';
        }
    });

    document.getElementById('immunogenicity-prediction-form').addEventListener('submit', function (event) {
        event.preventDefault();
        var form = this;
        var formData = new FormData(form);
        var messageDiv = document.getElementById('message');
        var resultDiv = document.getElementById('result');
        var uploadMessageDiv = document.getElementById('upload-message');
        var loader = document.getElementById('loader');

        // 重置消息
        messageDiv.innerHTML = '';
        resultDiv.innerHTML = '';
        uploadMessageDiv.innerHTML = '上传中...';
        uploadMessageDiv.style.color = 'gray';
        loader.style.display = 'inline-block';

        fetch(form.action, {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                loader.style.display = 'none';
                if (data.error) {
                    messageDiv.innerHTML = `<div class="text-red-500">${data.error}</div>`;
                    uploadMessageDiv.innerHTML = '上传失败';
                    uploadMessageDiv.style.color = 'red';
                } else {
                    messageDiv.innerHTML = `<div class="text-green-500">${data.message}</div>`;
                    uploadMessageDiv.innerHTML = '上传成功';
                    uploadMessageDiv.style.color = 'green';
                    resultDiv.innerHTML = `<a href="/model/hlancpred/output_files/${data.output_file}" class="text-blue-500 underline">下载结果文件</a>`;
                    console.log(data.output_file);
                }
            })
            .catch(error => {
                loader.style.display = 'none';
                messageDiv.innerHTML = `<div class="text-red-500">请求失败: ${error.message}</div>`;
                uploadMessageDiv.innerHTML = '上传失败';
                uploadMessageDiv.style.color = 'red';
            });
    });

    document.getElementById('reset-btn').addEventListener('click', function () {
        document.getElementById('immunogenicity-prediction-form').reset();
        document.getElementById('message').innerHTML = '';
        document.getElementById('upload-message').innerHTML = '拖放文件到这里或点击上传';
        document.getElementById('upload-message').style.color = 'gray';
        document.getElementById('result').innerHTML = '';
    });
</script>
{% endblock %}重新设计    <div id="message" class="mt-4"></div>
    <div id="result" class="mt-5"></div>这两个元素的位置,当前的很不美观