{#{% debug form.pessoaEndereco.get('prototype').parent %}#}
{% 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>
            .cemporcento{
                width: 100%;
             }
            .marginbottom5{
                margin-bottom: 5px;
             }
            .show-grid{
                margin-top: 10px;
                margin-bottom: 10px;
             }
             .shortcut{
                 width: 8px;
                 color: #777;
                 margin-left: 5px;
             }

.subnav-fixed {
    position: fixed;
    top: 36px;
    left: 0;
    right: 0;
    z-index: 99999;
    border-color: #D5D5D5;
    border-width: 0 0 1px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, .1);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.title-fixed {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 99999;
    border-color: #D5D5D5 !important;
    border-width: 0 0 0px !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}


.subnav {
    background-color: #EEE;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, whiteSmoke 0%, #EEE 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,whiteSmoke), color-stop(100%,#EEE));
    background-image: -webkit-linear-gradient(top, whiteSmoke 0%,#EEE 100%);
    background-image: -ms-linear-gradient(top, whiteSmoke 0%,#EEE 100%);
    background-image: -o-linear-gradient(top, whiteSmoke 0%,#EEE 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 );
    background-image: linear-gradient(top, whiteSmoke 0%,#EEE 100%);
    border: 1px solid #E5E5E5;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.subnav .nav > .active > a, .subnav .nav > .active > a:hover {
    padding-left: 13px;
    color: #777;
    background-color: #E9E9E9;
    border-right-color: #DDD;
    border-left: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .05);
}

.email-box{
    
}
  
#email-fields-list .input-prepend{
    margin-bottom: 5px;
    display: block;
}

#xendereco-fields-list .input-prepend{
    margin-bottom: 5px;
    display: block;
}

    </style>
{% endblock %}

{% block content %}
<div id="form-container" >
    <div class="container-title" style="height: 75px;">
    <div class="title">
        <h2>
        {%if entity.id is defined and entity.id is not null%} 
                {{'cabecalho.alterar.pessoajuridica'|trans}}    
        {%else%}  
                {{'cabecalho.incluir.pessoajuridica'|trans}}
        {%endif%}
        </h2>
    </div>    
    <div id="navegacao" class="subnav navbar" style="float: left; width: 100%; margin-bottom: auto;">
            <ul class="nav" style="margin: 0 auto;">
                <li class="active"><a href="#geral">Dados Básicos</a></li>
                <li class=""><a href="#endereco">Endereço</a></li>
            </ul>
    </div>
    </div>

{{ form_errors(form) }}
       
<form id="formulario-pessoajuridica" class="{% if  not includeLayout %}ajax {%endif%} form-horizontal" action="{%if entity.id is defined and entity.id is not null %} {{ path('pessoajuridica_update', { 'id': entity.id }) }} {%else%}  {{ path('pessoajuridica_create') }} {%endif%}" method="post" {{ form_enctype(form) }}>
    <fieldset id="geral" style="float: left; margin: 10px;">
        <legend  style="padding-top: 76px;">Dados básicos</legend>
        
        {{ form_widget(form._token) }}
        
        
        
        {% if not includeLayout %}
            <input type='hidden' name='noLayout' value='true'>
        {% endif %}
                        
        <div class="row-fluid show-grid">
            <div class="span8">
                <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="span4">                
                <div class="control-group">
                    {{ form_label(form.txtNomeFantasia) }}
                    <div class="controls">
                        {{ form_widget(form.txtNomeFantasia,{ 'attr': {'class': 'cemporcento'} }) }}
                    <span class="help-inline">{{ form_errors(form.txtNomeFantasia) }}</span>
                    </div>
                </div>
            </div>
        </div>    
        <div class="row-fluid show-grid">
            <div class="span4">
                <div class="control-group">
                    {{ form_label(form.codFederal) }}
                    <div class="controls">
                        {{ form_widget(form.codFederal,{ 'attr': {'class': 'cemporcento'} }) }}
                    <span class="help-inline">{{ form_errors(form.codFederal) }}</span>
                    </div>
                </div>                
            </div>
            <div class="span4">
                <div class="control-group">
                    {{ form_label(form.txtInscricaoEstadual) }}
                    <div class="controls">
                        {{ form_widget(form.txtInscricaoEstadual,{ 'attr': {'class': 'cemporcento'} }) }}
                    <span class="help-inline">{{ form_errors(form.txtInscricaoEstadual) }}</span>
                    </div>
                </div>
            </div>
            <div class="span4">
                <div class="control-group">
                    {{ form_label(form.txtInscricaoMunicipal) }}
                    <div class="controls">
                        {{ form_widget(form.txtInscricaoMunicipal,{ 'attr': {'class': 'cemporcento'} }) }}
                    <span class="help-inline">{{ form_errors(form.txtInscricaoMunicipal) }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid show-grid">
            <div class="span8">
                <div class="control-group">
                    {{ form_label(form.codPessoaContato) }}
                    <div class="controls">
                        {{ form_widget(form.codPessoaContato,{ 'attr': {'class': 'cemporcento'} }) }}
                    <span class="help-inline">{{ form_errors(form.codPessoaContato) }}</span>
                    </div>
                </div>
            </div>
            <div class="span4">                
                <div class="control-group">
                    {{ form_label(form.numFuncionariosDiretos) }}
                    <div class="controls">
                        {{ form_widget(form.numFuncionariosDiretos,{ 'attr': {'class': 'cemporcento'} }) }}
                    <span class="help-inline">{{ form_errors(form.numFuncionariosDiretos) }}</span>
                    </div>
                </div>
            </div>
        </div>    
            
        <div class="row-fluid show-grid">
            <div class="span6">
                
                <div class="control-group">
                    {{ form_label(form.txtsEmails) }}
                    <div class="controls">
                        <div id="email-fields-list" data-prototype="{% filter escape %}{% include 'propesqBundle:PessoaEmail:new.html.twig' with {'formEmail': form.txtsEmails.get('prototype')} %}{% endfilter %}">
                            {% for emailField in form.txtsEmails %}
                                {% include 'propesqBundle:PessoaEmail:new.html.twig' with {'formEmail': emailField, 'id': loop.index0} %}
                            {% endfor %}
                        </div>
                        <a href="#" id="add-another-email">Novo e-mail</a>
                    <span class="help-inline">{{ form_errors(form.txtsEmails) }}</span>
                    </div>
                </div>
                
            </div>        
            <div class="span6">
                <div class="control-group">
                    {{ form_label(form.pessoaTelefone) }}
                    <div class="controls">
                        <div id="telefone-fields-list" data-prototype="{% filter escape %}{% include 'propesqBundle:PessoaTelefone:new.html.twig' with {'formTelefone': form.pessoaTelefone.get('prototype')} %}{% endfilter %}">
                            {% for telefoneField in form.pessoaTelefone %}
                                {% include 'propesqBundle:PessoaTelefone:new.html.twig' with {'formTelefone': telefoneField, 'id' : loop.index0} %}
                            {% endfor %}
                        </div>

                        <a href="#" id="add-another-telefone">Novo Telefone</a>
                        <span class="help-inline">{{ form_errors(form.pessoaTelefone) }}</span>
                    </div>
                </div>
            </div>

        </fieldset>
    <fieldset id="endereco" style="float: left; margin: 10px;">
        <legend style="padding-top: 76px;">Endereço</legend>

        <div id="endereco-fields-list" data-prototype="{% filter escape %}{% include 'propesqBundle:PessoaEndereco:new.html.twig' with {'formEndereco': form.pessoaEndereco.get('prototype')} %}{% endfilter %}">
            {% for enderecoField in form.pessoaEndereco %}
                {% include 'propesqBundle:PessoaEndereco:new.html.twig' with {'formEndereco': enderecoField, 'id' : loop.index0} %}
            {% endfor %}
        </div>

        <a href="#" id="add-another-endereco">Novo Endereço</a>
        
    </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('pessoajuridica') }}" title="{{'acao.cancelar'|trans}}">{{'acao.cancelar'|trans}}</a>
    </div>
</form>
</div>
<script type="text/javascript" src="{{ asset('bundles/propesq/js/jquery.hotkeys.js') }}"></script>
<script>
    
    //colocar funcoes javascript referente ao formulário aqui
    
    var $win, $nav, $title, navTop, isFixed;
    var emailCount = '{{ form.txtsEmails | length }}';
    var enderecoCount = '{{ form.pessoaEndereco | length }}';
    var telefoneCount = '{{ form.pessoaTelefone | length }}';
    
    var beneficioCount = '{{ form.pessoaFisicaTemporal.pessoaFisicaTemporalBeneficio | length }}';
    var atividadeCount = '{{ form.pessoaFisicaTemporal.pessoaFisicaTemporalAtividadeEconomica | length }}';
    
    
    function refreshSpy(){
        $('[data-spy="scroll"]').each(function () {
          var $spy = $(this).scrollspy('refresh');
        });    
    }

    function processScroll() {
      var i, scrollTop = $win.scrollTop();
      if (scrollTop >= navTop && !isFixed) {
        isFixed = 1
        $nav.addClass('subnav-fixed')
        $title.addClass('title-fixed')
      } else if (scrollTop <= navTop && isFixed) {
        isFixed = 0
        $nav.removeClass('subnav-fixed')
        $title.removeClass('title-fixed')
      }
      
      refreshSpy();      
        
    }
    
    function removerElemento(el){
        el.remove();
        refreshSpy();
    }
    
    function setupEmails(){
        var lista = $('#email-fields-list');
        lista.children('.email-container').find('.insertaction').each(function(i){
            if (i > 0){
                $(this).bind('keydown', 'Ctrl+del', teclaDelete); 
                var btn = $('#remover-email-'+i);
                btn.click(function(){
                    removerElemento($(this).parents(".email-container"));
                });  
            } else {
                var btn = $('#remover-email-'+i);
                btn.remove();
            }
            $(this).bind('keydown', 'Ctrl+insert', teclaInsert)
        });
    }
    
    function setupEnderecos(){
        var lista = $('#endereco-fields-list');
        lista.children('.endereco-container').find('.insertaction').each(function(i){
            if (i > 0){
                $(this).bind('keydown', 'Ctrl+del', teclaDelete); 
                var btn = $('#remover-endereco-'+i);
                btn.click(function(){
                    removerElemento($(this).parents(".endereco-container"));
                });  
            } else {
                var btn = $('#remover-endereco-'+i);
                btn.remove();
            }
            $(this).bind('keydown', 'Ctrl+insert', teclaInsert)
        });
    }    

    function setupTelefones(){
        var lista = $('#telefone-fields-list');
        lista.children('.telefone-container').find('.insertaction').each(function(i){
            //if (i > 0){
                $(this).bind('keydown', 'Ctrl+del', teclaDelete); 
                var btn = $('#remover-telefone-'+i);
                btn.click(function(){
                    removerElemento($(this).parents(".telefone-container"));
                });  
            /*} else {
                var btn = $('#remover-telefone-'+i);
                btn.remove();
            }*/
            $(this).bind('keydown', 'Ctrl+insert', teclaInsert)
        });
    }    

    function setupBeneficios(){
        var lista = $('#beneficio-fields-list');
        lista.children('.beneficio-container').find('.insertaction').each(function(i){
            $(this).bind('keydown', 'Ctrl+del', teclaDelete); 
            var btn = $('#remover-beneficio-'+i);
            btn.click(function(){
                removerElemento($(this).parents(".beneficio-container"));
            });  
            $(this).bind('keydown', 'Ctrl+insert', teclaInsert)
        });
    }    

    function setupAtividades(){
        var lista = $('#atividade-fields-list');
        lista.children('.atividade-container').find('.insertaction').each(function(i){
            $(this).bind('keydown', 'Ctrl+del', teclaDelete); 
            var btn = $('#remover-atividade-'+i);
            btn.click(function(){
                removerElemento($(this).parents(".atividade-container"));
            });  
            $(this).bind('keydown', 'Ctrl+insert', teclaInsert)
        });
    }    

    function addEmail(){
            var emailList = $('#email-fields-list');
            var newWidget = emailList.attr('data-prototype');
            newWidget = newWidget.replace(/\$\$name\$\$/g, emailCount);
            newWidget = $(newWidget);
            newWidget.appendTo(emailList);
            if (emailCount == 0){
                var btn = $('#remover-email-'+emailCount);
                btn.remove();
            } else {
                var btn = $('#remover-email-'+emailCount);
                btn.click(function(){
                    removerElemento($(this).parents(".email-container"));
                    emailList.children('.email-container:last-child').find('.hasfocus');
                });  
                
                $(emailList).ready(function(){
                    emailList.children('.email-container:last-child').find('.hasfocus').focus();
                    emailList.children('.email-container:last-child').find('.insertaction').bind('keydown', 'Ctrl+del', teclaDelete); 
                });
                
            }
            
            $(emailList).ready(function(){
                emailList.children('.email-container:last-child').find('.insertaction').bind('keydown', 'Ctrl+insert', teclaInsert); 
            });
            
            emailCount++;

            refreshSpy();
            
            return false;
    }
    
    
    function addEndereco(){
            var enderecoList = $('#endereco-fields-list');
            var newWidget = enderecoList.attr('data-prototype');
            newWidget = newWidget.replace(/\$\$name\$\$/g, enderecoCount);
            newWidget = $(newWidget);
            newWidget.appendTo(enderecoList);
            if (enderecoCount == 0){
                var btn = $('#remover-endereco-'+enderecoCount);
                btn.remove();
            } else {
                var btn = $('#remover-endereco-'+enderecoCount);
                btn.click(function(){
                    removerElemento($(this).parents(".endereco-container"));
                    enderecoList.children('.endereco-container:last-child').find('.hasfocus');
                });  
                
                $(enderecoList).ready(function(){
                    enderecoList.children('.endereco-container:last-child').find('.hasfocus').focus();
                    enderecoList.children('.endereco-container:last-child').find('.insertaction').bind('keydown', 'Ctrl+del', teclaDelete); 
                });
                
            }
            
            $(enderecoList).ready(function(){
                enderecoList.children('.endereco-container:last-child').find('.insertaction').bind('keydown', 'Ctrl+insert', teclaInsert); 
            });
            
            enderecoCount++;

            refreshSpy();
            
            return false;
    }

    function addTelefone(){
            var telefoneList = $('#telefone-fields-list');
            var newWidget = telefoneList.attr('data-prototype');
            newWidget = newWidget.replace(/\$\$name\$\$/g, telefoneCount);
            newWidget = $(newWidget);
            newWidget.appendTo(telefoneList);
            if (telefoneCount == 0){
                var btn = $('#remover-telefone-'+telefoneCount);
                btn.remove();
            } else {
                var btn = $('#remover-telefone-'+telefoneCount);
                btn.click(function(){
                    removerElemento($(this).parents(".telefone-container"));
                    $('#telefone-fields-list').children('.telefone-container:last-child').find('.insertaction');
                });     

                $(telefoneList).ready(function(){
                    telefoneList.children('.telefone-container:last-child').find('.hasfocus').focus();
                    telefoneList.children('.telefone-container:last-child').find('.insertaction').bind('keydown', 'Ctrl+del', teclaDelete); 
                });
            }

            $(telefoneList).ready(function(){
                telefoneList.children('.telefone-container:last-child').find('.insertaction').bind('keydown', 'Ctrl+insert', teclaInsert); 
            });
            telefoneCount++;
            refreshSpy();
            return false;
    }
    
    
    function addBeneficio(){
            var beneficioList = $('#beneficio-fields-list');
            var newWidget = beneficioList.attr('data-prototype');
            newWidget = newWidget.replace(/\$\$name\$\$/g, beneficioCount);
            newWidget = $(newWidget);
            newWidget.appendTo(beneficioList);

            var btn = $('#remover-beneficio-'+beneficioCount);
            btn.click(function(){
                removerElemento($(this).parents(".beneficio-container"));
                beneficioList.children('.beneficio-container:last-child').find('.hasfocus');
            });  

            $(beneficioList).ready(function(){
                beneficioList.children('.beneficio-container:last-child').find('.hasfocus').focus();
                beneficioList.children('.beneficio-container:last-child').find('.insertaction').bind('keydown', 'Ctrl+del', teclaDelete); 
            });
            
            $(beneficioList).ready(function(){
                beneficioList.children('.beneficio-container:last-child').find('.insertaction').bind('keydown', 'Ctrl+insert', teclaInsert); 
            });
            
            beneficioCount++;

            refreshSpy();
            
            return false;
    }    

    function addAtividade(){
            var atividadeList = $('#atividade-fields-list');
            var newWidget = atividadeList.attr('data-prototype');
            newWidget = newWidget.replace(/\$\$name\$\$/g, atividadeCount);
            newWidget = $(newWidget);
            newWidget.appendTo(atividadeList);

            var btn = $('#remover-atividade-'+atividadeCount);
            btn.click(function(){
                removerElemento($(this).parents(".atividade-container"));
                atividadeList.children('.atividade-container:last-child').find('.hasfocus');
            });  

            $(atividadeList).ready(function(){
                atividadeList.children('.atividade-container:last-child').find('.hasfocus').focus();
                atividadeList.children('.atividade-container:last-child').find('.insertaction').bind('keydown', 'Ctrl+del', teclaDelete); 
            });
            
            $(atividadeList).ready(function(){
                atividadeList.children('.atividade-container:last-child').find('.insertaction').bind('keydown', 'Ctrl+insert', teclaInsert); 
            });
            
            atividadeCount++;

            refreshSpy();
            
            return false;
    }    
    
    $(document).ready(function() {
        //$('form#formulario-pessoajuridica').preventDoubleSubmission();
        $(document).on('DOMNodeInserted', function(e) {
            if( e.target.className == 'alert alert-error') {
                setTimeout(function() {
                    $('button[type="submit"]').removeAttr("disabled");
                }, 100);

            }
        });
        // Previne que o formulário seja salvo mais de uma vez
        $('form').submit(function() {
            $('button[type="submit"]').attr("disabled", "disabled");
            //$('form#formulario-pessoajuridica').data('submitted', true);
        });

        $('body').attr('data-spy',"scroll");
        $('body').attr('data-target',"#navegacao");
        $('body').attr('data-offset',"-100");
        //$('#navegacao').scrollspy({offset: 0});
        
       
        
        $win = $(window);
        $nav = $('.subnav');
        $title = $('.title');
        navTop = $nav.length && $nav.offset().top+10;// - 40;
        isFixed = 0;
        processScroll();
        
        $win.on('scroll', processScroll);       
        
        $('#add-another-email').click(addEmail);    
        $('#add-another-endereco').click(addEndereco);    
        $('#add-another-telefone').click(addTelefone);    
        $('#add-another-beneficio').click(addBeneficio);    
        $('#add-another-atividade').click(addAtividade);    
        
        if (emailCount == 0){
            addEmail();
        } else {
            setupEmails();
        }
        
        if (enderecoCount == 0){
            addEndereco();
        } else {
            setupEnderecos();
        }
        
        if (telefoneCount == 0){
            //addTelefone();
        } else {
            setupTelefones();
        }
        
        if (beneficioCount > 0){
            setupBeneficios();
        }
        if (atividadeCount > 0){
            setupAtividades();
        }
        
    });
    
    function teclaInsert(evt){
        if ($(evt.target).parents('.telefone-container').length == 1){
            addTelefone();
        } else if ($(evt.target).parents('.endereco-container').length == 1){
            addEndereco();
        } else if ($(evt.target).parents('.email-container').length == 1){
            addEmail();
        } else if ($(evt.target).parents('.beneficio-container').length == 1){
            addBeneficio();
        } else if ($(evt.target).parents('.atividade-container').length == 1){
            addAtividade();
        } 
    }
    function teclaDelete(evt){
        if ($(evt.target).parents('.telefone-container').length == 1){
            removerElemento($(evt.target).parents('.telefone-container'));
            $('#telefone-fields-list').children('.telefone-container:last-child').find('.insertaction').focus();
        } else if ($(evt.target).parents('.endereco-container').length == 1){
            removerElemento($(evt.target).parents('.endereco-container'));
            $('#endereco-fields-list').children('.endereco-container:last-child').find('.insertaction').focus();
        } else if ($(evt.target).parents('.email-container').length == 1){
            removerElemento($(evt.target).parents('.email-container'));
            $('#email-fields-list').children('.email-container:last-child').find('.insertaction').focus();
        } else if ($(evt.target).parents('.beneficio-container').length == 1){
            removerElemento($(evt.target).parents('.beneficio-container'));
            $('#beneficio-fields-list').children('.beneficio-container:last-child').find('.insertaction').focus();
        } else if ($(evt.target).parents('.atividade-container').length == 1){
            removerElemento($(evt.target).parents('.atividade-container'));
            $('#atividade-fields-list').children('.atividade-container:last-child').find('.insertaction').focus();
        } 
    }    
</script>
{% endblock %}