<div class="row">
    <div class="col-lg-12">
        <div class="row justify-content-center">
            <div class="col-md-6 col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Total de Periodos</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $totalPeriodos }}</h3>
                                <p class="mb-0 text-truncate text-muted">En el sistema académico</p>
                            </div>
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-calendar font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--end col-->
            <div class="col-md-6 col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Total de Postulantes</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $totalPostulantes }}</h3>
                                <p class="mb-0 text-truncate text-muted">En el sistema académico</p>
                            </div>
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-calendar font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end col-->
            <div class="col-md-6 col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Total de Docentes</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $totalDocentes }}</h3>
                                <p class="mb-0 text-truncate text-muted">En el sistema académico</p>
                            </div>
                            <!--end col-->
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-activity font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-md-6 col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold">Total de Docentes</p>
                                <h3 class="my-1 font-20 fw-bold">{{ $totalCursos }}</h3>
                                <p class="mb-0 text-truncate text-muted">En el sistema académico</p>
                            </div>
                            <!--end col-->
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-md bg-light-alt rounded-circle mx-auto">
                                    <i class="ti ti-confetti font-24 align-self-center text-muted"></i>
                                </div>
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
        </div>
        <!--end row-->
        <div class="card">
            <div class="card-header">
                
                <!--end row-->
            </div>
            <!--end card-header-->
            <div class="card-body">
                <div class="">
                    <div id="ana_dash_12" class="apex-charts"></div>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <!--end col-->
    
    <!--end col-->
</div>
<!--end row-->


<!--end row-->
<script src="{{URL::asset('assets/plugins/apexcharts/apexcharts.min.js')}}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var options = {
            chart: {
                type: 'bar',
                height: 350
            },
            series: [{
                name: 'Matrículas',
                data: @json($data)
            }],
            xaxis: {
                categories: @json($labels)
            },
            colors: ['#5b73e8'],
            title: {
                text: 'Matrículas por Periodo',
                align: 'center'
            }
        };

        var chart = new ApexCharts(document.querySelector("#ana_dash_12"), options);
        chart.render();
    });
</script>