<?php
$this->css($this->assetModule('admin/admin.css'));
$this->jQuery();
$this->backbone();
?>
<div id="page-nav" class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th style="width: 250px;"><?php echo _a('Title'); ?></th>
            <th style="width: 200px;"><?php echo _a('Setup'); ?></th>
            <th style="width: 200px;"><?php echo _a('Related'); ?></th>
            <th><?php echo _a('Action'); ?></th>
        </tr>
        </thead>
        <tbody>
        <tr class="none-set">
            <td></td>
            <td colspan="3">
                <span class="btn btn-secondary <?php if (!$navGlobal) {
                    echo 'active';
                } else {
                    echo 'js-apply';
                } ?>"><?php echo _a('None to use'); ?></span>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script id="temp-nav" type="text/template">
    <td>
        <%- title %>
    </td>
    <td>
        <span class="btn <% if(name == '<?php echo $navGlobal; ?>') {  print('btn-primary'); } else { print('btn-secondary js-apply'); } %> "
              data-name="<%= name %>"><?php echo _a('Set global'); ?></span>
    </td>
    <td>
        <% if(module) { %>
        <%= module %>
        <% } else { %>
        <?php echo _a('Custom'); ?>
        <% } %>
    </td>
    <td>
        <div class="btn-group btns-indent">
            <% if(module) { %>
            <a class="btn btn-link" href="<%= editUrl%>"><?php echo _a('View'); ?></a>
            <span class="btn btn-link js-clone">
                <?php echo _a('Clone'); ?>
            </span>
            <% } else { %>
            <a class="btn btn-link" href="<%= editUrl%>"><?php echo _a('Edit'); ?></a>
            <span class="btn btn-link js-delete"><?php echo _a('Delete'); ?></span>
            <% } %>
        </div>
    </td>
</script>
<script>
    (function ($) {
        var urlRoot = '<?php echo $this->url('', ['controller' => $controller]); ?>';
        var modal = $('<div>', {'class': 'modal fade'}).appendTo(document.body);
        var NavItemView = Backbone.View.extend({
            tagName: 'tr',
            template: $('#temp-nav').html(),
            events: {
                'click .js-clone': 'cloneAction',
                'click .js-delete': 'deleteAction'
            },
            initialize: function () {
                this.model.set('editUrl', urlRoot + 'data?name=' + this.model.get('name'));
                this.model.on('destroy', this.remove, this);
            },
            cloneAction: function () {
                var self = this;
                $.get(urlRoot + 'clone', {
                    name: this.model.get('name')
                }).done(function (res) {
                    modal.html(res).modal('show');
                    formModule.success = function (res) {
                        modal.modal('hide');
                        self.model.collection.add(res.navigation);
                    }
                });
            },
            deleteAction: function () {
                if (confirm('<?php echo _a('Are you sure to delete this navigation') ?>')) {
                    this.model.destroy({
                        url: urlRoot + 'delete?name=' + this.model.get('name')
                    });
                }
            },
            render: function () {
                this.$el.html(_.template(this.template, this.model.toJSON()));
                if (this.$('.btn-primary').length) {
                    this.$('.js-delete').addClass('hide')
                }
                return this;
            }
        });
        var NavListView = Backbone.View.extend({
            el: $('#page-nav'),
            events: {
                'click .js-apply': 'applyAction',
                'click .js-add': 'addAction'
            },
            initialize: function () {
                this.noset = this.$('.none-set');
                this.render();
                this.collection.on('add', this.addOne, this);
            },
            applyAction: function (e) {
                var el = $(e.currentTarget),
                    name = el.attr('data-name');
                $.post(urlRoot + 'apply', {
                    nav_front: name || ''
                }).done(_.bind(function () {
                    this.$('.btn.btn-primary').removeClass('btn-primary').addClass('btn-secondary js-apply');
                    this.$('.js-delete.hide').removeClass('hide');
                    el.addClass('btn-primary').removeClass('js-apply btn-secondary');
                    el.parents('tr').find('.js-delete').addClass('hide');
                }, this));
            },
            addAction: function () {
                var self = this;
                $.get('<?php echo $this->url('', ['action' => 'add']); ?>').done(function (res) {
                    modal.html(res).modal('show');
                    formModule.success = function (res) {
                        modal.modal('hide');
                        self.collection.add(res.navigation);
                    }
                });
            },
            render: function () {
                var c = this.collection.models;
                for (var i = 0, l = c.length; i < l; i++) {
                    this.addOne(c[i]);
                }
            },
            addOne: function (model) {
                new NavItemView({
                    model: model
                }).render().$el.insertBefore(this.noset);
            }
        });
        new NavListView({
            collection: new Backbone.Collection(<?php echo json_encode($navList); ?>)
        });
    })(jQuery)
</script>