{% extends 'grades/base.html' %}
{% block title %}成绩管理{% endblock %}
{% block breadcrumb %}<li class="breadcrumb-item active">成绩管理</li>{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4><i class="bi bi-clipboard-data"></i> 成绩管理</h4>
    <div>
        <a href="{% url 'import_grades' %}" class="btn btn-outline-warning"><i class="bi bi-upload"></i> 批量导入</a>
        <a href="{% url 'grade_add' %}" class="btn btn-primary"><i class="bi bi-pencil-square"></i> 录入成绩</a>
    </div>
</div>

<!-- 查询条件 -->
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="get" class="row g-2 align-items-end">
            <div class="col-md-3">
                <select name="course" class="form-select form-select-sm">
                    <option value="">-- 课程 --</option>
                    {% for c in courses %}
                    <option value="{{ c.course_id }}" {% if f_course == c.course_id %}selected{% endif %}>{{ c.course_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <input type="text" name="class_name" class="form-control form-control-sm" placeholder="班级" value="{{ f_class }}">
            </div>
            <div class="col-md-2">
                <input type="text" name="student_id" class="form-control form-control-sm" placeholder="学号" value="{{ f_student }}">
            </div>
            <div class="col-md-2">
                <select name="semester" class="form-select form-select-sm">
                    <option value="">-- 学期 --</option>
                    {% for s in semesters %}
                    <option value="{{ s }}" {% if f_semester == s %}selected{% endif %}>{{ s }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-search"></i> 查询</button>
                <a href="{% url 'grade_list' %}" class="btn btn-outline-secondary btn-sm">重置</a>
            </div>
        </form>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="stat-card"><div class="stat-value">{{ stats.avg }}</div><div class="stat-label">平均分</div></div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card green"><div class="stat-value">{{ stats.max }}</div><div class="stat-label">最高分</div></div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card red"><div class="stat-value">{{ stats.min }}</div><div class="stat-label">最低分</div></div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card cyan"><div class="stat-value">{{ stats.pass_rate }}%</div><div class="stat-label">及格率</div></div>
    </div>
</div>

<!-- ECharts 图表 -->
<div class="card mb-3">
    <div class="card-header">成绩分布</div>
    <div class="card-body">
        <div id="gradeChart" style="height:300px;"></div>
    </div>
</div>

<!-- 成绩列表 -->
<div class="card">
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead>
                <tr><th>#</th><th>学号</th><th>姓名</th><th>班级</th><th>课程</th><th>成绩</th><th>等级</th><th>学期</th><th>操作</th></tr>
            </thead>
            <tbody>
                {% for g in grades %}
                <tr>
                    <td>{{ page_obj.start_index|add:forloop.counter0 }}</td>
                    <td>{{ g.student.student_id }}</td>
                    <td>{{ g.student.name }}</td>
                    <td>{{ g.student.class_name|default:"-" }}</td>
                    <td>{{ g.course.course_name }}</td>
                    <td>
                        <span class="badge {% if g.score >= 90 %}bg-success{% elif g.score >= 80 %}bg-primary{% elif g.score >= 70 %}bg-info{% elif g.score >= 60 %}bg-warning text-dark{% else %}bg-danger{% endif %}">
                            {{ g.score }}
                        </span>
                    </td>
                    <td>{{ g.level }}</td>
                    <td>{{ g.semester }}</td>
                    <td>
                        <a href="{% url 'grade_edit' g.pk %}" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></a>
                        <form method="post" action="{% url 'grade_delete' g.pk %}" class="d-inline"
                              onsubmit="return confirm('确定删除该成绩记录？')">
                            {% csrf_token %}
                            <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                        </form>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="9" class="text-center text-muted py-3">暂无成绩数据</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<!-- 分页 -->
<div class="d-flex justify-content-between align-items-center mt-3">
    <div class="text-muted small">共 {{ stats.total }} 条记录，第 {{ page_obj.number }} / {{ page_obj.paginator.num_pages }} 页</div>
    {% if page_obj.has_other_pages %}
    <nav>
        <ul class="pagination pagination-sm mb-0">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if f_course %}&course={{ f_course }}{% endif %}{% if f_class %}&class_name={{ f_class }}{% endif %}{% if f_student %}&student_id={{ f_student }}{% endif %}{% if f_semester %}&semester={{ f_semester }}{% endif %}">&laquo;</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if f_course %}&course={{ f_course }}{% endif %}{% if f_class %}&class_name={{ f_class }}{% endif %}{% if f_student %}&student_id={{ f_student }}{% endif %}{% if f_semester %}&semester={{ f_semester }}{% endif %}">&lsaquo;</a>
            </li>
            {% endif %}

            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                {% elif num > page_obj.number|add:"-3" and num < page_obj.number|add:"4" %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}{% if f_course %}&course={{ f_course }}{% endif %}{% if f_class %}&class_name={{ f_class }}{% endif %}{% if f_student %}&student_id={{ f_student }}{% endif %}{% if f_semester %}&semester={{ f_semester }}{% endif %}">{{ num }}</a>
                </li>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if f_course %}&course={{ f_course }}{% endif %}{% if f_class %}&class_name={{ f_class }}{% endif %}{% if f_student %}&student_id={{ f_student }}{% endif %}{% if f_semester %}&semester={{ f_semester }}{% endif %}">&rsaquo;</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if f_course %}&course={{ f_course }}{% endif %}{% if f_class %}&class_name={{ f_class }}{% endif %}{% if f_student %}&student_id={{ f_student }}{% endif %}{% if f_semester %}&semester={{ f_semester }}{% endif %}">&raquo;</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script>
(function() {
    const chart = echarts.init(document.getElementById('gradeChart'));
    const params = new URLSearchParams(window.location.search);

    fetch('{% url "grade_chart_data" %}?' + params.toString())
        .then(r => r.json())
        .then(data => {
            chart.setOption({
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                xAxis: { type: 'category', data: data.categories, axisLabel: { fontSize: 13 } },
                yAxis: { type: 'value', minInterval: 1 },
                series: [{
                    type: 'bar',
                    data: data.values.map((v, i) => ({ value: v, itemStyle: { color: data.colors[i] } })),
                    barWidth: '50%',
                    label: { show: true, position: 'top', fontSize: 13 }
                }]
            });
        });
    window.addEventListener('resize', () => chart.resize());
})();
</script>
{% endblock %}