{% 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-cash-stack"></i> 学员充值</h4>
    <a href="{{ url_for('recharge_list') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left"></i> 返回</a>
</div>
<div class="row">
    <div class="col-md-8">
        <div class="card shadow-sm">
            <div class="card-body">
                <form method="POST" id="rechargeForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">选择学员 <span class="text-danger">*</span></label>
                            <select class="form-select" name="student_id" id="student_id" required>
                                <option value="">请选择学员</option>
                                {% for s in students %}
                                <option value="{{ s.id }}">{{ s.name }} ({{ s.phone or '无电话' }})</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">选择课程 <span class="text-danger">*</span></label>
                            <select class="form-select" name="course_id" id="course_id" required>
                                <option value="">请选择课程</option>
                                {% for c in courses %}
                                <option value="{{ c.id }}" data-price="{{ c.price_per_hour }}">{{ c.name }}(&yen;{{ c.price_per_hour }}/课时)</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">充值金额 <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" class="form-control" name="amount" id="amount" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">支付方式</label>
                            <select class="form-select" name="payment_method">
                                <option value="现金">现金</option>
                                <option value="微信">微信</option>
                                <option value="支付宝">支付宝</option>
                                <option value="银行卡">银行卡</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">关联优惠活动</label>
                            <select class="form-select" name="activity_id">
                                <option value="">自动匹配</option>
                                {% for a in activities %}
                                <option value="{{ a.id }}">{{ a.name }}(满{{ a.trigger_amount }}送{{ a.gifted_hours }}课时)</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">备注</label>
                            <textarea class="form-control" name="remark" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> 确认充值</button>
                        <a href="{{ url_for('recharge_list') }}" class="btn btn-outline-secondary">取消</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card shadow-sm">
            <div class="card-header bg-info text-white"><i class="bi bi-calculator"></i> 充值计算预览</div>
            <div class="card-body" id="calcPreview">
                <p class="text-muted">选择学员、课程并输入金额后自动计算</p>
            </div>
        </div>
        <div class="card shadow-sm mt-3">
            <div class="card-header"><i class="bi bi-wallet2"></i> 当前课时</div>
            <div class="card-body" id="currentAccount">
                <p class="text-muted">选择学员和课程后显示</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('amount').addEventListener('input', calculateRecharge);
document.getElementById('student_id').addEventListener('change', loadAccount);
document.getElementById('course_id').addEventListener('change', function() { loadAccount(); calculateRecharge(); });

function loadAccount() {
    var sid = document.getElementById('student_id').value;
    var cid = document.getElementById('course_id').value;
    if (!sid || !cid) return;
    fetch('/api/student_account/' + sid + '/' + cid)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                var d = data.data;
                document.getElementById('currentAccount').innerHTML =
                    '<p><strong>正课剩余：</strong>' + d.normal_hours + ' 课时</p>' +
                    '<p><strong>赠课剩余：</strong>' + d.gifted_hours + ' 课时</p>' +
                    '<p><strong>合计剩余：</strong><span class="text-primary">' + d.total_hours + '</span> 课时</p>' +
                    '<p><strong>累计充值：</strong>&yen;' + d.cumulative_amount + '</p>';
            } else {
                document.getElementById('currentAccount').innerHTML = '<p class="text-muted">未找到课时账户(充值后将自动创建)</p>';
            }
        });
}

function calculateRecharge() {
    var cid = document.getElementById('course_id').value;
    var amount = parseFloat(document.getElementById('amount').value) || 0;
    if (!cid || !amount) return;
    var priceEl = document.querySelector('#course_id option[value="' + cid + '"]');
    var price = parseFloat(priceEl ? priceEl.dataset.price : 0);
    if (price <= 0) return;
    var normalHours = (amount / price).toFixed(2);
    document.getElementById('calcPreview').innerHTML =
        '<p><strong>课程单价：</strong>&yen;' + price + '/课时</p>' +
        '<p><strong>充值金额：</strong>&yen;' + amount + '</p>' +
        '<p><strong>正课课时：</strong>' + normalHours + ' 课时</p>' +
        '<p class="text-muted">赠送课时将在提交后根据优惠活动自动计算</p>';
}
</script>
{% endblock %}