{% 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-clock-history 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-primary-subtle text-primary 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 operation in image_operations %}
                            <option value="{{ forloop.counter }}"
                                    data-time="{{ operation.operation_time|date:'Y-m-d H:i:s' }}"
                                    data-description="{{ operation.description }}"
                                    data-path="{{ operation.result_path.url }}">
                                📅 {{ operation.operation_time|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-success-subtle text-success 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 operation in video_operations %}
                            <option value="{{ forloop.counter }}"
                                    data-time="{{ operation.operation_time|date:'Y-m-d H:i:s' }}"
                                    data-description="{{ operation.description }}"
                                    data-path="{{ operation.result_path.url }}">
                                🎬 {{ operation.operation_time|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-primary">
                        <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;
        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 根节点
    // 这能防止模态框被外层的容器（如 .container）的动画或层级属性影响
    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) {
            updateModalContent(selectedOption);
            showModal();
        }
    });

    // 视频选择逻辑
    document.getElementById('video-detection-select').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            updateModalContent(selectedOption);
            showModal();
        }
    });

    // 更新弹窗内容函数
    function updateModalContent(option) {
        document.getElementById('modal-time').textContent = option.getAttribute('data-time');
        document.getElementById('modal-description').textContent = option.getAttribute('data-description');
        document.getElementById('modal-path').textContent = option.getAttribute('data-path');
    }

    // 显示弹窗
    function showModal() {
        document.getElementById('resultModal').style.display = 'block';
    }

    // 关闭逻辑
    const closeButton = document.querySelector('.close');
    const closeBtnAction = document.querySelector('.close-btn-action');
    const modal = document.getElementById('resultModal');

    function closeModal() {
        modal.style.display = 'none';
        // 重置下拉框选中状态
        document.getElementById('image-detection-select').value = "";
        document.getElementById('video-detection-select').value = "";
    }

    if(closeButton) closeButton.addEventListener('click', closeModal);
    if(closeBtnAction) closeBtnAction.addEventListener('click', closeModal);

    window.onclick = function(event) {
        if (event.target == modal) {
            closeModal();
        }
    }
</script>
{% endblock %}