@if ($object->totalAulas == 0)
    <div class="nothing-to-show">
        <i class="material-icons">cloud_off</i>
        <p>Nenhuma aula nos últimos 7 dias.</p>
    </div>
@else
    <div class="row">
        <div class="col-md-12">
            <p class="small text-muted text-center">Período de {{DateAndTime::convertDatetimeToVisual($object->dataIni)}} a {{DateAndTime::convertDatetimeToVisual($object->dataFim)}}</p>
        </div>
        @if ($object->totalAulasComChamada > 0)
            <div class="col-md-6">
                <canvas id="chartChamadas"></canvas>
            </div>
            <div class="col-md-6">
                <canvas id="chartPresencas"></canvas>
            </div>
        @else
            <div class="col-md-12">
                <canvas id="chartChamadas"></canvas>
            </div>
        @endif
    </div>
@endif

<script>
    window.chartColors = {
        red: 'rgb(183, 28, 28)',
        orange: 'rgb(255, 152, 0)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(27, 94, 32)',
        blue: 'rgb(21, 101, 192)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(224, 224, 224)'
    };

    function renderizarGraficoPresencas() {
        renderGraficoChamadas();

        @if ($object->totalAulasComChamada > 0)
        renderGraficoPresencas();
        @endif
    }

    function renderGraficoChamadas() {
        var config = {
            type: 'pie',
            data: {
                datasets: [{
                    data: [
                        {{$object->totalAulasComChamada}},
                        {{$object->totalAulasSemChamada}}
                    ],
                    backgroundColor: [
                        window.chartColors.blue,
                        window.chartColors.grey
                    ],
                    label: 'Chamadas'
                }],
                labels: [
                    "Com chamada",
                    "Sem chamada"
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        };

        var myPie = new Chart($("#chartChamadas"), config);
    }

    function renderGraficoPresencas() {
        var config = {
            type: 'pie',
            data: {
                datasets: [{
                    data: [
                        {{$object->totalAlunosPresentes}},
                        {{$object->totalAlunosAusentes}}
                    ],
                    backgroundColor: [
                        window.chartColors.green,
                        window.chartColors.grey
                    ],
                    label: 'Presenças'
                }],
                labels: [
                    "Alunos presentes",
                    "Alunos ausentes"
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        };

        var myPie = new Chart($("#chartPresencas"), config);
    }
</script>