{{ form_start(form, { attr:{id:form.vars.id} }) }}
<div class="qb-frm">
    <div class="row nmlf">
        <div class="col-md-12">
            {{ form_row(form.nombre, {'attr':{'class': 'form-control'} }) }}
        </div>
    </div>
    <dvi class="row nmlf">
        <div class="col-md-6">
            <div id="cntzonasdisponible" class="box-body table-responsive no-padding qb-msk ">
                <h4 class="page-header"><i class="fa fa-fw fa-globe"></i> {{ 'seleccionar_zonas' | trans({}, 'shipping_method') }}</h4>
                <ul class="cuadro_select select-options">
                    <li class="content-search">
                        <div class="row no-margin">
                            <div class="col-md-10 no-padding">
                                <div class="form-group">
                                    <input type="text" id="zona" name="zona" class="form-control"
                                       placeholder="{{ 'search' | trans({}, 'qbabitcore') }}" value="{{ app.request.get('zona') }}">
                                </div>
                            </div>
                            <div class="col-md-2 no-padding" style="text-align: right">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-default search">
                                        <i class="fa fa-search"></i>
                                    </button>
                                    <button type="submit" class="btn btn-default clean-search">
                                        <i class="fa fa-close"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </li>
                    {% for entity in entities  %}
                        <li id="itemopt_{{ entity.id }}">
                            <i class="fa fa-plus openchilds"  data-id="{{ entity.id }}"></i><input type="checkbox" name="idcheck[]" value="{{ entity.id }}"
                                   class="selitm-options minimal"/><span class="name-zona">{{ entity.nombre }}</span>
                            <input type="hidden" name="fields[id][]" value="{{ entity.id }}" class="qbhd"/>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="col-md-6">
            <div class="qb-umsk" id="cntzonas">
                <h4 class="page-header"><i class="fa fa-fw fa-globe"></i> {{ 'zonas_seleccionadas' | trans({}, 'shipping_method') }}</h4>
                <ul class="cuadro_select">
                    <li class="title">
                        <input type="checkbox" id="chkall" class="chkall minimal"/> {{ 'zona' | trans({}, 'shipping_method') }}
                        <button id="clean-list" class="btn btn-danger btn-xs pull-right "><i class="fa fa-trash"></i></button>
                    </li>
                    {% for entity in qb_grupo_zona_envio.zonaGeograficaid %}
                        <li>
                            <input type="checkbox" name="idcheck[]" value="{{ entity.id }}"
                                   class="selitm minimal" /><span class="name-zona">{{ entity.nombre }}</span>
                            <input type="hidden" name="field[id][]" value="{{ entity.id }}" class="qbhd"/>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </dvi>
    <div class="box-footer qb-btn-formater">
        <button type="submit" id="QbGrupoZonaEnvio_submit" name="QbGrupoZonaEnvio[submit]"
                class="btn btn-primary">{{ "save" | trans({}, "qbabitcore") }}
        </button>
        <button type="button" id="QbGrupoZonaEnvio_button" name="QbGrupoZonaEnvio[button]"
                class="btn">{{ "cancel" | trans({}, "qbabitcore") }}
        </button>
    </div>
</div>
{{ form_end(form) }}

