{% extends "form_div_layout.html.twig" %}

{%- block form_widget_simple -%}
    {% spaceless %}
    {% if include_errors is defined %}
        <div class="{{name}}{% if errors|length > 0 %} control-group has-error{% endif %}">
        {{ form_errors(form) }}
    {% endif %}
        {{ parent() }}
    {% if include_errors is defined %}
        </div>
    {% endif %}
{% endspaceless %}
{%- endblock form_widget_simple -%}

{% block form_row %}
{% spaceless %}
    <div class="form-group {{name}} {% if errors|length > 0 %} has-error has-feedback{% endif %}">
        {{ form_label(form) }}
        {{ form_errors(form) }}
        {{ form_widget(form) }}
    </div>
{% endspaceless %}
{% endblock form_row %}

{%- block widget_attributes_base -%}
    id="{{ id }}" name="{{ full_name }}"
    {%- if disabled %} disabled="disabled"{% endif -%}
    {%- if required %} required="required"{% endif -%}
    {%- for attrname, attrvalue in attr -%}
        {{- " " -}}
        {%- if attrname in ['placeholder', 'title'] -%}
            {{- attrname }}="{{ translation_domain is same as(false) ? attrvalue : attrvalue|trans({}, translation_domain) }}"
        {%- elseif attrvalue is same as(true) -%}
            {{- attrname }}="{{ attrname }}"
        {%- elseif attrvalue is not same as(false) -%}
            {{- attrname }}="{{ attrvalue }}"
        {%- elseif attrname == 'class' %}
            class="{{- attrvalue -}} form-control"
        {%- else -%}
            {{- attrname -}}="{{- attrvalue -}}"
        {%- endif -%}
    {%- endfor -%}
{%- endblock widget_attributes_base -%}

{%- block widget_attributes -%}
    {{ block('widget_attributes_base') }} class="form-control"
{%- endblock widget_attributes -%}

{% block choice_widget_expanded -%}
    {% for child in form %}
    <div {% if id is not empty %} id="{{ id }}" {% endif %}
         {%- for attrname, attrvalue in attr %} {% if attrname == 'class' %} class="{{ attrvalue }}" {% endif %} {%- else -%} class="radio" {%- endfor -%}> 
        {{- form_widget(child) -}}
        {{- form_label(child) -}}
    </div>
    {% endfor %}
{%- endblock choice_widget_expanded %}

{%- block radio_widget -%}
    <input type="radio" {{ block('widget_attributes_base') }} {% if value is defined %} value="{{ value }}"{% endif %} {% if checked %} checked="checked"{% endif %} />
{%- endblock radio_widget -%}


{%- block checkbox_widget -%}
    <label for="{{ id }}">
        <input type="checkbox" {{ block('widget_attributes_base') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
    </label>
{%- endblock checkbox_widget -%}    

{% block form_errors %}
    {% spaceless %}
        {% if errors|length > 0 %}
        <div class="alert alert-block alert-danger fade in">
            <button type="button" class="close" data-dismiss="alert">×</button>
            {{ parent() }}
        </div>
        {% endif %}
    {% endspaceless %}
{% endblock form_errors %}

{% block autocomplete_entity_widget %}
    {#{ form_row(form) }#}
    <div class="form-group {{name}} {% if errors|length > 0 %} has-error has-feedback{% endif %}">
        {{ form_label(form) }}
        {{ form_errors(form) }}
        {% if not form.vars.collection %}{{ form_widget(form) }}{% endif %}
        
        <input type="text" child-name="{{ full_name }}[]" data-id="{{ form.vars.id }}" data-url="{{ form.vars.update_route }}" data-collection="{{ form.vars.collection }}" class="autocomplete form-control" value="{{ form.vars.data.name|default('') }}">
        <script src="{{ asset('bundles/flcore/js/jquery.tokeninput.js') }}" type="text/javascript"></script>
        <link href="{{ asset('bundles/flcore/css/token-input.css') }}" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            $(function(){
                var $this = $('input[data-id="{{ form.vars.id }}"]');
                /*autocomplete de colecciones*/
                if ($this.data('collection') == 1){
                        $this.tokenInput(
                             $this.data('url'),{
                                 queryParam:'term',
                                 propertyToSearch: "label",
                                 preventDuplicates:true,
                                 onAdd: function(item){
                                     var parent = $this.parent();
                                     var name = $(parent).find('input:hidden').attr('child-name');
                                     var id = $(parent).find('input:hidden').attr('id');
                                     var input = $('<input/>',{name: name,id:id+'_'+item.id,type:'hidden',value:item.id});
                                     $($this).append(input);
                                 },
                                 onDelete: function(item){
                                     var parent = $this.parent();
                                     var id = $(parent).find('input:hidden').attr('id');
                                     $('#'+id+"_"+item.id).remove();
                                 }
                             }
                        );
                /*autocomplete de una unica entidad*/
                }else{
                    $this.autocomplete({
                        source: $this.data('url'),
                        minLength: 1,
                        select: function( event, ui ) {
                            $('#' + $this.data('id')).val(ui.item.id);
                            $('#' + $this.data('id')).trigger('change');
                        }
                    });
                }
            });
        </script>
    </div>
{% endblock %}

{% block autocomplete_add_entity_widget %}
    <div class="form-group {{name}} {% if errors|length > 0 %} has-error has-feedback{% endif %}">
        {{ form_widget(form) }}
        <script type="text/javascript">
            $(function(){
                var e = $("#{{ form.vars.id }}");
                var allow_add = {{ (form.vars.allow_add)?1:0 }};
                var multiple = ($(e).attr("multiple")=="multiple");

                var txt_no_se_encuentra = (allow_add)?"¡No se encuentra! Presione Enter para agregar ":"¡No se encuentra!";
                var txt_placeholder = (multiple)?"Seleccione una o varias opciones":"Seleccione una opción";

                $(e).attr("data-placeholder",txt_placeholder);

                $(e).chosen({no_results_text: txt_no_se_encuentra, width: "100%", allow_add_new: allow_add , allow_single_deselect: true});
                //$(e).chosen({no_results_text: txt_no_se_encuentra, width: "90%", allow_add_new: allow_add, allow_single_deselect: true});
                //$(e).chosen({no_results_text: txt_no_se_encuentra, width: "20%", allow_add_new: allow_add});                
                
            });
        </script>
    </div>
{% endblock %}