<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All Information Form</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0-alpha1/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f4f4f9;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 900px;
        }
        .form-section {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }
        .form-section h4 {
            font-size: 1.25rem;
            color: #333;
            margin-bottom: 20px;
        }
        .form-section .border {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
        }
        .form-section .mb-3 {
            margin-bottom: 15px;
        }
        .form-section .form-control {
            border-radius: 6px;
        }
        .btn-submit {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 12px 30px;
            font-size: 16px;
            border-radius: 6px;
            width: 100%;
        }
        .btn-submit:hover {
            background-color: #0056b3;
            cursor: pointer;
        }
        .empty-message {
            color: #888;
            font-size: 1rem;
            text-align: center;
        }
        .alert {
            margin-top: 20px;
            padding: 15px;
        }

        /* 优化 textarea 的样式 */
        textarea {
            height: 150px;  /* 设置合适的高度 */
            resize: vertical;  /* 只允许垂直调整大小 */
            padding: 10px;  /* 设置内边距，增加可读性 */
        }

        /* 如果 textarea 太长，可以设置最大高度 */
        textarea {
            width: 100%;  /* 设置最大高度，避免过高 */
        }

    </style>
</head>
<body>

    {% extends 'admin/base_site.html' %}
    <!-- {% block title %}
    {{ admin_site.site_title }} - {{ user.username }}'s Profile
    {% endblock %} -->

    {% block branding %}
    <h1 id="site-name"><a href="{% url 'admin:index' %}">诊断应用后台</a></h1>
    {% endblock %}
    

    {% block content %}

    <div class="container mt-5">
        <h2 class="text-center mb-4">填写信息 - {{ user.name }}</h2>
        
        <form method="POST">
            <!-- 联系方式 -->
            <div class="form-section">
                <h4>联系方式</h4>
                {{ contact_info_form.as_p }}
            </div>

            <!-- 就读信息 -->
            <div class="form-section">
                <h4>就读信息</h4>
                {{ school_info_form.as_p }}
            </div>
            
            <!-- 学习情况 -->
            <div class="form-section">
                <h4>学习情况</h4>
                <div id="gradeForm" style="border: 1px solid #ccc; padding: 10px;">
                    <div class="form-group">
                        <label for="subject1">语文</label>
                        <input type="text" id="subject1" name="subject1">
                    </div>
                    <div class="form-group">
                        <label for="subject2">数学</label>
                        <input type="text" id="subject2" name="subject2">
                    </div>
                    <div class="form-group">
                        <label for="subject3">英语</label>
                        <input type="text" id="subject3" name="subject3">
                    </div>
                    <div class="form-group">
                        <label for="subject4">物理</label>
                        <input type="text" id="subject4" name="subject4">
                    </div>
                    <div class="form-group">
                        <label for="subject5">化学</label>
                        <input type="text" id="subject5" name="subject5">
                    </div>
                    <div class="form-group">
                        <label for="subject6">生物</label>
                        <input type="text" id="subject6" name="subject6">
                    </div>
                    <div class="form-group">
                        <label for="subject7">历史</label>
                        <input type="text" id="subject7" name="subject7">
                    </div>
                    <div class="form-group">
                        <label for="subject8">地理</label>
                        <input type="text" id="subject8" name="subject8">
                    </div>
                    <div class="form-group">
                        <label for="subject9">政治</label>
                        <input type="text" id="subject9" name="subject9">
                    </div>
                    
                    <div style="margin-top: 10px;">
                        <div id="grades_parse_result">生成json字符串：{}</div>
                        <button type="button" id="parseGrades" class="btn btn-primary">解析成绩</button>
    
                        <div>
                            <label for="json_encoded_grades">输入json字符串</label>
                            <input type="text" id="json_encoded_grades" name="json_encoded_grades">
                        </div>
                        <button type="button" id="showGrades" class="btn btn-primary">展示成绩</button>
                    </div>
                    
                    <script>
                        document.getElementById('parseGrades').addEventListener('click', function(event) {
                            // 获取所有科目的成绩输入框
                            const subjects = ['subject1', 'subject2', 'subject3', 'subject4', 'subject5', 'subject6', 'subject7', 'subject8', 'subject9']
                            let grades = {}
                            let atLeastOneFilled = false
                            // 获取每个科目的成绩，检查是否有至少一项成绩填写
                            subjects.forEach(subject => {
                                const grade = document.getElementById(subject).value.trim()
                                if (grade) {
                                    grades[subject] = grade
                                    atLeastOneFilled = true
                                }
                            });
                            // 检查是否至少填写了一项成绩
                            if (!atLeastOneFilled) {
                                alert("至少填写一门成绩！")
                                return
                            }
                            // 将成绩数据转换为 JSON 格式
                            const jsonGrades = JSON.stringify(grades)
                            // 发送数据到后台（你可以修改为你自己的后台 API）
                            console.log("成绩数据:", jsonGrades)
                            document.getElementById('grades_parse_result').innerHTML = `生成json字符串：${jsonGrades}`
                            navigator.clipboard.writeText(jsonGrades).then(function() {
                                alert("文本已复制到剪贴板！");
                            }).catch(function(err) {
                                alert("复制失败: " + err);
                            });
                        });
        
                        document.getElementById('showGrades').addEventListener('click', function(event) {
                            // 获取 JSON 格式的成绩数据
                            const jsonGrades = document.getElementById('json_encoded_grades').value.trim()
                            if (!jsonGrades) {
                                alert("请输入 JSON 格式的成绩数据！")
                                return
                            }
                            // 解析 JSON 数据
                            const grades = JSON.parse(jsonGrades)
                            const subjects = ['subject1', 'subject2', 'subject3', 'subject4', 'subject5', 'subject6', 'subject7', 'subject8', 'subject9']
                            // 遍历每个科目，填充相应的成绩
                            subjects.forEach(subject => {
                                if (grades[subject]) {
                                    document.getElementById(subject).value = grades[subject]  // 填充成绩数据
                                }
                            })
                        })
                    </script>
                </div>
                {{ academic_info_form.as_p }}
            </div>

            <!-- 健康状况 -->
            <div class="form-section">
                <h4>健康状况</h4>
                {{ health_info_form.as_p }}
            </div>

            <!-- 自我评价 -->
            <div class="form-section">
                <h4>自我评价</h4>
                {{ self_evaluation_form.as_p }}
            </div>
            <button type="submit" class="btn-submit">提交</button>
        </form>
        
        <form method="POST" action="/ec_user/all_info_edit/{{ user.id }}/hobbies_interests/">
            <!-- 兴趣爱好 -->
            <div class="form-section">
                <h4>兴趣爱好</h4>
                {{ hobbies_interests_form.management_form }} <!-- 管理表单 -->
                {% for form in hobbies_interests_form %}
                    <div class="border p-3 mb-3">
                        {{ form.as_p }}
                    </div>
                {% empty %}
                    <p class="empty-message">没有兴趣爱好信息。</p>
                {% endfor %}
                <button type="submit" class="btn-submit">提交</button>
            </div>
        </form>
        
        <form method="POST" action="/ec_user/all_info_edit/{{ user.id }}/social_practice/">
            <!-- 社会实践 -->
            <div class="form-section">
                <h4>社会实践</h4>
                {{ social_practice_form.management_form }}
                {% for form in social_practice_form %}
                    <div class="border p-3 mb-3">
                        {{ form.as_p }}
                    </div>
                {% empty %}
                    <p class="empty-message">没有社会实践记录。</p>
                {% endfor %}
                <button type="submit" class="btn-submit">提交</button>
            </div>
        </form>
            
        <form method="POST" action="/ec_user/all_info_edit/{{ user.id }}/family_info/">
            <!-- 家庭情况 -->
            <div class="form-section">
                <h4>家庭情况</h4>
                {{ family_info_form.management_form }}
                {% for form in family_info_form %}
                    <div class="border p-3 mb-3">
                        {{ form.as_p }}
                    </div>
                {% empty %}
                    <p class="empty-message">没有家庭情况记录。</p>
                {% endfor %}
                <button type="submit" class="btn-submit">提交</button>
            </div>
        </form>
        
        <form method="POST" action="/ec_user/all_info_edit/{{ user.id }}/awards_punishments/" >
            <!-- 奖惩情况 -->
            <div class="form-section">
                <h4>奖惩情况</h4>
                {{ awards_punishments_form.management_form }}
                {% for form in awards_punishments_form %}
                    <div class="border p-3 mb-3">
                        {{ form.as_p }}
                    </div>
                {% empty %}
                    <p class="empty-message">没有奖惩情况记录。</p>
                {% endfor %}
                <button type="submit" class="btn-submit">提交</button>
            </div>
        </form>

    </div>

    {% endblock %}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0-alpha1/js/bootstrap.bundle.min.js"></script>

    
</body>
</html>
