{# src/geosapiens/propesqBundle/Resources/view/Form/fields.html.twig #}


{% block customtime_widget %}
    {% spaceless %}
        {% if widget == 'single_text' %}
            {{ block('field_widget') }}
            <script>
                $(document).ready(function(){
                    $timeField = $('#{{ id }}');
                    $timeField.mask('00:00');
                    $timeField.attr('pattern', '^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$');
                    $timeField.on('focusout', function () {
                        var idHora = $(this).attr('id');
                        var label = $('label[for="' + idHora + '"]').html();
                        $("#{{id}}_error").attr('hidden', true);
                        if(!validaHora(idHora)){
                            $(this).setError('O "' + label + '" deve ser uma hora válida.')
                        }else{
                            $(this).setError(false);
                        }
                    });
                    $("#{{id}}")[0].addEventListener('invalid', function(event){
                        var elementLabel = $("label[for={{id}}]");
                        
                        if($("#{{id}}_error")[0] != undefined){
                            $(this).setError(false);
                            $("#{{id}}_error").removeAttr('hidden');
                        }else{
                            $("#{{id}}").setError('Informar uma hora válida');
                        }

                        $("#{{id}}").css({
                            "border-color": "rgb(185, 74, 72)",
                            "color": "rgb(185, 74, 72)"
                        });
                        if(elementLabel[0] != undefined && elementLabel.is(':visible')){
                            elementLabel.css({
                                "border-color": "rgb(185, 74, 72)",
                                "color": "rgb(185, 74, 72)"
                            });
                        }

                        if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == ({{id}}).id){
                            localStorage.setItem('scrolling', ({{id}}).id);
                            if(elementLabel[0] != undefined && elementLabel.is(':visible')){
                                $('html,body').animate({scrollTop: (elementLabel.offset().top) - 35}, 1000);
                            }else{
                                $('html,body').animate({scrollTop: ($('#{{id}}').offset().top) - 35}, 1000);
                            }
                        }
                        event.preventDefault();
                    });
                    $("#{{id}}")[0].addEventListener('input', function(event){
                        if(validaHora($("#{{id}}").attr('id'))){
                            $("#{{id}}_error").attr('hidden', true);

                            $("label[for={{id}}]").css({
                                "border-color": "",
                                "color": ""
                            });
                            $("#{{id}}").css({
                                "border-color": "",
                                "color": ""
                            });

                            if(localStorage.getItem('scrolling') == ({{id}}).id){
                                localStorage.setItem('scrolling', '');
                            }
                        }
                    });
                });
            </script>
        {% else %}
            <div {{ block('widget_container_attributes') }}>
                {{ form_widget(form.hour, { 'attr': { 'size': '1' } }) }}:{{ form_widget(form.minute, { 'attr': { 'size': '1' } }) }}{% if with_seconds %}:{{ form_widget(form.second, { 'attr': { 'size': '1' } }) }}{% endif %}
            </div>
        {% endif %}
    {% endspaceless %}
{% endblock customtime_widget %}



{% block choice_widget %}
    {% spaceless %}
        {% if expanded %}
            <div {{ block('widget_container_attributes') }}>
                {% for child in form %}
                    <label class="radio">
                        {{ form_widget(child) }}
                        {{child.get('label') }}
                    </label>
                    {#{ form_label(child) }#}
                {% endfor %}
            </div>
            <script>
                {% if required %}
                    $(document).ready(function(){
                        $('input', $('#{{id}}')).each(function() {
                            $(this)[0].addEventListener('invalid', function(event){
                                $("#{{id}}_error").removeAttr('hidden');
                                $("label[for={{id}}]").css({
                                    "border-color": "rgb(185, 74, 72)",
                                    "color": "rgb(185, 74, 72)"
                                });
                                if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == ({{id}}).id){
                                    localStorage.setItem('scrolling', ({{id}}).id);
                                    $('html,body').animate({scrollTop: ($("label[for={{id}}]").offset().top) - 35}, 1000);
                                }
                                event.preventDefault();
                            });
                            $(this)[0].addEventListener('input', function(event){
                                if($(this)[0].validity.valid){
                                    $("#{{id}}_error").attr('hidden', true);
                                    $("label[for={{id}}]").css({
                                        "border-color": "",
                                        "color": ""
                                    });
                                    if(localStorage.getItem('scrolling') == ({{id}}).id){
                                        localStorage.setItem('scrolling', '');
                                    }
                                }
                            });
                        });
                    });
                {% endif %}
            </script>
        {% else %}
            {% if origem == 'ponto' %}
            <div id="{{ id }}_format_container" class="input-prepend" style="{% if hide %}display:none;{% endif %}margin-bottom: 5px;">
                {% if title %}<span id="{{ id }}_span" class="add-on">Formato&nbsp;&nbsp;</span>{% endif %}
            {% endif %}
                <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %} {% if (isShow is defined and isShow) %} disabled="disabled" {% endif %}>

                    {% if empty_value is not none %}
                        {% if origem == "ponto" %}
                            <option value="" class="hide">{{ empty_value|trans }}</option>
                        {% else %}
                            <option value="">{{ empty_value|trans }}</option>
                        {% endif %}
                    {% endif %}
                    {% if preferred_choices|length > 0 %}
                        {% set options = preferred_choices %}
                        {{ block('widget_choice_options') }}
                        {% if choices|length > 0 and separator is not none %}
                            <option disabled="disabled">{{ separator }}</option>
                        {% endif %}
                    {% endif %}
                    {% set options = choices %}
                    {{ block('widget_choice_options') }}
                </select>
            {% if origem == 'ponto' %}
                </div>
                {% if not hide %}
                    &nbsp;&nbsp;
                {% else %}
                    <script>
                        $(document).ready(function(){
                            $('#{{ id }}').val(2);
                            localStorage.setItem("lastFormat", 2);
                        });
                    </script>
                {% endif %}
            {% endif %}
        {% endif %}
    {% endspaceless %}
{% endblock choice_widget %}

