<!doctype html>
<html class="no-js">
<head>

<include file="Common/head" />

    <style type="text/css">
        a.am-text-secondary:visited{color:#3bb4f2;}
        a.am-text-danger:visited{color:#dd514c;}
        .am-btn-default {background-color: #fff;}
        th {text-align:center;}
        tr td{text-align:center;}
        select{padding: 4px;border: 1px solid #ccc;}
        .am-popup-bd {background:#fff;}
        .am-popup-bd img {max-width: 100%}
        .am-u-sm-2 {border-top: 1px solid #ddd;margin-top: 10px;}
        .am-u-sm-10 {border-left: 1px solid #ddd;margin-top: 10px;}
    </style>
</head>
<body>
<script type="text/javascript">
    // alert('ssssss');
</script>
<include file="Common/header" />

<script type="text/javascript">
    function select_change() {

    }
</script>

<div class="am-cf admin">

    <!-- sidebar start -->
    <include file="Common/sidebar" nav="$nav"/>
    <!-- sidebar end -->

    <!-- Start right Content here -->
        <div class="content-page" style="background: white;">
            <!-- Start content -->
            <div class="content">
                <div class="am-cf am-padding am-padding-bottom-0">
                    <div class="am-fl am-cf">
                        <strong class="am-text-primary am-text-lg">Menu management</strong> / <small>{$op}The menu<span style="color:#F00">(PS:After editing the node, you need to modify the permission)</span></small>
                    </div>
                </div>
                <hr style="margin-top:0px;">
                <div class="am-g">
                    <div class="am-u-sm-12">
                        <form class="mainForm am-form" action="" method="POST" enctype="multipart/form-data">
                            <input type="hidden" name="id" value="{$node.id}"/>
                            <fieldset>
                                    <div class="am-form-group">
                                        <label for="level">Menu (node) level</label>
                                        <select data-am-selected name="level" id="level" required="required">
                                          <option value="1" <?php if (1 == $node['level']) : ?>selected<?php endif;?>>Level 1 menu (node)</option>
                                          <option value="2" <?php if (2 == $node['level']) : ?>selected<?php endif;?>>Secondary menu (node)</option>
                                          <option value="3" <?php if (3 == $node['level']) : ?>selected<?php endif;?>>Level 3 nodes</option>
                                        </select>
                                    </div>

                                    <div class="am-form-group" id="level_2">
                                        <label for="pid_1">Level 1 menu (node)</label>
                                        <select data-am-selected name="pid_1" id="pid_1">
                                          <?php foreach ($p_1_list as $k => $v) : ?>
                                            <option value="{$v.id}" <?php if ($pid_1 == $v['id']) : ?>selected<?php endif;?>>{$v.title}</option>
                                          <?php endforeach;?>
                                        </select>
                                    </div>

                                    <div class="am-form-group" id="level_3">
                                        <label for="pid_2">Secondary menu (node)</label>
                                        <select data-am-selected name="pid_2" id="pid_2">
                                        </select>
                                    </div>
                                    
                                    <div class="am-form-group">
                                        <label for="title">Menu (node) name</label>
                                        <input type="text" id="title" name="title" value="<if condition='$node'>{$node.title}</if>" required/>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="remark">note</label>
                                        <input type="text" id="remark" name="remark" value="<if condition='$node'>{$node.remark}</if>"/>
                                    </div>
                                    
                                    <div class="am-form-group">
                                        <label for="url">Node (url)</label>
                                        <input type="text" id="url" name="url" value="<if condition='$node'>{$node.url}</if>" required  placeholder="Example: primary node:/Smi/Menu，Two (three) level nodes:/Smi/Menu/add"/>
                                    </div>
                                    
                                    <div class="am-form-group">
                                        <h3>status</h3>
                                        <label class="am-radio-inline">
                                          <input type="radio" name="status" value="1" data-am-ucheck <?php if ($node['status'] == 1) : ?>checked<?php endif;?>>
                                          show
                                        </label>
                                        <label class="am-radio-inline">
                                          <input type="radio" name="status" value="2" data-am-ucheck <?php if ($node['status'] == 2) : ?>checked<?php endif;?>>
                                          hide
                                        </label>
                                    </div>

                                    <p>
                                        <button type="submit" class="am-btn am-btn-success" id="submit">submit</button>
                                        <button type="reset" class="am-btn am-btn-info">reset</button>
                                    </p>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <!-- end right Content here -->
</div>

<include file="Common/footer" />

<script type="text/javascript">
    $(function(){
        // 默认， 默认level_val值为1
        var level_val = $('#level').val();
        if (level_val == 1) {
            $('#level_2').hide();
            $('#pid_1').removeAttr('required');
            $('#level_3').hide();
            $('#pid_2').removeAttr('required');
        } else if (level_val == 2) {
                $('#level_2').show();
                $('#pid_1').attr('required', 'required');
                $('#level_3').hide();
                $('#pid_2').removeAttr('required');
            } else if (level_val == 3) {
                $('#level_2').show();
                $('#pid_1').attr('required', 'required');
                $('#level_3').show();
                $('#pid_2').attr('required', 'required');
                // 默认
                $('.append').remove();
                var p_2_list = <?php echo json_encode($p_2_list);?>;
                var pid_1 = $('#pid_1').val();
                var pid_2 = '{$pid_2}';
                for (var i = 0; i < p_2_list.length; i++) {
                    if (p_2_list[i]['pid'] == pid_1 && pid_2 == p_2_list[i]['id']) {
                        $('#pid_2').append('<option class="append" value="'+p_2_list[i]['id']+'" selected>'+p_2_list[i]['title']+'</option>');
                    } else if (p_2_list[i]['pid'] == pid_1 && pid_2 != p_2_list[i]['id']) {
                        $('#pid_2').append('<option class="append" value="'+p_2_list[i]['id']+'">'+p_2_list[i]['title']+'</option>');
                    }
                }
                // 监听
                $('#pid_1').change(function() {
                    check_select($(this).val());
                })
            }

        // 监听
        $('#level').change(function(){
            level_val = $(this).val();
            if (level_val == 1) {
                $('#level_2').hide();
                $('#pid_1').removeAttr('required');
                $('#level_3').hide();
                $('#pid_2').removeAttr('required');
            } else if (level_val == 2) {
                $('#level_2').show();
                $('#pid_1').attr('required', 'required');
                $('#level_3').hide();
                $('#pid_2').removeAttr('required');
            } else if (level_val == 3) {
                $('#level_2').show();
                $('#pid_1').attr('required', 'required');
                $('#level_3').show();
                $('#pid_2').attr('required', 'required');
                // 监听
                $('#pid_1').change(function() {
                    check_select($(this).val());
                })
            }
        });

        function check_select(pid_1, pid_2 = '{$pid_2}')
        {   
            $('.append').remove();
            var p_2_list = <?php echo json_encode($p_2_list);?>;
            for (var i = 0; i < p_2_list.length; i++) {
                if (p_2_list[i]['pid'] == pid_1 && pid_2 == p_2_list[i]['id']) {
                    $('#pid_2').append('<option class="append" value="'+p_2_list[i]['id']+'" selected>'+p_2_list[i]['title']+'</option>');
                } else if (p_2_list[i]['pid'] == pid_1 && pid_2 != p_2_list[i]['id']) {
                    $('#pid_2').append('<option class="append" value="'+p_2_list[i]['id']+'">'+p_2_list[i]['title']+'</option>');
                }
            }
        }
    });
</script>

</body>
</html>