{% 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">
        var codEdit = '{%if entity.id is not empty %}{{ entity.id }}{% endif %}';
        
        function updateEstadoOrderList(obj){
            var item = obj.getSelectedObject();
            
            if(item){
                executeUpdateEstadoOrderList(item.id, obj);
            }else{
                $( "#draggableEstado" ).draggable('disable');
                $("#sortableEstado").html('Escolha um país.');
            }
        }
        
        function executeUpdateEstadoOrderList(id, obj){
            var classe = 'ui-state-default';
                
            var request = $.ajax({
                url: "{{ path('estado_json') }}",
                type: "GET",
                data: { codPais: id },
                dataType: "json",
                beforeSend: function ( xhr ) {
                    if (obj) {
                        obj.setLoading(true);
                    }
                    loader('#orderListEstado');
                }
                });

                request.done(function(retorno) {
                    var html = '';
                    if(retorno.length > 0){
                        $.each(retorno, function(i, item){
                            if(item.id == codEdit){
                                $( "#draggableEstado" ).draggable('enable');
                            }else{
                                $( "#draggableEstado" ).draggable('disable');
                            }
                            
                            if(codEdit == item.id){
                                classe = 'ui-state-highlight-move';
                                item.id = '';
                                item.txtNome = $("#{{form.txtNome.vars.id}}").val();
                            }
                            html += '<li class="'+classe+'" id="'+item.id+'">'+item.txtNome+'</li>';
                            classe = 'ui-state-default';
                        });
                    }else{
                        $("#anteriorEstado").val('');
                        $("#proximoEstado").val('');
                        $( "#draggableEstado" ).draggable('disable');
                        html = 'Nenhum estado encontrado para este país.';
                    }
                    {% if entity.id is empty %}
                        $( "#draggableEstado" ).draggable('enable');
                    {% else %}
                        $( "#draggableEstado" ).draggable('disable');
                    {% endif %}
                    $("#sortableEstado").html(html);

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

                request.fail(function(jqXHR, textStatus) {
                    alert( "Request failed: " + textStatus );
                    if (obj) {
                        obj.setLoading(false);
                    }
                });
        }
        
    $(document).ready(function() {
        //$('form#formulario-estado').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.estado").text($("#{{form.txtNome.vars.id}}").val());
                }
                
                $("#{{form.txtNome.vars.id}}").keyup(function(){
                    if($(this).val().trim() != ''){
                        $(".ui-state-highlight-move").text($(this).val());
                    }else{
                        $(".ui-state-highlight-move").text("{{'Novo ' ~ 'entidade.estado.txtNome'|trans}}");
                    }
                });
        
		$( "#sortableEstado" ).sortable({
			revert: true,
                        cancel: ".ui-state-default",
                        placeholder: 'ui-state-box',
                        receive: function(){
                            $( "#draggableEstado" ).draggable('disable');
                        },
                        update: function(){
                            var array = $( "#sortableEstado" ).sortable('toArray');
                            for( i=0; i<array.length; i++ ){
                                if(array[i] == 0){
                                    if(i == 0){
                                        //primeiro
                                        $("#anteriorEstado").val('');
                                        $("#proximoEstado").val(array[i+1]);
                                    }else if(i == array.length-1){
                                        //ultimo
                                        $("#anteriorEstado").val(array[i-1]);
                                        $("#proximoEstado").val('');
                                    }else{
                                        //qualquer outra posição
                                        $("#anteriorEstado").val(array[i-1]);
                                        $("#proximoEstado").val(array[i+1]);
                                    }
                                }
                            }
                        }
		});
		$( "#draggableEstado" ).draggable({
			connectToSortable: "#sortableEstado",
			helper: "clone",
                        scroll: true, 
                        scrollSensitivity: 20,
			revert: "invalid",
                        create: function(){
                            $( "#draggableEstado" ).draggable('disable');
                        }
		});
		$( "ul, li" ).disableSelection();
                
               var id = '{{entity.codPais.id}}';
        
                if (id) {
                    executeUpdateEstadoOrderList(id);
                }else{
                    $( "#draggableEstado" ).draggable('disable');
                    $("#sortableEstado").html('Escolha um país.');
                }
	});
        
    </script>
    
<div id="form-container">
    <div class="title">
        <h2>
        {%if entity.id is defined and entity.id is not null%} 
            {{'cabecalho.alterar.estado'|trans}}
        {%else%}  
            {{'cabecalho.incluir.estado'|trans}}
        {%endif%}
        </h2>
    </div>    

{{ form_errors(form) }}

       
<form id="formulario-estado" class="{% if  not includeLayout %}ajax {%endif%} form-horizontal" action="{%if entity.id is defined and entity.id is not null%} {{ path('estado_update', { 'id': entity.id }) }} {%else%} {{ path('estado_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.txtSigla) }}
            <div class="controls">
                {{ form_widget(form.txtSigla,{ 'attr': {'class': 'input-xlarge', 'style' : 'text-transform:uppercase'}} ) }}
              <span class="help-inline">{{ form_errors(form.txtSigla) }}</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.indIrdem) }}
            <div class="controls">
                {{ form_widget(form.indIrdem,{ 'attr': {'class': 'input-xlarge'} }) }}
              <span class="help-inline">{{ form_errors(form.indIrdem) }}</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.codPais) }}
            <div class="controls">
                {{ form_widget(form.codPais,{ 'attr': {'class': 'input-xlarge'} }) }}
              <span class="help-inline">{{ form_errors(form.codPais) }}</span>
            </div>
        </div>
        <div class="control-group" style="position: relative; height: 270px;">
            {{ form_label(form.indOrdem) }}
            <div class="drag-sort-content controls well" id="orderListEstado">
                <ul>
                    <li id="draggableEstado" class="ui-state-highlight-move estado" id="0">{{'Novo ' ~ 'entidade.estado.txtNome'|trans}}</li>
                </ul>
                <ul id="sortableEstado">Escolha um país.</ul>
            </div>
                <input type="hidden" name="codAnterior" id="anteriorEstado">
                <input type="hidden" name="codProximo" id="proximoEstado">
        </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('estado') }}" title="{{'acao.cancelar'|trans}}">{{'acao.cancelar'|trans}}</a>
    </div>
</form>
</div>
{% endblock %}