{% 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-arrow-left-right"></i> 申请转课</h4>
    <a href="{{ url_for('transfer_list') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left"></i> 返回</a>
</div>
<div class="card shadow-sm">
    <div class="card-body">
        <form method="POST" id="transferForm">
            <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="from_student_id" id="from_student_id" required>
                        <option value="">请选择学员</option>
                        {% for s in students %}
                        <option value="{{ s.id }}">{{ s.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">课程 <span class="text-danger">*</span></label>
                    <select class="form-select" name="from_course_id" id="from_course_id" required>
                        <option value="">请选择课程</option>
                        {% for c in courses %}
                        <option value="{{ c.id }}" data-price="{{ c.price_per_hour }}">{{ c.name }}(¥{{ c.price_per_hour }}/课时)</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- 转课类型选择 -->
                <div class="col-12">
                    <label class="form-label">转课类型 <span class="text-danger">*</span></label>
                    <div class="btn-group w-100" role="group">
                        <input type="radio" class="btn-check" name="transfer_class_type" id="type_class" value="class_transfer" checked>
                        <label class="btn btn-outline-primary" for="type_class"><i class="bi bi-people"></i> 班级转课</label>

                        <input type="radio" class="btn-check" name="transfer_class_type" id="type_transfer" value="transfer">
                        <label class="btn btn-outline-primary" for="type_transfer"><i class="bi bi-arrow-repeat"></i> 换课转课</label>

                        <input type="radio" class="btn-check" name="transfer_class_type" id="type_upgrade" value="upgrade">
                        <label class="btn btn-outline-primary" for="type_upgrade"><i class="bi bi-arrow-up-circle"></i> 升阶转课</label>

                        <input type="radio" class="btn-check" name="transfer_class_type" id="type_gift" value="gift">
                        <label class="btn btn-outline-primary" for="type_gift"><i class="bi bi-gift"></i> 转赠课时</label>
                    </div>
                </div>

                <!-- 班级转课选项 -->
                <div class="col-md-6" id="classTransferSection">
                    <label class="form-label">目标班级 <span class="text-danger">*</span></label>
                    <select class="form-select" name="to_class_id" id="to_class_id">
                        <option value="">请选择目标班级</option>
                        {% for c in classes %}
                        <option value="{{ c.id }}" data-teacher="{{ c.teacher_id }}">{{ c.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6" id="teacherSelectSection">
                    <label class="form-label">目标授课老师</label>
                    <select class="form-select" name="to_teacher_id" id="to_teacher_id">
                        <option value="">跟随班级老师</option>
                        {% for t in teachers %}
                        <option value="{{ t.id }}">{{ t.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- 班级转课-单价变更选项 -->
                <div class="col-12" id="priceChangeSection" style="display:none;">
                    <div class="card bg-light">
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-12">
                                    <label class="form-label">单价变更类型</label>
                                    <div class="btn-group" role="group">
                                        <input type="radio" class="btn-check" name="price_change_type" id="price_no_change" value="no_change" checked>
                                        <label class="btn btn-outline-secondary" for="price_no_change">无单价变更</label>

                                        <input type="radio" class="btn-check" name="price_change_type" id="price_changed" value="price_changed">
                                        <label class="btn btn-outline-warning" for="price_changed">有单价变更</label>
                                    </div>
                                </div>
                                <div class="col-md-4" id="newUnitPriceSection" style="display:none;">
                                    <label class="form-label">新单价(元/课时)</label>
                                    <input type="number" step="0.01" class="form-control" name="new_unit_price" id="new_unit_price" placeholder="请输入新单价">
                                </div>
                                <div class="col-md-4" id="priceChangeReasonSection" style="display:none;">
                                    <label class="form-label">变更原因 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="price_change_reason" id="price_change_reason" placeholder="必填">
                                </div>
                                <div class="col-md-4" id="effectiveDateSection" style="display:none;">
                                    <label class="form-label">生效时间</label>
                                    <input type="date" class="form-control" name="effective_date" id="effective_date" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 换课/升阶/转赠选项 -->
                <div class="col-md-4" id="toCourseGroup" style="display:none;">
                    <label class="form-label">转入课程</label>
                    <select class="form-select" name="to_course_id" id="to_course_id">
                        <option value="">请选择转入课程</option>
                        {% for c in courses %}
                        <option value="{{ c.id }}" data-price="{{ c.price_per_hour }}">{{ c.name }}(¥{{ c.price_per_hour }}/课时)</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4" id="toStudentGroup" style="display:none;">
                    <label class="form-label">转入学员</label>
                    <select class="form-select" name="to_student_id">
                        <option value="">请选择转入学员</option>
                        {% for s in students %}
                        <option value="{{ s.id }}">{{ s.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4" id="transferHoursGroup" style="display:none;">
                    <label class="form-label">转出课时数</label>
                    <input type="number" step="1" class="form-control" name="transfer_hours" id="transfer_hours" min="1">
                </div>
                <div class="col-12">
                    <label class="form-label">备注</label>
                    <input type="text" class="form-control" name="remark" placeholder="可选">
                </div>
            </div>

            <div class="mt-3" id="accountInfo"></div>
            <div class="mt-3" id="transferCalc"></div>
            <div class="mt-3">
                <button type="submit" class="btn btn-primary" onclick="return confirm('确认转课操作？')"><i class="bi bi-check-lg"></i> 确认</button>
                <a href="{{ url_for('transfer_list') }}" class="btn btn-outline-secondary">取消</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 显示/隐藏不同转课类型的选项
function toggleTransferType() {
    var type = document.querySelector('input[name="transfer_class_type"]:checked').value;

    // 班级转课
    var classSection = document.getElementById('classTransferSection');
    var teacherSection = document.getElementById('teacherSelectSection');
    var priceSection = document.getElementById('priceChangeSection');
    // 换课/升阶/转赠
    var toCourse = document.getElementById('toCourseGroup');
    var toStudent = document.getElementById('toStudentGroup');
    var transferHours = document.getElementById('transferHoursGroup');

    // 重置所有
    classSection.style.display = 'none';
    teacherSection.style.display = 'none';
    priceSection.style.display = 'none';
    toCourse.style.display = 'none';
    toStudent.style.display = 'none';
    transferHours.style.display = 'none';

    if (type === 'class_transfer') {
        classSection.style.display = '';
        teacherSection.style.display = '';
        priceSection.style.display = '';
    } else if (type === 'gift') {
        toStudent.style.display = '';
        transferHours.style.display = '';
    } else {
        toCourse.style.display = '';
        if (type === 'transfer') {
            transferHours.style.display = '';
        }
    }
}

// 监听转课类型变化
document.querySelectorAll('input[name="transfer_class_type"]').forEach(function(radio) {
    radio.addEventListener('change', toggleTransferType);
});

// 监听单价变更类型
document.querySelectorAll('input[name="price_change_type"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        var isChanged = this.value === 'price_changed';
        document.getElementById('newUnitPriceSection').style.display = isChanged ? '' : 'none';
        document.getElementById('priceChangeReasonSection').style.display = isChanged ? '' : 'none';
        document.getElementById('effectiveDateSection').style.display = isChanged ? '' : 'none';
    });
});

// 加载学员课时信息
document.getElementById('from_student_id').addEventListener('change', loadFromAccount);
document.getElementById('from_course_id').addEventListener('change', loadFromAccount);

function loadFromAccount() {
    var sid = document.getElementById('from_student_id').value;
    var cid = document.getElementById('from_course_id').value;
    if (!sid || !cid) {
        document.getElementById('accountInfo').innerHTML = '';
        return;
    }
    fetch('/api/student_account/' + sid + '/' + cid)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                var d = data.data;
                document.getElementById('accountInfo').innerHTML =
                    '<div class="alert alert-info"><strong>当前课时：</strong>正课 ' + d.normal_hours + ' 课时，赠课 ' + d.gifted_hours + ' 课时，合计 ' + d.total_hours + ' 课时</div>';
            } else {
                document.getElementById('accountInfo').innerHTML =
                    '<div class="alert alert-warning">未找到该学员的课时账户</div>';
            }
        });
}

// 目标班级变更时自动填充老师
document.getElementById('to_class_id').addEventListener('change', function() {
    var selected = this.options[this.selectedIndex];
    var teacherId = selected.dataset.teacher;
    if (teacherId) {
        document.getElementById('to_teacher_id').value = teacherId;
    }
});

// 表单提交验证
document.getElementById('transferForm').addEventListener('submit', function(e) {
    var type = document.querySelector('input[name="transfer_class_type"]:checked').value;

    if (type === 'class_transfer') {
        var toClassId = document.getElementById('to_class_id').value;
        if (!toClassId) {
            alert('请选择目标班级');
            e.preventDefault();
            return;
        }

        var priceChange = document.querySelector('input[name="price_change_type"]:checked').value;
        if (priceChange === 'price_changed') {
            var newPrice = document.getElementById('new_unit_price').value;
            var reason = document.getElementById('price_change_reason').value;
            if (!newPrice || parseFloat(newPrice) <= 0) {
                alert('有单价变更时，新单价必须大于0');
                e.preventDefault();
                return;
            }
            if (!reason) {
                alert('有单价变更时，必须填写变更原因');
                e.preventDefault();
                return;
            }
        }
    }
});

// 初始化
toggleTransferType();
</script>
{% endblock %}