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

{% block style %}
<style>
    span[role="student"] {
        margin: 0 8px
    }
</style>
{% endblock %}

{% block content %}

<!-- 时间段/教学班/班级设置 -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">维护数据</h3>
    </div>
    <div class="panel-body">
        <button id="addTimeBtn" type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">
            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
        </button>
        <button id="addScheduleBtn" type="button" class="btn btn-info" data-toggle="modal" data-target="#scheduleModal">
            <span class="glyphicon glyphicon-copy" aria-hidden="true"></span>
        </button>
        <button id="confirm" type="button" class="btn btn-info" data-toggle="modal" data-target="#confirmModal">
            <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
        </button>
    </div>
</div>

<!-- 所有schedule 以及查询 -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">已有记录</h3>
    </div>
    <div class="panel-body">
        
        <!-- all class schedules -->
        <div id="schedulePanels">
            {% for schedule in schedules.values() %}
            <span role="deleteSchedule" class="glyphicon glyphicon-remove pull-right" aria-hidden="true"></span>
            <div dbid="{{schedule['dbid']}}" role="schedule" class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span name="scheduleName">{{schedule['name']}}</span>
                        <span> | </span>
                        <span role="teacher" dbid="{{schedule['teacher']['dbid']}}" name="{{schedule['teacher']['name']}}" name2="{{schedule['teacher']['name2']}}">{{schedule['teacher']['name']}}</span>
                        <span> | </span>
                        <span role="schedule_time" weekday="{{schedule['weekday']}}" startTime="{{schedule['startTime']}}" endTime="{{schedule['endTime']}}" time="{{schedule['time']}}">{{schedule['time']}}</span>
                    </h3>
                </div>
                <div name="scheduleStudents" class="panel-body">
                    {% for student in schedule['students'].values() %}
                    <span dbid="{{student['dbid']}}" role="student" name="{{student['name']}}" name2="{{student['name2']}}">
                        {{student['name']}}
                    </span> 
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Modal add period -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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="myModalLabel">时间段设置</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <table class="table table-striped">
                        <thead class="text-center">
                            <tr>
                                <th>星期</th>
                                <th>从</th>
                                <th>到</th>
                            </tr>
                        </thead>
                        <tbody name='periods'>
                            {% for p in periods %}
                            <tr dbid={{p.id}} name='periodRow'>
                                <td>
                                    <select weekdayNum="{{p.weekday}}" name="weekday" class="form-control">
                                        <option value="0">Mon</option>
                                        <option value="1">Tue</option>
                                        <option value="2">Wed</option>
                                        <option value="3">Thu</option>
                                        <option value="4">Fri</option>
                                        <option value="5">Sat</option>
                                        <option value="6">Sun</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="time" name='startTime' value={{p.startTime}} class="form-control">
                                </td>
                                <td>
                                    <input type="time" name='endTime' value={{p.endTime}} class="form-control">
                                </td>
                                <td>
                                <span role="deletePeriod" class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                </td>
                            </tr>
                            {% endfor %}
                            <tr dbid=0 hidden name='periodRow'>
                                <td>
                                    <select name="weekday" class="form-control">
                                        <option value="0">Mon</option>
                                        <option value="1">Tue</option>
                                        <option value="2">Wed</option>
                                        <option value="3">Thu</option>
                                        <option value="4">Fri</option>
                                        <option value="5">Sat</option>
                                        <option value="6">Sun</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="time" name='startTime' class="form-control">
                                </td>
                                <td>
                                    <input type="time" name='endTime' class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" align='center'>
                                    <span id="addPeriodBtn" class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p>开始和结束时间都填才有效</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="submitPeriod" type="button" class="btn btn-primary">保存</button>
                <p role="result" id="resultPeriod" style="color: red;"></p>
            </div>
        </div>
    </div>
</div>

<!-- Modal add/update schedule -->
<div class="modal fade" id="scheduleModal" 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">
                <form id="scheduleForm" action="/manager/addSchedule" method="POST" class="form-inline panel panel-info"
                    role="form">
                    <div class="form-group panel-heading">
                        <input type="text" id="addScheduleName" placeholder="排课名"
                            class="form-control">
                        <input type="text" id="addScheduleTeacher" 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" id="addSchedulePeriod" list="period_list" placeholder="时间"
                            class="form-control">
                        <datalist id="period_list">
                            {% for period in periods %}
                            <option weekday={{period.weekday}} startTime={{period.startTime}} endTime={{period.endTime}} value="{{period.word}}">
                                {% endfor %}
                        </datalist>
                    </div>
                    <div class="panel-body">
                        <table class="table table-condensed">
                            <tr>
                                <!--两个搜索框-->
                                <td>
                                    <!--  student  -->
                                    <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>
                                </td>
                                <td>
                                    <!--  class  -->
                                    <!-- <input type="text" id="class_input" list="class_list" placeholder="班级"
                                        class="form-control"> -->
                                    <datalist id="class_list">
                                        
                                    </datalist>
                                </td>
                            </tr>
                        </table>
                        <div id="addLearners">
                            <!-- 在这里放span class=btn btn-default的名字 -->

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="submitSchedule" type="button" class="btn btn-primary">保存</button>
                <p role="result" id="resultSchedule" style="color: red;"></p>
            </div>
        </div>
    </div>
