{% extends "admin/change_form.html" %}
{% load static %}

{% block extrahead %}
{{ block.super }}
<!-- 引入Bootstrap 5 -->

<style>
/* 自定义按钮样式 */
#test-email-btn {
    margin-left: 10px;
    padding: 6px 12px;
}
</style>
{% endblock %}

{% block body_main %}
{{ block.super }}

<!-- 测试按钮 -->
<div class="mb-4 me-4" style="text-align: right">
    <button 
        type="button" 
        class="btn btn-primary" 
        id="test-email-btn"
        data-bs-toggle="modal" 
        data-bs-target="#email_commonModal">
        测试邮件配置
    </button>
</div>

<!-- 全局模态框 -->
<div class="modal fade" id="email_commonModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">邮件配置测试</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="modalLoader">
                    <form id="testEmailForm">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label">测试邮箱地址</label>
                            <input 
                                type="email" 
                                class="form-control" 
                                name="test_email"
                                required
                                placeholder="test@example.com">
                        </div>
                        <button 
                            type="submit" 
                            class="btn btn-primary w-100">
                            发送测试邮件
                        </button>
                        <div id="testResult" class="mt-3"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// AJAX表单处理
document.getElementById('testEmailForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const resultDiv = document.getElementById('testResult');
    resultDiv.innerHTML = '<div class="spinner-border text-primary"></div> 发送中...';

    fetch("{% url 'test_email_config' %}", {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        }
    })
    .then(response => response.json())
    .then(data => {
        resultDiv.innerHTML = data.success 
            ? `<div class="alert alert-success">${data.message}</div>`
            : `<div class="alert alert-danger">${data.message}</div>`;
    })
    .catch(error => {
        resultDiv.innerHTML = `<div class="alert alert-danger">网络请求失败</div>`;
    });
});
</script>
<style>
    {% comment %} /* 修复Bootstrap与Admin样式冲突 */
.modal-backdrop {
    z-index: 100 !important;
}

.modal {
    z-index: 105 !important;
}

#test-email-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
} {% endcomment %}

</style>
{% endblock %}