{% block point_widget %}
{% spaceless %}
    {# type="number" doesn't work with floats #}
    {% set type = type|default('text') %}

    <div id="{{ id }}_lat_container" class="input-prepend" style="margin-bottom: 5px;">
        {% if title == true %}
            {% set index = id | split('_')[4] %}
            <span id="{{ id }}_lat_span" class="add-on">Latitude&nbsp;&nbsp;</span>
            {% if(isShow is defined  and isShow)  %}
                {% set attr = {'class': 'hasfocus', 'disabled': 'disabled'} %}
            {% else %}
                {% set attr = {'class': 'hasfocus', 'cydata':'geoPontoLat' ~ index} %}
            {% endif %}
        {% else %}
            {% set attr = {'class': 'cemporcento', 'placeholder': 'Latitude', 'title': 'Latitude'} %}
        {% endif %}
            <input {% for attrname,attrvalue in attr %} {{attrname}}="{{attrvalue}}"{% endfor %}
                    type="{{ type }}"
                    {% if required == true %}
                        required="required"
                    {% endif %}
                    id="{{ id }}lat"
                    name="{{ full_name }}[lat]"
                    {% if value is not empty %}
                            value="{%-if value['lat'] is not null -%}
                                {{- value['lat'] -}}
                            {%-endif-%}"
                    {% endif %}
                    />
            <div id="{{ id }}_lat_error" style="color: rgb(185, 74, 72); height: 40px;  max-width: 230px; display: none;"></div>
    </div>
{% endspaceless %}
{% spaceless %}
    {# type="number" doesn't work with floats #}
    {% set type = type|default('text') %}
     {#<br/>#}&nbsp;&nbsp;
    <div id="{{ id }}_lng_container" class="input-prepend">
        {% if title == true %}
            {% set index = id | split('_')[4] %}
            <span id="{{ id }}_lng_span" class="add-on">Longitude</span>
            {% if(isShow is defined  and isShow)  %}
                {% set attr = {'class': 'insertaction', 'disabled': 'disabled'} %}
            {% else %}
                {% set attr = {'class': 'insertaction', 'cydata':'geoPontoLng' ~ index} %}
            {% endif %}
        {% else %}
            {% set attr = {'class': 'cemporcento', 'placeholder': 'Longitude', 'title': 'Longitude'} %}
        {% endif %}
        <input {% for attrname,attrvalue in attr %} {{attrname}}="{{attrvalue}}"{% endfor %}
            type="{{ type }}"
            {% if required == true %}
                required="required"
            {% endif %}
            id="{{ id }}lng"
            name="{{ full_name }}[lng]"
            {% if value is not empty %}
                value="{%-if value['lng'] is not null %}
                            {{- value['lng'] -}}
                        {%endif%}"
            {% endif %}
            {#onkeydown="removeCaracter(this, event, false)" onkeypress="return formataCoordenada(this, event, false)"#}

        />
            <div id="{{ id }}_lng_error" style="color: rgb(185, 74, 72); height: 40px; display: none; max-width: 230px;"></div>
        <script>
            var isCoordenadaValida = true;
            var isCoordenadaLatitudeValida = true;
            var isCoordenadaLongitudeValida = true;

            $(document).ready(function(){
                $lat = $('#{{ id }}lat');
                $lng = $('#{{ id }}lng');

                var tipo = $('#{{ id }}Formato').val();
                var localStorageFormat = localStorage.getItem("lastFormat");
                if(!localStorageFormat){
                    localStorage.setItem("lastFormat", '2');
                    localStorageFormat = 2;
                }

                if(!tipo){
                    tipo = localStorageFormat;
                }else{
                    localStorage.setItem("lastFormat", tipo);
                }
                $('#{{ id }}Formato option[value="'+tipo+'"]').attr('selected','selected');    //localStorageFormat = 2;
                $('#{{ id }}Formato').data('formatoAnterior', tipo);
                var lat = $lat.val();
                var lng = $lng.val();



                if(lat && lng) {
                    {% if feature == 'habilitar' %}
                        array = converteCoordenadas(tipo, lat, lng);
                        $lat.val(array['lat']);
                        $lng.val(array['lng']);
                    {% endif %}
                }
                setMaskLatLng{{ id }}(tipo, '{{ id }}');

                function setMaskLatLng{{ id }}(tipo) {

                    $lat = $('#{{ id }}lat');
                    $lng = $('#{{ id }}lng');
                    $lat.unmask();
                    $lng.unmask();
                    $lat.removeAttr("placeholder");
                    $lng.removeAttr("placeholder");
                    if(tipo) {
                        if (tipo == "1") {
                            $lat.attr("placeholder", "GG°MM'SS,SSS''N/S");
                            $lng.attr("placeholder", "GGG°MM'SS,SSS''W/E");
                            maskLat = "GG°MM'SS,SSS''C";
                            maskLng = "GGG°MM'SS,SSS''C";
                        } else if (tipo == "2") {
                            $lat.attr("placeholder", "GG°MM'SS''N/S");
                            $lng.attr("placeholder", "GGG°MM'SS''W/E");
                            maskLat = "GG°MM'SS''C";
                            maskLng = "GGG°MM'SS''C";
                        } else if (tipo == "3") {
                            $lat.attr("placeholder", "GG°MM,MMM'N/S");
                            $lng.attr("placeholder", "GGG°MM,MMM'W/E");
                            maskLat = "GG°MM,MMM'C";
                            maskLng = "GGG°MM,MMM'C";
                        } else if (tipo == "4") {
                            $lat.attr("placeholder", "{{ 'GG,DDD...' | trans }}");
                            $lng.attr("placeholder", "{{ 'GG,DDD...' | trans }}");
                            maskLat = "TGG,GGGDDDDDD";
                            maskLng = "TGGG,GGGDDDDDD";
                        }
                        $lat.mask(maskLat, pointFormats.GMS.latitude);

                        $lat.on('focusout', function(e){
                            var currentElement = this;
                            var idFormato = $(currentElement).attr('id');
                            idFormato = "#"+idFormato.substring(0 , idFormato.length - 3 ) + 'Formato';
                            var formatoFocusOut = $(idFormato).val();
                            var val = $(currentElement).val();
                            var event = e;

                            if (typeof ajaxPontos !== 'undefined') {
                                ajaxPontos = false;
                            }
                            if(formatoFocusOut == "4"){
                                 pointFormats.GD.latitude.validate(val, currentElement);
                            }else{
                                pointFormats.GMS.latitude.validate(val, currentElement);
                            }
                        });

                        $lng.mask(maskLng, pointFormats.GMS.longitude);

                        $lng.on('focusout', function(e){

                            var currentElement = this;
                            var idFormato = $(currentElement).attr('id');
                            idFormato = "#"+idFormato.substring(0 , idFormato.length - 3 ) + 'Formato';
                            var formatoFocusOut = $(idFormato).val();
                            var val = $(currentElement).val();
                            var event = e;

                            if (typeof ajaxPontos !== 'undefined') {
                                ajaxPontos = false;
                            }

                            if(formatoFocusOut == "4"){
                                pointFormats.GD.longitude.validate(val, currentElement);
                            }else{
                                pointFormats.GMS.longitude.validate(val, currentElement);
                            }


                        });

                    }
                }

                $(window).bind("resize", resizeWindow);
                function resizeWindow( e ) {
                    {% if title == true %}
                        if ($('#{{ id }}_lat_span').width() + $lat.width() == 203) {
                            $('#{{ id }}_lat_error').width(170);
                        } else {
                            $('#{{ id }}_lat_error').width($('#{{ id }}_lat_span').width() + $lat.width());
                        }

                        if ($('#{{ id }}_lng_span').width() + $('#{{ id }}lng').width() == 205) {
                            $('#{{ id }}_lng_error').width(170);
                        } else {
                            $('#{{ id }}_lng_error').width($('#{{ id }}_lng_span').width() + $('#{{ id }}lng').width());
                        }
                    {% else %}
                        $('#{{ id }}_lat_error').width($('#{{ id }}lat').width() - 41);
                        $('#{{ id }}_lng_error').width($('#{{ id }}lng').width() - 41);
                    {% endif %}
                }

                {% if title == true %}
                    if ($('#{{ id }}_lat_span').width() + $('#{{ id }}lat').width() == 203) {
                        $('#{{ id }}_lat_error').width(170);
                    } else {
                        $('#{{ id }}_lat_error').width($('#{{ id }}_lat_span').width() + $('#{{ id }}lat').width());
                    }

                    if ($('#{{ id }}_lng_span').width() + $('#{{ id }}lng').width() == 205) {
                        $('#{{ id }}_lng_error').width(170);
                    } else {
                        $('#{{ id }}_lng_error').width($('#{{ id }}_lng_span').width() + $('#{{ id }}lng').width());
                    }
                {% else %}
                    $('#{{ id }}_lat_error').width($('#{{ id }}lat').width() - 41);
                    $('#{{ id }}_lng_error').width($('#{{ id }}lng').width() - 41);
                {% endif %}
            });
            $("#{{ id }}lng").focusout(function (){
                validaCampos{{ id }}();
            });

            $("#{{ id }}lat").focusout(function (){
                validaCampos{{ id }}();
            });
            $(document).on('DOMNodeInserted', function(e) {
                if( e.target.className == 'alert alert-error') {
                    setTimeout(function() {
                        isCoordenadaValida = false;
                        $('button[type="submit"]').removeAttr("disabled");
                    }, 200);

                }
            });
            $('form').submit(function(){
                var isCoordenadaValida =  validaCampos{{ id }}();
                var tipo = $('#{{ id }}Formato').val();
                var $latField = $('#{{ id }}lat');
                var lat =  $($latField).val();
                var $lngField = $('#{{ id }}lng');
                var lng = $($lngField).val();

                var coordenadaLatValidaSubmit = true;
                if(tipo == "4"){
                    coordenadaLatValidaSubmit = pointFormats.GD.latitude.validate(lat, $latField);
                }else{
                    coordenadaLatValidaSubmit = pointFormats.GMS.latitude.validate(lat, $latField);
                }

                var coordenadaLngValidaSubmit = true;
                if (tipo == "4") {
                    coordenadaLngValidaSubmit =   pointFormats.GD.longitude.validate(lng, $lngField);
                } else {
                    coordenadaLngValidaSubmit = pointFormats.GMS.longitude.validate(lng, $lngField);
                }

                if(!coordenadaLngValidaSubmit || !coordenadaLatValidaSubmit){
                    isCoordenadaValida = false;
                }
                return isCoordenadaValida;
            });

            /*
            *  Se campo latitude for informado, é obrigatório informar o campo longitude e vice-versa
            * */
            function validaCampos{{ id }}() {

                isCoordenadaValida = true;
                //$('#{{ id }}lng').setError(false);
                //$('#{{ id }}lat').setError(false);

                if (eval("{{ id }}lat").value != "" && eval("{{ id }}lng").value == "") {
                    var invalidMessage = "Por favor infornar uma coordenada válida para longitude.";
                    $('#{{ id }}lng').setError(invalidMessage);

                    $('button[type="submit"]').removeAttr("disabled");
                    isCoordenadaValida = false;
                } else if (eval("{{ id }}lat").value == "" && eval("{{ id }}lng").value != "") {



                    var invalidMessage = "Por favor infornar uma coordenada válida para latitude.";
                    $('#{{ id }}lat').setError(invalidMessage);


                    $('button[type="submit"]').removeAttr("disabled");
                    isCoordenadaValida = false;
                }
                return isCoordenadaValida;
            }

            {{ id }}lat = document.getElementById('{{ id }}lat');
            {{ id }}lng = document.getElementById('{{ id }}lng');

            $('#{{ id }}lat')[0].addEventListener('invalid', function(event){
                $('#{{ id }}lat').setError("Por favor infornar uma coordenada válida para latitude.");
                $('#{{ id }}lat').css({
                    "border-color": "rgb(185, 74, 72)",
                    "color": "rgb(185, 74, 72)"
                });

                var labelFor = (({{id}}lat).id).replace(/_\d_geoPonto(\w)*/, '');
                $('label[for='+labelFor+'').css({
                    "border-color": "rgb(185, 74, 72)",
                    "color": "rgb(185, 74, 72)"
                });                
                $("span[id={{id}}_lat_span]").css({
                    "border-color": "rgb(185, 74, 72)",
                    "color": "rgb(185, 74, 72)"
                });
                
                if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == ({{id}}lat).id){
                    localStorage.setItem('scrolling', ({{id}}lat).id);
                    $('html,body').animate({scrollTop: ($('label[for='+labelFor+']').offset().top) - 35}, 1000);
                }
                event.preventDefault();
            });
            
            $('#{{ id }}lat')[0].addEventListener('input', function(event){
                if($('#{{ id }}lat')[0].validity.valid){
                    $('#{{ id }}lat').setError(false);
                    $('#{{ id }}lat').css({
                        "border-color": "",
                        "color": ""
                    });
                    
                    var labelFor = (({{id}}lat).id).replace(/_\d_geoPonto(\w)*/, '');
                    $('label[for='+labelFor+'').css({
                        "border-color": "",
                        "color": ""
                    });                
                    $("span[id={{id}}_lat_span]").css({
                        "border-color": "",
                        "color": ""
                    });

                    if(localStorage.getItem('scrolling') == ({{id}}lat).id){
                        localStorage.setItem('scrolling', '');
                    }
                }
            });
            
            $('#{{ id }}lng')[0].addEventListener('invalid', function(event){
                $('#{{ id }}lng').setError("Por favor infornar uma coordenada válida para longitude.");
                $('#{{ id }}lng').css({
                    "border-color": "rgb(185, 74, 72)",
                    "color": "rgb(185, 74, 72)"
                });

                var labelFor = (({{id}}lng).id).replace(/_\d_geoPonto(\w)*/, '');
                $('label[for='+labelFor+'').css({
                    "border-color": "rgb(185, 74, 72)",
                    "color": "rgb(185, 74, 72)"
                });
                $("span[id={{id}}_lng_span]").css({
                    "border-color": "rgb(185, 74, 72)",
                    "color": "rgb(185, 74, 72)"
                });
                
                if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == ({{id}}lng).id){
                    localStorage.setItem('scrolling', ({{id}}lng).id);
                    $('html,body').animate({scrollTop: ($('label[for='+labelFor+']').offset().top) - 35}, 1000);
                }
                event.preventDefault();
            });
            
            $('#{{ id }}lng')[0].addEventListener('input', function(event){
                if($('#{{ id }}lng')[0].validity.valid){
                    $('#{{ id }}lng').setError(false);
                    $('#{{ id }}lng').css({
                        "border-color": "",
                        "color": ""
                    });
                    
                    var labelFor = (({{id}}lng).id).replace(/_\d_geoPonto(\w)*/, '');
                    $('label[for='+labelFor+'').css({
                        "border-color": "",
                        "color": ""
                    });                
                    $("span[id={{id}}_lng_span]").css({
                        "border-color": "",
                        "color": ""
                    });

                    if(localStorage.getItem('scrolling') == ({{id}}lng).id){
                        localStorage.setItem('scrolling', '');
                    }
                }
            });

            $('#{{ id }}Formato').on('change', function () {
                var formatoAnterior = $(this).data('formatoAnterior');
                var formatoFuturo = $(this).val();
                $(this).data('formatoAnterior', formatoFuturo);
                $lat = $('#{{ id }}lat');
                $lng = $('#{{ id }}lng');
                var lat = $lat.val();
                var lng = $lng.val();

                var hasErrorLat = true;
                var hasErrorLng = true;
                if(formatoAnterior == 4){
                    hasErrorLat = !pointFormats.GD.latitude.validate(lat, $lat);
                    hasErrorLng = !pointFormats.GD.longitude.validate(lng, $lng);

                }else{
                    hasErrorLat = !pointFormats.GMS.latitude.validate(lat, $lat);
                    hasErrorLng = !pointFormats.GMS.longitude.validate(lng, $lng);
                }

                if(hasErrorLat){
                    lat = '';
                }

                if(hasErrorLng){
                    lng = '';
                }


                setTimeout(function () {
                    array = reverteCoordenadas(formatoAnterior, formatoFuturo, lat, lng);
                    $('#{{ id }}lat').val(array['lat']);
                    $('#{{ id }}lng').val(array['lng']);
                },100);
                if (typeof(Storage) !== "undefined") {
                    localStorage.setItem("lastFormat", formatoFuturo);
                }



                setMaskLatLng(formatoFuturo, '{{ id }}');


            });

            function setMaskLatLng(tipo, id) {



                $lat = $('#'+id+'lat');
                $lng = $('#'+id+'lng');
                $lat.unmask();
                $lng.unmask();
                $lat.removeAttr("placeholder");
                $lng.removeAttr("placeholder");
                if(tipo) {
                    if (tipo == "1") {
                        $lat.attr("placeholder", "GG°MM'SS,SSS''N/S");
                        $lng.attr("placeholder", "GGG°MM'SS,SSS''W/E");
                        maskLat = "GG°MM'SS,SSS''C";
                        maskLng = "GGG°MM'SS,SSS''C";
                    } else if (tipo == "2") {
                        $lat.attr("placeholder", "GG°MM'SS''N/S");
                        $lng.attr("placeholder", "GGG°MM'SS''W/E");
                        maskLat = "GG°MM'SS''C";
                        maskLng = "GGG°MM'SS''C";
                    } else if (tipo == "3") {
                        $lat.attr("placeholder", "GG°MM,MMM'N/S");
                        $lng.attr("placeholder", "GGG°MM,MMM'W/E");
                        maskLat = "GG°MM,MMM'C";
                        maskLng = "GGG°MM,MMM'C";
                    } else if (tipo == "4") {
                        $lat.attr("placeholder", "{{ 'GG,DDD...' | trans }}");
                        $lng.attr("placeholder", "{{ 'GG,DDD...' | trans }}");
                        maskLat = "TGG,GGGDDDDDD";
                        maskLng = "TGGG,GGGDDDDDD";
                    }
                    $lat.mask(maskLat, pointFormats.GMS.latitude);
                    $lat.on('focusout', function(e){

                        var currentElement = this;
                        var val = $(currentElement).val();
                        var event = e;

                        if(tipo == "4"){
                            pointFormats.GD.latitude.validate(val, currentElement);

                        }else{
                            pointFormats.GMS.latitude.validate(val, currentElement);
                        }
                    });

                    $lng.mask(maskLng, pointFormats.GMS.longitude);

                    $lng.on('focusout', function (e) {
                        var currentElement = this;
                        var val = $(currentElement).val();
                        var event = e;

                        if (tipo == "4") {
                            pointFormats.GD.longitude.validate(val, currentElement);
                        }else{
                            pointFormats.GMS.longitude.validate(val, currentElement);
                        }
                    });
                }
            }
        </script>
    </div>
{% endspaceless %}
{% endblock point_widget %}
    
{% block field_label %}
{% spaceless %}
    {% set attr = attr|merge({'for': id}) %}
    {% if required %}
        {% set attr = attr|merge({'class': attr.class|default('') ~ ' required'}) %}
    {% endif %}
    {% set attr = attr|merge({'class': attr.class|default('') ~ ' control-label'}) %}
    {% if 'inner_' in label %}
      {% set lbl = label|replace({'inner_':''})|trans %}
    {% else %}
      {% set lbl = id|replace({'_':'.'})|trans %}
    {% endif %}
     
    <label{% for attrname,attrvalue in attr %} {{attrname}}="{{attrvalue}}"{% endfor %}>{{lbl}}</label>
{% endspaceless %}
{% endblock field_label %}
    
{% block field_errors %}
{% spaceless %}
    {% if errors|length > 0 %}
    <div class="alert alert-error" {% if errors|length > 1 %}style="margin-top: 45px;"{% endif %}>
    <button type="button" class="close" data-dismiss="alert">×</button>
    <ul>
        {% for error in errors %}
            <li>{{ error.messageTemplate|trans(error.messageParameters, 'validators') }}</li>
        {% endfor %}
    </ul>
    </div>
    {% endif %}
{% endspaceless %}
{% endblock field_errors %}
    
    
{% block form_label %}
{% spaceless %}
    {% set attr = attr|merge({'for': id}) %}
    {% if required %}
        {% set attr = attr|merge({'class': attr.class|default('') ~ ' required'}) %}
    {% endif %}
    {% set attr = attr|merge({'class': attr.class|default('') ~ ' control-label'}) %}
    <label{% for attrname,attrvalue in attr %} {{attrname}}="{{attrvalue}}"{% endfor %}>{{ id|replace({'_':'.'})|trans }}</label>
{% endspaceless %}
{% endblock form_label %}

{% block tchoice_widget %}
{% spaceless %}
    {% set attr = attr|merge({'class': attr.class|default('') ~ ' '}) %}
    <div class="ui-widget" id="autocomplete_container_{{id}}">
        <input style="float: left;" id="{{id}}" onkeyup="gardaTexto{{id}}()"  {% for attrname,attrvalue in attr %}{{attrname}}="{{attrvalue}}" {% endfor %} {% if required is sameas("dinamicRequire") or required %} required {% endif %}/>
        {% if not read_only  %}
            <a id="bt_clear_{{id}}" style="float: right; display: none; margin-right: -2%; margin-top: 4px; margin-left: 4px;" onclick="removeValue{{id}}()" class="icon-remove-sign" href="javascript:;"></a>
        {% endif %}
        <img id="ajax_loader_{{id}}" src="{{ asset('bundles/propesq/images/ajax-loader.gif') }}" style="display: none; margin-left: 5px;"/>
        <div class="help-inline" id="autocomplete_help_{{id}}"></div>
        {% if property is not empty and propertyLabel is not empty %}
            <input id="txt_value_{{id}}" type="hidden" value="" name="txt_value_{{id}}" class=" wf2_isBlank wf2_defaultValue">
        {% endif %}
        {% if adicionalData is not empty  %}
            {% for adicionalFieldName, adicionalField in adicionalData  %}
                <input id="{{ adicionalFieldName }}_{{id}}" type="hidden" value="" name="{{ adicionalFieldName }}_{{id}}" class=" wf2_isBlank wf2_defaultValue">
            {% endfor %}
        {% endif %}
        <input id="value_{{id}}" type="hidden" value="" name="{{full_name}}" class=" wf2_isBlank wf2_defaultValue">
    </div>  
    <script type="text/javascript">
    {% if property is not empty %}
        var txtValue = unescape('{{ attribute(txtValue, property) |e('js') }}');
    {% else %}
        var txtValue = unescape('{{txtValue |  e('js')  }}');
    {% endif %}
    {% if property is not empty and propertyLabel is not empty %}
        var txtValueExibicao = unescape('{{ attribute(txtValue, propertyLabel) |e('js') }}');
    {% endif %}

    var lastValue{{id}} = "";
    var value = '{{value}}';
    var contadorRequisicoes{{id}} = 0;
    {% if adicionalData is not empty  %}
        {% for adicionalFieldName, adicionalField in adicionalData  %}
           var {{  adicionalFieldName }} = '{{ attribute(txtValue, adicionalFieldName) }}' ;
        {% endfor %}
    {% endif %}
    
    if (txtValue != null && txtValue != undefined && txtValue != "" &&
        value != null && value != undefined && value != "") {

        $( "#value_{{id}}" ).val(value);

        {% if adicionalData is not empty  %}
            {% for adicionalFieldName, adicionalField in adicionalData  %}
                $( "#{{ adicionalFieldName }}_{{id}}" ).val('{{ attribute(txtValue, adicionalFieldName) }}');
            {% endfor %}
        {% endif %}

        {% if property is not empty and propertyLabel is not empty %}
            $( "#txt_value_{{id}}" ).val(txtValue);
            $( "#{{id}}" ).val(txtValueExibicao);
        {% else %}
            $( "#{{id}}" ).val((txtValue));
        {% endif %}

        $("#bt_clear_{{id}}").show();
        $('#{{id}}')[0].disabled = true;
        //eval('{{id}}').disabled = true;
    }
        
    $( "#{{id}}" ).focusout(function(){
        if ($( "#value_{{id}}" ).val() == null || $( "#value_{{id}}" ).val() == undefined || 
                $( "#value_{{id}}" ).val() == "") {
            removeValue{{id}}();
        }
    }); 
    
   var thing = $( "#{{id}}" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
              type: 'post',
              data: {"data":request.term {%if indTipo is not null%} , "indTipo":{{indTipo}} {%endif%}},
              url: '{{ path(url) }}',  
              dataType: "json",
              beforeSend: function(){
                $("#ajax_loader_{{id}}").show();
                contadorRequisicoes{{id}}++;
              },
              success: function( data ) {
                contadorRequisicoes{{id}}--;
                
                if (contadorRequisicoes{{id}} == 0) {
                    $("#ajax_loader_{{id}}").hide();
                }
                var result = new Array();
                result = $.ui.autocomplete.filter(result, request.term);
                
                if (data == undefined) {
                    data = new Array();
                }
                
                if (data.length == 0) {
                    var obj = new Object();
                    obj.txtNome="Nenhum item encontrado para esta pesquisa.";
                    obj.id = "";
                    data.push(obj);
                }

                {% if property is not empty and propertyLabel is not empty %}
                $.map( data, function( item ) {
                  result.push( {
                    label: item.{{ propertyLabel }},
                    txtValue: item.{{ property }},
                    {% if adicionalData is not empty  %}
                        {% for adicionalFieldName, adicionalField in adicionalData  %}
                            {{  adicionalField }}: item.{{ adicionalField }},
                        {% endfor %}
                    {% endif %}
                    value: item.id
                  })
                });
                {%  else %}
                  $.map( data, function( item ) {
                      result.push( {
                            label: item.txtNome,
                            {% if adicionalData is not empty  %}
                                {% for adicionalFieldName, adicionalField in adicionalData  %}
                                    {{  adicionalField }}: item.{{ adicionalField }},
                                {% endfor %}
                            {% endif %}
                            value: item.id
                      })
                  });
                {% endif %}

                {%if addUrl is not null%}
                    result.push({
                        value: request.term,
                        isPlaceholder: true
                    });  
                {%endif%}
                    
                response(result);
                  
              },
              error: function(){
                contadorRequisicoes{{id}}--;
                if (contadorRequisicoes{{id}} == 0) {
                    $("#ajax_loader_{{id}}").hide();
                }
              }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            event.preventDefault();
            
            if (ui.item.value != "" && ui.item.value != undefined) {
                $( "#value_{{id}}" ).val(ui.item.value);
                {% if property is not empty and propertyLabel is not empty %}
                    $( "#txt_value_{{id}}" ).val(ui.item.txtValue);
                {% endif %}

                {% if adicionalData is not empty  %}
                    {% for adicionalFieldName, adicionalField in adicionalData  %}
                        $( "#{{ adicionalFieldName }}_{{id}}" ).val(ui.item.{{ adicionalField }});
                    {% endfor %}
                {% endif %}

                $(this).val(ui.item.label);
                $("#bt_clear_{{id}}").show();
                $('#{{id}}')[0].disabled = true;
                //eval('{{id}}').disabled = true;
                var inputs = $(this).closest('form').find(':focusable');
                inputs.eq(inputs.index(eval('bt_clear_{{id}}')) + 1).focus(); 
            } else {
                $(this).val(lastValue{{id}});
            }

            /*
            @TODO: Verificar se algum tchoice com changeFunction ocasiona erro.
             */
            {% if changeFunction is not empty %}
                try {
                    {{changeFunction}}($( "#{{id}}" ));
                } catch(error) {}
            {% endif %}

            $("#ajax_loader_{{id}}").hide();
            contadorRequisicoes{{id}} = 0;
        },
        focus: function(event, ui) {
            $(this).val(ui.item.label);
            return false;
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        },
        change: function( event, ui ) {
            {% if changeFunction is not empty %}      
                    
                try {    
                    {{changeFunction}}(this);
                } catch(error) {}

            {% endif %}
        }
    });
    
    var renderItem = thing.data("autocomplete")._renderItem;

    thing.data("autocomplete")._renderItem = function(ul, item) {
        if (item.isPlaceholder) {
            return $("<li>")
                .data("item.autocomplete", item)
                .append('<div onclick="addNew_{{id}}()" class="goog-filterobsmenuitem" role="menuitem" style="-webkit-user-select: none; cursor:pointer;" id=":s"><div class="goog-filterobsmenuitem-content" style="float:left;">Adicionar <b> "'+item.value+'"</b></div></div>')
                .appendTo(ul);

        } else {
            renderItem(ul, item);
        }
    };
    
    
    function gardaTexto{{id}}() {
        lastValue{{id}} = $('#{{id}}').val();
    }
    
    {%if addUrl is not null%}
        function addNew_{{id}}(event) {
            $d_{{id}} = $.fn.dialog2({
                content: "{{ path(addUrl) }}",
                showCloseHandle: true,
                closeOnOverlayClick: false,
                closeOnEscape: false,
                initialLoadText: '{{"Carregando..."|trans}}',
                parameters: "noLayout=true&{{property}}=" + lastValue{{id}},
                callbackFunction : function(ret){
                    $( "#value_{{id}}" ).val(ret.id);
                    {% if property is not empty and propertyLabel is not empty %}
                        $( "#txt_value_{{id}}" ).val(ret.{{ property }});
                        $( "#{{id}}" ).val(ret.{{ propertyLabel }});
                    {% else %}
                        $( "#{{id}}" ).val(ret.txtNome);
                    {% endif %}

                    {%  if triggerChangeOnAddNew   %}
                        {{ changeFunction}}();
                    {% endif %}
                    $("#bt_clear_{{id}}").show();
                    $('#{{id}}')[0].disabled = true;
                    //eval('{{id}}').disabled = true;                    
                    $d_{{id}}.dialog2('close');
                }
            });
            
            lastValue{{id}} = "";
        }
    {%endif%}
    
    function removeValue{{id}}() {
        if ($( "#value_{{id}}" ).val() != "" && $( "#value_{{id}}" ).val() != undefined) {
            {% if property is not empty and propertyLabel is not empty %}
                $( "#txt_value_{{id}}" ).val("");
            {% endif %}
             {% if adicionalData is not empty  %}
                {% for adicionalFieldName, adicionalField in adicionalData  %}
                    $( "#{{ adicionalFieldName }}_{{id}}" ).val("");
                {% endfor %}
            {% endif %}
            $( "#value_{{id}}" ).val("");
            $( "#{{id}}" ).val("");
            $("#bt_clear_{{id}}").hide();
            $('#{{id}}')[0].disabled = false;
            //eval('{{id}}').disabled = false;
            {% if changeFunction is not empty %}      
                try {    
                    {{changeFunction}}($( "#{{id}}" ));
                } catch(error) {}
            {% endif %}
            $( "#{{id}}" ).focus();
        }
    }

    {% if required is sameas("dinamicRequire") %}
        $('#{{id}}').parents('form').submit(function(event) {
            if($('#{{id}}').attr('dinamicRequire')  == 'required'){
                if($('#{{id}}').html() != null){
                    $( "#autocomplete_help_{{id}}" ).html('');
                    if ($( "#value_{{id}}" ).val() == null || $( "#value_{{id}}" ).val() == undefined ||
                            $( "#value_{{id}}" ).val() == "") {
                        $( "#autocomplete_help_{{id}}" ).html('<div class="alert alert-error">{{'campoobrigatorio'|trans}}</div>');
                        return false;
                    }
                }
                $( "#{{id}}" ).setError(false);
                return true;
            }else{
                $( "#{{id}}" ).setError(false);
                return true;
            }
        });
    {% elseif required %}
        $("#{{id}}")[0].addEventListener('invalid', function(event){
            $( "#autocomplete_help_{{id}}" ).html('<div class="alert alert-error">{{'campoobrigatorio'|trans}}</div>');
            var labelFor = $('#{{id}}')[0].id;
            if(labelFor.search(/_\d*_/) > 0){
                labelFor = labelFor.replace(/_\d*_(\w)*/, '');
            }
            $("label[for="+labelFor+"]").css({
                "border-color": "rgb(185, 74, 72)",
                "color": "rgb(185, 74, 72)"
            });
            if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == ({{id}}).id){
                localStorage.setItem('scrolling', ({{id}}).id);
                $('html,body').animate({scrollTop: ($('label[for='+labelFor+']').offset().top) - 35}, 1000);
            }
            event.preventDefault();
        });
        $("#{{id}}")[0].addEventListener('input', function(event){
            if($("#{{id}}")[0].validity.valid){
                $( "#autocomplete_help_{{id}}" ).html('');
                var labelFor = $('#{{id}}')[0].id;
                if(labelFor.search(/_\d*_/) > 0){
                    labelFor = labelFor.replace(/_\d*_(\w)*/, '');
                }
                $("label[for="+labelFor+"]").css({
                    "border-color": "",
                    "color": ""
                });
                if(localStorage.getItem('scrolling') == ({{id}}).id){
                    localStorage.setItem('scrolling', '');
                }
            }
        });
        $('#{{id}}').parents('form').submit(function(event){
            if($('#{{id}}').html() != null){
                $( "#autocomplete_help_{{id}}" ).html('');
                if ($( "#value_{{id}}" ).val() == null || $( "#value_{{id}}" ).val() == undefined || 
                    $( "#value_{{id}}" ).val() == "") {
                    $( "#autocomplete_help_{{id}}" ).html('<div class="alert alert-error">{{'campoobrigatorio'|trans}}</div>');
                    return false;
                }
            }
            $( "#{{id}}" ).setError(false);
            return true;
        });
    {% endif %}
    
    $(document).ready(function(){
        {% if changeFunction is not empty %}      
            try {    
                {{id}}.setOnChangeFunction({{changeFunction}});
            } catch(error) {}

        {% endif %}
    });
    
    </script>
{% endspaceless %}
{% endblock tchoice_widget %}
    