</div>

<!-- Modal confirm -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel">
    <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="confirmModalLabel">确认已上课记录</h4>
            </div>
            <div class="modal-body">
                <h4>确认</h4>
                <p>确认设置日期当天即以前日期的课堂。确认后将无法修改考勤记录, 请谨慎操作。</p>
                <p>现已确认到:<span id="lastConfirmDate"></span></p>
                <p>本次将确认到:<input type="date" id="confirmDate"></p>
                <button id="submitConfirm" type="button" class="btn btn-primary">确定</button>
                <p role="result" id="resultConfirm" style="color: red;"></p>
                <hr>
                <h4>取消</h4>
                <p>已取消日期:<span id="canceledDates"></span></p>
                <p>取消确认日期:</p>
                <table>
                    <tr>
                        <td><input type="date" id="cancelStart"></td>
                        <td>-</td>
                        <td><input type="date" id="cancelEnd"></td>
                    </tr>
                </table>
                <button id="submitCancelConfirm" type="button" class="btn btn-primary">取消</button>
                <p role="result" id="resultCancelConfirm" style="color: red;"></p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal add class -->
<!-- <div class="modal fade" id="classModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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="classModalLabel">班级</h4>
            </div>
            <div class="modal-body">

                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <input type="text" id="addClassName" class="form-control" required="required"
                                placeholder="班级名">
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div name="class_student_search">
                            <input type="text" id="class_student_input" list="class_student_list"
                                placeholder="学生" class="form-control">
                            <datalist id="class_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>
                        </div>
                        <div id="addStudents">

                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="submitClass" type="button" class="btn btn-primary">保存</button>
                <p role="result" id="resultClass" style="color: red;"></p>
            </div>
        </div>
    </div>
</div> -->

{% endblock %}

