{{ form.inputPeriodo(dataInicial, dataFinal, emptyTable) }}
<style>

    .select2-container-multi .select2-choices .select2-search-field{
        width: 100%;
    }
</style>
<div class="row">
    <div class="col-md-8">
        <fieldset>
        <legend><small>Agrupadores</small></legend>
        {% for key, coluna in colunas %}         
            {% if(loop.index0 % 2 == 0) %} <div class="row"> {% endif %}
            <div class="col-md-6">    
                <div class="checkbox">
                    <label for="coluna{{ loop.index0 }}" class=" control-label">
                        <input type="checkbox" id="coluna{{ loop.index0 }}" name="filtros[colunas][]" class="input-xlarge colunas {% if filtros[loop.index0]|length > 0 %} showFiltro {% endif %}" value="{{ coluna }}" {% if emptyTable %} disabled {% endif %}>
                        {{ key }}<input type="hidden" value="{{key}}" name="filtros[{{coluna}}_nomeExibicao]">
                    </label>
                    {% if filtros[loop.index0]|length > 0 %}
                    <div  class="control-group" id="busca{{ loop.index0 }}" style="display: none">
                        <select style="width: 100%" multiple id="filtro{{ loop.index0 }}" name="filtros[{{ coluna }}][]">
                            <option value=""></option>
                            {% for filtro in filtros[loop.index0] %}    
                                <option value="{{ filtro.id }}">{{ filtro.nome }}</option>
                            {% endfor %}                        
                        </select>
                                                 
                    </div>
                    {% endif %}
                </div>
                <script>
                    $(document).ready(function() { 
                        $("#filtro{{ loop.index0 }}").select2({
                            placeholder: "Selecione uma ou mais opções",
                            formatNoMatches: "Nenhum resultado encontrado"
                        }); 
                        $(".select2-choices").css("border-radius", 5);
                    });
                </script>
            </div>
            {% if(loop.index0 % 2 != 0) %} </div> {% endif %}
        {% endfor %}
        </fieldset>
    </div>
    <div class="col-md-4">
        <fieldset>
            <legend><small>Variáveis</small></legend>
            
            {% for key, variavel in variaveis %}
                <div class="row">
                <div class="col-md-12">     
                    <div class="checkbox">
                    <label for="variavel{{ loop.index0 }}" class=" control-label">
                        <input type="checkbox" id="variavel{{ loop.index0 }}" name="filtros[totalizadores][]" class="input-xlarge variaveis" value="{{ variavel }}" {%if variavel == 'hora_operacao'%} onclick="verifyStatus(this)" {%endif%} {% if emptyTable %} disabled {% endif %}>
                        {{ key }}<input type="hidden" value="{{key}}" name="filtros[{{variavel}}_nomeExibicao]">
                    </label>
                    </div>
                </div>
                </div>
            {% endfor %}
        </fieldset>
    </div>
</div> 


<script>
    
    
    $(document).ready(function(){
{#        $(".chzn-select").chosen({no_results_text: "Nenhum resultado encontrado para"});#}
        $(".default").css("height", 25);
        $(".chzn-container").css("width", "100%");
        $(".chzn-choices").css("border-radius", 5);

        
        $(".showFiltro").click(function(element) {
            var id = /\d+/.exec($(this).attr('id'))[0];
            if (element.currentTarget.checked) {
                $('#busca'+id).show();
            } else {
                $('#busca'+id).hide();
            }
        });
        
        
        $('#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');
        $('#btnPDF').css('display','none');
        $('#btnCSV').css('display','none');
    }
    
    function verifyStatus(component) {
        var array = $('#containercheck input:checkbox');
        
        if (component.checked) {
            for (var i = 0; i < array.length; i++) {
                if (array[i].id != 'coluna19' && array[i].id != 'coluna14' && array[i].id != 'coluna12'  && 
                    array[i].id != 'coluna5' && array[i].id != 'coluna6' && array[i].id != 'coluna7' && 
                    array[i].id != 'coluna8' && array[i].id != 'agrupador6') {
                    
                    if (array[i].checked) {
                        array[i].click();
                    }
                    
                    array[i].disabled = true;
                }
            }
        } else {
            for (var i = 0; i < array.length; i++) {
                array[i].disabled = false;
            }
        }
    }
</script>