@extends('layouts._includes.admin.Header')
@section('titulo', 'Painel')
@section('conteudo')



    <div class="col-md-12">
        <div class="row ">
            <div class="col-md-4 shadow-sm mx-auto card animate__animated animate__fadeIn"
                style="border-bottom:3px solid #175B99">

                <div class="p-2">

                    <h5 class="___class_+?7___">Bairro</h5>
                    <hr>
                    <div>
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6">
                                    <h4>Total </h4>
                                </div>
                                <div class="col-md-6 ">
                                    <h4 class="text-center">{{ $tt_bairro }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-4 shadow-sm mx-auto card animate__animated animate__fadeIn"
                style="border-bottom:3px solid #E5BF0B">

                <div class="p-2">

                    <h5 class="___class_+?15___">Director</h5>
                    <hr>
                    <div>
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6">
                                    <h4>Total </h4>
                                </div>
                                <div class="col-md-6 ">
                                    <h4 class="text-center">{{ $tt_diretor }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-md-4 shadow-sm mx-auto card animate__animated animate__fadeIn"
                style="border-bottom:3px solid #175B99">

                <div class="p-2">

                    <h5 class="___class_+?7___">Departamentos</h5>
                    <hr>
                    <div>
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6">
                                    <h4>Total </h4>
                                </div>
                                <div class="col-md-6 ">
                                    <h4 class="text-center">{{ $tt_dep }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>



        </div>
    </div>
    <div class="container-fluid mt-5">
        <div class="row">
            <div class="col-md-6">
                <canvas id="chart1" width="10" height="10"></canvas>

            </div>
            <div class="col-md-6">
                <canvas id="chart2" width="10" height="10"></canvas>

            </div>
        </div>

    </div>

    <script>
        var ctx = document.getElementById('chart1');
        var myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Departamentos', 'Funcionários', 'Directores'],
                datasets: [{
                    label: 'Dados entidades por bairro',
                    data: [{{ $tt_dep }}, {{ $tt_func }}, {{ $tt_diretor }}],
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(255, 99, 132, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(75, 192, 192, 1)',
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>


    <script>
        var ctx = document.getElementById('chart2');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Escolas', 'Professores', 'Cursos', 'Discilpinas', 'Turmas'],
                datasets: [{
                    label: 'Entidades por bairro',
                    data: [2, 23, 4, 5, 6],
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(255, 99, 132, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(75, 192, 192, 1)',
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
    </div>

@endsection