{% extends 'teacher/teacherBase.html' %}

{% block content %}
{% if not checkclasses %}
<p class="text-center text-info">今日无课, 好好休息一天吧!</p>
{% else %}
<h4>今日考勤</h4>
{% endif %}
<!-- 所有checkclass 以及查询 -->
{% 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">
        
        <div class="row">
            {% if not checkclass['confirmed'] %}
        <label class="pull-right"><input type="checkbox" role="checkAll" disabled={{checkclass['locked']}} checkclass_id="{{checkclass['dbid']}}">全选</label>
        <label style="margin: 0 10px;" class="pull-right">
            <input type="checkbox" role="disable" checked={{checkclass['locked']}} disabled={{checkclass['confirmed']}} checkclass_id="{{checkclass['dbid']}}">
            <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
        </label>
        {% endif %}
        </div>
        
        
        <div class="row">
        {% 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']}}" qtt="{{student['qtt']}}">
            <span>{{student['name']}}</span>
        </label>
        {% endfor %}
        </div>
        
    </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');
        
        // 全选
        $('[role="checkAll"]').click(function(event) {
            // 获取checked状态。
            var checked = $(this).is(':checked');
            // 根据此元素的schdule_dbid找role=checkclass。 【注意】如果qtt是0，不能check all且要通知用户
            let zero_qtt = $('[role="student"][checkclass_id="'+$(this).attr('checkclass_id')+'"][qtt="0"]').length;
            if (zero_qtt > 0 && checked){
                alert('有学生课时量为零，无法全选');
                event.preventDefault();
            } else {
                $('[role="student"][checkclass_id="'+$(this).attr('checkclass_id')+'"]').attr('checked', checked);
            }
        })
        // 调整checked
        $('[checked="False"]').attr('checked',false);
        $('[disabled="False"]').attr('disabled',false);
        $('[qtt]').each(function(){
            let qtt = parseInt($(this).attr('qtt'));
            if (qtt <= 3){
                $(this).parent().append('<span class="badge">'+qtt+'</span>');
            }
            if (qtt <=0 ){
                $(this).attr('disabled',true);
            }
        })
        // 上锁，即disable
        $('[role="disable"]').change(function() {
            // 获取checked状态。
            var checked = $(this).is(':checked');
            // diable the checkboxes where checkclass_id is the same
            if ( ! checked){
                $(':checkbox[role!="disable"][checkclass_id="'+$(this).attr('checkclass_id')+'"][qtt!=0]').attr("disabled", checked);
                $(':checkbox[role!="disable"][checkclass_id="'+$(this).attr('checkclass_id')+'"][qtt=0]:checked').attr("disabled", checked);
                return false;
            } else { 
                $(':checkbox[role!="disable"][checkclass_id="'+$(this).attr('checkclass_id')+'"]').attr("disabled", checked);
            }
            // 做学生dict
            var student_ids = '';
            $('[role="checkclass"][checkclass_id="'+$(this).attr('checkclass_id')+'"]').find('[role="student"]:checked').each(function() {
                // 对student checkbox 获取信息放入dict
                student_ids += $(this).attr('student_dbid') + ','
            })
            // 更改数据库
            $.get(
                '/teacher/check',
                {
                    'checkclass_id': $(this).attr('checkclass_id'),
                    'student_ids': student_ids
                },
                function() {window.location.reload();}
            )
        })
    
        // 姓名重复，则从标签属性中把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);
            }
        })
    })
</script>
{% endblock %}