{% extends 'manager/managerBase.html' %}

{% block content %}

<!-- 所有checkclass 以及查询 -->
<h3>今日签到</h3>

<div>课堂数: <span id="class_qtt"></span></div>
<div>学生出勤率: <span id="student_qtt"></span></div>

{% for checkclass in checkclasses.values() %}

<div class="panel panel-info"  checkclass_id="{{checkclass['dbid']}}" role="checkclass" >
    <div class="panel-heading" role="checkclass">
        <h3 class="panel-title">
            <span name="checkclassName">{{checkclass['name']}}</span>
            <span> | </span>
            <span teacher_id="{{checkclass['teacher']['dbid']}}">{{checkclass['teacher']['name']}}</span>
            <span> | </span>
            <span role="checkclass_time" >{{checkclass['startTime']}}-{{checkclass['endTime']}}</span>
        </h3>
    </div>
    <div name="checkclassStudents" class="panel-body">
        
        {% for student in checkclass['students'].values() %}
        <label style="margin: 5px 10px;">
            <input type="checkbox" checkclass_id="{{checkclass['dbid']}}" 
                student_dbid="{{student['dbid']}}" role="student" 
                name="{{student['name']}}" name2="{{student['name2']}}" 
                checked={{student['checked']}} disabled={{checkclass['locked']}}>
            <span>{{student['name']}}</span>
            <span class="badge">{{student['qtt']}}</span>
        </label>
        {% endfor %}
        
    </div>
</div>
{% endfor %}

<!-- modal: update checkclass's teacher -->
<div class="modal fade" id="checkclassModal" update=false tabindex="-1" role="dialog" aria-labelledby="scheduleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="scheduleModalLabel">设置代课老师</h4>
            </div>
            <div class="modal-body">
                <input type="text" id="teacherName" list="teacher_list" placeholder="教师"class="form-control">
                <datalist id="teacher_list">
                {% for i,person in teachers.items() %}
                {% if person.name2 %}
                <option dbid={{person.id}} role={{person.role}} value="{{person.name}} | {{person.name2}}">
                {% else %}
                <option dbid={{person.id}} role={{person.role}} value="{{person.name}}">
                {% endif %}
                {% endfor %}
            </datalist>                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="submitcheckclass" type="button" class="btn btn-primary">保存</button>
                <p role="result" id="result" style="color: red;"></p>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block script %}
<script>
    $(function () {
        // 修改checkclass: 点击主页checkclassPanel即[role="checkclass"]，移动数据到modal,进行更改
        $('[role="checkclass"] div.panel-heading').click(function() {
            // 打开时给submitcheckclass按钮增加checkclass的dbid属性，退出时remove。// 进入页面时就已获取所有teacher姓名到datalist
            var checkclass_id = $(this).parent().attr('checkclass_id');
            $('#submitcheckclass').attr('checkclass_id',checkclass_id);
            // 传origin_teacher_id
            var originT_id = $(this).find('[teacher_id]').attr('teacher_id');
            console.log(originT_id);
            $('#submitcheckclass').attr('originT_id',originT_id);
            // 手动打开modal
            $('#checkclassModal').modal('show');
        })
        // 监听改代课老师submit
        $('#submitcheckclass').click(function() {
            // 获取checkclass_id, teacherName(做成name, name2)
            var checkclass_id, teacher_name, teacher_name2, data={};
            data['checkclass_id'] = $(this).attr('checkclass_id');
            data['originT_id'] = $(this).attr('originT_id');
            var name_or_with_name2 = $('#teacherName').val();
            // 未选择姓名则终止
            if (!name_or_with_name2){
                $('#result').text('请选择老师姓名');
                return false;
            }
            if (name_or_with_name2.indexOf(' | ') > 0){
                // 有name2
                var names = name_or_with_name2.split(" | ");
                data['teacher_name'] = names[0];
                data['teacher_name2'] = names[1];
            } else {
                data['teacher_name'] = name_or_with_name2;
            }
            // 提交
            $.get(
                '/manager/change_teacher_for_checkclass',
                data,
                function(res){window.location.reload()}
            )
        })
        
        // 导航标active
        $('#nav-checkin').attr('class', 'bg-primary');
        
        // disable所有checkbox
        $(':checkbox').attr('disabled', true);

        // 调整checked
        $('[checked="False"]').attr('checked',false);
        $('[checked="None"]').attr('checked',false);
        
        // 姓名重复，则从标签属性中把name2拿出
        $('[role="student"]').each(function(){
            var name1 = $(this).attr('name');
            var name2 = $(this).attr('name2');
            var sameNameNum = $('[role="student"][name="'+name1+'"][name2!="'+name2+'"]').length;
            if(sameNameNum > 0){
                var new_val = $(this).attr('name') + '|' + $(this).attr('name2');
                $(this).next('span').text(new_val);
            }
        })
    
        // 统计课堂数和学生数
        let all_panels = $('[role="checkclass"][checkclass_id]');
        var class_qtt = all_panels.length;
        // 有学生checked的role=checkclass panel
        let checked_class_qtt = 0;
        all_panels.each(function(){
            let checked_stu_num = $(this).find('[role=student]:checked').length;
            if (checked_stu_num > 0){
                checked_class_qtt += 1;
            }
        })
        // 学生情况
        var student_qtt = $('[role="student"]').length;
        var checked_student_qtt = $('[role="student"]:checked').length;
        // $('#class_qtt').text(checked_class_qtt+'/'+class_qtt);
        $('#class_qtt').text(class_qtt);
        $('#student_qtt').text(checked_student_qtt+'/'+student_qtt);
    })
</script>
{% endblock %}