{% extends 'admin/a_adminmain.html' %}

{% block mycss%}
<script src="/static/js/axios.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-3.6.1.min.js"></script>
<script>
    function getMenuDataInline(ptid){
        axios.get('/getUnit/'+ptid).then(function(response) {
           console.log(response);
           data = response.data;
            $("#txt_MenuID").val(response.data[0][0])
            $("#txt_CNname").val(response.data[0][1])
            $("#txt_ENname").val(response.data[0][2])
            $("#txt_Link").val(response.data[0][3])
            $("#txt_Grade").val(response.data[0][4])
            $("#txt_Order").val(response.data[0][5])
            $("#txt_CNname2").val(response.data[0][1])
            $("#txt_ENname2").val(response.data[0][2])
            $("#txt_Link2").val(response.data[0][3])
            $("#txt_Grade2").val(response.data[0][4])
            $("#txt_Order2").val(response.data[0][5])
        });
    }
</script>
{% endblock %}

{% block middle %}
 <div class="content">
                <div class="page-inner">
                    <div class="page-header">
                        <h4 class="page-title">
                            主页菜单管理</h4>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                             {% with messages = get_flashed_messages() %}
         {% if messages %}
               {% for message in messages %}
                    <p>{{ message }}</p>
               {% endfor %}
         {% endif %}
    {% endwith %}
                            <div class="card">
                                <div class="card-header">
                                    <div class="d-flex align-items-center">

                                        <button class="btn btn-primary btn-round ml-auto" data-toggle="modal" data-target="#addMenuModal">
                                            <i class="fa fa-plus"></i>添加新的菜单项
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <!-- Modal -->
                                    <div class="modal fade" id="addMenuModal" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header no-bd">
                                                    <h5 class="modal-title">
                                                        <span class="fw-mediumbold">新</span> <span class="fw-light">菜单项 </span>
                                                    </h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                 <form action="/addMenuUnit" method="post">
                                                <div class="modal-body">
                                                    <p class="small">
                                                        向数据库中添加一个新菜单项。</p>
                                                    <div class="row">
                                                       <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    菜单中文名称: </label>
                                                                <input name="txt_CNname" type="text" class="form-control" placeholder="填写中文名称">
                                                            </div>
                                                        </div>
                                                       <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    菜单英文名称: </label>
                                                                <input name="txt_ENname" type="text" class="form-control" placeholder="填写英文名称">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    菜单链接: </label>
                                                                <input name="txt_Link" type="text" class="form-control" placeholder="填写链接">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    父级菜单</label>
                                                                <select name="txt_Grade" class="form-control">
                                                                <option value="0">顶级菜单</option>
                                                                     {% for grade in Graderange %}
                                                                    <option value="{{grade[0]}}">{{grade[1]}}</option>
                                                                     {% endfor %}
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    排序: </label>
                                                                <input name="txt_Order" type="text" class="form-control" placeholder="填写排序">
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="modal-footer no-bd">
                                                    <button type="submit" class="btn btn-primary">
                                                        保存</button>
                                                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                                                        关闭</button>
                                                </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                      <div class="modal fade" id="editMenuModal" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header no-bd">
                                                    <h5 class="modal-title">
                                                        <span class="fw-mediumbold">编辑</span> <span class="fw-light">菜单项 </span>
                                                    </h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                 <form action="/editMenuUnit" method="post">
                                                     <input id="txt_MenuID" name="txt_MenuID" type="hidden">
                                                <div class="modal-body">
                                                    <p class="small">
                                                        编辑一项菜单信息, 并保存到数据库中。</p>
                                                    <div class="row">
                                                       <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    中文名称: </label>
                                                                <input id="txt_CNname" name="txt_CNname" type="text" class="form-control" placeholder="填写菜单中文名称">
                                                            </div>
                                                        </div>
                                                       <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    英文名称: </label>
                                                                <input id="txt_ENname" name="txt_ENname" type="text" class="form-control" placeholder="填写菜单英文名称">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    菜单链接: </label>
                                                                <input id="txt_Link" name="txt_Link" type="text" class="form-control" placeholder="填写菜单链接">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    父级菜单</label>
                                                                <select id="txt_Grade" name="txt_Grade" class="form-control">
                                                                 <option value="0">顶级菜单</option>
                                                                    {% for grade in Graderange %}
                                                                    <option value="{{grade[0]}}">{{grade[1]}}</option>
                                                                     {% endfor %}
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    排序: </label>
                                                                <input id="txt_Order" name="txt_Order" type="text" class="form-control" placeholder="填写菜单排序">
                                                            </div>
                                                        </div>

                                                    </div>

                                                </div>
                                                <div class="modal-footer no-bd">
                                                    <button type="submit" class="btn btn-primary">
                                                        保存编辑</button>
                                                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                                                        关闭</button>
                                                </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                      <div class="modal fade" id="viewRowModal" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header no-bd">
                                                    <h5 class="modal-title">
                                                        <span class="fw-mediumbold">查看</span> <span class="fw-light">菜单项信息 </span>
                                                    </h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                 <form action="/adduser" method="post">
                                                <div class="modal-body">

                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    中文名称: </label><input id="txt_CNname2" name="text_CNname2" type="text" readonly="true"></input>

                                                            </div>
                                                        </div>
                                                       <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    英文名称: </label><input id="txt_ENname2" name="text_ENname2" type="text" readonly="true"></input>

                                                            </div>
                                                        </div>
                                                       <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    菜单链接: </label><a href="txt_Link2" ><input id="txt_Link2" name="text_Link2" type="text" readonly="true"></input></a>
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    父级菜单: </label><input id="txt_Grade2" name="text_Grade2" type="text" readonly="true"></input>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group form-group-default">
                                                                <label>
                                                                    排序: </label><input id="txt_Order2" name="text_Order2" type="text" readonly="true"></input>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="modal-footer no-bd">
                                                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                                                        关闭</button>
                                                </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table id="add-row" class="display table table-striped table-hover">
                                            <thead>
                                                <tr>
                                                    <th style="width: 20px">
                                                        序号
                                                    </th>
                                                    <th style="width: 130px">
                                                        中文菜单名称
                                                    </th>
                                                    <th style="width: 130px">
                                                        英文菜单名称
                                                    </th>
                                                    <th style="width: 130px">
                                                        菜单链接
                                                    </th>
                                                    <th>
                                                        父级菜单
                                                    </th>
                                                    <th>
                                                        排序
                                                    </th>
                                                    <th>
                                                        操作
                                                    </th>
                                                </tr>
                                            </thead>
                                            {% for row in Menuresults %}
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        {{row[0]}}
                                                    </td>
                                                    <td>
                                                        {{row[1]}}
                                                    </td>
                                                    <td>
                                                        {{row[2]}}
                                                    </td>
                                                    <td>
                                                        {{row[3]}}
                                                    </td>
                                                    <td>
                                                        {{row[4]}}
                                                    </td>
                                                      <td>
                                                        {{row[5]}}
                                                    </td>
                                                    <td>
                                                        <div class="form-button-action">
                                                            <button type="button" data-toggle="modal" title="" class="btn btn-link btn-primary btn-lg"
                                                                data-original-title="查看详细信息"  data-target="#viewRowModal" onclick="getMenuDataInline({{row[0]}})">
                                                                <i class="fa fa-search"></i>查看
                                                            </button>
                                                            <button type="submit" title="" class="btn btn-link btn-primary btn-lg"
                                                                data-original-title="编辑项" data-toggle="modal" data-target="#editMenuModal" onclick="getMenuDataInline({{row[0]}})">
                                                                <i class="fa fa-edit"></i>编辑
                                                            </button>
                                                             <form name="deluserform" action="/delUnit/{{row[0]}}" method="post">
                                                            <button type="submit" data-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg"
                                                                data-original-title="删除" onclick="{if(confirm('确定要删除该项吗?')){deluserform.submit();return true;}return false;}" >
                                                                <i class="fa fa-times"></i>删除
                                                            </button>  </form>
                                                        </div>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
 </div>
{% endblock %}