{% extends "base.html" %}

{% block title %}系统设置{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
                <!-- 主题设置 -->
                <div class="card mb-4 border-light shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-palette me-2"></i>显示设置</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="theme" class="form-label">主题设置</label>
                                <select name="theme" id="theme" class="form-select" required>
                                    <option value="auto" {% if settings.theme == 'auto' %}selected{% endif %}>自动（跟随系统）</option>
                                    <option value="light" {% if settings.theme == 'light' %}selected{% endif %}>明亮模式</option>
                                    <option value="dark" {% if settings.theme == 'dark' %}selected{% endif %}>暗黑模式</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="card_style" class="form-label">卡片样式</label>
                                <select name="card_style" id="card_style" class="form-select" required>
                                    <option value="normal" {% if settings.card_style == 'normal' %}selected{% endif %}>正常大小</option>
                                    <option value="compact" {% if settings.card_style == 'compact' %}selected{% endif %}>紧凑模式</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 网站标题与Logo -->
                <div class="card mb-4 border-light shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-heading me-2"></i>网站标题与Logo</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="site_title" class="form-label">网站标题</label>
                                <input type="text" class="form-control" id="site_title" name="site_title"
                                       value="{{ settings.site_title }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="show_logo" name="show_logo"
                                           {% if settings.show_logo %}checked{% endif %}>
                                    <label class="form-check-label" for="show_logo">在标题左侧显示Logo</label>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Logo类型</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="logo_type" id="logo_type_icon"
                                       value="icon" {% if settings.logo_type == 'icon' %}checked{% endif %}>
                                <label class="form-check-label" for="logo_type_icon">使用图标</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="logo_type" id="logo_type_image"
                                       value="image" {% if settings.logo_type == 'image' %}checked{% endif %}>
                                <label class="form-check-label" for="logo_type_image">使用图片</label>
                            </div>
                        </div>

                        <!-- 图标选择 -->
                        <div id="logoIconSection" class="mb-3" style="{% if settings.logo_type != 'icon' %}display:none;{% endif %}">
                            <label class="form-label">选择图标</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas {{ settings.logo_icon }}"></i></span>
                                <select class="form-select" name="logo_icon" id="logo_icon">
                                    {% for icon, name in icons.items() %}
                                    <option value="{{ icon }}" {% if icon.endswith(settings.logo_icon) %}selected{% endif %}>
                                        {{ name }} ({{ icon }})
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <!-- 图片选择 -->
                        <div id="logoImageSection" style="{% if settings.logo_type != 'image' %}display:none;{% endif %}">
                            <div class="mb-3">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="logo_image_type" id="logo_image_none" value="none"
                                           {% if not settings.logo_image %}checked{% endif %}>
                                    <label class="form-check-label" for="logo_image_none">使用默认图片</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="logo_image_type" id="logo_image_existing" value="existing"
                                           {% if settings.logo_image %}checked{% endif %}>
                                    <label class="form-check-label" for="logo_image_existing">选择已上传的Logo</label>
                                    <input type="hidden" name="selected_logo" id="selected_logo" value="{{ settings.logo_image.split('/')[-1] if settings.logo_image else '' }}">
                                    <button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-bs-toggle="modal" data-bs-target="#logoModal">
                                        <i class="fas fa-image me-1"></i>选择Logo
                                    </button>
                                </div>
                            </div>

                            {% if settings.logo_image and settings.logo_type == 'image' %}
                            <div class="current-logo mt-3">
                                <p class="mb-1"><strong>当前Logo预览:</strong></p>
                                <img src="{{ settings.logo_image }}" style="max-width: 100px; max-height: 100px;" class="img-thumbnail">
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- 明亮模式背景设置 -->
                <div class="card mb-4 border-light shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-sun me-2"></i>明亮模式背景</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="bg_type" id="bg_none" value="none"
                                       {% if settings.bg_image == 'none' %}checked{% endif %}>
                                <label class="form-check-label" for="bg_none">不使用背景</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="bg_type" id="bg_default" value="default"
                                       {% if settings.bg_image == '/static/background_light.jpg' or (not settings.bg_image or settings.bg_image == '') %}checked{% endif %}>
                                <label class="form-check-label" for="bg_default">使用默认明亮背景</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="bg_type" id="bg_existing" value="existing"
                                       {% if settings.bg_image and settings.bg_image != '/static/background_light.jpg' and settings.bg_image != 'none' and not settings.bg_image.endswith('.mp4') %}checked{% endif %}>
                                <label class="form-check-label" for="bg_existing">选择已上传的背景图片</label>
                                <input type="hidden" name="selected_bg" id="selected_bg" value="{{ settings.bg_image.split('/')[-1] if settings.bg_image and settings.bg_image != '/static/background_light.jpg' and settings.bg_image != 'none' and not settings.bg_image.endswith('.mp4') else '' }}">
                                <button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-bs-toggle="modal" data-bs-target="#bgModal">
                                    <i class="fas fa-image me-1"></i>选择背景图片
                                </button>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="bg_type" id="bg_video" value="video"
                                       {% if settings.bg_image and settings.bg_image.endswith('.mp4') %}checked{% endif %}>
                                <label class="form-check-label" for="bg_video">选择已上传的背景视频</label>
                                <input type="hidden" name="selected_video" id="selected_video" value="{{ settings.bg_image.split('/')[-1] if settings.bg_image and settings.bg_image.endswith('.mp4') else '' }}">
                                <button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-bs-toggle="modal" data-bs-target="#videoModal">
                                    <i class="fas fa-video me-1"></i>选择背景视频
                                </button>
                            </div>
                        </div>

                        {% if settings.bg_image and settings.bg_image != '/static/background_light.jpg' and settings.bg_image != 'none' %}
                        <div class="current-bg mt-3">
                            <p class="mb-1"><strong>当前背景预览:</strong></p>
                            {% if settings.bg_image.endswith('.mp4') %}
                            <video width="300" height="150" controls class="img-thumbnail">
                                <source src="{{ settings.bg_image }}" type="video/mp4">
                                您的浏览器不支持视频预览
                            </video>
                            {% else %}
                            <img src="{{ settings.bg_image }}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- 暗黑模式背景设置 -->
                <div class="card mb-4 border-light shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-moon me-2"></i>暗黑模式背景</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="dark_bg_type" id="dark_bg_none" value="none"
                                       {% if settings.dark_bg_image == 'none' %}checked{% endif %}>
                                <label class="form-check-label" for="dark_bg_none">不使用背景</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="dark_bg_type" id="dark_bg_default" value="default"
                                       {% if settings.dark_bg_image == '/static/background_dark.jpg' or (not settings.dark_bg_image or settings.dark_bg_image == '') %}checked{% endif %}>
                                <label class="form-check-label" for="dark_bg_default">使用默认暗黑背景</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="dark_bg_type" id="dark_bg_existing" value="existing"
                                       {% if settings.dark_bg_image and settings.dark_bg_image != '/static/background_dark.jpg' and settings.dark_bg_image != 'none' and not settings.dark_bg_image.endswith('.mp4') %}checked{% endif %}>
                                <label class="form-check-label" for="dark_bg_existing">选择已上传的背景图片</label>
                                <input type="hidden" name="selected_dark_bg" id="selected_dark_bg" value="{{ settings.dark_bg_image.split('/')[-1] if settings.dark_bg_image and settings.dark_bg_image != '/static/background_dark.jpg' and settings.dark_bg_image != 'none' and not settings.dark_bg_image.endswith('.mp4') else '' }}">
                                <button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-bs-toggle="modal" data-bs-target="#darkBgModal">
                                    <i class="fas fa-image me-1"></i>选择背景图片
                                </button>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="dark_bg_type" id="dark_bg_video" value="video"
                                       {% if settings.dark_bg_image and settings.dark_bg_image.endswith('.mp4') %}checked{% endif %}>
                                <label class="form-check-label" for="dark_bg_video">选择已上传的背景视频</label>
                                <input type="hidden" name="selected_dark_video" id="selected_dark_video" value="{{ settings.dark_bg_image.split('/')[-1] if settings.dark_bg_image and settings.dark_bg_image.endswith('.mp4') else '' }}">
                                <button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-bs-toggle="modal" data-bs-target="#darkVideoModal">
                                    <i class="fas fa-video me-1"></i>选择背景视频
                                </button>
                            </div>
                        </div>

                        {% if settings.dark_bg_image and settings.dark_bg_image != '/static/background_dark.jpg' and settings.dark_bg_image != 'none' %}
                        <div class="current-bg mt-3">
                            <p class="mb-1"><strong>当前背景预览:</strong></p>
                            {% if settings.dark_bg_image.endswith('.mp4') %}
                            <video width="300" height="150" controls class="img-thumbnail">
                                <source src="{{ settings.dark_bg_image }}" type="video/mp4">
                                您的浏览器不支持视频预览
                            </video>
                            {% else %}
                            <img src="{{ settings.dark_bg_image }}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>

<div class="card mb-4 border-light shadow-sm">
    <div class="card-header bg-light">
        <h5 class="mb-0"><i class="fas fa-user me-2"></i>游客设置</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6 mb-3">
                <label for="guest_theme" class="form-label">游客默认主题</label>
                <select name="guest_theme" id="guest_theme" class="form-select">
                    <option value="auto" {% if guest_settings.theme == 'auto' %}selected{% endif %}>自动（跟随系统）</option>
                    <option value="light" {% if guest_settings.theme == 'light' %}selected{% endif %}>明亮模式</option>
                    <option value="dark" {% if guest_settings.theme == 'dark' %}selected{% endif %}>暗黑模式</option>
                </select>
            </div>
            <div class="col-md-6 mb-3">
                <label for="guest_card_style" class="form-label">游客卡片样式</label>
                <select name="guest_card_style" id="guest_card_style" class="form-select">
                    <option value="normal" {% if guest_settings.card_style == 'normal' %}selected{% endif %}>正常大小</option>
                    <option value="compact" {% if guest_settings.card_style == 'compact' %}selected{% endif %}>紧凑模式</option>
                </select>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label">游客明亮模式背景</label>
            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="guest_bg_type" id="guest_bg_none" value="none"
                       {% if guest_settings.bg_image == 'none' %}checked{% endif %}>
                <label class="form-check-label" for="guest_bg_none">无背景</label>
            </div>
            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="guest_bg_type" id="guest_bg_default" value="default"
                       {% if guest_settings.bg_image == '/static/background_light.jpg' %}checked{% endif %}>
                <label class="form-check-label" for="guest_bg_default">默认背景</label>
            </div>
            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="guest_bg_type" id="guest_bg_system" value="system"
                       {% if guest_settings.bg_image not in ['none', '/static/background_light.jpg'] %}checked{% endif %}>
                <label class="form-check-label" for="guest_bg_system">使用系统设置背景</label>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label">游客暗黑模式背景</label>
            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="guest_dark_bg_type" id="guest_dark_bg_none" value="none"
                       {% if guest_settings.dark_bg_image == 'none' %}checked{% endif %}>
                <label class="form-check-label" for="guest_dark_bg_none">无背景</label>
            </div>
            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="guest_dark_bg_type" id="guest_dark_bg_default" value="default"
                       {% if guest_settings.dark_bg_image == '/static/background_dark.jpg' %}checked{% endif %}>
                <label class="form-check-label" for="guest_dark_bg_default">默认背景</label>
            </div>
            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="guest_dark_bg_type" id="guest_dark_bg_system" value="system"
                       {% if guest_settings.dark_bg_image not in ['none', '/static/background_dark.jpg'] %}checked{% endif %}>
                <label class="form-check-label" for="guest_dark_bg_system">使用系统设置背景</label>
            </div>
        </div>
    </div>
</div>

<!-- 页脚设置 -->
<div class="card mb-4 border-light shadow-sm">
    <div class="card-header bg-light">
        <h5 class="mb-0"><i class="fas fa-code me-2"></i>页脚设置</h5>
    </div>
    <div class="card-body">
        <div class="mb-3">
            <label for="footer_html" class="form-label">自定义页脚HTML代码</label>
            <textarea class="form-control" id="footer_html" name="footer_html" rows="4">{{ settings.footer_html if settings.footer_html else '' }}</textarea>
            <div class="form-text">支持HTML代码，可用于添加版权信息、统计代码等</div>
        </div>

        <div class="preview-area mt-3 p-3 bg-light rounded">
            <h6>预览效果：</h6>
            <div id="footer_preview">
                {{ settings.footer_html|safe if settings.footer_html else '' }}
            </div>
        </div>
    </div>
</div>

                <!-- 修改密码 -->
                <div class="card mb-4 border-light shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-lock me-2"></i>安全设置</h5>
                    </div>
                    <div class="card-body">
                        <div class="card border-warning">
                            <div class="card-header bg-warning text-dark">
                                <i class="fas fa-key me-2"></i>修改管理员密码
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="old_password" class="form-label">当前密码</label>
                                    <input type="password" class="form-control" id="old_password" name="old_password">
                                </div>
                                <div class="mb-3">
                                    <label for="new_password" class="form-label">新密码</label>
                                    <input type="password" class="form-control" id="new_password" name="new_password">
                                </div>
                                <div class="mb-3">
                                    <label for="confirm_password" class="form-label">确认新密码</label>
                                    <input type="password" class="form-control" id="confirm_password" name="confirm_password">
                                </div>
                                <div class="alert alert-info mb-0">
                                    <i class="fas fa-info-circle me-2"></i>如果不修改密码，请留空这些字段
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between mt-4">
                    <a href="{{ url_for('index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>返回首页
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>保存设置
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Logo选择模态框 -->
    <div class="modal fade" id="logoModal" tabindex="-1" aria-labelledby="logoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logoModalLabel">选择Logo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        {% for attachment in attachments if attachment.type == 'logo' %}
                        <div class="col-md-3 mb-3">
                            <div class="card h-100 cursor-pointer" onclick="selectLogo('{{ attachment.filename }}')">
                                <img src="{{ url_for('uploaded_logo', filename=attachment.filename) }}"
                                     class="card-img-top img-thumbnail"
                                     style="height: 100px; object-fit: contain;">
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 明亮模式背景图片选择模态框 -->
    <div class="modal fade" id="bgModal" tabindex="-1" aria-labelledby="bgModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bgModalLabel">选择明亮模式背景图片</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        {% for attachment in attachments if attachment.type == 'background' %}
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 cursor-pointer" onclick="selectBg('{{ attachment.filename }}')">
                                <img src="{{ url_for('uploaded_background', filename=attachment.filename) }}"
                                     class="card-img-top img-thumbnail"
                                     style="height: 150px; object-fit: cover;">
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 明亮模式背景视频选择模态框 -->
    <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="videoModalLabel">选择明亮模式背景视频</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        {% for attachment in attachments if attachment.type == 'video' %}
                        <div class="col-md-6 mb-3">
                            <div class="card h-100 cursor-pointer" onclick="selectVideo('{{ attachment.filename }}')">
                                <video class="card-img-top img-thumbnail" style="height: 150px; object-fit: cover;" muted>
                                    <source src="{{ url_for('uploaded_video', filename=attachment.filename) }}" type="video/mp4">
                                </video>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 暗黑模式背景图片选择模态框 -->
    <div class="modal fade" id="darkBgModal" tabindex="-1" aria-labelledby="darkBgModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="darkBgModalLabel">选择暗黑模式背景图片</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        {% for attachment in attachments if attachment.type == 'background' %}
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 cursor-pointer" onclick="selectDarkBg('{{ attachment.filename }}')">
                                <img src="{{ url_for('uploaded_background', filename=attachment.filename) }}"
                                     class="card-img-top img-thumbnail"
                                     style="height: 150px; object-fit: cover;">
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 暗黑模式背景视频选择模态框 -->
    <div class="modal fade" id="darkVideoModal" tabindex="-1" aria-labelledby="darkVideoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="darkVideoModalLabel">选择暗黑模式背景视频</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        {% for attachment in attachments if attachment.type == 'video' %}
                        <div class="col-md-6 mb-3">
                            <div class="card h-100 cursor-pointer" onclick="selectDarkVideo('{{ attachment.filename }}')">
                                <video class="card-img-top img-thumbnail" style="height: 150px; object-fit: cover;" muted>
                                    <source src="{{ url_for('uploaded_video', filename=attachment.filename) }}" type="video/mp4">
                                </video>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <script>
// 页脚预览
document.getElementById('footer_html').addEventListener('input', function() {
    document.getElementById('footer_preview').innerHTML = this.value;
});
    // 全局选择函数
    function selectLogo(filename) {
        document.getElementById('selected_logo').value = filename;
        document.getElementById('logo_image_existing').checked = true;
        document.getElementById('logo_image_none').checked = false;

        // 更新预览
        const previewContainer = document.querySelector('.current-logo');
        if (!previewContainer) {
            // 如果预览容器不存在，创建一个
            const logoImageSection = document.getElementById('logoImageSection');
            const previewDiv = document.createElement('div');
            previewDiv.className = 'current-logo mt-3';
            previewDiv.innerHTML = `
                <p class="mb-1"><strong>当前Logo预览:</strong></p>
                <img src="/upload/logo/${filename}" style="max-width: 100px; max-height: 100px;" class="img-thumbnail">
            `;
            logoImageSection.appendChild(previewDiv);
        } else {
            // 更新现有预览
            previewContainer.querySelector('img').src = `/upload/logo/${filename}`;
        }

        // 使用原生 JavaScript 关闭模态框
        const logoModal = bootstrap.Modal.getInstance(document.getElementById('logoModal'));
        logoModal.hide();
    }

    function selectBg(filename) {
        document.getElementById('selected_bg').value = filename;
        document.getElementById('bg_existing').checked = true;
        document.getElementById('bg_none').checked = false;
        document.getElementById('bg_default').checked = false;
        document.getElementById('bg_video').checked = false;

        // 更新预览
        const previewContainer = document.querySelector('.current-bg');
        if (!previewContainer) {
            const bgSection = document.querySelector('input[name="bg_type"]').closest('.card');
            const previewDiv = document.createElement('div');
            previewDiv.className = 'current-bg mt-3';
            previewDiv.innerHTML = `
                <p class="mb-1"><strong>当前背景预览:</strong></p>
                <img src="/upload/background/${filename}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
            `;
            bgSection.querySelector('.card-body').appendChild(previewDiv);
        } else {
            previewContainer.innerHTML = `
                <p class="mb-1"><strong>当前背景预览:</strong></p>
                <img src="/upload/background/${filename}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
            `;
        }

        const bgModal = bootstrap.Modal.getInstance(document.getElementById('bgModal'));
        bgModal.hide();
    }

    function selectVideo(filename) {
        document.getElementById('selected_video').value = filename;
        document.getElementById('bg_video').checked = true;
        document.getElementById('bg_none').checked = false;
        document.getElementById('bg_default').checked = false;
        document.getElementById('bg_existing').checked = false;

        // 更新预览
        const previewContainer = document.querySelector('.current-bg');
        if (!previewContainer) {
            const bgSection = document.querySelector('input[name="bg_type"]').closest('.card');
            const previewDiv = document.createElement('div');
            previewDiv.className = 'current-bg mt-3';
            previewDiv.innerHTML = `
                <p class="mb-1"><strong>当前背景预览:</strong></p>
                <video width="300" height="150" controls class="img-thumbnail">
                    <source src="/upload/video/${filename}" type="video/mp4">
                    您的浏览器不支持视频预览
                </video>
            `;
            bgSection.querySelector('.card-body').appendChild(previewDiv);
        } else {
            previewContainer.innerHTML = `
                <p class="mb-1"><strong>当前背景预览:</strong></p>
                <video width="300" height="150" controls class="img-thumbnail">
                    <source src="/upload/video/${filename}" type="video/mp4">
                    您的浏览器不支持视频预览
                </video>
            `;
        }

        const videoModal = bootstrap.Modal.getInstance(document.getElementById('videoModal'));
        videoModal.hide();
    }

    function selectDarkBg(filename) {
        document.getElementById('selected_dark_bg').value = filename;
        document.getElementById('dark_bg_existing').checked = true;
        document.getElementById('dark_bg_none').checked = false;
        document.getElementById('dark_bg_default').checked = false;
        document.getElementById('dark_bg_video').checked = false;

        const previewContainer = document.querySelectorAll('.current-bg')[1];
        if (!previewContainer) {
            const darkBgSection = document.querySelector('input[name="dark_bg_type"]').closest('.card');
            const previewDiv = document.createElement('div');
            previewDiv.className = 'current-bg mt-3';
            previewDiv.innerHTML = `
                <p class="mb-1"><strong>当前背景预览:</strong></p>
                <img src="/upload/background/${filename}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
            `;
            darkBgSection.querySelector('.card-body').appendChild(previewDiv);
        } else {
            previewContainer.innerHTML = `
                <p class="mb-1"><strong>当前背景预览:</strong></p>
                <img src="/upload/background/${filename}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
            `;
        }

        const darkBgModal = bootstrap.Modal.getInstance(document.getElementById('darkBgModal'));
        darkBgModal.hide();
    }

    function selectDarkVideo(filename) {
        document.getElementById('selected_dark_video').value = filename;
        document.getElementById('dark_bg_video').checked = true;
        document.getElementById('dark_bg_none').checked = false;
        document.getElementById('dark_bg_default').checked = false;
        document.getElementById('dark_bg_existing').checked = false;

        const previewContainer = document.querySelectorAll('.current-bg')[1];
        if (!previewContainer) {
            const darkBgSection = document.querySelector('input[name="dark_bg_type"]').closest('.card');
            const previewDiv = document.createElement('div');
            previewDiv.className = 'current-bg mt-3';
            previewDiv.innerHTML = `
                <p class="mb-1"><strong>当前背景预览:</strong></p>
                <video width="300" height="150" controls class="img-thumbnail">
                    <source src="/upload/video/${filename}" type="video/mp4">
                    您的浏览器不支持视频预览
                </video>
            `;
            darkBgSection.querySelector('.card-body').appendChild(previewDiv);
        } else {
            previewContainer.innerHTML = `
                <p class="mb-1"><strong>当前背景预览:</strong></p>
                <video width="300" height="150" controls class="img-thumbnail">
                    <source src="/upload/video/${filename}" type="video/mp4">
                    您的浏览器不支持视频预览
                </video>
            `;
        }

        const darkVideoModal = bootstrap.Modal.getInstance(document.getElementById('darkVideoModal'));
        darkVideoModal.hide();
    }

    document.addEventListener('DOMContentLoaded', function() {
        // 明亮模式背景
        const bgRadios = document.querySelectorAll('input[name="bg_type"]');
        bgRadios.forEach(radio => {
            radio.addEventListener('change', function() {
                document.getElementById('selected_bg').disabled = this.value !== 'existing';
                document.getElementById('selected_video').disabled = this.value !== 'video';
            });
        });

        // 暗黑模式背景
        const darkBgRadios = document.querySelectorAll('input[name="dark_bg_type"]');
        darkBgRadios.forEach(radio => {
            radio.addEventListener('change', function() {
                document.getElementById('selected_dark_bg').disabled = this.value !== 'existing';
                document.getElementById('selected_dark_video').disabled = this.value !== 'video';
            });
        });

        // Logo图片类型
        const logoImageRadios = document.querySelectorAll('input[name="logo_image_type"]');
        logoImageRadios.forEach(radio => {
            radio.addEventListener('change', function() {
                document.getElementById('selected_logo').disabled = this.value !== 'existing';
            });
        });

        // 动态显示/隐藏logo设置部分
        document.querySelectorAll('input[name="logo_type"]').forEach(radio => {
            radio.addEventListener('change', function() {
                document.getElementById('logoIconSection').style.display = this.value === 'icon' ? 'block' : 'none';
                document.getElementById('logoImageSection').style.display = this.value === 'image' ? 'block' : 'none';
            });
        });

        // 表单验证
        const forms = document.querySelectorAll('.needs-validation');
        forms.forEach(form => {
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    });
    </script>

    <style>
        .card-header {
            font-weight: 600;
        }
        .form-check-label {
            font-weight: 500;
        }
        .current-bg img, .current-logo img, .current-bg video {
            border: 2px solid #dee2e6;
        }
        .img-thumbnail {
            background-color: #f8f9fa;
        }
        .cursor-pointer {
            cursor: pointer;
        }
        .cursor-pointer:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
            transition: all 0.2s ease-in-out;
        }
        .card .card-header {
            border-bottom: 1px solid rgba(0,0,0,.125);
        }
        .card .card-body {
            padding: 1.5rem;
        }
        .card .card-header.bg-light {
            background-color: #abcbeb !important;
        }
        .card .card-header h5 {
            font-size: 1.1rem;
            color: #495057;
        }

        .card.mb-4 {
            margin-bottom: 1.5rem!important;
        }
    </style>
{% endblock %}