{% macro inputRelatorioExpansaoConsolidacaoNovo(dataInicial, dataFinal, expansoes) %}
    <link rel="stylesheet" href="{{ asset('bundles/propesq/datepicker/css/datepicker3.css') }}" type="text/css" media="all" />

    <script type="text/javascript" src="{{ asset('bundles/propesq/datepicker/js/bootstrap-datepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/datepicker/js/bootstrap-datepicker.pt-BR.js') }}"></script>

    <div class="row-fluid">
        <div class="col-md-1">
            <div class="form-group">
                <label for="dataInicial" class="control-label required">Data inicial</label>
                <div id="container-data-inicial">
                    <div class="input-group date">
                        <input name="filtros[dataInicial]" cydata="dataInicial" id="dataInicial" pattern="[0-9]{2}/[0-9]{4}" required="required" type="text" class="form-control boxed" onkeyup="vData(this)" value="{{ dataInicial }}" onchange="vData(this)" {{ block('widget_attributes') }}>
                        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-1 col-lg-offset-1">
            <div class="form-group" id="dataFinalGroup">
                <label for="dataFinal" class="control-label required">Data final</label>
                <div id="container-data-inicial">
                    <div class="input-group date">
                        <input name="filtros[dataFinal]"  cydata="dataFinal" id="dataFinal" pattern="[0-9]{2}/[0-9]{4}" required="required" type="text" class="form-control boxed" onkeyup="vData(this)" value="{{ dataFinal }}" onchange="vData(this)" {{ block('widget_attributes') }}>
                        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                </div>
                <div class="alert alert-danger" role="alert" id="dataFinalError" style="display: none; padding: 5px; font-size: 12px;">A data final deve ser maior que a data inicial.</div>
            </div>
        </div>
        <div class="control-group col-md-4 col-lg-offset-1">
            <div class="form-group" id="expansaoConsolidacaoGroup">
                <label for="expansao_consolidacao" class="control-label required">Expansão / Consolidação</label>
                <div class="controls">
                    <div style="outline: 0;-moz-user-select: none;" class="container-combobox">
                        <div class="closure input select" style="outline: 0;-moz-user-select: none;">
                            <div id="expansao_consolidacao" class="cemporcento select_closure" style="outline: 0;-moz-user-select: none;"></div>
                            <script type="text/javascript">
                            </script>
                            <div class="help-inline">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function(){
            $('.input-group.date').datepicker({
                format: "mm/yyyy",
                language: "pt-BR",
                orientation: "top left",
                autoclose: true,
                todayHighlight: true,
                minViewMode: 1
            });

            $("#dataInicial,#dataFinal").keydown(function(event){
                // Obtém a data/hora atual
                var data = new Date();

                // Guarda cada pedaço em uma variável
                var mes     = data.getMonth();          // 0-11 (zero=janeiro)
                var ano    = data.getFullYear();       // 4 dígitos

                // Formata a data e a hora
                mes = mes + 1;
                mes = (mes < 10)?"0"+mes:mes;
                let str_data = (mes) + '/' + ano;

                var regExp = new RegExp("[0-9]{2}\/[0-9]{4}");
                if(event.keyCode == 13 && !regExp.test($(this).val())){
                    $(this).val(str_data);
                }
                if(event.keyCode == 40 && !event.ctrlKey){
                    $(this).next().click();
                    return false;
                }
            });

            $('#dataInicial').change(validaPeriodo);
            $('#dataFinal').change(validaPeriodo);
        });

        function validaPeriodo(){
            $('#dataFinalGroup').removeClass("has-error");
            $('#dataFinalError').hide();

            var datInicio = $('#dataInicial').val().split('/');

            if (datInicio.length === 2) {
                datInicio = parseInt(datInicio[1] + datInicio[0] + 1, 10);
            } else {
                datInicio = parseInt(datInicio[2] + datInicio[1] + datInicio[0], 10);
            }

            var datFim = $('#dataFinal').val().split('/');

            if (datFim.length === 2) {
                datFim = parseInt(datFim[1] + datFim[0] + 1, 10);
            } else {
                datFim = parseInt(datFim[2] + datFim[1] + datFim[0], 10);
            }

            if( datInicio > datFim ){
                $('#dataFinalGroup').addClass("has-error");
                $('#dataFinalError').show();
                return false;
            }

            return true;
        }

        {% set virg = "" %}
        var expansao_consolidacao_list = [
                {% for expansao in expansoes %}
                    {{virg}}{"id":"{{ expansao.id }}","txtNome":"{{ expansao.txtNome }} ({% if expansao.tipoProcedimento == 1 %}Expansão{% else %}Consolidação{% endif %})"}
                    {% set virg = "," %}
                {% endfor %}
        ];

        localStorage.setItem('scrolling', '');
        var expansao_consolidacao_fn = function() {
            expansao_consolidacao = new webgoal.ui.SearchableSelectGranatum('Selecione uma base de dados');
            expansao_consolidacao.setIdName("id");
            expansao_consolidacao.setIdContainer("expansao_consolidacao");
            expansao_consolidacao.setLabelName("txtNome");
            expansao_consolidacao.setName("expansaoConsolidacao[id]");
            expansao_consolidacao.setRequired(true);
            
            //validação junto com html 5
            $('#expansao_consolidacao').parents('form').find('[type="submit"]').click(function(event){
                if($('#expansao_consolidacao').html() != null){
                    if(!expansao_consolidacao.getSelectedObject() && $('#expansao_consolidacao').find('.requiredCombobox').length){
                        if($('#expansao_consolidacao').parents('div .hidden')[0] == undefined){
                            $('#expansao_consolidacao').setError('Selecione uma opção.');
                            $('#expansao_consolidacao').find('.requiredCombobox').trigger('invalid');
                            if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == expansao_consolidacao){
                                localStorage.setItem('scrolling', expansao_consolidacao);
                                var labelFor = $('#expansao_consolidacao')[0].id;
                                if(labelFor.search(/_\d*_/) > 0){
                                    labelFor = labelFor.replace(/_\d*_(\w)*/, '');
                                }
                                var elementLabel = $('label[for='+labelFor+']');
                                if(elementLabel[0] !== undefined && elementLabel[0] !== null){
                                    if(!elementLabel.parent()[0].classList.contains('hidden')){
                                        $('html,body').animate({scrollTop: (elementLabel.offset().top) - 35}, 1000);
                                    }else{
                                        return true;
                                    }
                                }else{
                                    $('html,body').animate({scrollTop: ($('#expansao_consolidacao').offset().top) - 35}, 1000);
                                }
                            }
                            return false;
                        }else{
                            $('#expansao_consolidacao').find('.requiredCombobox').removeClass('requiredCombobox').addClass('notRequiredCombobox');
                        }
                    }else{
                        if(expansao_consolidacao == localStorage.getItem('scrolling')){
                            localStorage.setItem('scrolling', '');
                        }
                        $('#expansao_consolidacao').setError(false);
                        return true;
                    }
                }
            });
            //validação real na submissão do form
            $('#expansao_consolidacao').parents('form').submit(function(event){
                if($('#expansao_consolidacao').html() != null){
                    if(!expansao_consolidacao.getSelectedObject() && $('#expansao_consolidacao').find('.requiredCombobox').length){
                        $('#expansao_consolidacao').setError('Selecione uma opção.');
                        $('#expansao_consolidacao').find('.requiredCombobox').trigger('invalid');
                        if(localStorage.getItem('scrolling') == '' || localStorage.getItem('scrolling') == expansao_consolidacao){
                            localStorage.setItem('scrolling', expansao_consolidacao);
                            var labelFor = $('#expansao_consolidacao')[0].id;
                            if(labelFor.search(/_\d*_/) > 0){
                                labelFor = labelFor.replace(/_\d*_(\w)*/, '');
                            }
                            var elementLabel = $('label[for='+labelFor+']');
                            if(elementLabel[0] !== undefined && elementLabel[0] !== null){
                                if(!elementLabel.parent()[0].classList.contains('hidden')){
                                    $('html,body').animate({scrollTop: (elementLabel.offset().top) - 35}, 1000);
                                }else{
                                    return true;
                                }
                            }else{
                                $('html,body').animate({scrollTop: ($('#expansao_consolidacao').offset().top) - 35}, 1000);
                            }
                        }
                        return false;
                    }else{
                        if(expansao_consolidacao == localStorage.getItem('scrolling')){
                            localStorage.setItem('scrolling', '');
                        }
                        $('#expansao_consolidacao').setError(false);
                        return true;
                    }
                }
            });

            expansao_consolidacao.render(goog.dom.getElement('expansao_consolidacao'));
            expansao_consolidacao.updateList(expansao_consolidacao_list);
            expansao_consolidacao.setSearchable(true);

            $('#expansao_consolidacao').focus(function() {
                expansao_consolidacao.setFocus(true);
            });
        };

        $('#expansao_consolidacao').ready(function(){
            expansao_consolidacao_fn();
        });
    </script>
    <style>        
        .row {
            margin-right: 0px;
            margin-left: 0px;
        }

        .col-md-1, .col-md-3 {
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
        }

        @media (min-width: 992px) {
            .col-md-1 {
                float: left;
                width: 8.33333333%;
            }

            .col-md-4 {
                float: left;
                width: 33.33333333%;
            }
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-horizontal .form-group {
            margin-right: -15px;
            margin-left: -15px;
        }

        .input-group {
            position: relative;
            display: table;
            border-collapse: separate;
        }

        .form-control {
            display: block;
            width: 100%;
            height: 28px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }

        .input-group .form-control {
            position: relative;
            z-index: 2;
            float: left;
            width: 100%;
            margin-bottom: 0;
        }

        .input-group .form-control:first-child, .input-group-addon:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .input-group .form-control:last-child, .input-group-addon:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .input-group-addon:first-child {
            border-right: 0;
        }

        .input-group-addon:last-child {
            border-left: 0;
        }

        .input-group-addon {
            padding: 5px 12px;
            font-size: 14px;
            font-weight: normal;
            line-height: 1;
            color: #555;
            text-align: center;
            background-color: #eee;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .input-group-addon, .input-group-btn {
            width: 1%;
            white-space: nowrap;
            vertical-align: middle;
        }

        .input-group-addon:last-child {
            border-left: 0;
        }

        .input-group-addon, .input-group .form-control {
            display: table-cell;
        }

        @font-face {
            font-family: 'Glyphicons Halflings';

            src: url("{{ asset('bundles/propesq/bootstrap-3.2.0/fonts/glyphicons-halflings-regular.eot') }}");
            src: url("{{ asset('bundles/propesq/bootstrap-3.2.0/fonts/glyphicons-halflings-regular.eot?#iefix') }}") format('embedded-opentype'), url("{{ asset('bundles/propesq/bootstrap-3.2.0/fonts/glyphicons-halflings-regular.woff') }}") format('woff'), url("{{ asset('bundles/propesq/bootstrap-3.2.0/fonts/glyphicons-halflings-regular.ttf') }}") format('truetype'), url("{{ asset('bundles/propesq/bootstrap-3.2.0/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') }}") format('svg');
        }

        .glyphicon {
            position: relative;
            top: 1px;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: normal;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    
        .glyphicon-calendar:before {
            content: "\e109";
        }

        @media (min-width: 1200px) {
            .col-lg-offset-1 {
                margin-left: 8.33333333%;
            }

            .col-lg-offset-2 {
                margin-left: 16.66666667%;
            }
        }

        .boxed {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .select2-selection {
            height: 30px !important;
        }

        .has-error .form-control {
            border-color: #a94442;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        }

        .has-error .input-group-addon {
            color: #a94442;
            background-color: #f2dede;
            border-color: #a94442;
        }
    </style>
{% endmacro %}