{% block script %}
<script>
    $(function () {
        // modal show前获取last confirmed date
        function showResults(res){
            $('#resultConfirm').text(res['resConfirm']);
            $('#resultCancelConfirm').text(res['resCancel']);
            $('#lastConfirmDate').text(res['lastDate']);
            $('#canceledDates').text(res['canceledDates']);
        }
        $('#confirmModal').on('show.bs.modal', function() {
            $.get(
                '/manager/confirm',
                {},
                function(res) {
                    showResults(res);
                }
            )
        })
        // Submit confirm
        $('#submitConfirm').click(function() {
            //获取确认日期数据
            let date = $('#confirmDate').val();
            if (date.length != 10){
                alert('请检查你输入的日期');
                return false;
            }
            // 发送get
            $.get(
                '/manager/confirm',
                {date:date},
                function(res) {
                    showResults(res);
                }
            )
        })
        // 取消confirm
        $('#submitCancelConfirm').click(function() {
            //获取确认日期数据
            let start = $('#cancelStart').val();
            let end = $('#cancelEnd').val();
            if (start.length != 10 || end.length != 10){
                alert('请检查你输入的日期');
                return false;
            }
            // 发送get
            $.get(
                '/manager/confirm',
                {start:start, end:end},
                function(res) {
                    showResults(res);
                }
            )
        })
        
        // 导航标active
        $('#nav-schedule').attr('class', 'bg-primary');
        
        // 删除period
        $('[role="deletePeriod"]').click(function() {
            // 获取period dbid
            var id = $(this).parent().parent().attr('dbid');
            console.log(id);
            // 传送
            $.get(
                '/manager/delete_period',
                {'period_id' : id},
                function(res) {
                    if (res['success'] == 1){
                        $('[dbid="'+res['id']+'"][name="periodRow"]').remove();
                    }
                }
            )
        })
        
        // 姓名重复，则从标签属性中把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);
            }
        })
        // 修改schedule: 点击主页schedulePanel即[role="schedule"]，进行更改
        $('[role="schedule"] div.panel-heading').click(function() {
            // 打开时给submitSchedule按钮增加schedule的dbid属性，退出时remove
            var schedule_dbid = $(this).parent().attr('dbid');
            $('#submitSchedule').attr('schedule_dbid',schedule_dbid);
            // 将数据从panel搬到modal, 并设置dbid。 // 1.name
            var name = $(this).find('[name="scheduleName"]').text();
            $('#addScheduleName').val(name);
            // 2.teacher
            var teacher = $(this).find('[role="teacher"]');
            var teacher_name = teacher.attr('name');
            if (teacher.attr('name2')) {teacher_name += ' | '+ teacher.attr('name2')};
            $('#addScheduleTeacher').val(teacher_name);
            $('#addScheduleTeacher').attr('dbid',teacher.attr('dbid'));
            $('#addScheduleTeacher').attr('role','teacher');
            // 3.period 即schedule_time
            var schedule_time =  $(this).find('[role="schedule_time"]');
            $('#addSchedulePeriod').val(schedule_time.text());
            $('#addSchedulePeriod').attr('role','schedule_time');
            $('#addSchedulePeriod').attr('weekday',schedule_time.attr('weekday'));
            $('#addSchedulePeriod').attr('startTime',schedule_time.attr('startTime'));
            $('#addSchedulePeriod').attr('endTime',schedule_time.attr('endTime'));
            $('#addSchedulePeriod').attr('time',schedule_time.attr('time'));
            // 4.students
            $(this).parent().find('[role="student"]').each(function() {
                var outerHTML = $(this).attr('name','learnerBtn').prop('outerHTML');
                $('#addLearners').append(outerHTML);
            })
            // 手动打开modal
            $('#scheduleModal').modal('show');
        })
        // 删除
        $('[role="deleteSchedule"]').click(function() {
            // 获取下一个元素role=schedule：$().next(), 并获取schedule的信息dbid
            var dbid = $(this).next().attr('dbid');
            // 发送到后台
            $.get(
                '/manager/deleteSchedule',
                {'dbid' : dbid},
                function(success) {
                    if (success){
                        window.location.reload();
                    }
                }
            )
        })
        // 将period的select value转option value=value selected
        $('[name="weekday"]').each(function () {
            var weekdayNum = $(this).attr('weekdayNum');
            $(this).children().each(function () {
                if ($(this).attr('value') == weekdayNum) {
                    $(this).attr('selected', true);
                }
            })
        })
        // 增,改period submit
        $('#submitPeriod').click(function () {
            // 获取period的name weekday,startTime,endTime 的value，做成json
            var periods = {};
            var i = 1;
            $('[name="periodRow"]').each(function () {
                var weekday, startTime, endTime;
                dbid = $(this).attr('dbid');
                weekday = $(this).find('[name="weekday"]').val();
                startTime = $(this).find('[name="startTime"]').val();
                endTime = $(this).find('[name="endTime"]').val();
                if (!startTime || !endTime) {
                    return false;
                }
                var period = {
                    'dbid': parseInt(dbid),
                    'weekday': parseInt(weekday),
                    'startTime': startTime,
                    'endTime': endTime
                }
                periods[i] = period;
                i++;
            })
            // 发送到服务器
            $.post(
                '/manager/insert_and_update_periods',
                { 'data': JSON.stringify(periods) },
                function (res) {
                    $('#resultPeriod').text(res);
                }
            )
        })
        $('#addPeriodBtn').click(function () {
            var tr = $('tbody[name="periods"]').find('tr[hidden]');
            var newtr = tr.prop('outerHTML').replace('hidden=""', '');
            tr.before(newtr);
        })
        
        // 增schedule
        $('#student_input').change(function () {
            var txt = $(this).val();
            // 找到对应option
            var option = $('#' + $(this).attr('list')).find('[value="' + txt + '"]');
            if (txt != option.attr('value')) { return false } //若option未找到，则推出
            // 先查是否有已经加入的学生，若无则加入
            var learner_exist = false;
            var e = $('#addLearners').children('[dbid="'+option.attr('dbid')+'"]');
            if (e.attr('dbid') == option.attr('dbid')){learner_exist = true;}
            if (! learner_exist) {
                var dbid = option.attr('dbid');
                var role = option.attr('role');
                var value = option.val();
                var learner = '<span name="learnerBtn" dbid=' + dbid + ' role=' + role + ' value="' + value + '">' + value + '</span>';
                $('#addLearners').append(learner);
            }
            $('#student_input').val('');
        })
        $('#class_input').change(function () {
            // 获取txt
            var txt = $(this).val();
            // 清空input
            $(this).val('');
            // 找到对应option
            var option = $('#' + $(this).attr('list')).find('[value="' + txt + '"]');
            if (txt != option.attr('value')) { return false } //若option未找到，则推出
            // 获取数据库中对应class所有学生
            $.get(
                '/manager/getStudentsByClassId',
                { 'dbid': option.attr('dbid') },
                function (s) { //获取到多个学生信息
                    // 加到#addLearners
                    for (i in s) {
                        var txt = s[i].name2 ? s[i].name + ' | ' + s[i].name2 : s[i].name;
                        // 先查是否有已经加入的学生，若无则加入
                        var learner_exist = false;
                        var e = $('#addLearners').children('[dbid="'+s[i].id+'"]');
                        if (e.attr('dbid') == s[i].id){learner_exist = true;}
                        if (!learner_exist) {
                            var stu_html = '<span name="learnerBtn" dbid=' + s[i].id + ' role=student>' + txt + '</span>'
                            $('#addLearners').append(stu_html);
                        }
                        $('#class_input').val('');
                    }
                }
            )
        })
        $('#addScheduleTeacher').change(function() {
            var option = getOption($(this));
            $(this).attr('dbid',option.attr('dbid'));
            $(this).attr('role',option.attr('role'));
        })
        $('#addSchedulePeriod').change(function() {
            var option = getOption($(this));
            $(this).attr('weekday',option.attr('weekday'));
            $(this).attr('startTime',option.attr('startTime'));
            $(this).attr('endTime',option.attr('endTime'));
        })
        // 点击增加的schedule人员，删除
        $('#addLearners').on('click', '[name="learnerBtn"]', function () {$(this).remove();})
        
        // 点击scheduleModal submit，包含添加与更新。查其update=true, 并已在modal监听部分添加了使之false内容
        $('#submitSchedule').click(function () {
            var dbid,url, schedule_dict, name, teacher_id, weekday, startTime, endTime, student_ids = '';
            // 获取三个title框
            name = $('#addScheduleName').val();
            // 找attr list=id的option的dbid
            // var option = getOption($('#addScheduleTeacher'));
            teacher_id = $('#addScheduleTeacher').attr('dbid');
            // get period 
            weekday = $('#addSchedulePeriod').attr('weekday');
            startTime = $('#addSchedulePeriod').attr('startTime');
            endTime = $('#addSchedulePeriod').attr('endTime');
            time =  $('#addSchedulePeriod').val();
            // 空数据验证
            if(!name || !weekday || !startTime || !endTime || !time || $('#addLearners').children().length === 0){
                $('#resultSchedule').text('请填写完整信息 Please fill out the form');
                return false;
            }
            $('#addLearners [role="student"]').each(function () {
                student_ids += $(this).attr('dbid') + ',';
            })
            // 整合schedule数据，做schedule dict
            schedule_dict = {
                'name': name,
                'teacher_id': teacher_id,
                'weekday':parseInt(weekday),
                'startTime':startTime,
                'endTime':endTime,
                'time':time,
                'student_ids': student_ids
            }
            // 看看是insert 还是update
            dbid = $(this).attr('schedule_dbid');
            if (dbid){
                schedule_dict['dbid'] = dbid;
                url = '/manager/updateSchedule';
            } else {
                url = '/manager/addSchedule';
            }
            // submit();
            $.get(
                url,
                schedule_dict,
                function (res) { $('#resultSchedule').text(res) }
            )
        })
        
        // 增加班级
        $('#class_student_input').change(function () {
            var txt = $(this).val();
            // 找到对应option
            var option = getOption($(this));
            // 先查是否有已经加入的学生，若无则加入
            var learner_exist = false;
            $('#addStudents').children().each(function () {
                if ($(this).text() == txt) {
                    learner_exist = true;
                }
            })
            if (!learner_exist) {
                var dbid = option.attr('dbid');
                var role = option.attr('role');
                var value = option.val();
                var student = '<span class="btn btn-default" name="studentBtn" dbid=' + dbid + ' role=' + role + ' value="' + value + '">' + value + '</span>';
                $('#addStudents').append(student);
                // 清空input
                $('#class_student_input').val('');
            }
        })
        $('#addStudents').on('click', '[name="studentBtn"]', function () {$(this).remove();})
        $('#submitClass').click(function () {
            var class_dict, name, student_ids = '';
            // 获取title框班级名
            name = $('#addClassName').val();
            // 获取#addStudents里面的span
            $('#addStudents [role="student"]').each(function () {
                student_ids += $(this).attr('dbid') + ',';
            })
            // 整合class数据，做class dict
            class_dict = {
                'name': name,
                'student_ids': student_ids
            }
            $.get(
                '/manager/addClass',
                class_dict,
                function (res) { $('#resultClass').text(res) }
            )
        })
        
        // 模态框退出时刷新
        $('[role="dialog"]').on('hidden.bs.modal', function () {
            window.location.reload();
            console.log('ok');
            $('#result').text('');
        })
        $('[role="dialog"]').change(function () { $('[role="result"]').text(''); })
        $('#scheduleModal').on('hide.bs.modal', function() {$(this).removeAttr('schedule_dbid')})
    })
</script>
{% endblock %}