{% 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" />

    <style>
        #form-container{
            overflow-x: visible;
        }
    </style>

{% endblock %}

{% block content %}
    <script type="text/javascript">
        $(document).ready(function() {
            function atualizaCampoGrausMaturacaoGonada()
            {
                var valuesArray = [];

                $.each($('#sortableMaturacao').find('li'), function(key,value){
                    valuesArray.push($(value).text());
                });

                $('#{{ form.grausMaturacaoGonada.vars.id }}').val(valuesArray.join(','));
            }

            function adicionaGrausMaturacaoGonada()
            {
                if($("#grauMaturacao").val() != ''){
                    $('#sortableMaturacao').append('<li class="ui-state-highlight-move grauMaturacao">'+$("#grauMaturacao").val()+'</li>')
                    atualizaCampoGrausMaturacaoGonada();
                    $("#grauMaturacao").val('');
                    $("#grauMaturacao").focus();
                }
            }

            $( "#sortableMaturacao" ).sortable({
                revert: true,
                cancel: ".ui-state-default",
                placeholder: 'ui-state-box',
                update: function(){
                    atualizaCampoGrausMaturacaoGonada();
                }
            });

            $( "ul, li" ).disableSelection();

            $('#adicionarGrauMaturacao').on('click', function(){
                adicionaGrausMaturacaoGonada();
            });

            //Previne o envio do formulário ao pressionar enter, adicionando apenas o valor
            $('#grauMaturacao').keypress(function(event){
                var keycode = (event.keyCode ? event.keyCode : event.which);

                if(keycode == '13'){
                    adicionaGrausMaturacaoGonada();
                    event.preventDefault();
                }
            });

            {%if entity.id is not empty %}
                if($("#{{ form.grausMaturacaoGonada.vars.id }}").val() != ""){
                    let grausMaturacaoGonada = $("#{{ form.grausMaturacaoGonada.vars.id }}").val().split(',');

                    $.each(grausMaturacaoGonada, function(key, value){
                        $('#sortableMaturacao').append('<li class="ui-state-highlight-move grauMaturacao">'+value+'</li>');
                    });
                }
            {% endif %}
        });
    </script>

<div id="form-container">
    <div class="title">
        <h2>
   {%if entity.id is defined and entity.id is not null%} 
                {{'cabecalho.alterar.fontedado'|trans}}
        {%else%}  
                {{'cabecalho.incluir.fontedado'|trans}}
        {%endif%}
        </h2>
    </div>    

{{ form_errors(form) }}

       
<form id="formulario-fontedado" class="{% if  not includeLayout %}ajax {%endif%} form-horizontal" action="{%if entity.id is defined and entity.id is not null %} {{ path('fontedado_update', { 'id': entity.id }) }} {%else%} {{ path('fontedado_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="row-fluid">
            <div class="control-group span4">
                {{ form_label(form.codPessoaResponsavel) }}
                <div class="controls">
                    {{ form_widget(form.codPessoaResponsavel,{ 'attr': {'class': 'input-xlarge'} }) }}
                </div>
            </div>
        </div>    
        <div class="control-group">
            {{ form_label(form.txtMetotologia) }}
            <div class="controls">
                {{ form_widget(form.txtMetotologia,{ 'attr': {'class': 'input-xlarge cemporcento', 'style':'height:137px' }}) }}
                <span class="help-inline">{{ form_errors(form.txtMetotologia) }}</span>
            </div>
        </div>
        <div class="control-group">
            {{ form_label(form.txtObservacao) }}
            <div class="controls">
                {{ form_widget(form.txtObservacao,{ 'attr': {'class': 'input-xlarge cemporcento', 'style':'height:137px'} }) }}
                <span class="help-inline">{{ form_errors(form.txtObservacao) }}</span>
            </div>
        </div>
        <div class="row-fluid">    
            <div class="control-group span4">
                {{ form_label(form.datInicio) }}
                <div class="controls">
                    {{ form_widget(form.datInicio,{ 'attr': {'class': 'input-xlarge'} }) }}
                    <span class="help-inline">{{ form_errors(form.datInicio) }}</span>
                </div>
            </div>
        </div>
        <div class="row-fluid">    
            <div class="control-group span4">
                {{ form_label(form.datTermino) }}
                <div class="controls">
                    {{ form_widget(form.datTermino,{ 'attr': {'class': 'input-xlarge'} }) }}
                    <span class="help-inline">{{ form_errors(form.datTermino) }}</span>
                </div>
            </div>
        </div>

    </fieldset>

    <fieldset style="margin-left: 15px;">
        <legend>{{ 'entidade.fontedado.grauMaturacaoGonada.titulo'|trans }}</legend>
        {{ form_widget(form.grausMaturacaoGonada) }}
        <div class="control-group">
            {{ 'entidade.fontedado.grauMaturacaoGonada.valor'|trans }}
            <div class="controls">
                <input type="text" id="grauMaturacao"/>
                <a href="javascript:;" id="adicionarGrauMaturacao" class="btn btn-small default">{{ 'acao.incluir'|trans }}</a>
            </div>
        </div>

        <div class="control-group" style="position: relative; height: 270px;">
            {{ 'entidade.fontedado.grauMaturacaoGonada.ordem'|trans }}
            <div class="drag-sort-content controls well" id="orderListMaturacao">
                <ul id="sortableMaturacao"></ul>
            </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('fontedado') }}" title="{{'acao.cancelar'|trans}}">{{'acao.cancelar'|trans}}</a>
    </div>
</form>
</div>
<script>
    $(document).ready(function(){
        $('form#formulario-fontedado').preventDoubleSubmission();
        $('form').submit(function(){
            $('form#formulario-fontedado').data('submitted', true);
            if (eval('{{ form.datInicio.vars.id }}').value != undefined && eval('{{ form.datInicio.vars.id }}').value != "" &&
                eval('{{ form.datTermino.vars.id }}').value != undefined && eval('{{ form.datTermino.vars.id }}').value != "") {
                if(!testaData('{{ form.datInicio.vars.id }}', '<', '{{ form.datTermino.vars.id }}')){
                    $('form#formulario-fontedado').data('submitted', false);
                    return false;
                }
                return true;
                {#return (testaData('{{ form.datInicio.vars.id }}', '<', '{{ form.datTermino.vars.id }}'))?true:false;#}
            }
            
        });
    });
</script>
{% endblock %}