@extends('adminlte::page')
@section('title', 'Sigo 2.0')
@section('content_header')
    <h1>Gráficos da produção</h1>
@stop
@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="card card-danger">
                        <div class="card-header">
                            <h3 class="card-title" style="font-weight: bold;">GRUPO DE PROCEDIMENTOS</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-tool" data-card-widget="remove">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="donutChart"
                                style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>       
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card card-danger">
                        <div class="card-header">

                            <h3 class="card-title" style="font-weight: bold;">QUANTIDADE DE PROCEDIMENTOS POR FAIXA ETÁRIA</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-tool" data-card-widget="remove">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="especialidadesGraph"
                                style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                    </div>
                </div>
                </div>
                <!-- /.col (RIGHT) -->
            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>

@stop
@section('css')
    <style>
    </style>
@stop
@section('plugins.Chartjs', true)

@section('plugins.Datatables', true)
@section('js')
    <script>
        var objGetDados = '{!! json_encode($grupos) !!};'
        var receberIdades = '{!! json_encode($procedimentosPorFaixaEtaria) !!}'
        titulosGrupos=[];
        dadosGrupos=[];
        idadeGrupos = [];
        quantidadePorIdade =[];

        receberIdades.map(id => {
             idadeGrupos.push(id.idade);
             quantidadePorIdade.push(id.qtdade);
})
        objGetDados.map(grupo => {
                  titulosGrupos.push(grupo.grupo);
                  dadosGrupos.push(grupo.valor_em_reais);}); 
        tituloArray = [];
        valorArray = [];
     // Graficos Procedimentos
        
        var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
        var donutData = {
            labels: titulosGrupos,
            datasets: [{
                data: dadosGrupos,
                backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#85296F', '#00FFFF', '#696969', '#6C3082', '#00DDFF'],
            }]
        }
        var donutOptions = {
            maintainAspectRatio: false,
            responsive: true,
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })

//  QUANTIDADE DE PROCEDIMENTO POR FAIXA ETARIA.
        var donutChartCanvas = $('#especialidadesGraph').get(0).getContext('2d')
        var donutData = {
            labels: idadeGrupos,
            datasets: [{
                data: quantidadePorIdade,
                backgroundColor: ["#FF5733", "#8B008B", "#00FFFF", "#FFD700", "#1E90FF", "#FF69B4", "#00FF7F"],
            }]
        }
        var donutOptions = {
            maintainAspectRatio: false,
            responsive: true,
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })
    </script>
@stop