{% extends "base.html" %}

{% block title %}录入成果 - 紫金·稷下薪火·云枢智海师生成果共创系统{% endblock %}

{% block content %}
<div class="card">
    <h2 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
        <i class="fas fa-cloud-upload-alt"></i> 成果录入
    </h2>
    <p class="mb-4">请上传包含成果信息的图片（如获奖证书、论文封面等），系统将自动识别关键信息</p>

    <form id="upload-form" enctype="multipart/form-data" class="mb-4">
        <div class="mb-3">
            <label for="file" class="form-label">选择图片文件</label>
            <input type="file" name="file" accept="image/*" id="file" class="form-control" required>
            <div class="form-text">支持JPG、PNG、GIF等格式，文件大小不超过10MB</div>
        </div>
        <button type="submit" class="btn btn-primary btn-lg">
            <i class="fas fa-upload"></i> 上传图片
        </button>
    </form>

    <!-- 编辑确认区域 -->
    <div id="edit-section" class="mt-4" style="display: none;">
        <div class="card">
            <h3 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
                <i class="fas fa-edit"></i> 识别结果 - 请确认并编辑数据
            </h3>
            <p class="mb-4">系统已识别出以下信息，您可以修改字段名和对应的数据值，确认无误后点击录入按钮</p>
            
            <form id="edit-form">
                <div id="edit-fields"></div>
                <div class="mt-4 text-center">
                    <button type="button" id="confirm-btn" class="btn btn-success btn-lg">
                        <i class="fas fa-check"></i> 确认录入
                    </button>
                    <button type="button" id="cancel-btn" class="btn btn-secondary btn-lg ml-3">
                        <i class="fas fa-times"></i> 取消
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    let currentData = null;
    let currentImage = null;

    document.getElementById("upload-form").addEventListener("submit", function (e) {
        e.preventDefault();
        let formData = new FormData(this);
        const editSection = document.getElementById("edit-section");

        // 显示上传进度动画
        editSection.innerHTML = `
            <div class="card">
                <div class="progress-container">
                    <div class="progress-bar"></div>
                    <p class="progress-text">正在处理图片，请稍候...</p>
                </div>
            </div>
        `;
        editSection.style.display = "block";

        fetch("/upload", { method: "POST", body: formData })
            .then(res => res.json())
            .then(data => {
                if(data.error) {
                    editSection.innerHTML = `
                        <div class="card">
                            <div class="alert alert-danger">
                                <i class="fas fa-exclamation-circle"></i> 错误: ${data.error}
                            </div>
                        </div>
                    `;
                } else {
                    // 存储当前数据
                    currentData = data.data;
                    currentImage = data.image;
                    
                    // 生成编辑表单
                    generateEditForm(data.data);
                }
            })
            .catch(error => {
                editSection.innerHTML = `
                    <div class="card">
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle"></i> 上传失败: ${error}
                        </div>
                    </div>
                `;
            });
    });

    function generateEditForm(data) {
        const editSection = document.getElementById("edit-section");
        let fieldsHtml = "";
        
        Object.entries(data).forEach(([key, value], index) => {
            fieldsHtml += `
                <div class="field-row mb-3">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label">字段名</label>
                            <input type="text" class="form-control field-name" value="${key}" data-original-key="${key}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">数据值</label>
                            <input type="text" class="form-control field-value" value="${value}">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="button" class="btn btn-danger btn-sm delete-field" title="删除此字段">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
        });
        
        editSection.innerHTML = `
            <div class="card">
                <h3 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
                    <i class="fas fa-edit"></i> 识别结果 - 请确认并编辑数据
                </h3>
                <p class="mb-4">系统已识别出以下信息，您可以修改字段名和对应的数据值，确认无误后点击录入按钮</p>
                
                <form id="edit-form">
                    <div id="edit-fields">
                        ${fieldsHtml}
                    </div>
                    <div class="mb-3">
                        <button type="button" id="add-field-btn" class="btn btn-outline-primary">
                            <i class="fas fa-plus"></i> 添加字段
                        </button>
                    </div>
                    <div class="mt-4 text-center">
                        <button type="button" id="confirm-btn" class="btn btn-success btn-lg">
                            <i class="fas fa-check"></i> 确认录入
                        </button>
                        <button type="button" id="cancel-btn" class="btn btn-secondary btn-lg ml-3">
                            <i class="fas fa-times"></i> 取消
                        </button>
                    </div>
                </form>
            </div>
        `;
        
        // 绑定删除按钮事件
        document.querySelectorAll('.delete-field').forEach(btn => {
            btn.addEventListener('click', function() {
                this.closest('.field-row').remove();
            });
        });
        
        // 绑定添加字段按钮事件
        document.getElementById('add-field-btn').addEventListener('click', function() {
            const editFields = document.getElementById('edit-fields');
            const newFieldHtml = `
                <div class="field-row mb-3">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label">字段名</label>
                            <input type="text" class="form-control field-name" value="" data-original-key="">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">数据值</label>
                            <input type="text" class="form-control field-value" value="">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="button" class="btn btn-danger btn-sm delete-field" title="删除此字段">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
            editFields.insertAdjacentHTML('beforeend', newFieldHtml);
            
            // 为新添加的删除按钮绑定事件
            const newDeleteBtn = editFields.lastElementChild.querySelector('.delete-field');
            newDeleteBtn.addEventListener('click', function() {
                this.closest('.field-row').remove();
            });
        });
        
        // 绑定确认和取消按钮事件
        bindConfirmCancelEvents();
    }

    function bindConfirmCancelEvents() {
        // 确认录入按钮事件
        document.getElementById("confirm-btn").addEventListener("click", function() {
            const fieldRows = document.querySelectorAll('.field-row');
            const editedData = {};
            
            // 收集编辑后的数据
            fieldRows.forEach(row => {
                const fieldName = row.querySelector('.field-name').value.trim();
                const fieldValue = row.querySelector('.field-value').value.trim();
                if (fieldName && fieldValue) {
                    editedData[fieldName] = fieldValue;
                }
            });
            
            if (Object.keys(editedData).length === 0) {
                alert('请至少保留一个有效的字段！');
                return;
            }
            
            // 发送确认请求
            fetch("/confirm", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    data: editedData,
                    image: currentImage
                })
            })
            .then(res => res.json())
            .then(data => {
                const editSection = document.getElementById("edit-section");
                
                if(data.error) {
                    editSection.innerHTML = `
                        <div class="card">
                            <div class="alert alert-danger">
                                <i class="fas fa-exclamation-circle"></i> 录入失败: ${data.error}
                            </div>
                        </div>
                    `;
                } else {
                    editSection.innerHTML = `
                        <div class="card">
                            <div class="alert alert-success">
                                <i class="fas fa-check-circle"></i> ${data.message}
                            </div>
                        </div>
                    `;
                    // 重置表单
                    document.getElementById("upload-form").reset();
                    // 3秒后隐藏成功消息
                    setTimeout(() => {
                        editSection.style.display = "none";
                    }, 3000);
                }
            })
            .catch(error => {
                const editSection = document.getElementById("edit-section");
                editSection.innerHTML = `
                    <div class="card">
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle"></i> 录入失败: ${error}
                        </div>
                    </div>
                `;
            });
        });

        // 取消按钮事件
        document.getElementById("cancel-btn").addEventListener("click", function() {
            const editSection = document.getElementById("edit-section");
            editSection.style.display = "none";
            currentData = null;
            currentImage = null;
        });
    }
