{% 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 %}
<div id="form-container">
    <div class="title">
        <h2><a name='editar' href='#edicao'>{{'cabecalho.alterar.municipio'|trans}}</a></h2>
    </div>    

{{ form_errors(edit_form) }}

       
<form id="formulario" class="form-horizontal" action="{{ path('municipio_update', { 'id': entity.id }) }}" method="post" {{ form_enctype(edit_form) }}>
    <fieldset style="float: left; margin: 10px;">
        
        {{ form_widget(edit_form._token) }}                
        <div class="control-group">
            {{ form_label(edit_form.txtNome) }}
            <div class="controls">
                {{ form_widget(edit_form.txtNome,{ 'attr': {'class': 'input-xlarge focus'} }) }}
              <span class="help-inline">{{ form_errors(edit_form.txtNome) }}</span>
            </div>
        </div>
                        <div class="control-group">
            {{ form_label(edit_form.txtIbge) }}
            <div class="controls">
                {{ form_widget(edit_form.txtIbge,{ 'attr': {'class': 'input-xlarge'} }) }}
              <span class="help-inline">{{ form_errors(edit_form.txtIbge) }}</span>
            </div>
        </div>
        <div class="control-group">
            {{ form_label(edit_form.isMonitorado) }}
            <div class="controls">
                {{ form_widget(edit_form.isMonitorado) }}
              <span class="help-inline">{{ form_errors(edit_form.isMonitorado) }}</span>
            </div>
        </div>

   {#      
        <div class="control-group">
            {{ form_label(edit_form.geoLocalizacao) }}
            <div class="controls">
                {{ form_widget(edit_form.geoLocalizacao,{ 'attr': {'class': 'input-xlarge'} }) }}
              <span class="help-inline">{{ form_errors(edit_form.geoLocalizacao) }}</span>
            </div>
        </div>
        #}                        
        <div class="control-group">
            {{ form_label(edit_form.shapefile) }}
            <div class="controls">
                {{ form_widget(edit_form.shapefile,{ 'attr': {'class': 'input-small'} }) }}
              <span class="help-inline">{{ form_errors(edit_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 poligono.</p>
            </div>
        </div>
        <div class="control-group" style="position: relative;">
            {{ form_label(edit_form.codEstado) }}
            <div class="controls">
                {{ form_widget(edit_form.codEstado,{ 'attr': {'class': 'input-xlarge'} }) }}
              <span class="help-inline">{{ form_errors(edit_form.codEstado) }}</span>
            </div>
        </div>
        <div class="control-group" style="height: 270px; position: relative;">
            {{ form_label(edit_form.indOrdem) }}
            <div class="drag-sort-content controls well" id="orderList">
                <ul>
                    <li id="draggable" class="ui-state-highlight-move" id="0">{{entity.txtNome}}</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="" href="{{ path('municipio') }}" title="{{'acao.cancelar'|trans}}">{{'acao.cancelar'|trans}}</a>
    </div>
</form>
</div>
<script>
    var codEdit = '{%if entity.id is not empty %}{{ entity.id }}{% endif %}';
    var codHidden = '{%if entity.id is not empty %}{{ edit_form.codEstado.vars.value }}{% endif %}';
    var isFirstLoad = true;
    
    $(function() {
                
                $("#{{edit_form.txtNome.vars.id}}").keyup(function(){
                    if($(this).val().trim() != ''){
                        $(".ui-state-highlight-move").text($(this).val());
                    }else{
                        $(".ui-state-highlight-move").text("{{edit_form.txtNome.vars.value}}");
                    }
                });
                
		$( "#sortable" ).sortable({
			revert: true,
                        cancel: ".ui-state-default",
                        placeholder: "ui-state-box",
                        receive: function(){
                            $( "#draggable" ).draggable('disable');
                        },
                        update: updateMunicipioSortableList
		});
		$( "#draggable" ).draggable({
			connectToSortable: "#sortable",
			helper: "clone",
                        scroll: true, 
                        scrollSensitivity: 20,
			revert: "invalid",
                        create: function(){
                            $( "#draggable" ).draggable('disable');
                        }
		});
		$( "ul, li" ).disableSelection();
	});
        
        function updateMunicipioSortableList(){
            var array = $( "#sortable" ).sortable('toArray');
            var isOnArray = false;
            for( i=0; i<array.length; i++ ){
                if(array[i] == 0){
                    isOnArray = true;
                    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]);
                    }
                }
            }
            if(!isOnArray && array.length > 0){
                 $("#anterior").val('');
                 $("#proximo").val(array[0]);
            }else if(!isOnArray && array.length == 0){
                $("#anterior").val('');
                $("#proximo").val('');
            }
        }
        
        function updateMunicipioOrderList(obj){
            item = obj.getSelectedObject();
            if (item) {
                executeUpdateMunicipioOrderList(item.id);
            }else{
                $( "#draggable" ).draggable('disable');
                $("#sortable").html('Escolha um estado.');
            }           
        }
        
        function executeUpdateMunicipioOrderList(id, obj) {
            var request = $.ajax({
            url: "{{ path('municipio_json') }}",
            type: "GET",
            data: { codEstado: id },
            dataType: "json",
            beforeSend: function ( xhr ) {
                if (obj) {
                    obj.setLoading(true);
                }
                loader('#orderList');
            }
            });

            request.done(function(retorno) {
                var html = '';
                var classe = 'ui-state-default';
                if(retorno.length > 0){
                    $.each(retorno, function(i, item){
                        if(codEdit == item.id){
                            classe = 'ui-state-highlight-move';
                            item.id = '';
                            item.txtNome = $("#{{edit_form.txtNome.vars.id}}").val();
                        }
                        html += '<li class="'+classe+'" id="'+item.id+'">'+item.txtNome+'</li>';
                        classe = 'ui-state-default';
                    });

                    if(isFirstLoad || $("input[name='{{edit_form.vars.name~'['~edit_form.codEstado.vars.name~']'}}']").val() == codHidden){
                        $( "#draggable" ).draggable('disable');
                    }else{
                        $( "#draggable" ).draggable('enable');
                    }
                }else{
                    $( "#draggable" ).draggable('disable');
                    html = 'Nenhum municípo encontrado para este estado.';
                }
                $("#sortable").html(html);

                updateMunicipioSortableList();

                //retira o loading passando true no segundo parâmetro
                loader('#orderList', true);
                if (obj) {
                    obj.setLoading(false);
                }
                if(isFirstLoad){
                    $( "#draggable" ).draggable('disable');
                    isFirstLoad = false;
                    $(".focus").val($(".focus").val()).focus();
                }
            });

            request.fail(function(jqXHR, textStatus) {
                alert( "Request failed: " + textStatus );
                if (obj) {
                    obj.setLoading(false);
                }
            });              
        }
        
        
        
        $(document).ready(function(){
            //$('form#formulario').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");
            });
            id = '{{entity.codEstado.id}}';
        
            if (id) {
                executeUpdateMunicipioOrderList(id);
            }else{
                $( "#draggable" ).draggable('disable');
                $("#sortable").html('Escolha um estado.');
            }            
        });
</script>
{% endblock %}