{% extends "propesqBundle::layout.html.twig" %}
{% import  "propesqBundle:Form:function.html.twig" as form %}

{% block stylesheets %}
    <!-- TODO: verificar caminho do arquivo -->
    <link rel="stylesheet" href="{{ asset('bundles/propesq/css/edit.css') }}" type="text/css" media="all" />
    <style>
            .localidade-label{
                width: 180px !important;
            }
            
            .localidade-controls{
                margin-left: 210px !important;
            }

        .messageContainer{





                border-radius: 5px;
                background-color: #e3f3f8;
                margin: 10px;
                overflow-x: hidden;


        }
    </style>
{% endblock %}

{% block content %}
<div class="messageContainer">
    {% for index, flashMessage in app.session.getFlash('interoperabilidadeMsgSuccess') %}

        <div class="alert alert-success alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>{{ ('interoperabilidadeSisPCSPA.'~index) | trans }}</strong> {{ ('interoperabilidadeSisPCSPA.'~flashMessage)|trans }}
        </div>
    {% endfor %}


    {% for index, flashMessage in app.session.getFlash('interoperabilidadeMsgWarning') %}

        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>{{ ('interoperabilidadeSisPCSPA.warningMsg') | trans }}</strong> {{ ('interoperabilidadeSisPCSPA.warning.'~index)|trans }}
        </div>
    {% endfor %}

</div>


<div id="form-container">
    <div class="title">
        <h2>{{'cabecalho.detalhar.localidade'|trans}}</h2>
    </div>    

