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

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/propesq/css/edit.css') }}" type="text/css" media="all" />

    <link rel="stylesheet" href="{{ asset('bundles/propesq/js/chosen2/chosen.css') }}" type="text/css" media="all" />
    <script type="text/javascript" src="{{ asset('bundles/propesq/js/chosen2/chosen.jquery.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/js/chosen2/chosen.proto.gs.js') }}"></script>

    <style type="text/css">
        
{#        OVERRIDE: Erro de form, deixa o width 100% ultrapassando a barra do título.#}
        .alert-danger, .alert-error{
            width: inherit !important;
        }

        input[type=checkbox] {
          opacity: 0;
          float:left;
        }

        input[type=checkbox] + label {
          margin: 0 0 0 20px;
          position: relative;
          cursor: pointer;
          float: left;
        }

        input[type=checkbox] + label ~ label {
          margin: 0 0 0 0px;
        }

        input[type=checkbox] + label::before {
          content: ' ';
          position: absolute;
          left: -25px;
          top: 7px;
          width: 15px;
          height: 15px;
          display: block;
          background: white;
          border: 1px solid #A9A9A9;
        }

        input[type=checkbox] + label::after {
          content: ' ';
          position: absolute;
          left: -24px;
          top: 7px;
          width: 15px;
          height: 15px;
          display: block;
          z-index: 1;
          background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE4MS4yIDI3MyAxNyAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxODEuMiAyNzMgMTcgMTYiPjxwYXRoIGQ9Ik0tMzA2LjMgNTEuMmwtMTEzLTExM2MtOC42LTguNi0yNC04LjYtMzQuMyAwbC01MDYuOSA1MDYuOS0yMTIuNC0yMTIuNGMtOC42LTguNi0yNC04LjYtMzQuMyAwbC0xMTMgMTEzYy04LjYgOC42LTguNiAyNCAwIDM0LjNsMjMxLjIgMjMxLjIgMTEzIDExM2M4LjYgOC42IDI0IDguNiAzNC4zIDBsMTEzLTExMyA1MjQtNTI0YzctMTAuMyA3LTI1LjctMS42LTM2eiIvPjxwYXRoIGZpbGw9IiMzNzM3MzciIGQ9Ik0xOTcuNiAyNzcuMmwtMS42LTEuNmMtLjEtLjEtLjMtLjEtLjUgMGwtNy40IDcuNC0zLjEtMy4xYy0uMS0uMS0uMy0uMS0uNSAwbC0xLjYgMS42Yy0uMS4xLS4xLjMgMCAuNWwzLjMgMy4zIDEuNiAxLjZjLjEuMS4zLjEuNSAwbDEuNi0xLjYgNy42LTcuNmMuMy0uMS4zLS4zLjEtLjV6Ii8+PHBhdGggZD0iTTExODcuMSAxNDMuN2wtNTYuNS01Ni41Yy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTI1My41IDI1My41LTEwNi4yLTEwNi4yYy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTU2LjUgNTYuNWMtNS4xIDUuMS01LjEgMTIgMCAxNy4xbDExNC43IDExNC43IDU2LjUgNTYuNWM1LjEgNS4xIDEyIDUuMSAxNy4xIDBsNTYuNS01Ni41IDI2Mi0yNjJjNS4yLTMuNCA1LjItMTIgLjEtMTcuMXpNMTYzNC4xIDE2OS40bC0zNy43LTM3LjdjLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0xNjkuNSAxNjkuNS03MC4yLTcxLjljLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0zNy43IDM3LjdjLTMuNCAzLjQtMy40IDguNiAwIDEybDc3LjEgNzcuMSAzNy43IDM3LjdjMy40IDMuNCA4LjYgMy40IDEyIDBsMzcuNy0zNy43IDE3NC43LTE3Ni40YzEuNi0xLjcgMS42LTYuOS0uMS0xMC4zeiIvPjwvc3ZnPg==') no-repeat center center;
          -ms-transition: all .2s ease;
          -webkit-transition: all .2s ease;
          transition: all .3s ease;
          -ms-transform: scale(0);
          -webkit-transform: scale(0);
          transform: scale(0);
          opacity: 0;
        }

        input[type=checkbox]:checked + label::after {
          -ms-transform: scale(1);
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 1;
        }
    </style>
{% endblock %}

{% block content %}
<div id="form-container" style="overflow-x: hidden">
    
    <div class="title">
        <h2>Gerador de Relatório</h2>
    </div>
    
    <br/>
    <br/>
    
    <form id="filtros" class="form-horizontal" action="" method="post">
        <div class="" style="padding: 10px;">
            <fieldset>
                <legend>
                    <small><i class="icon-filter"></i> Filtros gerais</small>
                </legend>
                {% import  "propesqBundle:RelatorioNovo:filtro.html.twig" as form %}
                {{ form.inputRelatorioNovo(dataInicial, dataFinal, true) }}
            </fieldset>
        </div>
        
        <div class="row-fluid" id="containercheck" style="padding: 10px; width: inherit;">
            <div class="span9">
                <fieldset>
                    <legend>
                        <small><i class="icon-tags"></i> Agrupadores</small>
                    </legend>
{# Controle de verificação do anterior para ver se necessita pular linha #}
                {% set previousIsNumero = false %}
{# Controle dos checkbox dentro da row #}
                {% set localCount = 0 %}
                
                {% for key, coluna in colunas %} 
{# Se a coluna atual não for numero (verificar controller) renderiza normalmente #}
                    {% if not (key / 1) %}
                        
                        {% if loop.first or previousIsNumero %}
                            <div class="row-fluid">
                        {% endif %}
                        
                            {% if(not loop.first and localCount % 2 == 0) %}
                                </div>
                            {% endif %}
                            
                            {% if(localCount % 2 == 0) %}
                                <div class="row-fluid">
                            {% endif %}
                                
                            <div class="span3 parent{{loop.index0}}">
                                <div class="control-group">
                                    <div class="controls">
                                        <input 
                                            id="{{ loop.index0 }}" 
                                            type="checkbox" 
                                            name="filtros[colunas][]" 
                                            class="input-xlarge colunas {% if filtros[loop.index0]|length > 0 %} showFiltro {% endif %}"
                                            value="{{ coluna }}"
                                        >
                                        <label for="{{ loop.index0 }}" class=" control-label">{{ key }}<input type="hidden" value="{{key}}" name="filtros[{{coluna}}_nomeExibicao]"></label>
                                    </div>
                                </div>  
                            </div>
                            <div class="span3" style="padding-bottom: 10px;">
                                <div class="control-group busca{{ loop.index0 }}" style="display: none">
                                    <select data-placeholder=" " multiple class="chzn-select" id="filtro{{ loop.index0 }}" name="filtros[{{ coluna }}][]">
                                    </select>
                                </div>
                                <div class="busca{{ loop.index0 }}" style="display: none">
                                    <input 
                                        id="exclusao{{ loop.index0 }}" 
                                        type="checkbox" 
                                        class="input-xlarge"
                                        name="filtros[{{coluna}}_exclusao]"
                                    >
                                    <label for="exclusao{{ loop.index0 }}" class="control-label" style="margin-left: 13px;">
                                        Filtro por exclusao?
                                    </label>
                                </div>
                            </div>
                                        
                        {% set localCount = localCount + 1 %}    
                        {% set previousIsNumero = false %}
                    {% else %}
                        </div>
                        {% set localCount = 0 %}
                        {% set previousIsNumero = true %}
                        <br/>
                        <br/>
                    {% endif %}
                {% endfor %}
                    </div>
                </div>
            </div>
        </fieldset>
            <div class="span3">
                <fieldset>
                    <legend><small><i class="icon-tasks"></i> Variáveis</small></legend>
                    {% for key, variavel in variaveis %}
                        <div class="control-group">
                            <input 
                                id="variavel{{ loop.index0 }}"
                                type="checkbox" 
                                name="filtros[totalizadores][]" 
                                class="input-xlarge variaveis"
                                value="{{ variavel }}"
                                {%if variavel == 'hora_operacao'%} onclick="verifyStatus(this)" {%endif%}
                            >
                            <label for="variavel{{ loop.index0 }}" class=" control-label">
                                {{ key }}
                                <input type="hidden" value="{{key}}" name="filtros[{{variavel}}_nomeExibicao]">
                            </label>
                        </div>  
                    {% endfor %}
                </fieldset>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div style="padding: 10px;">
                    <div class="div-actions">
                        <button id="acaoHTML" type="button" class="btn btn-primary submit" accesskey="1">Visualizar relatório</button>
                        
                        {%if removePdf == false%}
                            <button id="acaoPDF" type="button" class="btn btn-success submit" accesskey="1">Gerar PDF</button>
                        {%endif%}
                        
                        <button id="acaoCSV" type="button" class="btn btn-success submit" accesskey="1">Exportar CSV</button>
                        
                        
                        
                      
                    </div>  
                </div>
            </div>
        </div>  
        
        <div class="title">
            <h2>Relatório</h2>
        </div>
         <div class="row-fluid">
            <div class="span12">
                <div>
                    <div class="alert alert-warning" id="relatorioAlert" style="width: 30%;">
                        <a class="close" data-dismiss="alert" href="#">×</a>
                        <strong>OBS: </strong>Para iniciar, preencha os filtros e clique em visualizar relatório!
                    </div>
                    <div id="relatorio" style="min-height: 100px">
                    </div>
                    
                    <input type="hidden" name="key" id="key">
                    <input type="hidden" name="tipo" id="tipo">
                </div>   
            </div>   
        </div>   
    </form>
</div>    
    
{#---INICIO MEU SCRIPT                #}
<script>
    
    //carrega o select com as opções de acordo com o campo
    $(document).ready(function(){
        //Cache para não popular o ajax  novamente, caso ele esteja preenchido já
        cache = [];
        
        //colunas que não precisam fazer ajax para ter dados no select
        defaultColumns = [
            'ano', 
            'dat_descarga', 
            'numero_viagem', 
            'dat_chegada', 
            'dat_saida', 
            'mes', 
            'dat_digitacao',
            'cod_referencia'
        ];
        
        //Colunas que precisam somente por busca na digitação ("%$variabel%") 
        //    no banco - Adicionar no if da geração do relatório no arquivo
        //      ConfiguracaoRelatorioRepository, para buscar no LIKE "%$variabel%"
        txtFiltersColumns = [
            'nome_entrevistado'
        ];
        
        $('input[type=checkbox]').on('click', function(){
            
            var id = $(this).attr('id');
            var coluna = $(this).val();
            var url = '{{ path('ajaxfiltro', { 'coluna' : '__COLUNA__' }) }}'.replace(/__COLUNA__/, coluna);
            
            if($('.busca'+id).css('display') == 'none'){
                
                //Colunas precisam ter somente input text
                if($.inArray(coluna, txtFiltersColumns) >= 0){
                    //Primeiro campo da coluna
                    $('.busca'+id+':first').html(
                        "<input type='text' name='filtros["+coluna+"][]'>"
                    );
                    
                    $('.busca'+id).css('display', 'initial');
                    
                }else if($.inArray(coluna, defaultColumns) < 0){//Colunas que não precisam ter o select
                    //Se já foi feito a busca para popular o select, ele não faz denovo
                    if($.inArray(coluna, cache) < 0){
                        cache.push(coluna);
                        $.ajax({
                            data: $(this).serialize(),
                            type: 'post',
                            url: url,
                            beforeSend: function(){
                                miniLoader('.parent'+id);
                            },
                            success: function(data, textStatus, jqXHR){

                                // logo antes da execução
                                var inicio = performance.now();
                                if(data.length > 0){
                                    var $select = $('.busca' + id).find('select');
                                    $.each(data, function( key, value ) {
                                        if(coluna == 'nome_unidade_produtiva') {
                                            // 413.12999999999965
                                            $select.append($('<option>').text(value.nome).attr('value', value.nome));
                                            // 3497.7700000000004
//                                          $('.busca' + id).find('select').append("<option value='" + value.nome + "'>" + value.nome + "</option>");
                                        }else{
                                            $select.append($('<option>').text(value.nome).attr('value', value.id));
                                            // Menor desempenho
                                            //$('.busca' + id).find('select').append("<option value='" + value.id + "'>" + value.nome + "</option>");
                                        }
                                    });
                                    //Trigger para atualizar o select 
                                    //      DOC: http://julesjanssen.github.io/chosen/
                                    $('#filtro'+id).trigger("chosen:updated");
                                }
                                $('.busca'+id).css('display', 'initial');
                                miniLoader('.parent'+id, true);
                            },
                            error: function(e){
                               
                                console.log(e);
                                miniLoader('.parent'+id, true);
                            }
                        });
                    }else{
                        $('.busca'+id).css('display', 'initial');
                    }
                }
            }else{
                $('.busca'+id).css('display', 'none');
                $('#filtro'+id).val('').trigger('chosen:updated');
            }
        });
        
    });
    
    function miniLoader(id, unblock){
        var config = {
            message: 'Carregando',
            overlayCSS: {
                opacity: 0.2
            },
            css: { 
                border: 'none', 
                padding: '5px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff'
            }
        };

        if(unblock){
            $(id).unblock(config); 
        }else{
            $(id).block(config); 
        }
    }
</script>
{#---FIM MEU SCRIPT                #}
                
{#--------INICIO Script dos filtros   #}
<script>
    
    function submeter(tipo){
        //As datas do periodo de coleta são obrigatórias
       
        if($('#dataInicial').val() == ""){
            $('#dataInicial').setError('As datas de período de dados coletados são obrigatórias.');
            $('#dataInicial').focus();       
            return;
        }else{
            $('#dataInicial').setError(false);
        }
        
        if($('#dataFinal').val() == ""){
            $('#dataFinal').setError('As datas de período de dados coletados são obrigatórias.');
            $('#dataFinal').focus();
            return;
        }else{
            $('#dataFinal').setError(false);
        }
        
        $("#tipo").val(tipo);       
        $('#filtros').submit();
    }
    
    $(document).ready(function(){
        
        $("#acaoPDF").click(function(){submeter('PDF')});
        $("#acaoCSV").click(function(){submeter('CSV')});
        $("#acaoHTML").click(function(){submeter('HTML')});
        $('#filtros').submit(function(){
            var tipo = $("#tipo").val();
            var baseUrl = ('{{ path("csv")}}').replace('/csv','');
            
          
            
            if($(".colunas").length > 0 && $(".colunas:checkbox:checked").length == 0){
                $('form').setError('Você deve selecionar pelo menos um <b>agrupador</b> e uma <b>variável</b>.');
                window.location = '#form-container';
                return false;
            }
            
            if($(".variaveis").length > 0 && $(".variaveis:checkbox:checked").length == 0){
                $('form').setError('Você deve selecionar pelo menos um <b>agrupador</b> e uma <b>variável</b>.');
                window.location = '#form-container';
                return false;
            }
            
            $('form').setError(false);
            
            //verifica se existe o método de validação de período para executar antes do ajax
            if(typeof validaPeriodo == 'function'){
                if(!validaPeriodo()){
                    $('#dataFinal').focus();
                    return false;
                }
            }
            
                $.ajax({
                    data: $(this).serialize(),
                    type: 'post',
                    url: '{{ path('gerarrelatorio') }}',
                    beforeSend: function(){
                        loader('#relatorio');
                    },
                    success: function(data, textStatus, jqXHR){                      
                        if(jqXHR.getResponseHeader('erro')){
                            $('#relatorio').html("<div class='alert alert-error'><b>Ops.. Ocorreu um erro!!</b> "+jqXHR.getResponseHeader('erroMsg')+"</div>");
                            setTimeout(function(){$('a.submit').attr({'disabled' : 'disabled', 'onclick' : 'return false;'})}, 100);
                        }else{
                            if (jqXHR.getResponseHeader('tipo') == 'HTML'){
                                $('#relatorio').html(data);
                            }else if(jqXHR.getResponseHeader('tipo') == 'CSV'){                            
                               window.open(baseUrl + jqXHR.getResponseHeader('fileUrl')+'/download');
                               $('#relatorio').html("<div class='alert alert-success'><b>Relatório gerado com sucesso.</b> "+"</div>"); 
                            }else if(jqXHR.getResponseHeader('tipo') == 'PDF'){
                                window.open(baseUrl + jqXHR.getResponseHeader('fileUrl')+'/download');
                                $('#relatorio').html("<div class='alert alert-success'><b>Relatório gerado com sucesso.</b> "+"</div>"); 
                            }
                        }
                        $('#relatorio').css('overflow-x', 'auto');
                        loader('#relatorio', true);    

                            
                        //Ao adicionar dados no relatorio, a div se tranca no limite 
                        //  e não mostra o resto do conteudo.
                        //Se adicionar antes, no primeiro submit, o loader não 
                        //  aparece
                      
                    },
                    error: function(e){
                       $("#acaoPDF").removeAttr("disabled");
                       $("#acaoCSV").removeAttr("disabled");
                       $("#acaoHTML").removeAttr("disabled");
                       $('#relatorio').html("<div class='alert alert-error'><b>Ops.. Ocorreu um erro!!</b> Se o problema persistir entre em contato.</div>");
                       
                       loader('#relatorio', true); 
                       
                       
                        console.log(e);
                    }
                });
              
            $('#relatorioAlert').hide();
            return false;
        });
    });
</script>
{#--------FIM Script dos filtros   #}


{#--------INICIO Script das agrupadores e dos variaveis   #}
<script>
    $(document).ready(function(){
        //Os checkbox's que serão bloqueados quando o variavel "horas de operação",
        //    for selecionado
        horasOperacaoBlockedCheckbox = [
            //Variaveis
//            'ano',
//            'estado',
//           'localidade',
//            'nome_referencia',
//            'aparelho_pesca_nome_referencia',
//            'dat_descarga',
//            'porto_saida',
//            'numero_viagem',
//            'nome_digitador',
//            'dat_saida',
//            'nome_unidade_produtiva',
//            'tipo_pesca',
//            'mes',
//            'municipio',
//            'grupo_taxonomico',
//            'dat_digitacao',
//            'nome_entrevistado',
//            'nome_agente_campo',
//            'porto_chegada',
//            'tipo_modalide_pesca',

      //      Variáveis
//            'kg_periodo',
//            'desembarques_periodo',
//            'preco_comercializacao',
//            'unidades_produtivas',
//            'num_dias_pesca'
        ];
        
        $('input[type=checkbox]').each(function () {
            $(this).prop('checked', false);
        });
        
        $(".chzn-select").chosen({
            no_results_text: "Nenhum resultado encontrado para",
            width: "95%",
            max_shown_results : 50,
            display_selected_options: false
        });

        $(".showFiltro").click(function(){
            var id = /\d+/.exec($(this).attr('id'))[0];
            if ($('.busca'+id).css('visibility')=='hidden'){
                $('.busca'+id).css('visibility', 'visible');
            } else {
                $('.busca'+id).css('visibility', 'hidden');
            }
        });

        $('#dataInicial').change(function(){
            atualizaBotoes();
        });

        $('#dataFinal').change(function(){
            atualizaBotoes();
        });

        $('input:checkbox').click(function (){
            atualizaBotoes();
        });
    });

    function atualizaBotoes() {
        $('#acaoPDF').css('display','inline-block');
        $('#acaoCSV').css('display','inline-block');
                
    }

    function verifyStatus(component) {
        if (component.checked) {
            $.each( horasOperacaoBlockedCheckbox, function( key, value ) {
                $('input[value='+ value +']').prop('disabled', 'disabled');
                $('input[value='+ value +']').prop('checked', false);

                $("select[name='filtros["+ value +"][]']").parent().parent().children().css('display', 'none');
                $("input[name='filtros["+ value +"][]']").parent().parent().children().css('display', 'none');
            });
            $( "input:disabled" ).parents('.control-group').css('opacity', '0.3');
        }else {
            //"Mostra" na tela
            $( "input:disabled" ).parents('.control-group').css('opacity', '1');
            $.each( horasOperacaoBlockedCheckbox, function( key, value ) {
                $('input[value='+ value +']').prop('disabled', false);
            });
        }
    }
</script>
{#--------FIM Script das agrupadores e dos variaveis  #}
{% endblock %}