<?php
$this->css($this->assetModule('admin/admin.css', 'system'));
$this->jQuery('ui/jquery-ui.min.js');
$this->backbone();
$this->js($this->assetModule('script/system-msg.js'));
?>
<div class="page-header">
    <h2><?php echo _escape($title); ?></h2>
</div>
<div id="js-menu-edit" style="margin-bottom: 10px;">
    <?php if (!$navigation['module']) { ?>
        <div class="alert alert-info">
            <?php echo _a('Add new element on menu or edit current elements, save each element box after edit and finally save menu by blue button.'); ?>
        </div>
        <div class="form-actions form-inline" style="text-align: left;">
            <div class="form-group">
            <span class="btn btn-primary menu-submit"
                  data-original-title="<?php echo _a('Only click this button to save data'); ?>">
                <?php echo _a('Save menu'); ?>
            </span>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control js-add-label" placeholder="Label">
                    <button class="btn btn-secondary js-add-to">
                        <?php echo _a('Add to menu'); ?>
                    </button>
                </div>
            </div>
        </div>
    <?php } else { ?>
        <div class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <?php echo _a('This navgation is only for viewing'); ?>
        </div>
    <?php } ?>
    <div class="menu-to-edit" style="direction: ltr !important;"></div>
</div>
<script type="text/template" id="temp-menu">
    <div class="no-select row-fluid tree-item-header">
        <div class="float-right btn-group">
            <span class="btn btn-secondary btn-sm js-toggle" title="<?php echo _a('Click to toggle edit'); ?>">
                <?php echo _a('Custom'); ?>
            </span>
            <?php if (!$navigation['module']) { ?>
                <button class="btn btn-secondary btn-sm js-delete">×</button>
            <?php } ?>
        </div>
        <div class="ellipsis tree-item-header-label"><%= label %></div>
    </div>
    <div class="tree-item-body">
        <div class="menu-edit-form">
            <div class="form-group">
                <label class="col-md-2 col-form-label"><?php echo _a('Label'); ?></label>
                <div class="col-md-6">
                    <input class="form-control" type="text" value="<%= label %>" name="label">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 col-form-label"><?php echo _a('Url'); ?></label>
                <div class="col-md-6">
                    <input class="form-control" type="text" name="uri" value="<%= uri %>"
                           data-original-title="<?php echo _a('Page link by url or by the after of route'); ?>">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 col-form-label"><?php echo _a('Target'); ?></label>
                <div class="col-md-6">
                    <select name="target">
                        <option value=""
                        <% if (!target) { print('selected'); } %>><?php echo _a('None'); ?>
                        <option value="_blank"
                        <% if (target == "_blank") { print('selected'); } %>><?php echo _a('_blank'); ?>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 col-form-label"><?php echo _a('Permission'); ?></label>
                <div class="col-md-6">
                    <input class="form-control" type="text" name="uri" value="<%= resource %>">
                </div>
            </div>
            <div class="form-group">
                <div class="offset-md-2 col-md-6">
                    <label class="checkbox">
                        <input type="checkbox" name="visible" <% if (visible) { print('checked'); }
                        %>><?php echo _a('To display in menu.'); ?>
                    </label>
                </div>
            </div>
        </div>
        <legend><?php echo _a('Page link by route'); ?></legend>
        <div class="row-fluid">
            <div class="span6">
                <div class="menu-edit-form">
                    <div class="form-group">
                        <label class="col-md-2 col-form-label"><?php echo _a('Route'); ?></label>
                        <div class="col-md-6">
                            <input class="form-control" type="text" value="<%= route %>" name="route"
                                   class="form-control-small">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 col-form-label"><?php echo _a('Controller'); ?></label>
                        <div class="col-md-6">
                            <input class="form-control" type="text" name="controller" value="<%= controller %>"
                                   class="form-control-small">
                        </div>
                    </div>
                </div>
            </div>
            <div class="span6" style="margin-left: 0;">
                <div class="menu-edit-form">
                    <div class="form-group">
                        <label class="col-md-2 col-form-label"><?php echo _a('Module'); ?></label>
                        <div class="col-md-6">
                            <input class="form-control" type="text" value="<%= module %>" name="module"
                                   class="form-control-small">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 col-form-label"><?php echo _a('Action'); ?></label>
                        <div class="col-md-6">
                            <input class="form-control" type="text" name="action" value="<%= action %>"
                                   class="form-control-small">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-save-action">
            <span class="btn btn-link tree-item-save"><?php echo _a('Save'); ?></span>
        </div>
    </div>