{% block advancedchoice_widget %}
{% spaceless %}
    {% if expanded %}
        <div {{ block('widget_container_attributes') }}>
        {% for child in form %}
            {{ form_widget(child) }}
            {{ form_label(child) }}
        {% endfor %}
        </div>
    {% else %}

        {% if changeFunction != null %} {%set hideChange = "//"%} {%endif%}
        {% if url == null or url != null and loadData == null %} {%set hideData = "//"%} {%endif%}
    
<!--        if(!$this->url || $this->url && !$this->loadData) $hideData = "//";
        if(!$this->focus) $hideFocus = "//"; -->
   
    <div style="outline: 0;-moz-user-select: none;" class="container-combobox"> <!-- class='span4'-->
        <div class="closure input select " style="outline: 0;-moz-user-select: none;">

            {% set attr = attr|merge({'class': attr.class|default('') ~ ' select_closure'}) %}
            <div id="{{id}}" {% for attrname,attrvalue in attr %}{{attrname}}="{{attrvalue}}" {% endfor %}  style="outline: 0;-moz-user-select: none;"></div>
            <script type="text/javascript">
                {%set virg = ""%}
                    var {{id}}_list = [
                    {% for choice, label in choices %}
                            {{virg}}{"{{idName}}":"{{choice}}","{{property}}":"{{label| e('js')}}"}
                            {%set virg = ","%}
                    {% endfor %}
                    ];

                localStorage.setItem('scrolling', '');
                var {{id}}_fn = function() {
                    {{id}} = new webgoal.ui.SearchableSelectGranatum('{{emptyLabel|trans}}');
                    {{id}}.setIdName("{{idName}}");
                    {{id}}.setIdContainer("{{id}}");
                    {{id}}.setLabelName("{{property}}");
                    {{id}}.setName('{{full_name}}');
                    {% if url != null %}
                        {{id}}.setUrl('{{path(url)}}');
                    {% endif %}
                    {% if not updateButton %}
                        {{id}}.setShowUpdateButton(false);
                    {% endif %}
                    {% if lazyLoad != false %}
                        {{id}}.setLazyLoad(true);
                    {% endif %}
                    {% if required is defined and required %}
                        {{id}}.setRequired(true);
                        //validação junto com html 5
                        $('#{{id}}').parents('form').find('[type="submit"]').click(function(event){
                            if($('#{{id}}').html() != null){
                                if(!{{id}}.getSelectedObject() && $('#{{id}}').find('.requiredCombobox').length){
                                    if($('#{{id}}').parents('div .hidden')[0] == undefined){
                                        $('#{{id}}').setError('Selecione uma opção.');
                                        $('#{{id}}').find('.requiredCombobox').trigger('invalid');
                                        if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == {{id}}){
                                            localStorage.setItem('scrolling', {{id}});
                                            var labelFor = $('#{{id}}')[0].id;
                                            if(labelFor.search(/_\d*_/) > 0){
                                                labelFor = labelFor.replace(/_\d*_(\w)*/, '');
                                            }
                                            var elementLabel = $('label[for='+labelFor+']');
                                            if(elementLabel[0] !== undefined && elementLabel[0] !== null){
                                                if(!elementLabel.parent()[0].classList.contains('hidden')){
                                                    $('html,body').animate({scrollTop: (elementLabel.offset().top) - 35}, 1000);
                                                }else{
                                                    return true;
                                                }
                                            }else{
                                                $('html,body').animate({scrollTop: ($('#{{id}}').offset().top) - 35}, 1000);
                                            }
                                        }
                                        return false;
                                    }else{
                                        $('#{{id}}').find('.requiredCombobox').removeClass('requiredCombobox').addClass('notRequiredCombobox');
                                    }
                                }else{
                                    if({{id}} == localStorage.getItem('scrolling')){
                                        localStorage.setItem('scrolling', '');
                                    }
                                    $('#{{id}}').setError(false);
                                    return true;
                                }
                            }
                        });
                        //validação real na submissão do form
                        $('#{{id}}').parents('form').submit(function(event){
                            if($('#{{id}}').html() != null){
                                if(!{{id}}.getSelectedObject() && $('#{{id}}').find('.requiredCombobox').length){
                                    $('#{{id}}').setError('Selecione uma opção.');
                                    $('#{{id}}').find('.requiredCombobox').trigger('invalid');
                                    if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == {{id}}){
                                        localStorage.setItem('scrolling', {{id}});
                                        var labelFor = $('#{{id}}')[0].id;
                                        if(labelFor.search(/_\d*_/) > 0){
                                            labelFor = labelFor.replace(/_\d*_(\w)*/, '');
                                        }
                                        var elementLabel = $('label[for='+labelFor+']');
                                        if(elementLabel[0] !== undefined && elementLabel[0] !== null){
                                            if(!elementLabel.parent()[0].classList.contains('hidden')){
                                                $('html,body').animate({scrollTop: (elementLabel.offset().top) - 35}, 1000);
                                            }else{
                                                return true;
                                            }
                                        }else{
                                            $('html,body').animate({scrollTop: ($('#{{id}}').offset().top) - 35}, 1000);
                                        }
                                    }
                                    return false;
                                }else{
                                    if({{id}} == localStorage.getItem('scrolling')){
                                        localStorage.setItem('scrolling', '');
                                    }
                                    $('#{{id}}').setError(false);
                                    return true;
                                }
                            }
                        });
                    {% endif %}
                        
                    {% if addGenericFunction %}
                        {{id}}.setAddAction(
                            function (obj){
                                var parentField = '';
                                var parentParameter = '';
                                {% if parentProperty is defined and parentProperty is not null  %}
                                parentField =  '{{ id }}'.replace('codMunicipio', '{{ parentProperty }}');

                                parentParameter = '&{{ parentProperty }}='+ eval(parentField+'.getValue()');
                                {% endif %}
                                $d_{{id}} = $.fn.dialog2({
                                    content: "{{ path(addUrl) }}",
                                    showCloseHandle: true,
                                    combobox: {{id}},
                                    closeOnOverlayClick: false,
                                    closeOnEscape: false,
                                    initialLoadText: '{{"Carregando..."|trans}}',
                                    parameters: "noLayout=true&{{property}}="+obj+parentParameter,
                                    callbackFunction : function(ret){
                                        {% if parentProperty is defined and parentProperty is not null  %}
                                            eval(parentField+'.setSelectedByValue('+ret.{{ parentProperty }}.id+')');
                                        {% endif %}
                                        {{id}}.updateList(ret.id, function(){
                                            $d_{{id}}.dialog2('close');
                                        });
                                    }
                                });
                            }
                        );

                    {% else %}
                        {% if addFunction is not empty %}
                            {{id}}.setAddAction({{addFunction}});     
                        {% endif %}
                    {% endif %}
                        
                    {{id}}.render(goog.dom.getElement('{{id}}'));
                        
                    
                    {% if focus %}
                        {{id}}.setFocus();
                    {% endif %}
                     
                    {% if value is not empty %}
                        {{id}}.updateList({{id}}_list,{{value}});
                    {% else %}
                        {{id}}.updateList({{id}}_list);
                    {% endif %}
                    {{id}}.setSearchable({{searchable}});
                  
                    
                    $('#{{id}}').focus(function() {
                        {{id}}.setFocus(true);
                    });
                  
                };

                $('#{{id}}').ready(function(){
                    {{id}}_fn();
                });
                
                $(document).ready(function(){
                    {% if changeFunction is not empty %}      
                        try {    
                            {{id}}.setOnChangeFunction({{changeFunction}});
                        } catch(error) {}
                            
                    {% endif %}
                });    
            </script>
            <div class="help-inline"></div>
        </div>
            
    </div>
    
    
    <!--
    
    <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
        {% if empty_value is not none %}
            <option value="">{{ empty_value|trans }}</option>
        {% endif %}
        {% if preferred_choices|length > 0 %}
            {% set options = preferred_choices %}
            {{ block('widget_choice_options') }}
            {% if choices|length > 0 and separator is not none %}
                <option disabled="disabled">{{ separator }}</option>
            {% endif %}
        {% endif %}
        {% set options = choices %}
        {{ block('widget_choice_options') }}
    </select>
