{% 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>
        {%if entity.id is defined and entity.id is not null%} 
            {{'cabecalho.alterar.camada'|trans}}
            {% set isEdit = true %}
        {%else%}  
            {{'cabecalho.incluir.camada'|trans}}
        {%endif%}
        </h2>
    </div>    

{{ form_errors(form) }}

       
<form id="formulario-camada" class="{% if  not includeLayout %}ajax {%endif%} form-horizontal" action="{%if entity.id is defined and entity.id is not null%} {{ path('camada_update', { 'id': entity.id }) }} {%else%} {{ path('camada_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.txtEnderecoEletronico) }}
            <div class="controls">
                <div class="input-group">
                    {{ form_widget(form.txtEnderecoEletronico,{ 'attr': {'class': 'input-xlarge '} }) }}
                    <span class="input-group-btn">
                        <button id="obterCamadas" class="btn btn-default"  type="button"> {#<i class="icon-search"></i>#} {{ 'geoinformacao.obter_camadas' |trans }}</button>
                    </span>
                </div>
                <span class="help-inline">{{ form_errors(form.txtEnderecoEletronico) }}</span>
            </div>
        </div>

        <div class="control-group">
            {{ form_label(form.txtCamadas) }}
            <div class="controls">
                {{ form_widget(form.txtCamadas,{ 'attr': {'class': 'input-xlarge '} }) }}

            </div>
            <div class="help-inline">{{ form_errors(form.txtCamadas) }}</div>
        </div>


        <div class="control-group">
            {{ form_label(form.codGrupoCamada) }}
            <div class="controls">
                {{ form_widget(form.codGrupoCamada,{ 'attr': {'class': 'input-xlarge '} }) }}
                <span class="help-inline">{{ form_errors(form.codGrupoCamada) }}</span>
            </div>
        </div>

        <div class="control-group">
            {{ form_label(form.isVisivel) }}
            <div class="controls">
                {{ form_widget(form.isVisivel,{ 'attr': {'class': 'input-xlarge '} }) }}
                <span class="help-inline">{{ form_errors(form.isVisivel) }}</span>
            </div>
        </div>

        <div class="control-group">
            {{ form_label(form.isTile) }}
            <div class="controls">
                {{ form_widget(form.isTile,{ 'attr': {'class': 'input-xlarge '} }) }}
                <span class="help-inline">{{ form_errors(form.isTile) }}</span>
            </div>
        </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('camada') }}" title="{{'acao.cancelar'|trans}}">{{'acao.cancelar'|trans}}</a>
    </div>



</form>
</div>

    {% include 'propesqBundle:GeoInformacao:parser.html.twig' with {} %}

<script>

    function getCapabilities(url, callback) {
        var parser = new ol.format.WMSCapabilities();
        $.ajax({
            type: "POST",
            cache: false,
            url: "{{ url('camada_getcapabilities') }}",
            dataType: "xml",
            beforeSend: function(){
                loader('body', false);
            },
            success: function(response) {
                if(response){
                var result = parser.read(response);
                var options = result.Capability.Layer.Layer;
               // $('#log').html(syntaxHighlight(JSON.stringify(options, null, 2)));
                callback(options);
//                $("#resultados-google").html("");
//                if(res.status == "OK"){
//                    for (i in res.results){
//                        var componente = tmp;
//                        var endereco = res.results[i].formatted_address;
//                        componente = componente.replace("__NOME__", endereco);
//                        componente = componente.replace("__NOME__", endereco);
//                        componente = componente.replace("__LAT__", res.results[i].geometry.location.lat);
//                        componente = componente.replace("__LNG__", res.results[i].geometry.location.lng);
//                        $("#resultados-google").append(componente+"<br/>");
//                    }
                }else{
                   callback();
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log("Erro");
                callback(false);
            },
            data: {
                url: url,

            },
            async: true
        });
    }

    var url = '';


    {% if isEdit %}
        var valorInicial = '{{ entity.txtCamadas }}';
        url = "{{ entity.txtEnderecoEletronico |raw }}";
    {% endif %}



    function atualizarCamadas(url, valorInicial){
        $("#{{ form.txtCamadas.vars.id }}").setError(false);

        getCapabilities(url, function(options){
            $("#{{ form.txtCamadas.vars.id }}").html('');

            if(options){
                options.forEach(function(layer) {
                    var option = '<option value="'+layer.Name+'">'+layer.Title+'</option>';
                    $("#{{ form.txtCamadas.vars.id }}").append(option);


                });
                if(!!valorInicial) {
                    $.each(valorInicial.split(","), function (i, e) {
                        $("#{{ form.txtCamadas.vars.id }} option[value='" + e + "']").prop("selected", true);
                    });
                }
                $("#{{ form.txtCamadas.vars.id }}").trigger("liszt:updated");
            }else{
                $("#{{ form.txtCamadas.vars.id }}").setError('Não foi possível obter as camadas do servidor, verifique  se o servidor está acessível.');
                $("#{{ form.txtCamadas.vars.id }}").trigger("liszt:updated");
                console.log('não encontrado');
            }

            loader('body', true);
        });
    }

    $(document).ready(function(){
        //$('form#formulario-camada').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 isEdit %}
            atualizarCamadas(url, valorInicial);
        {% endif %}




        $("#obterCamadas").on('click', function(){
            url = $("#{{ form.txtEnderecoEletronico.vars.id }}").val();

            atualizarCamadas(url);

        });


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

    });
</script>




{% endblock %}