{% extends app.request.isXmlHttpRequest ? '@QbaBitCore/ajax.html.twig' : QbaBitLayoutToExtend('@QbaBitTemplate/adminlte/layout.html.twig', 'backend') %}
{% set tit = 'qbmenu_menu_items' | trans({'%menu%': menu.name}, 'menu') %}
{% set paramsUrl = {'slugSelected': app.request.get('slugSelected')} %}
{% set fake = QbaBitSeoTitle(tit) %}
{% set fake = QbaBitAssetsAddCssSource(asset('bundles/qbabittemplate/adminlte/plugins/iCheck/all.css'), true) %}
{% set fake = QbaBitAssetsAddScriptSource(asset('bundles/qbabittemplate/adminlte/plugins/iCheck/icheck.js'), true) %}
{% set urlStatus = path('qb_menu_item_status') %}
{% block update %}
    <div class="box-header with-border box-primary" style="padding: 15px 10px 10px 10px;">
        <h3 class="box-title">{{ tit }}</h3>
        <div class="box-tools pull-right qbgroup-controls">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownOptions"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="fa fa-fw fa-cogs"></span>
                    {{ 'options' | trans({}, 'qbabitcore') }}
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownOptions">
                    {% if is_granted('ROLE_MENU_NEW') %}
                        <li><a href="{{ path('qbmenu_item_edit', {menu:menu.id} | merge(paramsUrl)) }} " class="new"><i
                                        class="fa fa-plus-square"></i>{{ 'new' | trans({}, 'qbabitcore') }}
                            </a></li>
                    {% endif %}

                    {% if is_granted('ROLE_MENU_EDIT') %}
                        <li class="divider"></li>
                        <li>
                            <a href="#" data-url="{{ urlStatus }}"
                               data-status="true" class="chgstatus qballowdisabled qbisDisabled"><i
                                        class="qbcore-green fa fa-fw fa-check"></i>{{ 'activar' | trans({}, 'qbabitcore') }}
                            </a>
                        </li>
                        <li>
                            <a href="#"
                               data-url="{{ urlStatus }}"
                               data-status="false" class="chgstatus qballowdisabled qbisDisabled"><i
                                        class="qbcore-red fa fa-fw fa-close"></i>{{ 'desactivar' | trans({}, 'qbabitcore') }}
                            </a>
                        </li>
                    {% endif %}
                    {% if is_granted('ROLE_MENU_DELETE') %}
                        <li class="qbhide"><a href="#"
                                              class="del qballowdisabled qbisDisabled"><i
                                        class="fa fa-trash-o "></i> {{ 'delete' | trans({}, 'qbabitcore') }}</a>
                        </li>
                    {% endif %}
                    <li class="divider"></li>
                    <li><a href="{{ path('qbmenu_index', paramsUrl) }}" class="new"><i class="fa fa-reply"></i> {{ 'back_to_list' | trans({}, 'qbabitcore') }}</a></li>
                </ul>
            </div>
        </div>
    </div>
    <form action="#" name="frmsearch" id="frmsearch" method="post">
        <div class="row nmlf">
            <div class="col-md-3">
                <div class="form-group">
                    <label>{{ 'name' | trans({}, 'qbabitcore') }}</label>
                    <input type="text" id="namefind" name="namefind" class="form-control"
                           value="{{ app.request.get('namefind') }}">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label style="display: block;">&nbsp;</label>
                    <button type="submit" class="btn blue">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
        {% macro QbMenuItems(root, parent, space, urlStatus, menu, paramsUrl) %}
            {% import _self as macros %}
            {% for entity in root %}
                <tr class="qbsortable" style="background: #fff;" id="rw{{ entity.id }}" data-parent="{{ parent ? parent.id : '0' }}" data-id="{{ entity.id }}">
                    <td><i class="fa fa-arrows qbsortable-handler" style="cursor: move;"></i></td>
                    <td><input type="checkbox" name="idcheck[]" value="{{ entity.id }}" id="id{{ entity.id }}"
                                class="selitm minimal"/></td>
                    <td style="position: relative;">
                        {% if parent %}
                            <span class="muted"
                                  style="border-left: solid 2px #ccc; display: inline-block; position: absolute; left:15px; top: 0px; bottom: 0px;height: 100%;">
                              <span style="width: {{ space }}px; vertical-align: sub; display: inline-block; border: solid 1px #ccc;"></span>
                          </span>
                        {% endif %}
                        <span style="display: inline-block; {% if parent %} margin-left: {{ space+10 }}px;{% endif %} ">
                            <a href="{{ path('qbmenu_item_edit', {menu: menu.id, item: entity.id} | merge(paramsUrl)) }}" class="qbitem-text edit">{{ entity.name }}</a>
                        </span>
                        <input type="hidden" value="{{ entity.id }}" name="order[]">
                    </td>
                    <td class="text-center">
                        <i data-url="{{ urlStatus }}" data-status="{{ entity.active ? 'false' : 'true' }}"
                           class="qbcur-status qb-pointer {{ entity.active ? 'qbcore-green fa-check' : 'qbcore-red fa-close' }} fa fa-fw "></i>
                    </td>
                </tr>
                {% if entity.children | length %}
                    {{ macros.QbMenuItems(entity.children, entity, space+15, urlStatus, menu, paramsUrl) }}
                {% endif %}
            {% endfor %}
        {% endmacro %}

        {% import _self as macros %}
        <table class="table table-striped">
            <thead>
            <tr>
                <th style="width: 25px;"></th>
                <th style="width: 25px;"><input type="checkbox" id="chkall" class="chkall minimal"/></th>
                <th>{{ 'qbmenu_menu_item' | trans({}, 'menu') }}</th>
                <th class="text-center">{{ 'qbmenu_active' | trans({}, 'menu') }}</th>
            </tr>
            </thead>
            <tbody class="qbsortable-parent">
            {{ macros.QbMenuItems(entities, null, 20, urlStatus, menu, paramsUrl) }}
            </tbody>
        </table>
    </form>
    <script type="text/javascript">
        function QbabitJavascriptsIndexMenu() {

            jQuery('#frmsearch').on('submit', function (e) {
                e.preventDefault();
                var _listItems = jQuery('.qbitem-text');
                _listItems.closest('tr').show();
                var _search = jQuery('#namefind').val().split(' ');

                for (var i = 0; i < _listItems.length; i++) {
                    var item = jQuery(_listItems[i]);
                    var value = item.html().trim().toLocaleLowerCase();

                    var found = false;
                    var j = 0;
                    while (j < _search.length && !found) {

                        if (value.indexOf(_search[j].trim().toLocaleLowerCase()) >= 0) {
                            found = true
                        }

                        j++;
                    }

                    if(!found){
                        item.closest('tr').hide();
                    }
                }

                return false;
            });

            var _sortable = jQuery('.qbsortable-parent').sortable({
                //items: '.dz-preview',
                handle: '.qbsortable-handler',
                cursor: 'move',
                /*opacity: 0.5,*/
                cancel: '.qbdisabled',
                //containment: "parent",
                // distance: 20,
                tolerance: 'pointer',
                update: function (e, ui) {
                    MKLib.AjaxSilent('{{ path('qbmenu_items_order') }}', 'frmsearch', function (j) {
                    }, 'json');
                },
                start: function (e, ui) {
                    var parentid = ui.item.data('parent');
                    _sortable.sortable("option", "items", '.qbsortable[data-parent="' + parentid + '"]');
                    _sortable.sortable('refresh');

                },
                stop: function (e, ui) {
                    _sortable.sortable("option", "items", '.qbsortable');
                    _sortable.sortable('refresh');
                }
            });


            jQuery('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
                checkboxClass: 'icheckbox_minimal-blue',
                radioClass: 'iradio_minimal-blue'
            }).trigger('click');

            jQuery('#chkall').on('ifToggled', function () {
                MKLib.checkedCtrl(jQuery(this), '.selitm', function (status, ele) {
                    ele.iCheck(status ? 'check' : 'uncheck');
                });
            });

            jQuery('.selitm').on('ifToggled', function () {
                var _options = jQuery('.qballowdisabled');
                var _this = jQuery(this);
                var length = jQuery('.selitm:checked').length;
                if (length) {
                    _options.removeClass('qbisDisabled');
                } else {
                    _options.addClass('qbisDisabled');
                }
            });

            jQuery('.del').on('click', function (e) {
                e.preventDefault();
                var list = jQuery('#frmsearch .selitm:checked');
                if (list.length) {
                    if (confirm("{{ 'js_eliminar_seleccionados' | trans({}, 'qbabitcore') }}")) {
                        MKLib.AjaxRequest("{{ path('qbmenu_item_delete') }}", 'frmsearch', function (j) {

                            var status = parseInt(j.status);
                            if (status === 1) {
                                MKLib.deleteItem(j.ids, function () {
                                    MKLib.showMsg('alert-success', "{{ 'js_eliminados_correctamente' | trans({}, 'qbabitcore') }}");
                                }, 'rw');
                            } else {
                                if (status === 2)
                                    MKLib.showMsg('alert-danger', "{{ 'js_acceso_denegado' | trans({}, 'qbabitcore') }}");
                                else
                                    MKLib.showMsg('alert-danger', "{{ 'js_error_eliminar_datos' | trans({}, 'qbabitcore') }}");
                            }
                            MKLib.unlockScreen();

                        }, 'json', 'DELETE');
                    }
                } else
                    MKLib.showMsg('alert-danger', "{{ 'js_seleccionar_elemento' | trans({}, 'qbabitcore') }}");
            });

            // MKAjax.setAjaxUpdateForm('frmsearch', '', 'dvupdate', function () {
            // });
            //MKAjax.paginate('.edit, .new', 'dvupdate', 'frmsearch');
            jQuery('.edit, .new').on('click', function (e) {
                e.preventDefault();
                var _this = jQuery(this);
                MKLib.AjaxUpdate(_this.attr('href'), 'dvupdate', 'frmsearch', 'get');
                return false;
            })

            Util.changeStatusManager("{{ 'js_change_status_successfully' | trans({}, 'qbabitcore') }}", "{{ 'js_change_status' | trans({}, 'qbabitcore') }}", "{{ 'js_seleccionar_elemento' | trans({}, 'qbabitcore') }}", 'frmsearch');
        }


        {% if app.request.isXmlHttpRequest == false %}
        window.addEventListener('load', function () {
            QbabitJavascriptsIndexMenu();
        }, false);
        {% else %}
        jQuery(function () {
            QbabitJavascriptsIndexMenu();
        });
        {% endif %}
    </script>
{% endblock %}