-->
    {% endif %}
{% endspaceless %}
{% endblock advancedchoice_widget %}

{% block datepicker_widget %}
{% spaceless %}
    <input pattern="[0-9]{2}/[0-9]{2}/[0-9]{4}" autocomplete="off" class="input-small" onkeyup="vData(this)" value="{{ value }}" title="dd/mm/aaaa"  onchange="vData(this)" type="text" {{ block('widget_attributes') }}  />
    <script>
        $(document).ready(function(){
            $("#{{id}}").datepicker({
                showOn: "button",
                buttonText: 'Calendário',
                buttonImage: "{{ asset('bundles/propesq/images/calendar.png') }}",
                buttonImageOnly: true,
                //changeMonth: true,
                //changeYear: true,
                /* onClose: function(dateText, inst)
                        {
                        }, */
                "regional" : "pt-BR"
            });
            $("#{{id}}").keydown(function(event){
                // Obtém a data/hora atual
                var data = new Date();

                // Guarda cada pedaço em uma variável
                var dia     = data.getDate();           // 1-31
                var mes     = data.getMonth();          // 0-11 (zero=janeiro)
                var ano    = data.getFullYear();       // 4 dígitos

                // Formata a data e a hora
                var str_data = (dia < 10)?"0"+dia:dia;
                mes = mes + 1;
                mes = (mes < 10)?"0"+mes:mes;
                str_data += '/' + (mes) + '/' + ano;

                var regExp = new RegExp("[0-9]{2}\/[0-9]{2}\/[0-9]{4}");
                if(event.keyCode == 13 && !regExp.test($(this).val())){
                    $(this).val(str_data);
                }
                if(event.keyCode == 40 && !event.ctrlKey){
                    $(this).next().click();
                    return false;
                }
            });
            $("#{{id}}")[0].addEventListener('invalid', function(event){
                var elementLabel = $("label[for={{id}}]");
                
                if($("#{{id}}_error")[0] != undefined){
                    $("#{{id}}_error").removeAttr('hidden');
                }else{
                    $("#{{id}}").setError('Informar uma data válida');
                }

                $("#{{id}}").css({
                    "border-color": "rgb(185, 74, 72)",
                    "color": "rgb(185, 74, 72)"
                });
                if(elementLabel[0] != undefined && elementLabel.is(':visible')){
                    elementLabel.css({
                        "border-color": "rgb(185, 74, 72)",
                        "color": "rgb(185, 74, 72)"
                    });
                }

                if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == ({{id}}).id){
                    localStorage.setItem('scrolling', ({{id}}).id);
                    if(elementLabel[0] != undefined && elementLabel.is(':visible')){
                        $('html,body').animate({scrollTop: (elementLabel.offset().top) - 35}, 1000);
                    }else{
                        $('html,body').animate({scrollTop: ($('#{{id}}').offset().top) - 35}, 1000);
                    }
                }
                event.preventDefault();
            });

            $('#{{id}}').on('change', () => {
                    $("#{{id}}").setError(false);

                    $("#{{id}}_error").attr('hidden', true);

                    $("label[for={{id}}]").css({
                        "border-color": "",
                        "color": ""
                    });
                    $("#{{id}}").css({
                        "border-color": "",
                        "color": ""
                    });

                    if(localStorage.getItem('scrolling') == ({{id}}).id){
                        localStorage.setItem('scrolling', '');
                    }
            }); 

            $("#{{id}}")[0].addEventListener('input', function(event){
                if($("#{{id}}")[0].validity.valid){
                    $("#{{id}}_error").attr('hidden', true);

                    $("label[for={{id}}]").css({
                        "border-color": "",
                        "color": ""
                    });
                    $("#{{id}}").css({
                        "border-color": "",
                        "color": ""
                    });

                    if(localStorage.getItem('scrolling') == ({{id}}).id){
                        localStorage.setItem('scrolling', '');
                    }
                }
            });
            $("#{{id}}").mask("99/99/9999");
            
            $("#{{id}}").on('focusout', () => {
                let ano = $('#{{id}}').val().split('/')[2];

                if (ano < 1) {
                    $("#{{id}}").setError('Informar uma data válida');
                }
            });
        });
        {{id}} = document.getElementById("{{id}}");
    </script>
{% endspaceless %}
{% endblock datepicker_widget %}

