@extends('modelo.modelo')

@section('content')
    <a href="{{ url('cadastrador/home') }}" title="Back"><button class="btn btn-warning  btn-hero btn-sm"><i
                class="fa fa-arrow-left" aria-hidden="true"></i> Voltar</button></a>
    <br>
    <br>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages': ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = google.visualization.arrayToDataTable([
                ['Tipo', 'Solicitações'],

                @foreach ($todosDados['statusSolicitacoes'] as $dado)
                    {!! "['" . $dado->status . "', " . $dado->qtde . '],' !!}
                @endforeach
                {!! "[' ', 0]" !!}

            ]);

            var options = {
                title: 'Status das solicitações atualmente'
            };

            var chart = new google.visualization.PieChart(document.getElementById('status'));

            chart.draw(data, options);
        }
    </script>
    <script type="text/javascript">
        google.charts.load("current", {
            packages: ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ["Tipo", "Quantidade"],
                @foreach ($todosDados['quantidadeSolicitacoesPorTipo'] as $dado)
                    {!! '["' . $dado->tipo . '", ' . $dado->qtde . '],' !!}
                @endforeach
                {!! '["", 0]' !!}
            ]);

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1]);

            var options = {
                title: "Quantidade de solicitações por tipo",
                width: 600,
                height: 400,
                bar: {
                    groupWidth: "95%"
                },
                legend: {
                    position: "none"
                },
            };
            var chart = new google.visualization.ColumnChart(document.getElementById("qtdeTipo"));
            chart.draw(view, options);
        }
    </script>
    <script type="text/javascript">
        google.charts.load("current", {
            packages: ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ["Bairro", "Quantidade"],
                @foreach ($todosDados['dezBairrosMais'] as $dado)
                    {!! '["' . $dado->bairro . '", ' . $dado->qtde . '],' !!}
                @endforeach
                {!! '["", 0]' !!}
            ]);

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1]);

            var options = {
                title: "Número de solicitações por bairro.",
                width: 600,
                height: 400,
                bar: {
                    groupWidth: "95%"
                },
                legend: {
                    position: "none"
                },
            };
            var chart = new google.visualization.ColumnChart(document.getElementById("bairro"));
            chart.draw(view, options);
        }
    </script>
    <script type="text/javascript">
        google.charts.load("current", {
            packages: ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ["Nome", "Quantidade"],
                @foreach ($todosDados['secretariasMaisDemandadas'] as $dado)
                    {!! '["' . $dado->nome . '", ' . $dado->qtde . '],' !!}
                @endforeach
                {!! '["", 0]' !!}
            ]);

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1]);

            var options = {
                title: "Quantidade de solicitações por órgão da prefeitura",
                width: 600,
                height: 400,
                bar: {
                    groupWidth: "95%"
                },
                legend: {
                    position: "none"
                },
            };
            var chart = new google.visualization.ColumnChart(document.getElementById("secretaria"));
            chart.draw(view, options);
        }
    </script>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 cor_olinda_azul_bg mb-20">
                <h2 class="h2 text-center text-white">Estatísticas e indicadores</h2>
            </div>
        </div>

        <div class="row mb-20">
            <div class="col-md-6">

                <div class="card-body shadow-lg">
                    <div id="status" style="width: 600px; height: 400px;">
                    </div>
                </div>

            </div>
            <div class="col-md-6">

                <div class="card-body shadow-lg">
                    <div id="qtdeTipo">
                    </div>
                </div>

            </div>
        </div>
        <div class="row mb-20">
            <div class="col-md-6">

                <div class="card-body shadow-lg">
                    <div id="bairro">
                    </div>
                </div>

            </div>
            <div class="col-md-6">

                <div class="card-body shadow-lg">
                    <div id="secretaria">
                    </div>
                </div>

            </div>
        </div>

    </div>
    </div>
@endsection