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

{% block content %}

<form action="/manager/renew" method="get" class="form-inline" role="form">
    <table>
        <tr>
            <td><input type="text" class="form-control" required id="name_input" name="showname" list="students" placeholder="姓名"></td>
            <datalist id="students">
                {% for student in students %}
                <option value="{{student['showname']}}">{{student['qtt']}}</option>
                {% endfor %}
            </datalist>
            <td style="width: 80px;"><input type="number" required class="form-control" name="qtt" placeholder="数量"></td>
            <td style="width: 80px;"><input type="text" required class="form-control" name="note" list="notes" placeholder="备注"></td>
            <datalist id="notes">
                <option value="续"></option>
                <option value="赠"></option>
            </datalist>
            <td><button id="renew_submit" type="submit" class="btn btn-primary">提交</button></td>
        </tr>
    </table>
</form>

{% for student in students %}
<button showname="{{student['showname']}}" student_id="{{student.id}}" class="btn btn-default btn-sm" style="margin: 0.2em 0.2em;">
    <span showname="{{student['showname']}}">{{student.name}}</span>
    <span class="badge">{{student['qtt']}}</span>
</button>
{% endfor %}

<!-- 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">课时详情</h4>
            </div>
            <div class="modal-body">
                
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>变动</th>
                            <th>剩余</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block script %}
<script>
    $(function () {
        // 监听name_input, 变化时，1.标亮一个button
        $('#name_input').change(function() {
            // 获取数据
            const showname = $(this).val();
            // 找到对应button
            $('button[showname').attr('class','btn btn-default');
            $('button[showname="'+showname+'"]').attr('class','btn btn-primary');
        })
        // 监听提交按钮 
        $('form').submit(function() {
            // 查看是否有此学生
            let showname = $('#name_input').val();
            if ($('option[value="'+showname+'"]').length == 0){
                alert('无此学生，请查看填写的学生姓名');
                return false;
            }
        })
        // 监听提交获取account信息，用名字来打开模态框，找到id,手动提交
        $('button[student_id]').click(function() {
            // 获取student_id
            const id = $(this).attr('student_id');
            const showname = $(this).attr('showname');
            // 用student_id获取account信息。Ajax
            let data;
            $.post(
                '/manager/accountInfo',
                {'id': id},
                function(res) {
                    // 获取数据
                    data = JSON.parse(res);
                    // 将信息和id传到modal
                    $('#myModal').find('#myModalLabel').text(showname);
                    let tbody = $('#myModal').find('tbody');
                    let qtt_left = 0;
                    for (i in data){
                        let str = '<tr>\
                            <td>'+data[i]['date']+'</td>\
                            <td>'+data[i]['qtt']+'<span class="badge">'+data[i]['note']+'</span></td>\
                            <td>'+data[i]['qtt_left']+'</td>\
                            </tr>';
                        tbody.append(str);
                    }
                    // 打开modal
                    $('#myModal').modal('show');
                    console.log(data);
                }
            )
        // hide modal时
        $('[role="dialog"]').on('hidden.bs.modal', function () {
            $('#myModal').find('tbody').html('');
            $('#myModalLabel').text('');
        })
        
        })
        // 导航标active
        $('#nav-renew').attr('class', 'bg-primary');
    })
</script>
{% endblock %}