@extends(layoutTenant())

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title float-left">Ocorrência</h4>

                <div class="float-right" >

                    <a href="{{ routeTenant('ouvidoria.relatorio') }}" class="btn btn-success botao-adicionar"><i class=""></i>   Novo Relatório</a>
                    <a onClick="window.print()" class="btn btn-primary  botao-adicionar"><i class=""></i>   Imprimir</a>



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

    <style type="text/css">
        .quebrapagina {
            page-break-before: always;
        }
    </style>
    @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




    <!-- recent orders  -->
    <!-- ============================================================== -->
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">

        @include('app.ouvidoria.relatorio.status')
        @include('app.ouvidoria.relatorio.depatarmento')
        @include('app.ouvidoria.relatorio.formarec')
        </div>
@if($grafico == 1)
    <div class="col-lg-12  " >
        <div class="card-box" quebrapagina>
            <h4 class="header-title">Ocorrencias</h4>

            <canvas id="lineChart" height="100" class="mt-4"></canvas>
        </div>
    </div>
@endif
    </div>
    <!-- ============================================================== -->
    <!-- end recent orders  -->

    <!-- end recent orders  -->
    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {!! Form::open(['url'=>routeTenant('ouvidoria.editar.situacao'),'enctype'=>'multipart/form-data', 'class'=>'form']) !!}

                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">


                    <input type="hidden" name="id"  value="" class="form-control" id="recipient-name">

                    <div class="form-group">
                        {!! Form::label('Departamento', 'Situação:') !!}
                        <select style="width: 100%" name="status" class="custom-select" >
                            <option  value="">Selecione </option>
                            <option  value="Admitida">Admitida</option>

                            <option   value="Resposta Parcial">Resposta Parcial</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>




                        </select>


                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Salvar</button>
                </div>
                {!! Form::close() !!}
            </div>

        </div>

    </div>


@endsection




@section('post-script')

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>


    <script>


        var ctx = document.getElementById('lineChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                labels: [
                    @php

                    $mes = array('JENEIRO', 'FEVEREIRO', 'MARÇO', 'ABRIL', 'MAIO', 'JUNHO',
                     'JULHO',
                     'AGOSTO',
                     'SETEMBRO',
                     'OUTUBRO',
                     'NOVEMBRO',
                     'DEZEMBRO'
                     );

@endphp


                        ' @php echo $mes[\Carbon\Carbon::now()->subMonth(5)->format('n')]; @endphp',
                        ' @php echo $mes[\Carbon\Carbon::now()->subMonth(4)->format('n')]; @endphp',
                        ' @php echo $mes[\Carbon\Carbon::now()->subMonth(3)->format('n')]; @endphp',
                        ' @php echo $mes[\Carbon\Carbon::now()->subMonth(2)->format('n')]; @endphp',
                        ' @php echo $mes[\Carbon\Carbon::now()->subMonth(1)->format('n')]; @endphp',
                    ' @php echo $mes[\Carbon\Carbon::now()->format('n')]; @endphp',



                ],
                datasets: [{
                    label: 'Ocorrencias',

                    borderColor: 'rgb(255, 99, 132)',
                    data: [


                        {{App\Ouvidoria::whereMonth("created_at",\Carbon\Carbon::now()->subMonth(5)->format('n'))->count() }},
                        {{App\Ouvidoria::whereMonth("created_at",\Carbon\Carbon::now()->subMonth(4)->format('n'))->count() }},
                        {{App\Ouvidoria::whereMonth("created_at",\Carbon\Carbon::now()->subMonth(3)->format('n'))->count() }},
                        {{App\Ouvidoria::whereMonth("created_at",\Carbon\Carbon::now()->subMonth(2)->format('n'))->count() }},
                        {{App\Ouvidoria::whereMonth("created_at",\Carbon\Carbon::now()->subMonth(1)->format('n'))->count() }},
                        {{App\Ouvidoria::whereMonth("created_at",\Carbon\Carbon::now()->format('n'))->count() }},


                    ]
                }]
            },

            // Configuration options go here
            options: {}
        });






        $('#exampleModal2').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('whatever') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            modal.find('.modal-title').text('Editar Situação')
            modal.find('#recipient-name').val(recipient)
        })

        $(document).ready(function(){
            $('a[data-confirm]').click(function(ev){
                var href = $(this).attr('href');
                if(!$('#confirm-delete1').length){
                    $('body').append('<div class="modal fade" id="confirm-delete1" tabindex="-1" role="dialog" ' +
                        'aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog">' +
                        '<div class="modal-content"><div class="modal-header bg-danger text-white">DELETAR MATERIA' +
                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                        '<span aria-hidden="true">&times;</span></button></div><div class="modal-body">' +
                        'Tem certeza de que deseja Deletar materia ?</div><div class="modal-footer">' +
                        '<button type="button" class="btn btn-success" data-dismiss="modal">Cancelar' +
                        '</button><a class="btn btn-danger text-white" id="dataComfirmOK">Deletar</a><' +
                        '/div></div></div></div>');
                }
                $('#dataComfirmOK').attr('href', href);
                $('#confirm-delete1').modal({show: true});
                return false;

            });



        });

        $(document).ready(function(){
            $('a[data-confirm2]').click(function(ev){
                var href = $(this).attr('href');
                if(!$('#confirm-delete2').length){
                    $('body').append('<div class="modal fade" id="confirm-delete2" tabindex="-1" role="dialog" ' +
                        'aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog">' +
                        '<div class="modal-content"><div class="modal-header bg-success text-white">APROVAR MATERIA' +
                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                        '<span aria-hidden="true">&times;</span></button></div><div class="modal-body">' +
                        'Tem certeza de que deseja aprovar materia ?</div><div class="modal-footer">' +
                        '<button type="button" class="btn btn-danger " data-dismiss="modal">Cancelar' +
                        '</button><a class="btn btn-success text-white" id="dataComfirmOK">Aprovar</a><' +
                        '/div></div></div></div>');
                }
                $('#dataComfirmOK').attr('href', href);
                $('#confirm-delete2').modal({show: true});
                return false;

            });



        });

        $(document).ready(function(){
            $('a[data-confirm3]').click(function(ev){
                var href = $(this).attr('href');
                if(!$('#confirm-delete3').length){
                    $('body').append('<div class="modal fade" id="confirm-delete3" tabindex="-1" role="dialog" ' +
                        'aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog">' +
                        '<div class="modal-content"><div class="modal-header bg-danger text-white">REPROVAR MATERIA' +
                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                        '<span aria-hidden="true">&times;</span></button></div><div class="modal-body">' +
                        'Tem certeza de que deseja reprovar materia ?</div><div class="modal-footer">' +
                        '<button type="button" class="btn btn-success " data-dismiss="modal">Cancelar' +
                        '</button><a class="btn btn-danger text-white" id="dataComfirmOK">Reprovar</a><' +
                        '/div></div></div></div>');
                }
                $('#dataComfirmOK').attr('href', href);
                $('#confirm-delete3').modal({show: true});
                return false;

            });



        });

    </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',

            });


        });
    </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>
@endsection