{% 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" />
    <link rel="stylesheet" href="{{ asset('bundles/propesq/js/upload/css/bootstrap-image-gallery.min.css') }}" type="text/css" media="all" />
    <link rel="stylesheet" href="{{ asset('bundles/propesq/js')}}/upload/css/jquery.fileupload-ui.css">

    <script src="{{ asset('bundles/propesq/js')}}/upload/vendor/jquery.ui.widget.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/tmpl.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/load-image.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/canvas-to-blob.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/bootstrap-image-gallery.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.iframe-transport.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.fileupload.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.fileupload-fp.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.fileupload-ui.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/locale.js"></script>

    <style>
        div#modal-gallery{
            margin-top: 0 !important;
        }

        .modal-gallery .modal-body{
            max-height: 400px !important;
        }

        .modal-body  .modal-image {
            display: block;
            width: auto;
            max-height: 100% !important;
        }

        .template-download td{
            vertical-align: middle;
        }

        #form-container{
            overflow-x: visible;
        }
    </style>
{% endblock %}
{% block content %}
    <div id="form-container">
        <div class="title">
            <h2>
                {%if entity.id is defined and entity.id is not null%}
                    {{'cabecalho.alterar.especiepmap'|trans}}
                    {% set isEdit = true %}
                {%else%}
                    {{'cabecalho.incluir.especiepmap'|trans}}
                    {% set isEdit = false %}
                {%endif%}
            </h2>
        </div>
        {{ form_errors(form) }}
        <form id="formulario-especiepmap" class="{% if  not includeLayout %}ajax {% endif %} form-horizontal"
              action="{% if entity.id is defined and entity.id is not null %} {{ path('especiepmap_update', { 'id': entity.id }) }} {% else %}  {{ path('especiepmap_create') }} {% endif %}"
              method="post" {{ form_enctype(form) }}>
            <fieldset style="float: left; margin: 10px;">

                {{ form_widget(form._token) }}

                <div class="row-fluid">
                    <div class="span6">
                        <div class="control-group">
                            {{ form_label(form.txtNomeCientifico) }}
                            <div class="controls">
                                {{ form_widget(form.txtNomeCientifico,{ 'attr': {'class': 'input-xlarge cemporcento focus'} }) }}
                                <span class="help-inline">{{ form_errors(form.txtNomeCientifico) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="control-group">
                            {{ form_label(form.txtNomeReferenciaPmap) }}
                            <div class="controls">
                                {{ form_widget(form.txtNomeReferenciaPmap,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                                <span class="help-inline">{{ form_errors(form.txtNomeReferenciaPmap) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <div class="control-group">
                            {{ form_label(form.txtNivelTaxonomico) }}
                            <div class="controls">
                                {{ form_widget(form.txtNivelTaxonomico,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                                <span class="help-inline">{{ form_errors(form.txtNivelTaxonomico) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="control-group">
                            {{ form_label(form.txtAutor) }}
                            <div class="controls">
                                {{ form_widget(form.txtAutor,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                                <span class="help-inline">{{ form_errors(form.txtAutor) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3">
                        <div class="control-group">
                            {{ form_label(form.txtGenero) }}
                            <div class="controls">
                                {{ form_widget(form.txtGenero,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                                <span class="help-inline">{{ form_errors(form.txtGenero) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="span3">
                        <div class="control-group">
                            {{ form_label(form.txtFamilia) }}
                            <div class="controls">
                                {{ form_widget(form.txtFamilia,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                                <span class="help-inline">{{ form_errors(form.txtFamilia) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="span3">
                        <div class="control-group">
                            {{ form_label(form.txtOrdem) }}
                            <div class="controls">
                                {{ form_widget(form.txtOrdem,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                                <span class="help-inline">{{ form_errors(form.txtOrdem) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="span3">
                        <div class="control-group">
                            {{ form_label(form.txtClasse) }}
                            <div class="controls">
                                {{ form_widget(form.txtClasse,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                                <span class="help-inline">{{ form_errors(form.txtClasse) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3">
                        <div class="control-group">
                            {{ form_label(form.txtAlphaid) }}
                            <div class="controls">
                                {{ form_widget(form.txtAlphaid,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                                <span class="help-inline">{{ form_errors(form.txtAlphaid) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="span3">
                        <div class="control-group">
                            {{ form_label(form.txtTsn) }}
                            <div class="controls">
                                <div class="input-append">
                                    {{ form_widget(form.txtTsn,{ 'attr': {'class': 'input-small'} }) }}
                                    <button class="btn" id="btn-searchTSN" type="button">
                                        <i class="icon-search"></i>
                                    </button>
                                </div>
                                <span class="help-inline">{{ form_errors(form.txtTsn) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid show-grid">
                    <div class="span6">
                        <div class="control-group">
                            {{ form_label(form.especies) }}
                            <div class="controls">
                                <div id="especiepmap-fields-list"
                                     data-prototype="{% filter escape %}
                                                        {% include 'propesqBundle:EspeciePMAPRelacionada:new.html.twig' with {'formEspeciePMAP': form.especies.get('prototype')} %}
                                                     {% endfilter %}">
                                    {% for especiePMAPField in form.especies %}
                                        {% include 'propesqBundle:EspeciePMAPRelacionada:new.html.twig' with {'formEspeciePMAP': especiePMAPField, 'id' : loop.index0} %}
                                    {% endfor %}
                                </div>

                                <a href="#" id="add-another-especiepmap">Novo Nome Científico Associado</a>
                                <span class="help-inline">{{ form_errors(form.especies) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
            {% if isEdit %}
                <div style="width: 90%; float: left; margin-left: 30px">
                    <div style="width: 90%; float: left; margin-left: 30px">
                        {% if entity.codRespInclusao %}
                            <label style="float: right;font-weight: bold;margin-top: 10px;">Responsável pela
                                inclusão: {{ entity.codRespInclusao.codPessoa.txtNome }}
                                em {{ entity.datInclusao|date('d/m/Y H:i') }}</label>
                        {% else %}
                            <label style="float: right;font-weight: bold;margin-top: 10px;">Inclusão em: {{ entity.datInclusao|date('d/m/Y H:i') }}</label>
                        {% endif %}
                    </div>

                    {% if entity.codRespEdicao is not null %}
                        <div style="width: 90%; float: left; margin-left: 30px">
                            <label style="float: right;font-weight: bold;margin-top: 10px;">Responsável pela última
                                edição: {{ entity.codRespEdicao.codPessoa.txtNome }}
                                em {{ entity.datEdicao|date('d/m/Y H:i') }}</label>
                        </div>
                    {% endif %}
                </div>
            {% endif %}
            <div class="div-actions">
                <a id="buttonSubmit" class="btn btn-primary">{{'acao.salvar'|trans}}</a>
                <a class=""{% if not includeLayout %} onclick="$(this).parents('.modal').find('.close').click(); return false;" {% endif %} href="{{ path('especiepmap') }}" title="{{'acao.cancelar'|trans}}">{{'acao.cancelar'|trans}}</a>
            </div>
        </form>
        <script>

            $(document).ready(function(){
                $(document).on('DOMNodeInserted', function(e) {
                    if( e.target.className == 'alert alert-error') {
                        setTimeout(function() {
                            $('#buttonSubmit').removeAttr("disabled");
                        }, 200);

                    }
                });
                $('#entidade_especiepmap_txtNomeReferenciaPmap').on('focusin', function () {
                    $(this).setError(false);
                });
                $('#buttonSubmit').on('click', function () {
                    setTimeout(function() {
                        $('#buttonSubmit').attr("disabled", "disabled");
                    }, 100);

                    {#var nome_referencia = $('#entidade_especiepmap_txtNomeReferenciaPmap').val();#}
                    {#var id = '{{ entity.id }}';#}
                    {#if(nome_referencia) {#}
                        {#$.ajax({#}
                            {#type: 'post',#}
                            {#data: {referencia: nome_referencia, id: id},#}
                            {#url: '{{ path('especiepmap_verifica_nome_referencia') }}',#}
                            {#beforeSend: function () {#}
                            {#},#}
                            {#success: function (result) {#}
                                {#if (result && result >= 1) {#}
                                    {#$('#entidade_especiepmap_txtNomeReferenciaPmap').setError("Espécie com nome de refêrencia <strong>" + nome_referencia + "</strong> já cadastrada.");#}
                                    {#$('html,body').animate({scrollTop: ($($(".alert-error").first()).offset().top) - 35}, 1000);#}
                                {#} else {#}
                                    {#$('form').trigger('submit');#}
                                {#}#}
                            {#},#}
                            {#error: function () {#}
                            {#}#}
                        {#});#}
                    {#}else{#}
                        {#$('form').trigger('submit');#}
                    {#}#}

                    $('form').trigger('submit');
                });

                $('button.cancel').click(function (e) {
                    number_of_files = 0;
                });

                $('td.cancel button').live('click',function (e) {
                    number_of_files = number_of_files - 1;
                });

            });
            
        </script>

    </div>
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:940px; margin-left:-470px;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Resultado da Busca no ITIS</h3>
        </div>
        <div class="modal-body modal-body-tns" style="width: 910px; height: 600px;">
            <!--<iframe src="" style="width: 100%; height: 100%" id="modalContent" frameborder="0"></iframe>-->
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar janela</button>
        </div>
    </div>
    <script type="text/javascript" src="{{ asset('bundles/propesq/js/jquery.hotkeys.js') }}"></script>

    <script>
        var arrayEspecies = [];

        {%  if isEdit %}
            arrayEspecies.push({{ entity.id }});
            {% for especiePMAP in entity.especies %}
                arrayEspecies.push({{ especiePMAP.codEspeciePMAP.id}});
            {% endfor %}
        {% endif %}

        function updateEspeciePMAPList(combo, idDeleted){
            if(idDeleted){
                var pos = arrayEspecies.indexOf(parseInt(idDeleted, 10));
                arrayEspecies.splice(pos, 1);
            }else{
                var regex = /\d+/;
                var match = regex.exec(combo.idContainer);
                if (match != null) {
                    var idEspecie = eval('typeof idDocumento'+match[0]+' != "undefined" ? idEspecie'+match[0]+' : null');
                }

                var lastId = (combo.getLastSelectedObject() == null)?'':parseInt(combo.getLastSelectedObject().id);
                var newId = parseInt(combo.getSelectedObject().id);
                if(newId != lastId) {
                    if (newId && $.inArray(newId, arrayEspecies) <= -1) {
                        arrayEspecies.push(newId);
                    } else {
                        combo.setSelectedByValue('', false);
                        $("#" + combo.idContainer).setError("Opção já selecionada.");
                    }

                    if (lastId && $.inArray(lastId, arrayEspecies) > -1) {
                        var pos = arrayEspecies.indexOf(parseInt(lastId, 10));
                        arrayEspecies.splice(pos, 1);
                    }
                }
            }
        }

        $(document).ready(function(){
            var especieAssociada = new Prototype.Class({
                'count'       :{{ form.especies|length }},
                'list'        : '#especiepmap-fields-list',
                'addButton'   : '#add-another-especiepmap',
                'removeButton': '#remover-especiepmap',
                'container'   : '.especiepmap-container',
                'onDelete'    : updateEspeciePMAPList,
                'isEdit'       : '{{entity.id}}'
            });

            $('#btn-searchTSN').click(detalharTSN);





        });

        function removerElemento(el){
            document.write();

//            el.remove();
        }

        function teclaInsert(evt){
            if ($(evt.target).parents('.especiepmap-container').length == 1){
                addEspecie();
            }
        }
        function teclaDelete(evt){
            if ($(evt.target).parents('.especiepmap-container').length == 1){
                removerElemento($(evt.target).parents('.especiepmap-container'));
                $('#especiepmap-fields-list').children('.especiepmap-container:last-child').find('.insertaction').focus();
            }
        }

        function closeLoader() {
            loader('.modal-body-tns', true);
        }

        function detalharTSN(){
            setTimeout(function(){
                loader('.modal-body-tns', false);
            });
            var tsnID = $("#{{form.txtTsn.get('id')}}").val();
            var url = "http://www.itis.gov/servlet/SingleRpt/SingleRpt?search_topic=TSN&search_value="+tsnID+"&print_version=PRT&source=to_print";
            //var url = "http://www.itis.gov/servlet/SingleRpt/SingleRpt?search_topic=TSN&search_value="+tsnID;
            $('.modal-body-tns').html('<iframe width="100%" id="teste" height="100%" frameborder="0" onload="closeLoader()" allowtransparency="true" src="' + url + '"></iframe>');
            $("#myModal").modal();
        }
    </script>
{% endblock %}