{% block date_widget %}
{% spaceless %}
    {% if widget == 'single_text' %}
        {{ block('field_widget') }}
    {% else %}

        <div {{ block('widget_container_attributes') }}>
            {{ date_pattern|replace({
                '{{ year }}':  form_widget(form.year),
                '{{ month }}': form_widget(form.month),
                '{{ day }}':   form_widget(form.day),
            })|raw }}
        </div> 
    {% endif %}
{% endspaceless %}
{% endblock date_widget %}
    
    

    
{% block cnpj_widget %}
    {% spaceless %}
    <input onkeyup="vCnpj(this)" value="{{ value }}" pattern="[0-9]{2}.[0-9]{3}.[0-9]{3}/[0-9]{4}-[0-9]{2}" onchange="vCnpj(this)" type="text" {{ block('widget_attributes') }}  />
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#{{ form.vars.id }}").mask("99.999.999/9999-99");
            });
        </script>
        
    {% endspaceless %}
{% endblock cnpj_widget %}

{% block cpf_widget %}
    {% spaceless %}
        <input onkeyup="vCpf(this)" pattern="[0-9]{3}.[0-9]{3}.[0-9]{3}-[0-9]{2}" value="{{ value }}" onchange="vCpf(this)" type="text" {{ block('widget_attributes') }}  />
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#{{ form.vars.id }}").mask('999.999.999-99');
            });
        </script>
        
    {% endspaceless %}
{% endblock cpf_widget %}

