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

{% block content %}
<form action="/teacher/pastCheck" method="post" class="form-inline" role="form">
    <table>
        <tr><td colspan="3">日期区间:</td></tr>
        <tr>
            <td><input required type="date" {% if filterType != 'no_query' %}value="{{startDate}}"{% endif %} name="startDate" class="form-control" placeholder="开始 Start"></td>
            <td>-</td>
            <td><input required type="date" {% if filterType != 'no_query' %}value="{{endDate}}"{% endif %} name="endDate" class="form-control" ></td>
        </tr>
    </table>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

{% if filterType != 'no_query' %}
<hr>
<input type="text" id="student_input"  list="student_list" class="form-control" placeholder="学生">
<datalist id="student_list">
    {% for i,person in students.items() %}
    {% if person['name2'] %}
    <option dbid="{{person['dbid']}}" role="{{person['role']}}"
        value="{{person['name']}} | {{person['name2']}}">
        {% else %}
    <option dbid="{{person['dbid']}}" role="{{person['role']}}" value="{{person['name']}}">
        {% endif %}
        {% endfor %}
</datalist>
{% endif %}
<!-- 所有checkclass 以及查询 -->

<span>课堂考勤率: <span id="class_qtt"></span></span>
<span style="margin-left: 3em;">学生考勤率: <span id="student_qtt"></span></span>

{% if filterType == 'no_query' %}
<h4>最近一周课堂(不含今日)</h4>
{% endif %}

{% if filterType == 'only_date' and students %}

<table id="student_table" class="table table-striped ">
    <thead>
        <tr>
            <th>姓名</th>
            <th>课次</th>
        </tr>
    </thead>
    <tbody id="student_tablebody">
        {% for student in students.values() %}
        <tr>
            <td>{{student['name']}}{% if student['name2'] %} | {{student['name2']}}{% endif %}</td>
            <td>{{student['class_qtt']}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% endif %}

{% for checkclass in checkclasses.values() %}
<!-- {% if filterType != 'no_query' %}hidden{% endif %} -->
<div  class="panel panel-info"  checkclass_id="{{checkclass['dbid']}}" role="checkclass" >
    <div class="panel-heading" confirmed="{{checkclass['confirmed']}}">
        <h3 class="panel-title">
            <span name="checkclassName" teacher_id={{teacher_id}}>{{checkclass['name']}}</span>
            <span> | </span>
            <span>{{checkclass['date']}}</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>
        
        {% 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>
{% 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[confirmed="False"]').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-pastCheck').attr('class', 'bg-primary');
        console.log('ch')
        // 全选
        $('[role="checkAll"]').change(function() {
            // 获取checked状态。
            var checked = $(this).is(':checked');
            // 根据此元素的schdule_dbid找role=checkclass
            $('[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');
            if($('[role="student"][name="'+name1+'"][name2!="'+name2+'"]').length > 1){
                var new_val = $(this).attr('name') + '|' + $(this).attr('name2');
                $(this).text(new_val);
            }
        })

        // 当student_input change时，先hidden表格student_tablebody，再hidden false checkclass
        $('#student_input').change(function() {
            // 获取名字name，舍弃name2
            var name = $(this).val();
            if(name.indexOf(' | ') >= 0){
                var names = name.split(' | ');
                name = names[0];
            }
            // 将表格和所有 hidden
            $('#student_table').attr('hidden',true);
            $('[role="checkclass"]').attr('hidden',true);
            // 仅显示此人
            var panels = $('[role="checkclass"]:contains('+name+')');
            panels.children('.panel-body').attr('hidden', true);
            panels.attr('hidden', false);
        })
    
        // 统计课堂数和学生数
        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);
        $('#student_qtt').text(checked_student_qtt+'/'+student_qtt);
    })
</script>
{% endblock %}