@extends('layouts.esic.visitante')
@section('content')
    <div class="panel panel-default">
        <h1 style="padding: 10px">ACESSO À INFORMAÇÃO</h1>
        <p class="text-justify" style="padding: 10px">
            &nbsp;A Lei nº 12.527/2011 regulamenta o direito constitucional de acesso às informações
            públicas.
            Essa
            norma entrou em vigor em 16 de maio de 2012 e criou mecanismos que possibilitam, a qualquer
            pessoa,
            física ou jurídica, sem necessidade de apresentar motivo, o recebimento de informações públicas
            dos
            órgãos e entidades. A Lei vale para os três Poderes da União, Estados, Distrito Federal e
            Municípios, inclusive aos Tribunais de Conta e Ministério Público. Entidades privadas sem fins
            lucrativos também são obrigadas a dar publicidade a informações referentes ao recebimento e à
            destinação dos recursos públicos por elas recebidos.
        </p>
    </div>

    <div class="row mt-5">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="card-body">
                        <div style="height: 360px">
                            <canvas id="myChart" height="360"></canvas>
                        </div>
                    </div>
                    <br>
                    <div class="card-footer text-muted">
                        <p class="text-center">
                            Gráfico estatístico das solicitações realizada, aqui será disponibilizada a quantidade de
                            solicitações realizadas por mês, e quantas foram atendidas ou negadas.
                            {{--                            <br/>--}}
                            {{--                            <br/>--}}
                            {{--                            <a href="javascript:void(0)" class="btn btn-default">Relatório Estatístico <span class="glyphicon glyphicon-save-file" aria-hidden="true"></span></a>--}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="jumbotron">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <h2>Acompanhe o seu pedido</h2>
                        <small>
                            Preencha e-mail e senha para acessar o Sistema de Informações.
                        </small>
                    </div>
                </div>

                <form name="FrmLogin" action="{{route('esic-solicitante-login')}}" method="post" autocomplete="off">
                    @csrf
                    <div class="form-group">
                        <label>E-mail</label>
                        <input type="email" class="form-control" name="email" required>
                    </div>
                    <div class="form-group">
                        <label>Senha</label>
                        <input type="password" class="form-control" name="password" required>
                    </div>
                    <br/>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary" name="btnEntrar">Acessar sistema</button>
                        <a href="{{route('esic-solicitante')}}" class="btn btn-primary">Não tenho cadastro</a>
                    </div>
                </form>
            </div>

            <div class="row" style="margin-top: -20px; font-size: 12px">
                <div class="col-md-12">
                    <b>SIC Físico (atendimento presencial)</b>
                    <br>
                    {{$dados->org_endereco}}, {{$dados->org_numero}} - {{$dados->org_bairro}}, {{$dados->org_cidade}}/{{$dados->org_uf}} - Telefone: {{$dados->org_telefone}}
                    <br>
                    <b>Horário de Funcionamento</b>
                    <br>
                    {{$dados->org_atendimento}}
                </div>
            </div>
        </div>
    </div>
    <hr>

    <div class="row">
        <div class="col-md-12">
            <small>
                <b>O e-SIC é uma plataforma de realização e acompanhamento de pedidos de acesso à informação pública pela
                    Web.</b> <br/>A partir desse sistema, o município permite que cidadãos se cadastrem, façam seus pedidos
                e acompanhem os prazos e respostas, bem como efetivem recursos, caso entendam necessário. Tudo isso pode ser
                feito a partir do conforto de seus computadores e de dispositivos móveis.
            </small>
        </div>
    </div>
    <hr>
@endsection
@push('script')
    <script>
        function getRetorno(param) {
            let valores = [];
            $.each(param, function (key, val) {
                valores.push(val);
            });
            return valores;
        }

        $(function () {
            let now = new Date;

            let situacao1 = 'A';
            let situacao2 = 'R';
            let situacao3 = 'N';

            let meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
            let url = `${urlBase}/e-sic/grafico/`;

            let ctx, data, myLineChart, options;
            ctx = document.getElementById('myChart').getContext('2d');
            options = {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'top', // top, right, bottom, left
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                plugins: {
                    title: {
                        display: true,
                        text: 'Estatísticas referentes ao exercício de ' + now.getFullYear(),
                        padding: {
                            top: 0,
                            bottom: 10
                        }
                    },
                    // subtitle: {
                    //     display: true,
                    //     text: 'Total de Solicitações'
                    // },
                    scales: {
                        y: {
                            beginAtZero: true
                        },
                    }
                },
            };

            $.getJSON(url + situacao1, function (response1) {
                $.getJSON(url + situacao2, function (response2) {
                    $.getJSON(url + situacao3, function (response3) {
                        data = {
                            labels: meses,
                            borderWidth: 'right',
                            datasets: [
                                {
                                    label: 'Pendentes',
                                    data: getRetorno(response1),
                                    backgroundColor: '#00FF00',
                                    borderWidth: 1,
                                },
                                {
                                    label: 'Respondidas',
                                    data: getRetorno(response2),
                                    backgroundColor: '#0000FF',
                                    borderWidth: 1,
                                },
                                {
                                    label: 'Negadas',
                                    data: getRetorno(response3),
                                    backgroundColor: '#FF0000',
                                    borderWidth: 1,
                                },
                            ]
                        };

                        myLineChart = new Chart(ctx, {
                            type: 'bar',
                            data: data,
                            options: options
                        });
                    });
                });
            });
        });


        {{--$(function () {--}}
        {{--    let meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];--}}
        {{--    let ctx, data, myLineChart, options;--}}
        {{--    ctx = document.getElementById('myChart').getContext('2d');--}}

        {{--    let now = new Date;--}}
        {{--    new Chart(ctx, {--}}
        {{--        type: 'bar',--}}
        {{--        data: {--}}
        {{--            labels: meses,--}}
        {{--            borderWidth: 'right',--}}
        {{--            // datasets: [--}}
        {{--            //     {--}}
        {{--            //         label: 'Pendentes',--}}
        {{--            //         data: data,--}}
        {{--            //         backgroundColor: '#00FF00',--}}
        {{--            //         borderWidth: 1,--}}
        {{--            //     },--}}
        {{--            //     {--}}
        {{--            //         label: 'Respondidas',--}}
        {{--            //         data: data,--}}
        {{--            //         backgroundColor: '#0000FF',--}}
        {{--            //         borderWidth: 1,--}}
        {{--            //     },--}}
        {{--            //     {--}}
        {{--            //         label: 'Negadas',--}}
        {{--            //         data: data,--}}
        {{--            //         backgroundColor: '#FF0000',--}}
        {{--            //         borderWidth: 1,--}}
        {{--            //     },--}}
        {{--            // ]--}}
        {{--            datasets: data--}}
        {{--        },--}}
        {{--        options: {--}}
        {{--            responsive: true,--}}
        {{--            maintainAspectRatio: false,--}}
        {{--            legend: {--}}
        {{--                position: 'top', // top, right, bottom, left--}}
        {{--            },--}}
        {{--            title: {--}}
        {{--                display: true,--}}
        {{--                text: 'Estatísticas referentes ao exercício de ' + now.getFullYear()--}}
        {{--            },--}}
        {{--            hover: {--}}
        {{--                mode: 'nearest',--}}
        {{--                intersect: true--}}
        {{--            },--}}
        {{--            scales: {--}}
        {{--                xAxes: [{--}}
        {{--                    display: true,--}}
        {{--                    scaleLabel: {--}}
        {{--                        display: false,--}}
        {{--                        labelString: 'Estatísticas Anual'--}}
        {{--                    }--}}
        {{--                }],--}}
        {{--                yAxes: [{--}}
        {{--                    display: true,--}}
        {{--                    scaleLabel: {--}}
        {{--                        display: true,--}}
        {{--                        labelString: 'Total de Solicitações'--}}
        {{--                    },--}}
        {{--                    ticks: {--}}
        {{--                        // min: 0,--}}
        {{--                        // max: 20,--}}

        {{--                        // forces step size to be 5 units--}}
        {{--                        stepSize: 2--}}
        {{--                    }--}}
        {{--                }]--}}
        {{--            }--}}
        {{--        }--}}
        {{--    });--}}
        {{--})--}}
    </script>
    <script>
        $(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('form[name="FrmLogin"]').submit(function (event) {
                event.preventDefault();

                const form = $(this);
                const action = form.attr('action');
                const email = form.find('input[name="email"]').val();
                const password = form.find('input[name="password"]').val();

                $.post(action, {email: email, password: password}, function (response) {
                    if (response.message) {
                        $.blockUI({
                            message: '<div class="alert alert-warning alert-dismissible" role="alert"><strong><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> </strong> ' + response.message + ' ):',
                            timeout: 6000,
                            onOverlayClick: $.unblockUI
                        });
                    }
                    if (response.redirect) {
                        window.location.href = response.redirect;
                    }
                });
            });

            // //grafico
            // function getRetorno(param) {
            //     let valores = [];
            //     $.each(param, function (key, val) {
            //         valores.push(val);
            //     });
            //     return valores;
            // }
            //
            // function getLabel(item) {
            //     let label = [item.label].join('');
            //     return label;
            // }
            //
            // function getValue(item) {
            //     let value = [item.value].join('');
            //     return value;
            // }
            //
            // function getColor(item) {
            //     let color = [item.colorRGB].join('');
            //     return color;
            // }
            //
            // let now = new Date;
            //
            // $(function () {
            //     let situacao1 = 'A';
            //     let situacao2 = 'R';
            //     let situacao3 = 'N';
            //
            //     let meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
            //     // https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array
            //
            //     let url = 'http://localhost:8080/e-sic/';
            //     //console.log(meses.length);
            //
            //     let ctx, data, myLineChart, options;
            //     ctx = document.getElementById('myChart').getContext('2d');
            //
            //     options = {
            //         responsive: true,
            //         maintainAspectRatio: false,
            //         legend: {
            //             position: 'top', // top, right, bottom, left
            //         },
            //         title: {
            //             display: true,
            //             text: 'Estatísticas referentes ao exercício de ' + now.getFullYear()
            //         },
            //         // tooltips: {
            //         //     mode: 'index',
            //         //     intersect: false,
            //         // },
            //         hover: {
            //             mode: 'nearest',
            //             intersect: true
            //         },
            //         scales: {
            //             xAxes: [{
            //                 display: true,
            //                 scaleLabel: {
            //                     display: false,
            //                     labelString: 'Estatísticas Anual'
            //                 }
            //             }],
            //             yAxes: [{
            //                 display: true,
            //                 scaleLabel: {
            //                     display: true,
            //                     labelString: 'Total de Solicitações'
            //                 },
            //                 ticks: {
            //                     // min: 0,
            //                     // max: 20,
            //
            //                     // forces step size to be 5 units
            //                     stepSize: 2
            //                 }
            //             }]
            //         }
            //     };
            //
            //     $.getJSON(url + situacao1, function (response1) {
            //         $.getJSON(url + situacao2, function (response2) {
            //             $.getJSON(url + situacao3, function (response3) {
            //                 data = {
            //                     labels: meses,
            //                     borderWidth: 'right',
            //                     datasets: [
            //                         {
            //                             label: 'Pendentes',
            //                             data: getRetorno(response1),
            //                             backgroundColor: '#00FF00',
            //                             borderWidth: 1,
            //                         },
            //                         {
            //                             label: 'Respondidas',
            //                             data: getRetorno(response2),
            //                             backgroundColor: '#0000FF',
            //                             borderWidth: 1,
            //                         },
            //                         {
            //                             label: 'Negadas',
            //                             data: getRetorno(response3),
            //                             backgroundColor: '#FF0000',
            //                             borderWidth: 1,
            //                         },
            //                     ]
            //                 };
            //
            //                 myLineChart = new Chart(ctx, {
            //                     type: 'bar',
            //                     data: data,
            //                     options: options
            //                 });
            //             });
            //         });
            //     });
            // });
            // //FIM CHAST

        });
    </script>
@endpush