@extends(layoutTenant())

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title float-left">Relatório</h4>


                <div class="clearfix"></div>
            </div>
        </div>
    </div>


    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @if (session('success'))

        <div class="alert alert-success">
            {{ session('success') }}
        </div>

    @endif
    @if (session('erro'))

        <div class="alert alert-danger">
            {{ session('erro') }}
        </div>

    @endif
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">

        <div class="card">
            <h5 class="card-header">Relatório</h5>
            <div class="card-body p-0">
                {!! Form::open(['url'=>routeTenant('ouvidoria.relatoriook'), 'class'=>'form form-inline','enctype'=>'multipart/form-data']) !!}


                <div class="row" style="margin-top: 20px; margin-left: 10px;">
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-6">

                        <div class="form-group">
                            {!! Form::label('data', 'Período de :') !!}

                            <input autocomplete="off"  style="width: 100%;" name="datacomeco" class="form-control"

                                   id="data_inicial">

                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-6">

                        <div class="form-group">
                            {!! Form::label('data', 'Até:') !!}

                            <input autocomplete="off" style="width: 100%;" name="datafim" class="form-control"

                                   id="data_final">



                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-6">

                        <div class="form-group" style="margin-top: 25px;">
                            <input  type="checkbox" id="grafico" name="grafico" value="1"><span style="margin-left: 7px;"> Gerar Gráfico</span>

                        </div>
                    </div>
                    </div>
                    <div class="row" style="margin-top: 20px; margin-left: 10px;">
                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-6">

                        <div class="form-group">
                            <input type="checkbox" id="departamentos" name="departamentos" value="1"> <span style="margin-left: 7px;"> Departamentos</span>
                            <select name="departametoselect[]" id="departametoselect" multiple="multiple" style="width: 100%; height: 150px;">
                                <option   value="e-SIC - Serviço de Informação ao Cidadão">e-SIC - Serviço de Informação ao Cidadão</option>
                                <option  value="Legislação">Legislação</option>
                                <option value="Ouvidoria">Ouvidoria</option>
                                <option value="Setor de Licitações e Contratos">Setor de Licitações e Contratos</option>

                            </select>

                        </div>

                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-6">

                        <div class="form-group">
                            <input type="checkbox" id="status" name="status" value="1"><span style="margin-left: 7px;">  Status</span>
                            <select name="statusselect[]" id="statusselect" multiple="multiple" style="width: 100%; height: 150px;">
                                <option  value="Admitida">Admitida</option>
                                <option  value="Não Resolvido"> Não Resolvido</option>
                                <option  value="Negada"> Negada</option>
                                <option   value="Recurso"> Recurso</option>
                                <option   value="Resolvido"> Resolvido</option>
                                <option   value="Resposta Parcial">Resposta Parcial</option>

                            </select>

                        </div>

                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-6">

                        <div class="form-group">
                            <input type="checkbox" id="forma" name="forma" value="1"><span style="margin-left: 7px;">  Forma de Receb. de Resposta</span>
                            <select name="formaselect[]" id="formaselect" multiple="multiple" style="width: 100%; height: 150px;">


                                <option value="0"> Anônimo</option>
                                <option value="Email"> (e-mail)</option>
                                <option value="SMS">Sms</option>
                                <option value="Telefone">Telefone</option>

                            </select>

                        </div>

                    </div>















                    <div class="col-xl-2 col-lg-6 col-md-6 col-sm-6 col-6" style="margin-top: 20px; margin-bottom: 20px;">

                        <div class="form-group">
                            {!! Form::submit('Pesquisar', ['class'=>'btn btn-primary btn btn-outline-success my-2 my-sm-0']) !!}

                        </div>

                    </div>


                </div>




                {!! Form::close() !!}

            </div>
        </div>
    </div>








@endsection




@section('post-script')






    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />

    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


    <script>
        $(function() {

            var dates = $( "#data_inicial" ).datepicker({
                dateFormat: 'dd/mm/yy',
                defaultDate: "+1w",
                dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
                dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
                dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
                monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
                monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],

            });


        });
    </script>

    <script>
        $(function() {

            var dates = $( "#data_final" ).datepicker({
                dateFormat: 'dd/mm/yy',
                defaultDate: "+1w",
                dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
                dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
                dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
                monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
                monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],

            });


        });
    </script>




    <script src="{{ asset('assets/vendor/inputmask/js/jquery.inputmask.bundle.js') }}"></script>
    <script>
        $(function(e) {
            "use strict";

            $("#calendario").inputmask("99/99/9999"),
            $("#calendario2").inputmask("99/99/9999"),


                $(".email-inputmask").inputmask({
                    mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[*{2,6}][*{1,2}].*{1,}[.*{2,6}][.*{1,2}]",
                    greedy: !1,
                    onBeforePaste: function(n, a) {
                        return (e = e.toLowerCase()).replace("mailto:", "")
                    },
                    definitions: {
                        "*": {
                            validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~/-]",
                            cardinality: 1,
                            casing: "lower"
                        }
                    }
                })
        });


        document.getElementById("file_upload").onchange = function () {
            document.getElementById("uploadFile").value = this.value;
        };


    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src=" https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>

<script>
    $('option').mousedown(function(e) {
        e.preventDefault();
        var originalScrollTop = $(this).parent().scrollTop();
        console.log(originalScrollTop);
        $(this).prop('selected', $(this).prop('selected') ? false : true);
        var self = this;
        $(this).parent().focus();
        setTimeout(function() {
            $(self).parent().scrollTop(originalScrollTop);
        }, 0);

        return false;
    });
    $('#departamentos').click(function() {

        if(this.checked) {
            // Iterate each checkbox
            $('#departametoselect option').prop('selected', true);
        } else {
            $('#departametoselect option').prop('selected', false);
        }

    });
    $('#status').click(function() {

        if(this.checked) {
            // Iterate each checkbox
            $('#statusselect option').prop('selected', true);
        } else {
            $('#statusselect option').prop('selected', false);
        }

    });
    $('#forma').click(function() {

        if(this.checked) {
            // Iterate each checkbox
            $('#formaselect option').prop('selected', true);
        } else {
            $('#formaselect option').prop('selected', false);
        }

    });
</script>

@endsection