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

<!-- 增加 -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">人员数据维护</h3>
    </div>
    <div class="panel-body">
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">
            增加
        </button>
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#deletedModal">
            已删人员
        </button>
    </div>
</div>

<!-- 查询 -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">已有记录</h3>
    </div>
    <div class="panel-body">
        <!-- role select -->
        <form id="selectForm" action="/manager/data" method="post">
            <select name="selectSearch" id="selectSearch" class="form-control">
                <option name='student' value="student">学生</option>
                {% if searchRole == 'teacher' %}
                <option name='teacher' selected value="teacher">教师</option>
                {% else %}
                <option name='teacher' value="teacher">教师</option>
                {% endif %}
            </select>
            <!-- <button type="submit" class="btn btn-default form-control">查询Search</button> -->
        </form>
        <br>
        <!-- search -->
        <input type="text" id="name_input" list="name_list" name="link" class="form-control" placeholder="搜索"
            data-target="#myModal" />
        <datalist id="name_list">
            {% for i,person in id_and_names.items() %}
            {% if person.name2 %}
            <option id="option{{i}}" dbid={{person.id}} role={{person.role}} value="{{person.name}} | {{person.name2}}">
                {% else %}
            <option id="option{{i}}" dbid={{person.id}} role={{person.role}} value="{{person.name}}">
                {% endif %}
                {% endfor %}
        </datalist>



        <br>
        <!-- all names -->
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row" id="name-btns">
                    <!-- data为{0: {…}, 1: {…}, 2: {…}} -->
                    {% for i,person in id_and_names.items() %}
                    <button id="nameBtn{{i}}" dbid={{person.id}} role={{person.role}} name="{{person.name}}"
                        name2="{{person.name2}}" type="button" class="btn" data-toggle="modal" data-target="#myModal"
                        style="margin: 2px;">
                        {{person.name}}
                    </button>
                    <!-- <span class="badge">3</span> -->
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<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">详情 Detail</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>角色:<select id="addRole" class="form-control">
                            <option value="student">学生</option>
                            <option value="teacher">教师</option>
                        </select></label><br />
                    <label>姓名:<input type="text" required class="form-control" id="addName" width=5
                            placeholder="必填"></label>
                    <label>昵称:<input type="text" class="form-control" id="addNickname" width=5></label>
                    <label>手机号:<input type="tel" required class="form-control" id="addPhone" width=5
                            placeholder="必填"></label>
                    <text hidden id="addNote" >
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="submit" type="button" class="btn btn-primary">保存</button>
                <button id="delete" type="button" class="btn btn-danger">删除</button>
                <p id="result" style="color: red;"></p>
            </div>
        </div>
    </div>
</div>

<!-- deletedModal -->
<div class="modal fade" id="deletedModal" 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 nameBox="teacher">
                    {% for teacher in deletedTeachers %}
                    <label style="margin: 5px 10px;">
                        <input type="checkbox" teacher_id="{{teacher['id']}}" role="teacher" 
                            name="{{teacher['name']}}" name2="{{teacher['name2']}}">
                        <span>{{teacher['name']}} | {{teacher['name2']}}</span>
                    </label>
                    {% endfor %}
                </div>
                <div nameBox="student">
                    {% for student in deletedStudents %}
                    <label style="margin: 5px 10px;">
                        <input type="checkbox" student_id="{{student['id']}}" role="student" 
                            name="{{student['name']}}" name2="{{student['name2']}}">
                        <span>{{student['name']}}</span>
                        {% if student['name2'] %}
                        <span> | {{student['name2']}}</span>
                        {% endif %}
                    </label>
                    {% endfor %}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="restoreSubmit" type="button" class="btn btn-primary">恢复</button>
                <p id="restoreResult" style="color: red;"></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
