{% extends "propesqBundle::layout.publico.html.twig" %}

{% block stylesheets %}    
{% endblock %}

{% block content %}
    <link rel="stylesheet" href="{{ asset('bundles/propesq/css/especieshow.css') }}">
    <div class="label-container">
        <div class="row">
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.txtNomeReferencia'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtNomeReferencia }}</label>
            </div>
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.txtNivelTaxonomico'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtNivelTaxonomico }}</label>           
            </div>    
        </div>

        <div class="row">
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.txtNomeCientifico'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtNomeCientifico }}</label>
            </div>
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.txtAutor'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtAutor }}</label>           
            </div>    
        </div>

        <div class="row">
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.txtGenero'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtGenero }}</label>
            </div>
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.txtFamilia'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtFamilia }}</label>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.txtOrdem'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtOrdem }}</label>
            </div>
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.txtClasse'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtClasse }}</label>
            </div>
        </div>    

        <div class="row">
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.codEspecieGrupo'|trans}}:</label>
                <label class="txtDescricao">{{ entity.codEspecieGrupo }}</label>
            </div>
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.codEspecieHabito'|trans}}:</label>
                <label class="txtDescricao">{{ entity.codEspecieHabito }}</label>
            </div>    
        </div>

        <div class="row">
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.indDistribuicao'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtIndDistribuicao }}</label>
            </div>
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.txtAlphaid'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtAlphaid }}</label>
            </div>    
        </div>
        <div class="row">
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.numFaixaProfInicial'|trans}}:</label>
                <label class="txtDescricao">{{ entity.numFaixaProfInicial }}</label>
            </div>
            <div class="col-md-6">
                <label class="txtLabel">{{'entidade.especie.numFaixaProfFinal'|trans}}:</label>
                <label class="txtDescricao">{{ entity.numFaixaProfFinal }}</label>
            </div>    
        </div>

        <div class="row">
            <div class="col-md-12">
                <label class="txtLabel">{{'entidade.especie.txtObservacao'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtObservacao }}</label>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <label class="txtLabel">{{'entidade.especie.especies'|trans}}:</label>
                <label class="txtDescricao">{{ entity.txtEspecies }}</label>
            </div>
        </div>
        <div class="row tsn-container">
            <div class="col-md-6">
                <label class="txtLabel label-tsn">{{'entidade.especie.txtTsn'|trans}}:</label>
                <label class="txtDescricao label-desc-tsn">{{ entity.txtTsn }}</label>
                {%if entity.txtTsn is not null%}
                <button class="btn btn-default btn-xs" id="btn-searchTSN" type="button">Detalhar</button>
                {%endif%}
            </div>
        </div>
    </div>

    {% if entity.especiesFotografias|length > 0%}            
        <div class="image-row">
            <div class="image-set">
                {% set size = entity.especiesFotografias|length %}
                {% set count = 1 %}
                {% for f in entity.especiesFotografias %}
                    {%set message = 'Clique à direita da imagem para avançar e a esquerda para retornar.'%}

                    {%if count  == 1%}
                        {%set message = 'Clique à direita da imagem para avançar.'%}
                    {%elseif count == size%}     
                        {%set message = 'Clique à esquerda da imagem para retornar.'%}
                    {%endif%}

                    <a class="example-image-link" href="{{ asset(url_imagens) ~ f.txtNomeDisco}}" data-lightbox="example-set" data-title="{{message}}"><img class="example-image" src="{{asset(url_imagens) ~ 'thumb_' ~ f.txtNomeDisco}}" alt=""/></a>

                    {% set count = count + 1%}
                {% endfor %}
            </div>
        </div>            
    {%endif%}
    
    {%if principal%}    
    <div class="row div-margin">        
        <div class="col-md-6">
            <div id="chart_div4"></div>
        </div>
        
        <div class="col-md-6">
            <div id="chart_div2"></div>
        </div>    
    </div>

    <div class="row div-margin">
        <div class="col-md-6">
            <div id="chart_div"></div>
        </div>
        
        <div class="col-md-6">
            <div id="chart_div3"></div>
        </div>            
    </div>
    {%endif%}
        
    <div class="row div-margin">
        <div class="col-md-12 btn-return">        
            <a class="btn btn-default" href="{{ path('especiepublico') }}">Retornar a listagem</a>        
        </div>
    </div>

    <div id="myModal" class="modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 id="myModalLabel">Resultado da Busca no ITIS</h4>
                </div>
                <div class="modal-body modal-body-tns">
                    Hello world!
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fechar janela</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
        $(document).ready(function () {
            $('#btn-searchTSN').click(function () {
                var tsnID = "{{entity.txtTsn}}";
                var url = "http://www.itis.gov/servlet/SingleRpt/SingleRpt?search_topic=TSN&search_value=" + tsnID + "&print_version=PRT&source=to_print";
                $('.modal-body-tns').html('<iframe width="100%" height="100%" frameborder="0" allowtransparency="true" src="' + url + '"></iframe>');
                $("#myModal").modal("show");
            });
        });

        $("#myModal").on("hide", function () {    // remove the event listeners when the dialog is dismissed
            $("#myModal a.btn").off("click");
        });

        $("#myModal").on("hidden", function () {  // remove the actual elements from the DOM when fully hidden
            $("#myModal").remove();
        });

        $("#myModal").modal({// wire up the actual modal functionality and show the dialog
            "backdrop": "static",
            "keyboard": true,
            "show": false
        });

        {%if principal%}
        google.load("visualization", "1", {packages: ["corechart"]});
        google.setOnLoadCallback(drawChart);
                var conteudo1 = {{conteudo1|raw}};
                var conteudo2 = {{conteudo2|raw}};
                var conteudo3 = {{conteudo3|raw}};
                var conteudo4 = {{conteudo4|raw}};
                var anoInicial = {{anoInicial}};
                var anoFinal = {{anoFinal}};
                function drawChart() {
                    var arrayMes = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];

                    var arrayGlobal = new Array();
                    var arrayGlobal2 = new Array();
                    var arrayGlobal3 = new Array();
                    var arrayGlobal4 = new Array();

                    arrayGlobal.push(["Municípios", "Produção"]);
                    $.each(conteudo1, function (i, value) {
                        arrayGlobal.push([value.municipio, parseFloat(value.producao)]);
                    });

                    var data = null;

                    if (arrayGlobal.length > 1) {
                        data = google.visualization.arrayToDataTable(arrayGlobal);

                        var formatter = new google.visualization.NumberFormat({decimalSymbol: ','});
                        formatter.format(data, 1);
                    } else {
                        arrayGlobal.push(['', 0]);
                        data = google.visualization.arrayToDataTable(arrayGlobal)
                    }

                    var options = {
                        title: 'Total de produção da espécie por município entre ' + anoInicial + ' e ' + anoFinal + '.',
                        hAxis: {title: 'Municípios', titleTextStyle: {color: 'black'}},
                        vAxis: {title: 'captura média (t)', titleTextStyle: {color: 'black'}, viewWindow: { min: 0 }},
                        legend: {position: 'none'}
                    };

                    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
                    chart.draw(data, options);
                    /*Fim do conteudo chart1*/

                    /*Monta o conteúdo para o chart2*/
                    var arrayC = new Array();
                    arrayC.push('Mês', 'Produção');

                    arrayGlobal2.push(arrayC);

                    for (var i = 0; i < 12; i++) {
                        arrayGlobal2.push([arrayMes[i], 0]);
                    }

                    $.each(conteudo2, function (i, value) {
                        arrayGlobal2[value.mes][1] = parseFloat(value.producao);
                    });

                    var data2 = null;

                    if (arrayGlobal2.length > 1) {
                        data2 = google.visualization.arrayToDataTable(arrayGlobal2);

                        var formatter = new google.visualization.NumberFormat({decimalSymbol: ','});
                        formatter.format(data2, 1);
                    } else {
                        arrayGlobal2.push(['', 0]);
                        data2 = google.visualization.arrayToDataTable(arrayGlobal2)
                    }

                    var options2 = {
                        title: 'Total de produção da espécie por mês entre ' + anoInicial + ' e ' + anoFinal + '.',
                        hAxis: {title: 'Mês', titleTextStyle: {color: 'black'}},
                        vAxis: {title: 'captura média (t)', titleTextStyle: {color: 'black'}, viewWindow: { min: 0 }},
                        legend: {position: 'none'}
                    };

                    var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
                    chart2.draw(data2, options2);
                    /*Fim do conteudo chart2*/

                    /*Monta o conteúdo para o chart3*/
                    arrayGlobal3.push(["Aparelho de Pesca", "Produção"]);
                    $.each(conteudo3, function (i, value) {
                        arrayGlobal3.push([value.aparelhopesca, parseFloat(value.producao)]);
                    });

                    var data3 = null;

                    if (arrayGlobal3.length > 1) {
                        data3 = google.visualization.arrayToDataTable(arrayGlobal3);

                        var formatter = new google.visualization.NumberFormat({decimalSymbol: ','});
                        formatter.format(data3, 1);
                    } else {
                        arrayGlobal3.push(['', 0]);
                        data3 = google.visualization.arrayToDataTable(arrayGlobal3)
                    }

                    var options3 = {
                        title: 'Total de produção da espécie aparelho de pesca entre ' + anoInicial + ' e ' + anoFinal + '.',
                        hAxis: {title: 'Aparelhos de Pesca', titleTextStyle: {color: 'black'}},
                        vAxis: {title: 'captura média (t)', titleTextStyle: {color: 'black'}, viewWindow: { min: 0 }},
                        legend: {position: 'none'}
                    };

                    var chart3 = new google.visualization.ColumnChart(document.getElementById('chart_div3'));
                    chart3.draw(data3, options3);
                    /*Fim do conteudo chart3*/

                    /*Monta o conteúdo para o chart4*/
                    var arrayAp2 = new Array();
                    arrayAp2.push('Ano', 'Produção');
                    arrayGlobal4.push(arrayAp2);

                    for (var i = 0; i <= (anoFinal - anoInicial); i++) {
                        arrayGlobal4.push([(anoInicial + i).toString(), 0]);
                    }

                    $.each(conteudo4, function (i, value) {
                        for (var i = 0; i < arrayGlobal4.length; i++) {
                            var arr = arrayGlobal4[i];

                            if (arr[0] == value.ano) {
                                arrayGlobal4[i][1] = parseFloat(value.producao);
                            }
                        }
                    });

                    var data4 = null;

                    if (arrayGlobal4.length > 1) {
                        data4 = google.visualization.arrayToDataTable(arrayGlobal4);

                        var formatter = new google.visualization.NumberFormat({decimalSymbol: ','});
                        formatter.format(data4, 1);
                    } else {
                        arrayGlobal4.push(['', 0]);
                        data4 = google.visualization.arrayToDataTable(arrayGlobal4)
                    }

                    var options4 = {
                        title: 'Total de produção da espécie entre ' + anoInicial + ' e ' + anoFinal + '.',
                        hAxis: {title: 'Ano', titleTextStyle: {color: 'black'}},
                        vAxis: {title: 'captura total descarregada (t)', titleTextStyle: {color: 'black'}, viewWindow: { min: 0 }},
                        legend: {position: 'none'}
                    };

                    var chart4 = new google.visualization.ColumnChart(document.getElementById('chart_div4'));
                    chart4.draw(data4, options4);
                    /*Fim do conteudo chart4*/
                }
                {%endif%}
    </script>

{% endblock %}