{% extends "base.html" %}
{% block title %}消课记录 - 学生课程管理系统{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4><i class="bi bi-journal-check"></i> 消课记录</h4>
    <div>
        <a href="{{ url_for('consumption_add') }}" class="btn btn-primary"><i class="bi bi-plus-circle"></i> 单个消课</a>
        <a href="{{ url_for('consumption_batch') }}" class="btn btn-info"><i class="bi bi-collection"></i> 批量消课</a>
        {% if current_user.has_permission('consumption_export') %}<a href="{{ url_for('consumption_export') }}" class="btn btn-success"><i class="bi bi-file-earmark-excel"></i> 导出</a>{% endif %}
    </div>
</div>

<!-- 筛选表单 -->
<div class="card shadow-sm mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2">
            <div class="col-md-3">
                <input type="text" class="form-control" name="keyword" value="{{ keyword }}" placeholder="搜索学员姓名">
            </div>
            <div class="col-md-2">
                <select class="form-select" name="class_id">
                    <option value="">全部班级</option>
                    {% for c in classes %}
                    <option value="{{ c.id }}" {% if class_id == c.id|string %}selected{% endif %}>{{ c.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" name="teacher_id">
                    <option value="">全部老师</option>
                    {% for t in teachers %}
                    <option value="{{ t.id }}" {% if teacher_id == t.id|string %}selected{% endif %}>{{ t.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" class="form-control" name="start_date" value="{{ start_date }}" placeholder="开始日期">
            </div>
            <div class="col-md-2">
                <input type="date" class="form-control" name="end_date" value="{{ end_date }}" placeholder="结束日期">
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-outline-primary w-100"><i class="bi bi-search"></i></button>
            </div>
        </form>
    </div>
</div>

<!-- 消课记录表格 -->
<div class="card shadow-sm">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-bordered" id="consumptionTable">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>日期</th>
                        <th>学员</th>
                        <th>课程</th>
                        <th>班级</th>
                        <th>授课老师</th>
                        <th>消课课时</th>
                        <th>正课消耗</th>
                        <th>赠课消耗</th>
                        <th>类型</th>
                        <th>操作人</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in records %}
                    <tr>
                        <td>{{ r.id }}</td>
                        <td>{{ r.consume_date }}</td>
                        <td><a href="{{ url_for('student_detail', id=r.student_id) }}">{{ r.student.name }}</a></td>
                        <td>{{ r.course.name }}</td>
                        <td>{{ r.class_.name if r.class_id and r.class_ else '-' }}</td>
                        <td>
                            {% if r.class_id and r.class_.teacher %}
                                {{ r.class_.teacher.name }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ r.hours_consumed }}</td>
                        <td>{{ r.normal_consumed }}</td>
                        <td>{{ r.gifted_consumed }}</td>
                        <td>
                            {% if r.consume_type == 'trial' %}<span class="badge bg-secondary">试听</span>
                            {% elif r.consume_type == 'normal' %}<span class="badge bg-primary">正课</span>
                            {% else %}<span class="badge bg-warning">混合</span>{% endif %}
                            {% if r.is_makeup %}<span class="badge bg-info">补录</span>{% endif %}
                        </td>
                        <td>{{ r.operator.real_name }}</td>
                        <td>{{ r.remark or '-' }}</td>
                    </tr>
                    {% endfor %}
                    {% if not records %}
                    <tr><td colspan="12" class="text-center text-muted">暂无消课记录</td></tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 手动录入消课汇总 -->
<div class="card shadow-sm mt-3">
    <div class="card-header bg-warning text-dark">
        <i class="bi bi-pencil-square"></i> 手动录入课时汇总
    </div>
    <div class="card-body">
        <form method="POST" action="{{ url_for('consumption_manual_add') }}" id="manualForm">
            <div class="row g-3">
                <div class="col-md-2">
                    <label class="form-label">上课日期</label>
                    <input type="date" class="form-control" name="consume_date" value="" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label">班级</label>
                    <select class="form-select" name="class_id" id="manual_class_id" required>
                        <option value="">选择班级</option>
                        {% for c in classes %}
                        <option value="{{ c.id }}">{{ c.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">学员</label>
                    <select class="form-select" name="student_id" id="manual_student_id" required>
                        <option value="">选择学员</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">课时数</label>
                    <input type="number" step="0.5" class="form-control" name="hours" value="2" required min="0.5">
                </div>
                <div class="col-md-2">
                    <label class="form-label">类型</label>
                    <select class="form-select" name="consume_type">
                        <option value="normal">正课</option>
                        <option value="mixed">混合</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">备注</label>
                    <input type="text" class="form-control" name="remark" placeholder="可选">
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-warning"><i class="bi bi-check-lg"></i> 确认录入</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 表格筛选功能（客户端）
$(document).ready(function() {
    // 班级选择变化时加载学员
    $('#manual_class_id').change(function() {
        var classId = $(this).val();
        var $studentSelect = $('#manual_student_id');
        $studentSelect.html('<option value="">加载中...</option>');

        if (!classId) {
            $studentSelect.html('<option value="">先选择班级</option>');
            return;
        }

        // 通过API获取班级学员
        fetch('/api/class_students/' + classId)
            .then(r => r.json())
            .then(data => {
                if (data.success && data.data.length > 0) {
                    var options = '<option value="">选择学员</option>';
                    data.data.forEach(function(s) {
                        options += '<option value="' + s.id + '">' + s.name + '</option>';
                    });
                    $studentSelect.html(options);
                } else {
                    $studentSelect.html('<option value="">该班级暂无学员</option>');
                }
            })
            .catch(function() {
                $studentSelect.html('<option value="">加载失败</option>');
            });
    });

    // 表单提交验证
    $('#manualForm').submit(function(e) {
        var hours = parseFloat($('input[name="hours"]').val());
        if (hours <= 0) {
            alert('课时数必须大于0');
            e.preventDefault();
            return false;
        }
        return confirm('确认手动录入消课记录？');
    });
});
</script>
{% endblock %}