<script type="text/javascript">

    function QbabitJavascripts() {

        Util.removeCallbackEvent('onselect.zona');
        Util.removeCallbackEvent('ondeselect.zona');

        UtilArbol.color = '{{ template.selectedConfiguration.color }}';
        UtilArbol.url = '{{ path('nomencladores_json_childs') }}';

        jQuery('input[type="checkbox"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-'+ UtilArbol.color
        }).trigger('click');

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

        jQuery('#clean-list').on('click', function (e) {
            e.preventDefault();
            var list = jQuery('#cntzonas .selitm:checked');
            var msgConfirm = "{{ 'js_eliminar_seleccionados' | trans({}, 'qbabitcore') }}";
            var msgSelect = "{{ 'js_seleccionar_elemento' | trans({}, 'qbabitcore') }}";

            UtilArbol.cleanList(list, msgConfirm, msgSelect);

            jQuery('.chkall').iCheck('uncheck')

        });

        jQuery('.selitm-options').on('ifToggled', function () {
            if ($(this).parent().hasClass('checked') == false)
            {
                var parent = jQuery(this).closest('li');
                Util.renderCallBacks('onselect.zona', parent);
            }
            else
            {
                var list = jQuery('#cntzonas .selitm');
                var origin_id = $(this).val();
                if (list.length) {
                    list.each(function (idx, el) {
                        var clon_id = $(el).val();
                        if(clon_id ==  origin_id){
                            var padre = $(el).closest('li');
                            padre.remove();
                        }

                    });
                }
            }
        });

        Util.registerCallBack('onselect.zona', function (objLi) {

            var _cnt = jQuery('#cntzonas');
            var _tbody = jQuery('#cntzonas').find('ul');
            var input = objLi.find('.minimal');
            var input_value = objLi.find('.qbhd');
            var nameZona = objLi.find('.name-zona');
            var clonInput = input.clone();
            var clonInputValue = input_value.clone();
            var clonName = nameZona.clone();

            var liNew = jQuery('<li></li>');

            clonInput.removeClass('selitm-options ').addClass('selitm');
            liNew.append(clonInput);
            liNew.append(clonName);
            clonInputValue.attr('name', 'field[id][]');
            liNew.append(clonInputValue);

            _tbody.append(liNew);

            liNew.find('.selitm').iCheck({
                checkboxClass: 'icheckbox_minimal-'+ UtilArbol.color +''
            }).iCheck('uncheck');
        });

        Util.registerCallBack('ondeselect.zona', function (objTR) {
            var id = objTR.find('.selitm').val();
            jQuery('#itemopt_'+ id).children().iCheck('uncheck');
            objTR.fadeOut('slow');
            objTR.remove();
        });

        jQuery('.openchilds').on('click', function (e) {
            e.preventDefault();
            // alert('voy a abrir');
            var _this = jQuery(this);
            var icono = _this;
            var padre = _this.attr('data-id');
            UtilArbol.openChildren(padre, icono);
        });

        jQuery('.search').on('click', function (e) {
            e.preventDefault();
            var _this = jQuery(this);
            var lisearch = _this.closest('li');
            var search = jQuery('#zona').val();

            if(search){
                var list = jQuery('#cntzonas .qbhd');
                var zonas_seleccionadas = [];
                if (list.length) {
                    list.each(function (idx, el) {
                        zonas_seleccionadas.push($(el).val());
                    });
                }


                MKLib.AjaxRequest(''+ UtilArbol.url +'?name=' + search + '&type=zonasgeografica', '', function (j) {
                    lisearch.siblings().remove();
                    var block = jQuery('.select-options');
                    if(j.length){
                        for (var index in j) {
                            var item = j[index];
                            UtilArbol.includeLiToUl(item, block, zonas_seleccionadas, false);
                        }
                        UtilArbol.includeIcheckChildrens(block, 'selitm-options');
                    }
                    else{
                        var message = "{{ 'no_result_found' | trans({}, 'qbabitcore') }}";
                        UtilArbol.addLiNoResultFound(block, message);
                    }
                    MKLib.unlockScreen();
                });
            }
        });

        jQuery('.clean-search').on('click', function (e) {
            e.preventDefault();
            var _this = jQuery(this);
            var lisearch = _this.closest('li');
            var search = jQuery('#zona');
            if(search.val()){
                jQuery('#zona').val('');

                var parent = '0';

                var list = jQuery('#cntzonas .qbhd');
                var zonas_seleccionadas = [];
                if (list.length) {
                    list.each(function (idx, el) {
                        zonas_seleccionadas.push($(el).val());
                    });
                }

                MKLib.AjaxRequest(''+ UtilArbol.url +'?parent='+ parent +'&type=zonasgeografica', '', function (j) {
                    lisearch.siblings().remove();
                    var block = jQuery('.select-options');
                    for (var index in j) {
                        var item = j[index];
                        UtilArbol.includeLiToUl(item, block, zonas_seleccionadas, true);
                    }
                    UtilArbol.includeIcheckChildrens(block, 'selitm-options');
                    MKLib.unlockScreen();
                });
            }
        });

        jQuery("#{{ form.vars.id }}").on('submit', function (e) {
            e.preventDefault();
            var _this = jQuery(this);

            MKLib.AjaxRequest(_this.attr('action'), _this.attr('id'), function (j) {
                var status = parseInt(j.status);
                if (status === 1) {
                    MKLib.showMsg('alert-success', '{{ "js_datos_guardados" | trans({}, "corerror") }}');
                    {% if not form.vars.value.id %}
                        MKLib.resetForm("{{ form.vars.id }}");
                        var list = jQuery('#cntzonas .selitm');
                        list.each(function (idx, el) {
                            var padre = $(el).closest('li');
                            Util.renderCallBacks('ondeselect.zona', padre);
                        });
                    {% endif %}
                } else {
                    if (status === 2) {
                        MKLib.showMsg('alert-danger', '{{ "js_acceso_denegado" | trans({}, "corerror") }}');
                    }
                }
                if (j.stringError) {
                    MKLib.showMsg('alert-danger', j.stringError);
                }
                Util.renderErrors(j.error);
                MKLib.unlockScreen();
            }, 'json');

        });

        jQuery("#QbGrupoZonaEnvio_button").on('click', function () {
            MKLib.AjaxUpdate("{{ path("qb_grupo_zona_envio_index", paramsUrl) | raw }}", 'dvupdate', '');
        });
    }

    {% if app.request.isXmlHttpRequest == false %}
    window.onload = function () {
        QbabitJavascripts();
    };
    {% else %}
    jQuery(function () {
        QbabitJavascripts();
    });
    {% endif %}
</script>