</script>

<style>
    .btn-primary {
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        border: none;
        border-radius: 30px;
        padding: 12px 24px;
        font-weight: 500;
        transition: var(--transition);
        box-shadow: 0 4px 8px rgba(67, 97, 238, 0.2);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--primary-light), var(--primary));
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(67, 97, 238, 0.3);
    }

    .form-control {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        transition: var(--transition);
    }

    .form-control:hover {
        border-color: var(--primary);
    }

    .progress-container {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
    }

    .progress-bar {
        width: 100%;
        height: 8px;
        background-color: #e9ecef;
        border-radius: 4px;
        margin-bottom: 15px;
        position: relative;
        overflow: hidden;
    }

    .progress-bar::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100%;
        background: linear-gradient(90deg, transparent, #4cc9f0, transparent);
        animation: progress 1.5s infinite;
    }

    @keyframes progress {
        0% { left: -100%; }
        100% { left: 200%; }
    }

    .progress-text {
        color: #6c757d;
        font-size: 16px;
    }

    .alert {
        padding: 15px;
        border-radius: 8px;
    }

    .alert-danger {
        background-color: #ffe3e3;
        color: #d32f2f;
        border-left: 4px solid #d32f2f;
    }

    .result-card {
        background: white;
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 20px;
        border-left: 4px solid var(--success);
    }

    .result-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    .result-header h3 {
        color: var(--success);
        margin: 0;
    }

    .timestamp {
        color: #6c757d;
        font-size: 14px;
    }

    .result-item {
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .result-label {
        font-weight: 500;
        color: #495057;
    }

    .result-value {
        color: #333;
        max-width: 70%;
        word-break: break-word;
    }

    .result-footer {
        margin-top: 20px;
        text-align: center;
    }

    .success-message {
        color: var(--success);
        font-weight: 500;
        margin-bottom: 15px;
    }

    .info-message {
        color: var(--primary);
        font-weight: 500;
        margin-bottom: 15px;
    }

    .btn-outline-primary {
        border: 1px solid var(--primary);
        color: var(--primary);
        border-radius: 6px;
        padding: 8px 16px;
        transition: var(--transition);
    }

    .btn-outline-primary:hover {
        background-color: var(--primary);
        color: white;
    }

    .btn-success {
        background: linear-gradient(135deg, #28a745, #20c997);
        border: none;
        border-radius: 30px;
        padding: 12px 24px;
        font-weight: 500;
        transition: var(--transition);
        box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
        color: white;
    }

    .btn-success:hover {
        background: linear-gradient(135deg, #20c997, #28a745);
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3);
    }

    .btn-secondary {
        background: linear-gradient(135deg, #6c757d, #495057);
        border: none;
        border-radius: 30px;
        padding: 12px 24px;
        font-weight: 500;
        transition: var(--transition);
        box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
        color: white;
    }

    .btn-secondary:hover {
        background: linear-gradient(135deg, #495057, #6c757d);
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
    }

    .btn-danger {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white;
    }

    .btn-danger:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }

    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        border-radius: 0.2rem;
    }

    .ml-3 {
        margin-left: 1rem;
    }

    .btn-outline-primary {
        color: var(--primary);
        border-color: var(--primary);
        background-color: transparent;
        padding: 8px 16px;
        border-radius: 4px;
        border: 1px solid var(--primary);
        transition: all 0.3s ease;
    }

    .btn-outline-primary:hover {
        background-color: var(--primary);
        border-color: var(--primary);
        color: white;
    }

    .alert-danger {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
        padding: 0.75rem 1.25rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
    }

    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border-left: 4px solid #28a745;
    }

    #edit-section .card {
        border-left: 4px solid var(--primary);
    }

    .form-label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 8px;
    }

    .field-row {
        background-color: white;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #e0e0e0;
        margin-bottom: 10px;
    }

    .field-row:hover {
        border-color: var(--primary);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .col-md-4, .col-md-6, .col-md-2 {
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-md-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .d-flex {
        display: flex;
    }

    .align-items-end {
        align-items: flex-end;
    }

    .text-center {
        text-align: center;
    }

    .mb-3 {
        margin-bottom: 1rem;
    }

    .mb-4 {
        margin-bottom: 1.5rem;
    }

    .mt-4 {
        margin-top: 1.5rem;
    }

    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 1.25rem;
        border-radius: 0.3rem;
    }

    @media (max-width: 768px) {
        .col-md-2, .col-md-4, .col-md-6 {
            flex: 0 0 100%;
            max-width: 100%;
            margin-bottom: 10px;
        }
        
        .field-row .row {
            flex-direction: column;
        }
        
        .btn-lg {
            width: 100%;
            margin-bottom: 10px;
        }
        
        .ml-3 {
            margin-left: 0;
        }
    }
</style>
{% endblock %}