{% block checklist_widget %}
    {% spaceless %}
        <div class="checklist-group {{ id }} {% if required == true %} require {% endif %}"   id="{{ id }}">
        {% for choice, label in choices %}
        <label class="checkbox">
            <input type="checkbox" {% if value[choice] %} checked='checked' {%endif%} value="{{choice}}" name="{{full_name}}">{{label}}
        </label>
        {% endfor %}
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                {%if required %}
                $('#{{id}}').parents('form').submit(function(event){

                    if($('div.checklist-group.{{ id }}.require :checkbox:checked').length <= 0){

                        $('#{{id}}').setError('Selecione uma opção.');
                        return false;
                    }
                    $( "#{{id}}" ).setError(false);
                    return true;
                });
                {%endif%}
            });
        </script>
    {% endspaceless %}
{% endblock checklist_widget %}

{% block money_widget %}
    {% spaceless %}
        <input onkeyup="vMoney(this)" onfocus="vMoney(this)" pattern="R\$\s.+,\d{2}" value="{{ value }}" onchange="vMoney(this)" type="text" {{ block('widget_attributes') }}  />
        <script type="text/javascript">
            $(document).ready(function(){
                $("#{{ form.vars.id }}").maskMoney({
                    'prefix' : 'R$ ',
                    'showSymbol' : true,
                    'symbolStay' : true,
                    'thousands': '.',
                    'decimal': ',',
                });
                /*
                $("#{{ form.vars.id }}").parents('form').submit(function(){
                     $("#{{ form.vars.id }}").val($("#{{ form.vars.id }}").val().replace('R$ ', '').replace('.', '').replace(',', '.'));
                });
                */
            });
        </script>
        
    {% endspaceless %}
{% endblock money_widget %}

