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

{% block content %}

<!-- 查询 -->
<form action="/manager/filterCheck" method="post" class="form-inline" role="form">
    <!-- 日期 -->
    <tr><td colspan="3">日期区间:</td></tr>
    <table>
        
        <tr>
            <td><input id="startDate" {%if filterType != 'no_query'%}value="{{data['startDate']}}"{% endif %} required type="date" name="startDate" class="form-control"></td>
            <td>-</td>
            <td><input id="endDate" {%if filterType != 'no_query'%}value="{{data['endDate']}}"{% endif %} required type="date" name="endDate" class="form-control"></td>
        </tr>
        
        
    </table>
    <!-- 老师 -->
    <input type="text" name="teacher_id" hidden>
    <input type="text" id="teacher_input" 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>
    <!-- 学生 -->
    <input type="text" name="student_id" hidden>
    <input type="text" id="student_input" list="student_list" placeholder="学生"
        class="form-control">
    <datalist id="student_list">
        {% for i,person in students.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>
    <button id="submit" class="btn btn-primary">提交</button>
    <p class="text-warning"></p>
</form>

{% if filterType == 'only_date' %}

<h4 class="text-primary text-center">老师</h4>
<table class="table table-striped">
    <thead>
        <tr>
            <th>姓名</th>
            <th>课次</th>
        </tr>
    </thead>
    <tbody>
        {% for teacher in teachersWithClassQtt.values() %}
        <tr name="teacher_list">
            <td role="teacher" id="{{teacher['teacher_id']}}">{{teacher['teacher_name']}}</td>
            <td>{{teacher['class_qtt']}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<br>
<h4 class="text-primary text-center">学生</h4>
<table class="table table-striped">
    <thead>
        <tr>
            <th>姓名</th>
            <th>课次</th>
        </tr>
    </thead>
    <tbody>
        {% for student in studentsWithClassQtt %}
        <tr name="student_list">
            <td role="student" id="{{student['student_id']}}">{{student['student_name']}}</td>
            <td>{{student['class_qtt']}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% elif filterType == 'with_person' %}

{% if studentName and teacherName %}
<p><span>老师:{{teacherName}} </span><span>学生:{{studentName}}</span></p>
{% elif studentName %}
<p>学生:{{studentName}}, 共打卡<span search='student' id="class_qtt"></span>节课</p>
{% elif teacherName %}
<p>老师:{{teacherName}}, 课堂考勤率:<span search='teacher' id="class_qtt"></span>,学生考勤率:<span id="student_qtt"></span></p>
{% endif %}

{% for checkclass in checkclasses.values() %}
    <div class="panel panel-info"  checkclass_id="{{checkclass['dbid']}}" role="checkclass" >
        <div class="panel-heading">
            <h3 class="panel-title">
                <span name="checkclassName">{{checkclass['name']}}</span>
                <span> | </span>
                {% if studentName %}
                <span teacher_id={{data['teacher_id']}}>{{checkclass['teacher']['name']}}</span>
                <span> | </span>
                {% endif %}
                <span>{{checkclass['date']}}</span>
                <span>  </span>
                <span role="checkclass_time" >{{checkclass['startTime']}}-{{checkclass['endTime']}}</span>
            </h3>
        </div>
        {% if teacherName != '' %}
        <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>
            </label>
            
            {% endfor %}
        </div>
        {% endif %}
    </div>
{% endfor %}

{% endif %}


<!-- 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-filterCheck').attr('class', 'bg-primary');
        
        // 调整checked
        $('[checked="False"]').attr('checked',false);
        $('[checked="None"]').attr('checked',false);
        
        // form change,remove .text-warning where it shows 'fill out dates'
        $('.text-warning').change(function() {$(this).text('');})
        
        // submit按钮后
        $('#submit').click(function() {
            // 给name=teacher_id和student_id的元素加上val()
            var teacher = $('[role="teacher"][value="'+$('#teacher_input').val()+'"]')
            var student = $('[role="student"][value="'+$('#student_input').val()+'"]')
            $('[name="teacher_id"]').val(teacher.attr('dbid'));
            $('[name="student_id"]').val(student.attr('dbid'));
            // 手动submit
            $('form').submit();            
        })
        
        // 所有老师查询后，点击老师列表后看详情
        $('[name="teacher_list"]').click(function() {
            var id = $(this).find('td[role="teacher"]').attr('id');
            $('[name="teacher_id"]').val(id);
            $('form').submit();
        })

        // 数checkclass个数
        let role = $('#class_qtt').attr('search');
        if (role == 'student'){
            var num = $('[role="checkclass"]').length;
            $('#class_qtt').text(num);
        } else {
            // 统计课堂数和学生数
            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 = $('input[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 %}