{% extends 'base.html' %}
{% load static %}

{% block title %}病虫害检测结果 - 茄子在线检测系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="text-center mb-5 fade-in-up">
        <h2 class="fw-bold" style="color: #6f42c1;">
            <i class="bi bi-bug me-2"></i>病虫害检测结果
        </h2>
        <p class="text-muted">查看过往的病虫害诊断记录与详情</p>
    </div>

    <div class="row g-4 justify-content-center">
        <div class="col-md-6 fade-in-up" style="animation-delay: 0.1s;">
            <div class="card h-100 border-0 shadow-hover function-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-4">
                        <div class="icon-square bg-success-subtle text-success me-3">
                            <i class="bi bi-image"></i>
                        </div>
                        <h4 class="card-title fw-bold mb-0">图像检测记录</h4>
                    </div>

                    <div class="form-group">
                        <label class="text-muted small mb-2">选择历史记录查看详情：</label>
                        <select id="image-detection-select" class="form-select form-select-lg shadow-sm border-light bg-light">
                            <option value="">-- 请选择检测结果 --</option>
                            {% for item in image_operations %}
                            <option value="{{ forloop.counter }}"
                                    data-time="{{ item.created_at|date:'Y-m-d H:i:s' }}"
                                    data-description="{{ item.description }}"
                                    data-path="{{ item.result_path }}">
                                📅 {{ item.created_at|date:'m-d H:i' }} - 第{{ forloop.counter }}次检测
                            </option>
                            {% empty %}
                            <option value="" disabled>暂无图像检测记录</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 fade-in-up" style="animation-delay: 0.2s;">
            <div class="card h-100 border-0 shadow-hover function-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-4">
                        <div class="icon-square bg-primary-subtle text-primary me-3">
                            <i class="bi bi-camera-video"></i>
                        </div>
                        <h4 class="card-title fw-bold mb-0">视频检测记录</h4>
                    </div>

                    <div class="form-group">
                        <label class="text-muted small mb-2">选择历史记录查看详情：</label>
                        <select id="video-detection-select" class="form-select form-select-lg shadow-sm border-light bg-light">
                            <option value="">-- 请选择检测结果 --</option>
                            {% for item in video_operations %}
                            <option value="{{ forloop.counter }}"
                                    data-time="{{ item.created_at|date:'Y-m-d H:i:s' }}"
                                    data-description="{{ item.description }}"
                                    data-path="{{ item.result_path }}">
                                🎬 {{ item.created_at|date:'m-d H:i' }} - 第{{ forloop.counter }}次检测
                            </option>
                            {% empty %}
                            <option value="" disabled>暂无视频检测记录</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="resultModal" class="custom-modal-overlay">
        <div class="custom-modal-content">
            <div class="custom-modal-header">
                <h5 class="fw-bold mb-0 text-dark">
                    <i class="bi bi-clipboard-data me-2" style="color: #6f42c1;"></i>检测详情
                </h5>
                <span class="close">&times;</span>
            </div>

            <div class="custom-modal-body">
                <div class="info-item">
                    <small class="text-muted text-uppercase">检测时间</small>
                    <p class="fw-bold text-dark mb-0 fs-5" id="modal-time"></p>
                </div>

                <div class="info-item">
                    <small class="text-muted text-uppercase">检测结果说明</small>
                    <div class="p-3 bg-light rounded mt-1 border-start border-4 border-success">
                        <p class="mb-0 text-secondary" id="modal-description"></p>
                    </div>
                </div>

                <div class="info-item">
                    <small class="text-muted text-uppercase">文件存储路径</small>
                    <div class="p-2 bg-dark rounded mt-1 text-white-50 font-monospace text-break small">
                        <i class="bi bi-folder2-open me-2"></i><span id="modal-path"></span>
                    </div>
                </div>
            </div>

            <div class="custom-modal-footer">
                <button type="button" class="btn btn-secondary btn-sm w-100 rounded-pill close-btn-action">关闭窗口</button>
            </div>
        </div>
    </div>