<form class="form-horizontal">
    <fieldset style="float: left; margin: 10px;">
        <legend>{{'cabecalho.fieldset.localidade.dadosbasicos'|trans}}</legend>
        <div class="row-fluid show-grid">
            <div class="span4">
                {{ form.show('entidade.localidade.codEstado',entity.codEstado.txtNome)}}
            </div>
            <div class="span4">
                {{ form.show('entidade.localidade.codMunicipio',entity.codMunicipio.txtNome)}}
            </div>
            <div class="span4">
                {{ form.show('entidade.localidade.txtNome',entity.txtNome)}}
            </div>
        </div>
        <div class="row-fluid show-grid">
            <div class="span4">
                {{ form.show('entidade.localidade.numDistanciaMunicipio',entity.numDistanciaMunicipio|number_format(2, 'locale.decimalsep'|trans, 'locale.thousandsep'|trans))}}
            </div>
        </div>
        <div class="row-fluid show-grid">
            <div class="span8">
                <div class="control-group">
                    <label class='control-label'>{{'entidade.localidade.txtObservacao'|trans}}</label>
                    <div class="controls">
                        <textarea readonly class='cemporcento' style="height: 240px;">{{ entity.txtObservacao }}</textarea>
                    </div>
                </div>
            </div>
            <div class="span4">
                <div class="control-group">
                    <label class='control-label'>{{'entidade.localidade.geoLocalizacao'|trans}}</label>
                    <div class="controls">
                        <img style="border: 1px solid #c8c8c8;-moz-border-radius: 10px; -webkit-border-radius: 10px;-khtml-border-radius: 10px; border-radius: 10px;" border="0" src="http://maps.googleapis.com/maps/api/staticmap?size=400x300&sensor=false&key={{ key_Gmaps }}&markers=color:0x2d6987|label:1|{{entity.geoLocalizacaoFormatado.lat~' '~entity.geoLocalizacaoFormatado.lng}}">
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
        
    <fieldset style="float: left; margin: 10px;">
        <legend>{{'cabecalho.fieldset.localidade.apoiocomunidade'|trans}}</legend>
            <div class="tabbable" style="background-color: white; padding: 0px;">
            <ul class="nav nav-tabs" id="tabComunidadeTemporal">
                {% for formTemporal in comunidadeTemporal %}
                    <li><a href="#temporal_comunidade_{{formTemporal.id}}" data-toggle="tab">{%if loop.index0 == 0%}Atual{%else%}{{formTemporal.datInicio|date('d/m/Y h:i')}}{%endif%}</a></li>
                {% endfor %}
            </ul>      
            <div class="tab-content">
            {% for formTemporal in comunidadeTemporal %}
                <div class="tab-pane" id="temporal_comunidade_{{formTemporal.id}}" style="width: 95%;">

                    <div class="row-fluid show-grid">
                        {#<div class="span4">
                            {{ form.show('entidade.localidade.localidadeComunidadeTemporal.codTipoAcesso',formTemporal.codTipoAcesso.txtNome)}}
                        </div>#}
                        <div class="span4">        
                            {{ form.show('entidade.localidade.localidadeComunidadeTemporal.codTipoEnergia',formTemporal.codTipoEnergia.txtNome is null ? 'Não informado' : formTemporal.codTipoEnergia.txtNome)}}
                        </div>    
                        <div class="span4">
                            {{ form.show('entidade.localidade.localidadeComunidadeTemporal.isPostoTelefonico',formTemporal.isPostoTelefonico is null ? 'Não informado' : formTemporal.isPostoTelefonico?'Sim':'Não'  )}}
                        </div>
                        <div class="span4">
                            {{ form.show('entidade.localidade.localidadeComunidadeTemporal.isAgenciaBancaria',formTemporal.isAgenciaBancaria is null ? 'Não informado' : formTemporal.isAgenciaBancaria?'Sim':'Não')}}
                        </div>
                    </div>

                    <div class="row-fluid show-grid">
                        <div class="span4">
                            {{ form.show('entidade.localidade.localidadeComunidadeTemporal.isServicoCorreio',formTemporal.isServicoCorreio is null ? 'Não informado' : formTemporal.isServicoCorreio?'Sim':'Não')}}
                        </div>
                        <div class="span4">
                            {{ form.show('entidade.localidade.localidadeComunidadeTemporal.isCentroComunitario',formTemporal.isCentroComunitario is null ? 'Não informado' : formTemporal.isCentroComunitario?'Sim':'Não')}}
                        </div>
                        <div class="span4">
                            {{ form.show('entidade.localidade.localidadeComunidadeTemporal.isAgenciaLoterica',formTemporal.isAgenciaLoterica is null ? 'Não informado' : formTemporal.isAgenciaLoterica?'Sim':'Não')}}
                        </div>
                    </div>

                    <div class="row-fluid show-grid">
                        <div class="span4">
                            {{ form.show('entidade.localidade.localidadeComunidadeTemporal.isClube',formTemporal.isClube is null ? 'Não informado' : formTemporal.isClube?'Sim':'Não')}}
                        </div>
                        <div class="span4">
                            {{ form.show('entidade.localidade.localidadeComunidadeTemporal.isIgreja',formTemporal.isIgreja is null ? 'Não informado' : formTemporal.isIgreja?'Sim':'Não')}}
                        </div>
                    </div>

                    <div class="row-fluid show-grid">
                        <div class="span6">
                            <div class="control-group">
                                <label class='control-label'>{{'entidade.localidade.localidadeComunidadeTemporal.localidadeComunidadeTemporalServicoEscola'|trans}}</label>
                                <div class="controls">
                                        <div id="servicoescola-fields-list">
                                            {% for formField in formTemporal.localidadeComunidadeTemporalServicoEscola %}
                                                <input type="text" readonly class='cemporcento' style="margin-bottom: 5px;" value='{{formField.codServicoEscola.txtNome}}'>
                                            {% endfor %}
                                        </div>
                                </div>
                            </div>
                        </div>
                        <div class="span6">
                            <div class="control-group">
                                <label class='control-label'>{{'entidade.localidade.localidadeComunidadeTemporal.localidadeComunidadeTemporalServicoSaude'|trans}}</label>
                                <div class="controls">
                                        <div id="servicosaude-fields-list">
                                            {% for formField in formTemporal.localidadeComunidadeTemporalServicoSaude %}
                                                <input type="text" readonly class='cemporcento' style="margin-bottom: 5px;" value='{{formField.codServicoSaude.txtNome}}'>
                                            {% endfor %}
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            {% endfor %}
            </div>
    </fieldset>
    <fieldset style="float: left; margin: 10px;">
        <legend>{{'cabecalho.fieldset.localidade.apoiopesca'|trans}}</legend>
            <div class="tabbable" style="background-color: white; padding: 0px;">
            <ul class="nav nav-tabs" id="tabPescaTemporal">
                {% if pescaTemporal|length > 0 %}
                <li><a href="#temporal_pesca_0" data-toggle="tab"><i class="icon-align-left"></i>Gráficos estatísticos</a></li>
                {% endif %}
                {% for formTemporal in pescaTemporal %}
                    <li><a href="#temporal_pesca_{{formTemporal.id}}" data-toggle="tab">{%if loop.index0 == 0%}Atual{%else%}{{formTemporal.datInicio|date('d/m/Y h:i')}}{%endif%}</a></li>
                {% endfor %}
            </ul>      
            <div class="tab-content">
                <div class="tab-pane" id="temporal_pesca_0" style="width: 95%;">
                    <div class="row-fluid show-grid">
                        <div class="span4">
                            <div class="control-group">
                                <label class='control-label'>Selecione os campos para o gráfico</label>
                                <div class="controls">
                                    <label class="checkbox"><input type="checkbox" name="field-chart" value="1" id="field-chart-1">{{'entidade.localidade.localidadePescaTemporal.numCapacidadeCamarasResfriamento'|trans}}</label>
                                    <label class="checkbox"><input type="checkbox" name="field-chart" value="2" id="field-chart-2">{{'entidade.localidade.localidadePescaTemporal.numCamarasResfriamento'|trans}}</label>
                                    <label class="checkbox"><input type="checkbox" name="field-chart" value="3" id="field-chart-3">{{'entidade.localidade.localidadePescaTemporal.numTrapiches'|trans}}</label>
                                    <label class="checkbox"><input type="checkbox" name="field-chart" value="4" id="field-chart-4">{{'entidade.localidade.localidadePescaTemporal.numSalgas'|trans}}</label>
                                    <label class="checkbox"><input type="checkbox" name="field-chart" value="5" id="field-chart-5">{{'entidade.localidade.localidadePescaTemporal.numRanchos'|trans}}</label>
                                    <label class="checkbox"><input type="checkbox" name="field-chart" value="6" id="field-chart-6">{{'entidade.localidade.localidadePescaTemporal.numPostosCombistivel'|trans}}</label>
                                    <label class="checkbox"><input type="checkbox" name="field-chart" value="7" id="field-chart-7">{{'entidade.localidade.localidadePescaTemporal.numPontosRevendaMateriais'|trans}}</label>
                                    <label class="checkbox"><input type="checkbox" name="field-chart" value="8" id="field-chart-8">{{'entidade.localidade.localidadePescaTemporal.numCamarasCongelamento'|trans}}</label>
                                    <label class="checkbox"><input type="checkbox" name="field-chart" value="9" id="field-chart-9">{{'entidade.localidade.localidadePescaTemporal.numCapacidadeCamarasCongelamento'|trans}}</label>
                                    <label class="checkbox"><input type="checkbox" name="field-chart" value="10" id="field-chart-10">{{'entidade.localidade.localidadePescaTemporal.localidadePescaTemporalEmpresaApoioPesca'|trans}}</label>
                                    <button type="button" class="btn" onclick="drawChart2()">Atualizar gráfico</button>
                                </div>
                            </div>                    
                        </div>
                        <div class="span8">
                            <div id="chart_div" style="width: 100%; height: 400px;"></div>
                        </div>
                    </div>
                </div>
            {% for formTemporal in pescaTemporal %}
                <div class="tab-pane" id="temporal_pesca_{{formTemporal.id}}" style="width: 95%;">

                    <div class="row-fluid show-grid">
                        <div class="span4">
                            {{ form.show('entidade.localidade.localidadePescaTemporal.numTrapiches',formTemporal.numTrapiches)}}
                        </div>
                        <div class="span4">        
                            {{ form.show('entidade.localidade.localidadePescaTemporal.numSalgas',formTemporal.numSalgas)}}
                        </div>    
                        <div class="span4">
                            {{ form.show('entidade.localidade.localidadePescaTemporal.numRanchos',formTemporal.numRanchos)}}
                        </div>
                    </div>

                    <div class="row-fluid show-grid">
                        <div class="span6">
                            {{ form.show('entidade.localidade.localidadePescaTemporal.numPostosCombistivel',formTemporal.numPostosCombistivel)}}
                        </div>
                        <div class="span6">
                            {{ form.show('entidade.localidade.localidadePescaTemporal.numPontosRevendaMateriais',formTemporal.numPontosRevendaMateriais)}}
                        </div>
                    </div>

                    <div class="row-fluid show-grid">
                        <div class="span3">
                            {{ form.show('entidade.localidade.localidadePescaTemporal.numCamarasCongelamento',formTemporal.numCamarasCongelamento)}}
                        </div>
                        <div class="span3">
                            {{ form.show('entidade.localidade.localidadePescaTemporal.numCapacidadeCamarasCongelamento',formTemporal.numCapacidadeCamarasCongelamento)}}
                        </div>
                        <div class="span3">
                            {{ form.show('entidade.localidade.localidadePescaTemporal.numCamarasResfriamento',formTemporal.numCamarasResfriamento)}}
                        </div>
                        <div class="span3">
                            {{ form.show('entidade.localidade.localidadePescaTemporal.numCapacidadeCamarasResfriamento',formTemporal.numCapacidadeCamarasResfriamento)}}
                        </div>
                    </div>
                    <div class="row-fluid show-grid">
                        <div class="span12">
                            <div class="control-group">
                                <label class='control-label'>{{'entidade.localidade.localidadePescaTemporal.localidadePescaTemporalEmpresaApoioPesca'|trans}}</label>
                                <div class="controls">
                                        <div id="apoiopesca-fields-list">
                                            {% for formField in formTemporal.localidadePescaTemporalEmpresaApoioPesca %}
                                                <input type="text" readonly style="width: 60%; margin-bottom: 5px;" value='{{formField.txtNome}}'>
                                                <input type="text" readonly style="width: 35%; margin-bottom: 5px;" value='{{formField.txtAreaAtuacao}}'>
                                            {% else %}
                                                <div class="row-fluid"  style="margin-bottom: 5px;">
                                                    <div class="span12">Nenhuma informação fornecida</div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
            </div>
            
    </fieldset>
    <div class=" div-actions">
        {% if is_granted('ROLE_LOCALIDADE_LIST') %}
            <a class="btn" href="{{ path('localidade') }}">
                {{'acao.listar'|trans}}
            </a>
        {% endif %}
        {% if is_granted('ROLE_LOCALIDADE_EDIT') %}
            <a class="btn" href="{{ path('localidade_edit', { 'id': entity.id }) }}">
                {{'acao.editar'|trans}}
            </a>
        {% endif %}
        {% if is_granted('ROLE_LOCALIDADE_DELETE') %}
            <a class="btn btn-danger btn-delete" href="{{ path('localidade_delete', { 'id': entity.id }) }}">
                {{'acao.excluir'|trans}}
            </a>
        {% endif %}
    </div>
</form>
</div>
    <script type="text/javascript"> $('.btn-delete').prepararExclusao(); </script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
        
            var label_chart = [
                'datetime'
                ,'{{'entidade.localidade.localidadePescaTemporal.numCapacidadeCamarasResfriamento'|trans}}'
                ,'{{'entidade.localidade.localidadePescaTemporal.numCamarasResfriamento'|trans}}'
                ,'{{'entidade.localidade.localidadePescaTemporal.numTrapiches'|trans}}'
                ,'{{'entidade.localidade.localidadePescaTemporal.numSalgas'|trans}}'
                ,'{{'entidade.localidade.localidadePescaTemporal.numRanchos'|trans}}'
                ,'{{'entidade.localidade.localidadePescaTemporal.numPostosCombistivel'|trans}}'
                ,'{{'entidade.localidade.localidadePescaTemporal.numPontosRevendaMateriais'|trans}}'
                ,'{{'entidade.localidade.localidadePescaTemporal.numCamarasCongelamento'|trans}}'
                ,'{{'entidade.localidade.localidadePescaTemporal.numCapacidadeCamarasCongelamento'|trans}}'
                ,'{{'entidade.localidade.localidadePescaTemporal.localidadePescaTemporalEmpresaApoioPesca'|trans}}'
                ];
        
        
            var date = new Array();
            var field_chart = new Array();
            for (x=0; x<label_chart.length;x++){
                field_chart[x] = new Array();
            }
            {% for formTemporal in pescaTemporal|reverse %}
                field_chart[0].push('{{formTemporal.datInicio|date('d/m/Y h:i')}}');
                field_chart[1].push({{formTemporal.numCapacidadeCamarasResfriamento|default('0')}});
                field_chart[2].push({{formTemporal.numCamarasResfriamento|default('0')}});
                field_chart[3].push({{formTemporal.numTrapiches|default('0')}});
                field_chart[4].push({{formTemporal.numSalgas|default('0')}});
                field_chart[5].push({{formTemporal.numRanchos|default('0')}});
                field_chart[6].push({{formTemporal.numPostosCombistivel|default('0')}});
                field_chart[7].push({{formTemporal.numPontosRevendaMateriais|default('0')}});
                field_chart[8].push({{formTemporal.numCamarasCongelamento|default('0')}});
                field_chart[9].push({{formTemporal.numCapacidadeCamarasCongelamento|default('0')}});
                field_chart[10].push({{formTemporal.localidadePescaTemporalEmpresaApoioPesca|length|default('0')}});
            {% endfor %}

        google.load("visualization", "1", {packages:["corechart"]});
        //google.setOnLoadCallback(drawChart);
        
        function drawChart2() {
            
            var temp = new Array();
            
            temp[0] = new Array();
            temp[0].push(label_chart[0]);
            for (x=1; x < label_chart.length; x++){
                if ($('#field-chart-'+x).is(":checked")){
                    temp[0].push(label_chart[x]);
                }
            }
            
            if (temp[0].length ==1){
                return;
            }
            
            for (y=0; y < field_chart[0].length; y++){
                temp2 = new Array();
                temp2.push(field_chart[0][y]);
                for (x=1; x < label_chart.length; x++){
                    if ($('#field-chart-'+x).is(":checked")){
                        temp2.push(field_chart[x][y]);
                    }
                }
                temp.push(temp2);
            }
            
            var data = google.visualization.arrayToDataTable(temp);
            var options = {
                title: 'Informações de apoio à pesca. Evolução dos indicadores quantitativos'
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
            //chart.draw(data);
        }
        
    </script>
    <script>
$(function () {
    $('#tabComunidadeTemporal a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    })
    $('#tabComunidadeTemporal a:first').tab('show');
    
    $('#tabPescaTemporal a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    })
    $('#tabPescaTemporal a:first').tab('show');
    google.setOnLoadCallback(drawChart2);
  })
</script>
        
    </script>
{#    
<script>    
    $(document).ready(function(){
        {{form.codEstado.get('id')}}.setOnChangeFunction(updateMunicipioList);
        updateMunicipioList({{form.codEstado.get('id')}},true);
    });
    
    function updateMunicipioList(combo, first){
        var obj = combo.getSelectedObject();
           {{form.codMunicipio.get('id')}}.setSelectedByValue('');
           if(obj != undefined){
               {{form.codMunicipio.get('id')}}.setUrl('{{path('municipio_json')}}?codEstado='+obj.id); 
               {{form.codMunicipio.get('id')}}.setLoading(true);
               {{form.codMunicipio.get('id')}}.updateList('{{form.codMunicipio.get('value')}}', function(){
                   {{form.codMunicipio.get('id')}}.setLoading(false,first, true);
               }); 
               {{form.codMunicipio.get('id')}}.setCaption('{{'combobox.municipio'|trans}}');
           }else{
               {{form.codMunicipio.get('id')}}.setCaption('{{'combobox.estado'|trans}}');
               {{form.codMunicipio.get('id')}}.updateList([]);
           }        
    }
</script>#}
{% endblock %}