{% extends "propesqBundle::layout.html.twig" %}

{% block stylesheets %}
    <!-- TODO: verificar caminho do arquivo -->
    <link rel="stylesheet" href="{{ asset('bundles/propesq/css/edit.css') }}" type="text/css" media="all" />
{% endblock %}

{% block content %}
    <script type="text/javascript">
        
        function updateMunicipioOrderList(obj){
            var item = obj.getSelectedObject();
            
            if(item){

                var request = $.ajax({
                url: "{{ path('municipio_json') }}",
                type: "GET",
                data: { codEstado: item.id },
                dataType: "json",
                beforeSend: function ( xhr ) {
                    obj.setLoading(true);
                    loader('#orderList');
                }
                });

                request.done(function(retorno) {
                    var html = '';
                    if(retorno.length > 0){
                        $.each(retorno, function(i, item){
                            if(i == 0) { 
                                $("#anterior").val('');
                                $("#proximo").val(item.id);
                            }
                            html += '<li class="ui-state-default" id="'+item.id+'">'+item.txtNome+'</li>';
                        });
                        $( "#draggable" ).draggable('enable');
                    }else{
                        $("#anterior").val('');
                        $("#proximo").val('');
                        $( "#draggable" ).draggable('disable');
                        html = 'Nenhum município encontrado para este estado.';
                    }
                    $("#sortable").html(html);

                    //retira o loading passando true no segundo parâmetro
                    loader('#orderList', true);
                    obj.setLoading(false);
                });

                request.fail(function(jqXHR, textStatus) {
                    alert( "Request failed: " + textStatus );
                    obj.setLoading(false);
                });   

            }else{
                $( "#draggable" ).draggable('disable');
                $("#sortable").html('Escolha um estado.');
            }
        }
        
    $(document).ready(function() {
        //$('form#formulario-municipio').preventDoubleSubmission();
        $(document).on('DOMNodeInserted', function(e) {
            if( e.target.className == 'alert alert-error') {
                setTimeout(function() {
                    $('button[type="submit"]').removeAttr("disabled");
                }, 100);

            }
        });
        $('form').submit(function(){
            $('button[type="submit"]').attr("disabled", "disabled");
        });
                if($("#{{form.txtNome.vars.id}}").val() != ''){
                    $(".ui-state-highlight-move.municipio").text($("#{{form.txtNome.vars.id}}").val());
                }
                
                $("#{{form.txtNome.vars.id}}").keyup(function(){
                    if($(this).val().trim() != ''){
                        $(".ui-state-highlight-move.municipio").text($(this).val());
                    }else{
                        $(".ui-state-highlight-move.municipio").text("{{'Novo ' ~ 'entidade.municipio.txtNome'|trans}}");
                    }
                });
        
		$( "#sortable" ).sortable({
			revert: true,
                        cancel: ".ui-state-default",
                        placeholder: "ui-state-box",
                        receive: function(){
                            $( "#draggable" ).draggable('disable');
                        },
                        update: function(){
                            var array = $( "#sortable" ).sortable('toArray');
                            for( i=0; i<array.length; i++ ){
                                if(array[i] == 0){
                                    if(i == 0){
                                        //primeiro
                                        $("#anterior").val('');
                                        $("#proximo").val(array[i+1]);
                                    }else if(i == array.length-1){
                                        //ultimo
                                        $("#anterior").val(array[i-1]);
                                        $("#proximo").val('');
                                    }else{
                                        //qualquer outra posição
                                        $("#anterior").val(array[i-1]);
                                        $("#proximo").val(array[i+1]);
                                    }
                                }
                            }
                        }
		});
		$( "#draggable" ).draggable({
			connectToSortable: "#sortable",
			helper: "clone",
                        scroll: true, 
                        scrollSensitivity: 20,
			revert: "invalid",
                        create: function(){
                            $( "#draggable" ).draggable('disable');
                        }
		});
		$( "ul, li" ).disableSelection();
	});