</script>
<script>
    (function ($) {
        var isDone = false;
        var Menu = Backbone.Model.extend({
            idAttribute: "_id",
            defaults: {
                id: 0,
                depth: 0,
                pid: 0,
                label: "",
                resource: "",
                uri: "",
                target: "",
                route: "",
                module: "",
                controller: "",
                action: "",
                visible: 1
            },
            getChild: function () {
                var ret = [],
                    get = function (model) {
                        var c = model.collection.where({
                            pid: model.get('id')
                        });
                        for (var i = 0, l = c.length; i < l; i++) {
                            get1(c[i]);
                        }
                    },
                    get1 = function (model) {
                        var c = model.collection.where({
                            pid: model.get('id')
                        });
                        ret.push(model);
                        for (var i = 0, l = c.length; i < l; i++) {
                            get1(c[i]);
                        }
                    };
                get(this);
                return ret;
            }
        });
        var MenuCollection = Backbone.Collection.extend({
            model: Menu
        });
        var MenuItemView = Backbone.View.extend({
            template: $('#temp-menu').html(),
            events: {
                'click .js-toggle': 'toggle',
                'click .js-delete': 'deleteItem',
                'click .tree-item-save': 'saveItem'
            },
            initialize: function () {
                this.model.on('destroy', this.remove, this);
                this.model.on("change", this.render, this);
                this.model.el = this.el;
                this.$el.data('model', this.model);
            },
            toggle: function () {
                this.$el.toggleClass('tree-item-editing');
                this.$('.js-toggle').toggleClass('active');
            },
            deleteItem: function () {
                var m = this.model;
                m.collection.trigger('deleteItem', m);
                m.destroy();
                isDone = true;
            },
            saveItem: function () {
                var self = this,
                    val = function (name) {
                        return $.trim(self.$('[name=' + name + ']').val());
                    },
                    label = val('label');
                if (label) {
                    this.model.set({
                        'uri': val('uri'),
                        'route': val('route'),
                        'module': val('module'),
                        'controller': val('controller'),
                        'action': val('action'),
                        'label': val('label'),
                        'visible': this.$('[name=visible]').attr('checked') ? 1 : 0,
                        'resource': val('resource'),
                        'target': val('target')
                    });
                } else {
                    this.$('[name=label]').parents('.form-group').addClass('error');
                }
                isDone = true;
            },
            render: function () {
                this.$el.html(_.template(this.template, this.model.toJSON()))[0].className = 'tree-item menu-item-depth' + this.model.get('depth');
                this.$('[name=uri]').tooltip();
                return this;
            }
        });
        var MenuListItemView = Backbone.View.extend({
            el: $('#js-menu-edit'),
            events: {
                'click .js-add-to': 'addMenu',
                'click .menu-submit': 'saveMenu',
                'keypress .js-add-label': 'enterSaveMenu'
            },
            initialize: function (option) {
                this.box = this.$('.menu-to-edit');
                this.render();
                this.$('.menu-submit').tooltip();
                this.collection.on('add', this.addOne, this);
                this.collection.on('deleteItem', this.deleteItem, this);
                if (option.onlyView) {
                    this.$('.tree-item-header').css('cursor', 'default');
                    this.$('.btn-save-action').css('display', 'none');
                } else {
                    this.sortable();
                }
            },
            sortable: function () {
                var getDepth = function (el) {
                    return el.length && parseInt(el.data('model').get('depth'));
                };
                var placePosition = function () {
                    depth = Math.max(depth, 0);
                    depth = Math.min(depth, 9);
                    place[0].className = "tree-sortable-placeholder menu-item-depth" + depth;
                };
                var self = this,
                    depth = 0,
                    place,
                    item,
                    itemChild;
                var leftWidth = 30;
                this.box.sortable({
                    handle: ".tree-item-header",
                    placeholder: "tree-sortable-placeholder",
                    start: function (e, ui) {
                        item = ui.item;
                        depth = item.data('model').get('depth');
                        place = ui.placeholder;
                        itemChild = self.getChild(item);
                        var maxDepth = depth,
                            w;
                        itemChild.each(function () {
                            var d = getDepth($(this));
                            maxDepth = Math.max(maxDepth, d);
                        });
                        w = item.find(".tree-item-header").outerWidth() + (maxDepth - depth) * 30;
                        place.css({
                            width: w,
                            height: (item.find(".tree-item-header").outerHeight() + 10) * (itemChild.length + 1) - 12
                        });
                        item.css('width', w + 20);
                        placePosition();
                        item.append(itemChild);
                        $(this).sortable('refresh');
                    },
                    sort: function (e, ui) {
                        var l = function (str) {
                            console.log(str);
                        };
                        var itemOffset = ui.item.offset().left;
                        var prev = place.prev();
                        var next = place.next();
                        if (prev.hasClass('ui-sortable-helper')) {
                            prev = prev.prev();
                        }
                        if (next.hasClass('ui-sortable-helper')) {
                            next = next.next();
                        }
                        var prevDepth = getDepth(prev);
                        var prevOffset = prev.offset();
                        var nextDepth = getDepth(next);
                        if (prev.length) {
                            if (prevDepth) { //adjust up
                                depth = prevDepth;
                            }
                            if (nextDepth == prevDepth + 1) { //adjust down
                                depth = prevDepth + 1;
                            }
                            if (itemOffset - 10 > prevOffset.left) {
                                depth = prevDepth + 1;
                            } else if ((next.length && itemOffset + 10 < prevOffset.left && nextDepth != prevDepth && nextDepth != prevDepth + 1) || (!nextDepth && itemOffset + 10 < prevOffset.left)) {
                                depth = prevDepth - Math.floor((prevOffset.left - itemOffset - 10) / 30);
                                if (depth < nextDepth) {
                                    depth = nextDepth;
                                }
                            }
                        } else {
                            depth = 0;
                        }
                        placePosition();
                    },
                    stop: function (e, ui) {
                        var pid,
                            diff = depth - item.data('model').get('depth');
                        if (depth == 0) {
                            pid = 0;
                        } else {
                            item.prevAll().each(function () {
                                var m = $(this).data('model');
                                if (m.get('depth') == depth - 1) {
                                    pid = m.get('id');
                                    return false;
                                }
                            });
                        }
                        if (itemChild.length) {
                            itemChild.insertAfter(item).each(function () {
                                var m = $(this).data('model');
                                m.set({
                                    depth: m.get('depth') + diff
                                });
                            });
                        }
                        item.css('width', 'auto').data('model').set({
                            depth: depth,
                            pid: pid
                        });
                    },
                    update: function () {
                        isDone = true;
                    }
                });
            },
            render: function () {
                this.collection.forEach(this.addOne, this);
            },
            addMenu: function () {
                var input = this.$('.js-add-label'),
                    val = $.trim(input.val());
                if (val) {
                    this.collection.add({
                        id: (new Date).getTime(),
                        label: val
                    });
                }
                input.val('');
            },
            enterSaveMenu: function (e) {
                if (e.keyCode == 13) {
                    this.addMenu();
                }
            },
            addOne: function (item) {
                this.box.append(new MenuItemView({
                    model: item
                }).render().el);
            },
            getChild: function (el) {
                var i = 0,
                    child = $('');
                el.nextAll().not('.tree-sortable-placeholder').each(function () {
                    var $this = $(this);
                    if ($this.data('model').get('depth') > el.data('model').get('depth')) {
                        child[i++] = this;
                    } else {
                        return false;
                    }
                });
                child.length = i;
                return child;
            },
            deleteItem: function (model) {
                this.getChild($(model.el)).each(function () {
                    var m = $(this).data('model');
                    m.set('depth', parseInt(m.get('depth')) - 1);
                    if (m.get('depth') == model.get('depth')) {
                        m.set({
                            pid: model.get('pid')
                        }, {
                            silent: true
                        });
                    }
                });
            },
            saveMenu: function () {
                var ret = [];
                this.box.find('>').each(function () {
                    ret.push($(this).data('model').toJSON());
                });
                $.post('<?php echo $this->url('', ['action' => 'update']); ?>', {
                    name: '<?php echo $navigation['name']; ?>',
                    pages: ret
                }).done(function (result) {
                    result = $.parseJSON(result);
                    if (result.status == 1) {
                        systemMessage.succ(result.message);
                    }
                    isDone = false;
                });
            }
        });
        new MenuListItemView({
            collection: new MenuCollection(<?php echo json_encode($pages) ?>),
            onlyView: <?php if ($navigation['module']) {
            echo 1;
        } else {
            echo 0;
        } ?>
        });
        window.onbeforeunload = function () {
            if (isDone) {
                return '<?php echo _a('You have made unsaved changes. Would you still like to leave this page?'); ?>'
            }
        }
    })(jQuery)
</script>