{% block profundidade_widget %}
    {% spaceless %}
        <input onkeyup="vProfundidade(this)" pattern=".+,\d{ {{- precision -}} }" value="{{ value }}" style="" type="text" {{ block('widget_attributes') }}  />

        <script type="text/javascript">
            $(document).ready(function(){
               $("#{{ form.vars.id }}").maskMoney({
                    'precision' : {{ precision }},
                    'thousands': '',
                    'decimal': ',',
                    'defaultZero': {{ (defaultZero)?'true':'false' }},
                    'allowZero': {{ (allowZero)?'true':'false' }},
                    'allowEmpty': {{ (allowEmpty)?'true':'false' }},

                });
                $("#{{ form.vars.id }}").keyup();
            });

            $("#{{ form.vars.id }}")[0].addEventListener('invalid', function(event){
                var labelFor = (({{ form.vars.id }}).id).replace(/_\d*_(\w)*/, '');

                var regExp = new RegExp(/\w*[operacoes_\d_capturas_\d|mapasBordoCaptura]_numQuantidadeKg/);
                if(regExp.test($("#{{ form.vars.id }}")[0].id)){
                    $("#{{ form.vars.id }}").siblings('span')[0].textContent = "Informar a quantidade.";
                    $("#{{ form.vars.id }}").siblings('span')[0].classList.add('alert', 'alert-error');
                    $("#{{ form.vars.id }}").siblings('span').css({
                        "width": "fit-content"
                    });
                    labelFor = ({{ form.vars.id }}).id;
                }else{
                    $("#{{ form.vars.id }}").setError("Informar a quantidade.");
                }

                $("#{{ form.vars.id }}").siblings('span')[0].classList.add('span6');
                $("#{{ form.vars.id }}").siblings('span').css({
                    "margin-left": "0px"
                });
                $("#{{ form.vars.id }}").css({
                    "border-color": "rgb(185, 74, 72)",
                    "color": "rgb(185, 74, 72)"
                });

                var elementLabel = $('label[for='+labelFor+']');

                if(elementLabel[0] !== undefined && elementLabel[0] !== null){
                    elementLabel.css({
                        "border-color": "rgb(185, 74, 72)",
                        "color": "rgb(185, 74, 72)"
                    });
                }

                if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == ({{ form.vars.id }}).id){
                    localStorage.setItem('scrolling', ({{ form.vars.id }}).id);

                    if(elementLabel[0] !== undefined && elementLabel[0] !== null){
                        $('html,body').animate({scrollTop: (elementLabel.offset().top) - 35}, 1000);
                    }else{
                        $('html,body').animate({scrollTop: ($("#{{ form.vars.id }}").offset().top) - 35}, 1000);
                    }
                }
                event.preventDefault();
            });

            $("#{{ form.vars.id }}").keyup(function (e) {
                if($(this).hasClass('areaPesca')){
                    if(e.keyCode == 8 || e.keyCode == 46){
                        if($(this).val() == '0,00'){
                            $(this).val("");
                        }
                    }
                }

                if((e.keyCode > 47 && e.keyCode < 58 ) || (e.keyCode > 95 && e.keyCode < 106) && $("#{{ form.vars.id }}")[0].validity.valid){                    
                    var labelFor = (({{ form.vars.id }}).id).replace(/_\d*_(\w)*/, '');

                    var regExp = new RegExp(/\w*[operacoes_\d_capturas_\d|mapasBordoCaptura]_numQuantidadeKg/);
                    if(regExp.test($("#{{ form.vars.id }}")[0].id)){
                        $("#{{ form.vars.id }}").siblings('span')[0].textContent = "";
                        $("#{{ form.vars.id }}").siblings('span')[0].classList.remove('alert', 'alert-error');
                        $("#{{ form.vars.id }}").siblings('span').css({
                            "width": ""
                        });
                        labelFor = ({{ form.vars.id }}).id;
                    }else{
                        $("#{{ form.vars.id }}").setError(false);
                    }

                    $("#{{ form.vars.id }}").css({
                        "border-color": "",
                        "color": ""
                    });
                    
                    var elementLabel = $('label[for='+labelFor+']');

                    if(elementLabel[0] !== undefined && elementLabel[0] !== null){
                        elementLabel.css({
                            "border-color": "",
                            "color": ""
                        });
                    }
                    if(localStorage.getItem('scrolling') == ({{ form.vars.id }}).id){
                        localStorage.setItem('scrolling', '');
                    }
                }
            });
        </script>

    {% endspaceless %}
{% endblock profundidade_widget %}

{% block profundidade3_widget %}
    {% spaceless %}
        <input onkeyup="vProfundidade(this)" pattern=".+,\d{3}" value="{{ value }}" style="" type="text" {{ block('widget_attributes') }}  />
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#{{ form.vars.id }}").maskMoney({
                    'precision' : 3,
                    'thousands': '',
                    'decimal': ',',
                });
                $("#{{ form.vars.id }}").keyup();
            });
        </script>
        
    {% endspaceless %}
{% endblock profundidade3_widget %}
        
        
{% block milhasnauticas_widget %}
    {% spaceless %}
        <input onkeyup="vMilhas(this)" onfocus="vMilhas(this)" pattern=".+,\d{2}" value="{{ value }}" style="" type="text" {{ block('widget_attributes') }}  />
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#{{ form.vars.id }}").maskMoney({
                    'precision' : 2,
                    'thousands': '',
                    'decimal': ',',
                    'defaultZero': {{ (defaultZero)?'true':'false' }},
                    'allowZero': {{ (allowZero)?'true':'false' }},
                    'allowEmpty': {{ (allowEmpty)?'true':'false' }},

                });
            });
            $("#{{ form.vars.id }}").keyup(function (e) {
                if($(this).hasClass('areaPesca')){
                    if(e.keyCode == 8 || e.keyCode == 46){
                        if($(this).val() == '0,00'){
                            $(this).val("");
                        }
                    }
                }
            })
        </script>
        
    {% endspaceless %}
{% endblock milhasnauticas_widget %}


{% block number4_widget %}
    {% spaceless %}
        <input onkeyup="vNumber4(this)" onkeypress="verifica(this)" onfocus="vNumber4(this)" pattern="{{ format }}"
               value="{{ value }}" style="" type="text" autofocus {{ block('widget_attributes') }}  />

        <script type="text/javascript">
            $(document).ready(function(){
                $("#{{ form.vars.id }}").maskMoney({
                    'precision' : 4,
                    'thousands': '',
                    'decimal': ',',
                });
                $("#{{ form.vars.id }}").keyup();
            });

            function verifica(input) {
                if($(input).hasClass('unidade')){
                    var id = input.id;
                    id = id.split('numTaxaConversaoKg')[0]+'codUnidade_msg';
                    $('#'+id).removeClass('hidden');
                }
            }
        </script>

    {% endspaceless %}
{% endblock number4_widget %}