</script>
    
<div id="form-container">
    <div class="title">
        <h2>
        {%if entity.id is defined and entity.id is not null%} 
            {{'cabecalho.alterar.municipio'|trans}}
        {%else%}  
            {{'cabecalho.incluir.municipio'|trans}}
        {%endif%}
        </h2>
    </div>    

{{ form_errors(form) }}

       
<form id="formulario-municipio" class="{% if  not includeLayout %}ajax {%endif%} form-horizontal" action="{%if entity.id is defined and entity.id is not null%} {{ path('municipio_update', { 'id': entity.id }) }} {%else%} {{ path('municipio_create') }} {%endif%}" method="post" {{ form_enctype(form) }}>
    <fieldset style="float: left; margin: 10px;">
        
        {{ form_widget(form._token) }}
        
        
        {% if not includeLayout %}
            <input type='hidden' name='noLayout' value='true'>
        {% endif %}
                        <div class="control-group">
            {{ form_label(form.txtNome) }}
            <div class="controls">
                {{ form_widget(form.txtNome,{ 'attr': {'class': 'input-xlarge focus'} }) }}
              <span class="help-inline">{{ form_errors(form.txtNome) }}</span>
            </div>
        </div>
                        <div class="control-group">
            {{ form_label(form.txtIbge) }}
            <div class="controls">
                {{ form_widget(form.txtIbge,{ 'attr': {'class': 'input-xlarge'} }) }}
              <span class="help-inline">{{ form_errors(form.txtIbge) }}</span>
            </div>
        </div>
        <div class="control-group">
            {{ form_label(form.isMonitorado) }}
            <div class="controls">
                {{ form_widget(form.isMonitorado) }}
              <span class="help-inline">{{ form_errors(form.isMonitorado) }}</span>
            </div>
        </div>
{#
        <div class="control-group">
            {{ form_label(form.geoLocalizacao) }}
            <div class="controls">
                {{ form_widget(form.geoLocalizacao,{ 'attr': {'class': 'input-xlarge'} }) }}
              <span class="help-inline">{{ form_errors(form.geoLocalizacao) }}</span>
            </div>
        </div>
#}  
  
         <div class="control-group">
            {{ form_label(form.shapefile) }}
            <div class="controls">
                {{ form_widget(form.shapefile,{ 'attr': {'class': 'input-small'} }) }}
              <span class="help-inline">{{ form_errors(form.shapefile) }}</span>
              <p class="help-block">O arquivo de geometria deve estar em formato ShapeFile (shp) e deve conter uma única feição do tipo polígono.</p>
            </div>
        </div>   
        <div class="control-group" style="position: relative">
            {{ form_label(form.codEstado) }}
            <div class="controls">
                {{ form_widget(form.codEstado,{ 'attr': {'class': 'input-xlarge'} }) }}
              <span class="help-inline">{{ form_errors(form.codEstado) }}</span>
            </div>
        </div>
         <div class="control-group" style="position: relative; height: 270px;">
            {{ form_label(form.indOrdem) }}
            <div class="drag-sort-content controls well" id="orderList">
                <ul>
                    <li id="draggable" class="ui-state-highlight-move municipio" id="0">{{'Novo ' ~ 'entidade.municipio.txtNome'|trans}}</li>
                </ul>
                <ul id="sortable">Escolha um estado.</ul>
            </div>
                <input type="hidden" name="codAnterior" id="anterior">
                <input type="hidden" name="codProximo" id="proximo">
        </div>
            </fieldset>
    <div class=" div-actions">
        <button type="submit" class="btn btn-primary">{{'acao.salvar'|trans}}</button>
        <a class=""{% if not includeLayout %} onclick="$(this).parents('.modal').find('.close').click(); return false;" {% endif %} href="{{ path('municipio') }}" title="{{'acao.cancelar'|trans}}">{{'acao.cancelar'|trans}}</a>
    </div>
</form>
</div>
{% endblock %}