{% extends 'base.html' %}

{% block css %}
<style>
    body {
        background-color: #f8f9fa;
        font-family: Arial, sans-serif;
    }
    
    .container {
        max-width: 800px;
        margin: 50px auto;
    }
    
    h1 {
        margin-bottom: 30px;
        color: #333;
    }
    
    .setting-form {
        background-color: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .form-group {
        margin-bottom: 25px;
    }
    
    .preview-section {
        background-color: #e9ecef;
        padding: 20px;
        border-radius: 5px;
        margin-top: 30px;
    }
    
    .preview-title {
        margin-bottom: 20px;
        font-weight: bold;
    }
    
    .color-preview {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-left: 10px;
        vertical-align: middle;
        border: 1px solid #dee2e6;
    }
    
    .btn-primary {
        padding: 12px 30px;
        font-size: 16px;
    }
</style>
{% endblock %}

{% block content %}
    <div class="container">
        <h1>活动设置</h1>
        
        <div class="setting-form">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div class="form-group">
                    {{ form.background_image.label_tag }}
                    {{ form.background_image }}
                    {% if form.background_image.errors %}
                        <div class="text-danger">{{ form.background_image.errors }}</div>
                    {% endif %}
                    {% if setting.background_image %}
                        <div class="mt-2">
                            <small class="text-muted">当前背景图片：</small>
                            <img src="{{ setting.background_image.url }}" alt="当前背景图片" style="max-width: 200px; max-height: 100px; border-radius: 5px;">
                        </div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    {{ form.background_video.label_tag }}
                    {{ form.background_video }}
                    {% if form.background_video.errors %}
                        <div class="text-danger">{{ form.background_video.errors }}</div>
                    {% endif %}
                    {% if setting.background_video %}
                        <div class="mt-2">
                            <small class="text-muted">当前背景视频：{{ setting.background_video.name }}</small>
                        </div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    {{ form.qr_code_image.label_tag }}
                    {{ form.qr_code_image }}
                    {% if form.qr_code_image.errors %}
                        <div class="text-danger">{{ form.qr_code_image.errors }}</div>
                    {% endif %}
                    {% if setting.qr_code_image %}
                        <div class="mt-2">
                            <small class="text-muted">当前二维码：</small>
                            <img src="{{ setting.qr_code_image.url }}" alt="当前二维码" style="max-width: 100px; max-height: 100px; border-radius: 5px;">
                        </div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    {{ form.qr_code_position.label_tag }}
                    {{ form.qr_code_position }}
                    {% if form.qr_code_position.errors %}
                        <div class="text-danger">{{ form.qr_code_position.errors }}</div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    <label for="id_danmu_font_color">
                        弹幕字体颜色
                        <span class="color-preview" id="font-color-preview" style="background-color: {{ setting.danmu_font_color }};"></span>
                    </label>
                    {{ form.danmu_font_color }}
                    {% if form.danmu_font_color.errors %}
                        <div class="text-danger">{{ form.danmu_font_color.errors }}</div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    <label for="id_danmu_bg_color">
                        弹幕背景颜色
                        <span class="color-preview" id="bg-color-preview" style="background-color: {{ setting.danmu_bg_color }};"></span>
                    </label>
                    {{ form.danmu_bg_color }}
                    {% if form.danmu_bg_color.errors %}
                        <div class="text-danger">{{ form.danmu_bg_color.errors }}</div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    <label for="id_global_bg_color">
                        全局背景颜色
                        <span class="color-preview" id="global-color-preview" style="background-color: {{ setting.global_bg_color }};"></span>
                    </label>
                    {{ form.global_bg_color }}
                    {% if form.global_bg_color.errors %}
                        <div class="text-danger">{{ form.global_bg_color.errors }}</div>
                    {% endif %}
                </div>
                
                <button type="submit" class="btn btn-primary">保存设置</button>
            </form>
        </div>
        
        <div class="preview-section">
            <div class="preview-title">预览效果：</div>
            <div style="width: 100%; height: 200px; background-color: {{ setting.global_bg_color }}; border-radius: 5px; position: relative; overflow: hidden;">
                {% if setting.background_image %}
                    <img src="{{ setting.background_image.url }}" alt="背景预览" style="width: 100%; height: 100%; object-fit: cover;">
                {% endif %}
                <div style="position: absolute; {{ setting.qr_code_position|safe }}: 10px; width: 80px; height: 80px;">
                    {% if setting.qr_code_image %}
                        <img src="{{ setting.qr_code_image.url }}" alt="二维码预览" style="width: 100%; height: 100%; border: 2px solid white; border-radius: 5px;">
                    {% else %}
                        <!-- 默认二维码预览 -->
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=80x80&data={{ request.build_absolute_uri }}{% url 'submit' %}" alt="二维码预览" style="width: 100%; height: 100%; border: 2px solid white; border-radius: 5px;">
                    {% endif %}
                </div>
                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 20px; border-radius: 20px; font-size: 16px; font-weight: bold; color: {{ setting.danmu_font_color }}; background-color: {{ setting.danmu_bg_color }}; opacity: 0.8;">
                    示例弹幕
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
<script>
    $(document).ready(function() {
        // 实时更新颜色预览
        $('#id_danmu_font_color').on('input', function() {
            $('#font-color-preview').css('background-color', $(this).val());
        });
        
        $('#id_danmu_bg_color').on('input', function() {
            $('#bg-color-preview').css('background-color', $(this).val());
        });
        
        $('#id_global_bg_color').on('input', function() {
            $('#global-color-preview').css('background-color', $(this).val());
        });
    });
</script>
{% endblock %}