</div>

<style>
    /* 页面基础动画 */
    .fade-in-up {
        animation: fadeInUp 0.5s ease-out forwards;
        opacity: 0;
        transform: translateY(20px);
    }
    @keyframes fadeInUp {
        to { opacity: 1; transform: translateY(0); }
    }

    .shadow-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .shadow-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }

    .icon-square {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

    /* 修复后的模态框样式 */
    .custom-modal-overlay {
        display: none; /* JS 控制 display */
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
    }

    .custom-modal-content {
        background-color: #fff !important;
        margin: 5% auto;
        padding: 0;
        border: 0;
        width: 90%;
        max-width: 500px;
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        position: relative;
        overflow: hidden;
        animation: modalSlideIn 0.3s ease-out forwards;
        opacity: 1;
    }

    @keyframes modalSlideIn {
        from { transform: translateY(-30px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .custom-modal-header {
        padding: 20px 25px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
    }

    .custom-modal-body {
        padding: 25px;
        background: #fff;
    }

    .custom-modal-footer {
        padding: 15px 25px;
        background-color: #f8f9fa;
        text-align: center;
    }

    .info-item {
        margin-bottom: 20px;
    }

    .close {
        color: #aaa;
        font-size: 28px;
        font-weight: bold;
        transition: color 0.2s;
        line-height: 1;
        cursor: pointer;
        background: none;
        border: none;
    }
    .close:hover {
        color: #000;
    }
</style>

<script>
    // 界面优化：页面加载时将模态框移动到body，防止被父元素动画遮挡
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('resultModal');
        if (modal) {
            document.body.appendChild(modal);
        }
    });

    // === 以下逻辑完全保留原有功能 ===

    // 图像检测下拉框事件监听
    document.getElementById('image-detection-select').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            const time = selectedOption.getAttribute('data-time');
            const description = selectedOption.getAttribute('data-description');
            const path = selectedOption.getAttribute('data-path');

            document.getElementById('modal-time').textContent = time;
            document.getElementById('modal-description').textContent = description;
            document.getElementById('modal-path').textContent = path;

            const modal = document.getElementById('resultModal');
            modal.style.display = 'block';
        }
    });

    // 视频检测下拉框事件监听
    document.getElementById('video-detection-select').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            const time = selectedOption.getAttribute('data-time');
            const description = selectedOption.getAttribute('data-description');
            const path = selectedOption.getAttribute('data-path');

            document.getElementById('modal-time').textContent = time;
            document.getElementById('modal-description').textContent = description;
            document.getElementById('modal-path').textContent = path;

            const modal = document.getElementById('resultModal');
            modal.style.display = 'block';
        }
    });

    // 关闭按钮事件监听 (处理右上角X)
    const closeButton = document.querySelector('.close');
    closeButton.addEventListener('click', function() {
        const modal = document.getElementById('resultModal');
        modal.style.display = 'none';
        // 辅助优化：重置下拉框
        document.getElementById('image-detection-select').value = "";
        document.getElementById('video-detection-select').value = "";
    });

    // 辅助优化：处理底部关闭按钮
    const closeBtnAction = document.querySelector('.close-btn-action');
    if (closeBtnAction) {
        closeBtnAction.addEventListener('click', function() {
            const modal = document.getElementById('resultModal');
            modal.style.display = 'none';
            document.getElementById('image-detection-select').value = "";
            document.getElementById('video-detection-select').value = "";
        });
    }

    // 点击其他地方关闭弹窗
    window.onclick = function(event) {
        if (event.target == document.getElementById('resultModal')) {
            const modal = document.getElementById('resultModal');
            modal.style.display = 'none';
            document.getElementById('image-detection-select').value = "";
            document.getElementById('video-detection-select').value = "";
        }
    }
</script>
{% endblock %}