{% 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.areapesca'|trans ~ ' de ' ~ tipo|capitalize}}
        {%else%}  
                {{'cabecalho.incluir.areapesca'|trans~ ' de ' ~ tipo|capitalize}}
        {%endif%}
        </h2>
    </div>    

{{ form_errors(form) }}

       
<form id="formulario-areapesca" class="{% if  not includeLayout %}ajax {%endif%} form-horizontal" action="{%if entity.id is defined and entity.id is not null %} {{ path('areapesca_update', { 'tipo': tipo, 'id': entity.id }) }} {%else%} {{ path('areapesca_create', { 'tipo': tipo }) }} {%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 %}
        <input type='hidden' name='geometriaMalha' id='geometriaMalha' value=''>
		<input type='hidden' name='sobreposicaoMalha' id='sobreposicaoMalha' value=''>

         <div class="row-fluid">
            <div class="span6">
                <div class="row-fluid">
                    <div class="control-group">
                        {{ form_label(form.txtNome) }}
                        <div class="controls">
                            {{ form_widget(form.txtNome,{ 'attr': {'class': 'cemporcento focus'} }) }}
                          <span class="help-inline">{{ form_errors(form.txtNome) }}</span>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="control-group">
                        <label class=" required control-label">Tipo da geometria</label>
                        <div class="controls">
                            <label class="radio"><input required="required" type="radio" name="radioMapShape" value="map" id="radioMap">Mapa</label>
                            <label class="radio"><input type="radio" name="radioMapShape" value="shape" id="radioShape">Shape</label>
                          <span class="help-inline"></span>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="control-group">
                        {{ form_label(form.txtObservacao) }}
                        <div class="controls">
                            {{ form_widget(form.txtObservacao,{ 'attr': {'class': 'cemporcento', 'rows': '4'} }) }}
                          <span class="help-inline">{{ form_errors(form.txtObservacao) }}</span>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6 hidden" id="quadrantes">
						<table class="table table-bordered table-responsive table-striped">
							<thead>
								<th>
									<label class="control-label" style="font-weight: bold;">Lista com os quadrantes selecionados</label>
								</th>
								<th>
									<label class="control-label" style="font-weight: bold;">Porcentagem de sobreposição</label>
								</th>
							</thead>
							<tbody id="listaQuadrantes">
							</tbody>
						</table>
                    </div>
                    <div class="span6">
                    </div>
                </div>
             </div>
             <div class="span6 hidden" id="tools">
                 <div class="row-fluid">
                    <div class="control-group span4">
                        {{ form_label(form.indTamanhoMalha) }}
                        <div class="controls">
                            {{ form_widget(form.indTamanhoMalha,{ 'attr': {'class': 'input-xlarge'} }) }}
                          <span class="help-inline">{{ form_errors(form.indTamanhoMalha) }}</span>
                        </div>
                    </div>
                </div>

				 <div class="row-fluid">
					 <div class="span2" style="margin-top: 27px;">
						 <input type="button" id="abrirMapa" class="btn" value="Mapa" style="display: none;">
					 </div>
				 </div>

           	</div>
            <div class="row-fluid hidden span6" id="shape">
                <div class="control-group">
                    {{ form_label(form.geometria) }}
                    <div class="controls">
                        {{ form_widget(form.geometria,{ 'attr': {'class': 'input-small'} }) }}
                      <span class="help-inline">{{ form_errors(form.geometria) }}</span>
                      <p class="help-block">O arquivo de geometria deve estar em formato SHAPEFILE (.SHP ou .sp) utilizando a DATUM SIRGAS 2000 (EPSG:4674).</p>
                    </div>
                </div>
            </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('areapesca') }}" title="{{'acao.cancelar'|trans}}">{{'acao.cancelar'|trans}}</a>
    </div>