<script>
    $(function () {
        $('#nav-data').attr('class', 'bg-primary');
        // 将json转为name buttons作文innerHTML
        function toNameBtns(data) {
            // data为{0: {…}, 1: {…}, 2: {…}}
            // 替换name-btns
            var innerHTML = '';
            for (i in data) {
                var person = data[i];
                innerHTML += '\
                    <button id=nameBtn'+ i + ' dbid=' + person.id + ' role=' + person.role + ' type="button" class="btn" data-toggle="modal"\
                        data-target="#myModal" style="margin: 2px;">\
                        '+ person.name + '\
                    </button>\
                ';
            }
            return innerHTML;
        }
        // 获取数据显示myModal
        function showOnModal(that) {
            var dbid = that.attr('dbid');
            var role = that.attr('role');
            console.log('dbid,role');
            console.log(dbid, role);
            // 查是否是已有记录 . 若是，则获取数据
            if (dbid) {
                // myModal标为‘改’的路由
                $('#myModal').attr('queryType', 'update');
                // 角色不能改,使之disabled
                $('#addRole').attr('disabled', 'true');
                // 记录dbid,role,fromBtnId到模态框
                $('#myModal').attr('dbid', dbid);
                $('#myModal').attr('role', role);
                // 提交后台获取改按钮人员的信息
                $.get(
                    '/manager/personal_info',
                    { 'dbid': dbid, 'role': role },
                    function (data) {
                        // 0:{...}
                        // 修改模态框内容
                        // addRole,addName,addNickname,addPhone,addNote
                        $('#addRole').val(data['role']);
                        $('#addName').val(data['name']);
                        $('#addNickname').val(data['nickname']);
                        $('#addPhone').val(data['phone']);
                        $('#addNote').val(data['note']);
                    }
                )
            } else {
                console.log('insert');
                // myModal
                $('#myModal').attr('queryType', 'insert');
                // 角色能改,使之disabled=false
                $('#addRole').removeAttr('disabled');
                // 删掉dbid,role
                $('#myModal').removeAttr('dbid');
                $('#myModal').removeAttr('role');
                // 清除文字框
                $('#addName').val('');
                $('#addNickname').val('');
                $('#addPhone').val('');
                $('#addNote').val('');
            }
        }
        // 查
        $('#selectSearch').change(function () {
            $('#selectForm').submit();
        })
        // 点名字按钮、option，改
        $('button[data-target="#myModal"]').click(function () {
            showOnModal($(this));
        })
        $('#name_input').change(function () {
            var that;
            if ($(this).val().indexOf('|') != -1) {
                // 拆开
                var name_and_name2 = $(this).val();
                name_and_name2 = name_and_name2.split(' | ');
                var name = name_and_name2[0];
                var name2 = name_and_name2[1];
                // 找到按钮
                that = $('[name=' + name + '][name2=' + name2 + ']');
            } else {
                // 找到按钮
                var name = $(this).val();
                that = $('[name=' + name + ']');
            }
            showOnModal(that);
            $('#myModal').modal('show');
        })
        // 增,改submit
        $('#submit').click(function () {
            // 获取class="form-group"的所有value，做成json
            // addRole,addName,addNickname,addPhone,addNote
            if ($('#addPhone').val().length != 11) {
                $('#result').text('手机号位数不对。Phone number wrong.');
                return false;
            }
            var addInfo = {
                'role': $('#addRole').val(),
                'name': $('#addName').val(),
                'name2': $('#addNickname').val(),
                'phone': $('#addPhone').val(),
                'description': $('#addNote').val(),
                'id': $('#myModal').attr('dbid'),
            }
            // 判断是'update'还是'insert'
            var queryType = $('#myModal').attr('queryType');
            var url = '';
            if (queryType == 'insert') {
                url = '/manager/insert_person';
            } else if (queryType == 'update') {
                url = '/manager/update_person';
            }
            // 发送到服务器
            $.get(
                url,
                addInfo,
                function (res) {
                    $('#result').text(res);
                }
            )
        })
        $('#delete').click(function() {
            // 发送到服务器
            $.get(
                '/manager/delete_person',
                {'id': $('#myModal').attr('dbid'), 'role': $('#addRole').val()},
                function (res) {
                    $('#result').text(res);
                }
            )
        })
        $('[role="dialog"]').on('hidden.bs.modal', function () {
            window.location.reload();
            $('#result').text('');
        })
        
        // 恢复提交按钮
        $('#restoreSubmit').click(function() {
            var data={}, role, id;
            // 获取role,id // 做成data={'student':'1,3,4', 'teacher':'2,4,1'}
            var people = $('#deletedModal').find('input:checked');
            var i=0;
            people.each(function(){
                // data[i] = {person.attr('role') : person.attr('id')}
                role = $(this).attr('role');
                if (role == 'teacher'){
                    id = $(this).attr('teacher_id');
                    data[i++] = {'teacher':id};
                } else if (role == 'student'){
                    id = $(this).attr('student_id');
                    data[i++] = {'student':id};
                }
            })
            // 传送
            data = JSON.stringify(data);
            console.log(data);
            $.get(
                '/manager/restore_deleted',
                {'data':data},
                function(res){
                    $('#restoreResult').text(res);
                    $('#deletedModal').find('input:checked').parent().hide();
                }
            )
        })
    })
</script>
{% endblock %}