{% block mes_widget %}
    {% spaceless %}
        <input value="{{ value }}" type="number" min="1" max="12" {{ block('widget_attributes') }}/>
    {% endspaceless %}
{% endblock mes_widget %}
        

{% block ano_widget %}
    {% spaceless %}
        <input value="{{ value }}" type="number" min="1800" max="9999" {{ block('widget_attributes') }}/>
    {% endspaceless %}
{% endblock ano_widget %}
        

{% block telefone_widget %}
    {% spaceless %}
        <input onkeyup="vTelefone(this)" pattern="\([0-9]{2}\)\s\d{4}(\d{4})\d?" value="{{ value }}" onchange="vTelefone(this)" type="text" {{ block('widget_attributes') }}  />
        <script>
            $(document).ready(function(){
                var SPMaskBehavior = function (val) {
                            return val.replace(/\D/g, '').length === 11 ? '(00) 000000000' : '(00) 000000009';
                        };
                var spOptions = {
                            onKeyPress: function(val, e, field, options) {
                                field.mask(SPMaskBehavior.apply({}, arguments), options);
                            }
                        };

                $("#{{ form.vars.id }}").mask(SPMaskBehavior, spOptions);
            });
        </script>
    {% endspaceless %}
{% endblock telefone_widget %}
        
        
{% block cep_widget %}
    {% spaceless %}
        <input onkeyup="vCep(this)" value="{{ value }}" onchange="vCep(this)" type="text" {{ block('widget_attributes') }}  />
        <script>
            $(document).ready(function(){
                $("#{{ form.vars.id }}").mask("99999-999");
            });
        </script>
    {% endspaceless %}
{% endblock cep_widget %}

{% block codeobject_widget %}
    {% spaceless %}
        {# type="number" doesn't work with floats #}
        {% set type = type|default('text') %}

        <input type="text" id="{{ id }}" maxlength="6" value="{{ value }}"  {{ block('widget_attributes') }}  />
        <button style="margin: 3px" class="btn" id="btn-searchEspeciePmapId" type="button"><i class="icon-search"></i></button>
        <button class="btn" id="btn-infoEspeciePmapId" type="button"><i class="icon-info-sign"></i></button>
        <script>
            $(function() {
                $("#{{ id }}").maskMoney({
                    precision: 5,
                    decimal: '',
                    thousands: '',
                    allowEmpty: true,
                });
            });

            /* Remove valor do campo quando pressionado backspace ou delete e valor for igual a "000000", permitindo tirar o valor selecionado anteriormente.
            * */
            $("#{{ id }}").keyup(function (e) {
                    if(e.keyCode == 8 || e.keyCode == 46){
                        if($(this).val() == '000000'){
                            $(this).val("");
                        }
                    }
            });

            $('#btn-infoEspeciePmapId').on('click', function () {
                $('.modal')
                    .css('z-index', 1040)
                    .addClass('stacked');
                /*Espécies associadas ao abrir os modais*/
                var  qtdEspeciesArray = [];
                $('#especie-fields-list').find('.btn_remove_especie').each(function () {
                    qtdEspeciesArray.push($(this).data('id'));
                });
                if(qtdEspeciesArray.length > 0){
                    if(Math.max.apply(null, qtdEspeciesArray) > 0 &&
                        Math.max.apply(null, qtdEspeciesArray) > $qtdEspecies){
                        $qtdEspecies = Math.max.apply(null, qtdEspeciesArray);
                    }
                }
                /*Fim espécies associadas*/
                $model = {};
                $model['especies'] = {};
                $('form').find('.especiePmap').each(function (index) {
                    if($(this).attr('id').indexOf('_especies_') != -1){
                        var field = $(this).attr('id');
                        var activeItem = eval(field + ".getSelectedItem()");
                        if(!!activeItem) {
                            $model['especies'][activeItem['model_']] = activeItem['label_'];
                        }
                    }else{
                        $model[$(this).attr('id')] = $(this).val();
                    }
                });
                $cod = $('#entidade_especie_codEspeciePmap').val();

                if($cod){
                    $model = JSON.stringify($model);
                    $modalEspeciePmap = $.fn.dialog2({
                        id: 'codEspeciePmapInfoModal',
                        content: "{{ path('especie_modal') }}",
                        showCloseHandle: true,
                        closeOnOverlayClick: false,
                        closeOnEscape: false,
                        parameters: { 'codEspeciePmap': $cod, 'model' : $model, 'codEspecie': $codEspecie},
                        initialLoadText: 'Carregando...',
                    });

                    $closeButton = $("#codEspeciePmapInfoModal").parent().find('.close');

                    $($closeButton).on('click', function(){
                        if(
                        localStorage.getItem("lastPmapTaxId") !=
                        localStorage.getItem("lastPmapApplyTaxId")){
                            $('#entidade_especie_codEspeciePmap').val('');
                        }

                    });


                }else{
                    $.fn.dialog2.helpers.alert('Você deve informar um PMAP-TAX-ID.', {
                        title: 'Atenção',
                        closeOnEscape: false,

                    });
                }

            });

            $('#btn-searchEspeciePmapId').on('click', function () {
                $('.modal')
                    .css('z-index', 1040)
                    .addClass('stacked');
                $model = {};
                $('form').find('.especiePmap').each(function (index) {
                    $model[$(this).attr('id')] = $(this).val();
                });
                var cod = $('#entidade_especie_codEspeciePmap').val();
                $modalEspeciePmapSearch = $.fn.dialog2({
                    content: "{{ path('especie_modal_search') }}",
                    showCloseHandle: true,
                    closeOnOverlayClick: false,
                    closeOnEscape: false,
                    parameters: "codEspeciePmap="+cod+"&model="+JSON.stringify($model),
                    initialLoadText: 'Carregando...'
                });

            });
        </script>
    {% endspaceless %}

{% endblock codeobject_widget %}

{% block multiplechoice_widget %}    
    <div>
        <select id='{{ id }}'>
        </select>
    </div>
    <script>
        $(document).ready(function(){
            $('#{{ id }}').select2({
                placeholder: '{{ placeholder }}',
                multiple: true,
                width: '100%',
                language: 'pt-BR',
                ajax: {
                    url: '{{ path(url) }}',
                    dataType: 'json',
                    delay: 250,
                    data: function (params){
                        let inputdata = $('#{{ id }}').select2('data');
                        let ids = [];

                        for (let i = inputdata.length - 1; i >= 0; i--) {
                            ids.push(inputdata[i].id);
                        }

                        return {
                            search: params.term,
                            page: params.page - 1 || 0,
                            ids: ids
                        }
                    }
                }
            });
        });
        $('form').submit(function(evt){
            var value = '';
            var sep = '';
            $('#{{ id }}').select2('data').forEach(function(el){
                value += sep + el.id;
                if(sep === '') sep = ',';
            });

            $(this).append('<input type="hidden" id="{{ id }}" name="{{ id }}" value="' + value + '" /> ');
            return true;
        });
    </script>
{% endblock multiplechoice_widget %}
    
{% block customtext_widget %}
    {% spaceless %}
        <input value="{{ value }}" type="text" {{ block('widget_attributes') }}  />
        <script>
            $(document).ready(function(){
                {% if required %}
                    $('#{{ id }}')[0].addEventListener('invalid', function(event){
                        $('#{{ id }}').setError("Por favor, informar um valor válido.");
                        $('#{{ id }}').css({
                            "border-color": "rgb(185, 74, 72)",
                            "color": "rgb(185, 74, 72)"
                        });

                        var labelFor = (({{id}}).id);
                        $('label[for='+labelFor+'').css({
                            "border-color": "rgb(185, 74, 72)",
                            "color": "rgb(185, 74, 72)"
                        });                
                        $("span[id={{id}}]").css({
                            "border-color": "rgb(185, 74, 72)",
                            "color": "rgb(185, 74, 72)"
                        });

                        if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == ({{id}}).id){
                            localStorage.setItem('scrolling', ({{id}}).id);
                            $('html,body').animate({scrollTop: ($('label[for='+labelFor+']').offset().top) - 35}, 1000);
                        }
                        event.preventDefault();
                    });
                    
                    $('#{{ id }}')[0].addEventListener('input', function(event){
                        if($('#{{ id }}')[0].validity.valid){
                            $('#{{ id }}').setError(false);
                            $('#{{ id }}').css({
                                "border-color": "",
                                "color": ""
                            });
                            
                            var labelFor = (({{id}}).id);
                            $('label[for='+labelFor+'').css({
                                "border-color": "",
                                "color": ""
                            });                
                            $("span[id={{id}}]").css({
                                "border-color": "",
                                "color": ""
                            });
                            if(localStorage.getItem('scrolling') == ({{id}}).id){
                                localStorage.setItem('scrolling', '');
                            }
                        }
                    });
                {% endif %}
            });
        </script>
    {% endspaceless %}
{% endblock customtext_widget %}