</form>
</div>
<script>

	var arrayBlocos = new Array();
	var sobreposicoes = new Array();

		var maskDone = false;
       {%if entity.id is defined and entity.id is not null%}

			{% for bloco in blocos | split(',') %}
				arrayBlocos.push('{{ bloco }}');
			{% endfor %}



		{%  for bloco, sobreposicao in  sobreposicoes %}
			sobreposicoes.push({
				"bloco": '{{ bloco }}',
				"sobreposicao" : '{{ sobreposicao }}'
			});
		{% endfor %}
            var isEdit = true;
            var type = '{{type}}';
       {% else %}
            var isEdit = false;
            var type = '';
       {% endif %}
            
        var tamanhoMalhaLoaded = '';
        var $tamanhoMalha;

        $(document).ready(function(){
            $tamanhoMalha = $('input[name="{{ form.indTamanhoMalha.vars.full_name }}"]');
            
            $radioMapShape = $("input[name='radioMapShape']");
            $('form#formulario-areapesca').preventDoubleSubmission();
            $('form').submit(function(){
                $('form#formulario-areapesca').data('submitted', true);
                $malha = $('#geometriaMalha');
				$sobreposicao = $('#sobreposicaoMalha');
                var quadrantesValue = '';
                if($('.sobreposicao').length > 0){
					for(var i = 0; i <  $('.sobreposicao').length; i++){
						var quadrante = 	$('.sobreposicao')[i];
						quadrantesValue += (i > 0)?',':'';
						quadrantesValue += $(quadrante).data('quadrante');
                    }
                    $malha.val(quadrantesValue);
                }

				var sobreposicoes = "";
				var countSobreposicoes = 0;
				maxValue = false;
				$.each($('.sobreposicao'), function(key, value){
					if(parseFloat($(value).val().replace(",", ".")) > 100.00 ){
						maxValue = true;
						return false;
					}

					sobreposicoes += $(value).data('quadrante') + "="+ $(value).val().replace(',', ".")+"||";
					if($(value).val().length != 0){
						countSobreposicoes++;
					}
				});

				$sobreposicao.val(sobreposicoes);

				if(maxValue){
					$(this).setError('Existem sobreposições acima de 100%.');
                    $('form#formulario-areapesca').data('submitted', false);
					return false;
				}

				if($('.sobreposicao').length  != countSobreposicoes){
					$(this).setError('Você deve informar todas as sobreposições dos quadrantes.');
                    $('form#formulario-areapesca').data('submitted', false);
					return false;
				}

                if($malha.val() == "" && $radioMapShape.filter(":checked").val() == "map"){
                    $(this).setError('Você deve selecionar uma área no mapa.');
                    $('form#formulario-areapesca').data('submitted', false);
                    return false;
                }else{
                    $(this).setError(false);

                    return true;
                }
                    
            });
            

            $tamanhoMalha.change(function(){
				arrayBlocos = new Array();
				$("#listaQuadrantes").html('');
                if($tamanhoMalha.filter(":checked").val()){
                    $('#abrirMapa').show();
                }else{
					$('#abrirMapa').hide();
                }
            });

            $radioMapShape.change(function(){
                if($radioMapShape.filter(':checked').val() == "map"){
					showShape(false);
					showMap();
                    if(typeof $tamanhoMalha.filter(":checked").val() != "undefined"){
                        $('#quadrantes').removeClass('hidden');
                    }
                }else{
					showMap(false);
                    showShape();
                    $('#quadrantes').addClass('hidden');
                }
            });

            function showMap(show){
                $map = $("#tools");
                if(show === false){
                    $map.addClass('hidden').hide();
                    $("#geometriaMalha").val('');
                }else{
                    $( "input[id^='entidade_areapesca_indTamanhoMalha']" ).attr('required', 'required');
                    $map.removeClass('hidden').show();
                }
            }

            function showShape(show){
                $shape = $("#shape");
                $geometria = $("#{{ form.geometria.vars.id }}");
                if(show === false){
                    $shape.addClass('hidden').hide();
                    $('#{{ form.geometria.vars.id }}').val('');
                    $geometria.removeAttr('required');
                    $geometria.parents('div.control-group').find('label').removeClass('required');
                }else{
                    $shape.removeClass('hidden').show();
                    $geometria.attr('required', 'required');
                    $( "input[id^='entidade_areapesca_indTamanhoMalha']" ).removeAttr('required')
                    $geometria.parents('div.control-group').find('label').addClass('required');
                    $('form').setError(false);
                }
            }

            {%if entity.id is defined and entity.id is not null%}
			function exibirSobreposicoes(sobreposicoes){
				var size = sobreposicoes.length;
				for (var i = 0; i < size; i++) {
					if (sobreposicoes[i].bloco != "" && sobreposicoes[i].bloco != undefined  ) {
						var bloco  = sobreposicoes[i].bloco

						$('#listaQuadrantes').append("<tr data-quadrante='"+bloco+"'><td>"+bloco+"</td>" +
								"<td><input onkeyup='vProfundidade(this)' type='text' data-quadrante='"+bloco+"' class='sobreposicao'></td></tr>");
						$('#quadrantes').removeClass('hidden');

						//Faz a lista com as sobreposicoes salvas no banco setando no input de acordo com o quadrante
						$('.sobreposicao').each(function(idx){
							var $sobreposicao = this;
							var quadrante = $(this).data('quadrante');

							for(var i = 0 in sobreposicoes){
								var sobreposicao = sobreposicoes[i] ;
								if(sobreposicao.bloco == quadrante ){

									$($sobreposicao).val(sobreposicao.sobreposicao.replace('.', ","));
									break;
								}else{
									$($sobreposicao).val('100,00');
								}
							}
						});
					}
				}
			}

                 if(type == "map"){
                     $("#radioMap").trigger('click');
					 $("#abrirMapa").show();

					 exibirSobreposicoes(sobreposicoes);
                 }else if(type == "shape"){
                     $("#radioShape").trigger('click');
                 }
                 $("input[name='radioMapShape']").trigger('change');
            {% endif %}



        });
</script>
{% endblock %}


{% block webgis %}
	{% if not isShow %}
		{% include 'propesqBundle:AreaPesca/GeoInformacao:ferramenta.html.twig' with {} %}
	{% endif %}
{% endblock %}