@extends('adminlte::page')

@section('content_header')
    <h1><b>Bienvenido, {{ Auth::user()->roles->pluck('name')->implode(', ') }}:</b> {{ Auth::user()->name }} </h1>
    <hr>
@stop

@section('content')
    <div class="row">

        @if (Auth::user()->roles->pluck('name')->implode(', ') == 'ESTUDIANTE')
            <div class="card col-md-6 col-sm-6 col-12">
                <div class="card-header">
                    Datos del usuario
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-striped table-hover table-sm">
                        <tr>
                            <td style="background-color: #dbdbdb;width:200px"><b>Nombres:</b> </td>
                            <td>{{ Auth::user()->estudiante->nombres }}</td>
                        </tr>
                        <tr>
                            <td style="background-color: #dbdbdb"><b>Apellidos:</b> </td>
                            <td>{{ Auth::user()->estudiante->apellidos }}</td>
                        </tr>
                        <tr>
                            <td style="background-color: #dbdbdb"><b>Carnet de identidad:</b> </td>
                            <td>{{ Auth::user()->estudiante->ci }}</td>
                        </tr>
                        <tr>
                            <td style="background-color: #dbdbdb"><b>Fecha de nacimiento:</b> </td>
                            <td>{{ Auth::user()->estudiante->fecha_nacimiento }}</td>
                        </tr>
                        <tr>
                            <td style="background-color: #dbdbdb"><b>Teléfono:</b> </td>
                            <td>{{ Auth::user()->estudiante->telefono }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        @endif



        @if (Auth::user()->roles->pluck('name')->implode(', ') == 'DOCENTE')
            <div class="card col-md-6 col-sm-6 col-12">
                <div class="card-header">
                    Datos del usuario
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-striped table-hover table-sm">
                        <tr>
                            <td style="background-color: #d4f4fa;width:200px"><b>Nombres:</b> </td>
                            <td>{{ Auth::user()->docente->nombres }}</td>
                        </tr>
                        <tr>
                            <td style="background-color: #d4f4fa"><b>Apellidos:</b> </td>
                            <td>{{ Auth::user()->docente->apellidos }}</td>
                        </tr>
                        <tr>
                            <td style="background-color: #d4f4fa"><b>Carnet de identidad:</b> </td>
                            <td>{{ Auth::user()->docente->ci }}</td>
                        </tr>
                        <tr>
                            <td style="background-color: #d4f4fa"><b>Fecha de nacimiento:</b> </td>
                            <td>{{ Auth::user()->docente->fecha_nacimiento }}</td>
                        </tr>
                        <tr>
                            <td style="background-color: #d4f4fa"><b>Teléfono:</b> </td>
                            <td>{{ Auth::user()->docente->telefono }}</td>
                        </tr>
                        <tr>
                            <td style="background-color: #d4f4fa"><b>Profesión:</b> </td>
                            <td>{{ Auth::user()->docente->profesion }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        @endif



        @can('admin.gestiones.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/calendario.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Gestiones registrados</b></span>
                        <span class="info-box-number">{{ $total_gestiones }} gestiones</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan



        @can('admin.carreras.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/diploma.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Carreras registradas</b></span>
                        <span class="info-box-number">{{ $total_carreras }} carreras</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan


        @can('admin.niveles.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/grafico-de-linea.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Niveles registrados</b></span>
                        <span class="info-box-number">{{ $total_niveles }} niveles</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan


        @can('admin.turnos.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/reloj.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Turnos registrados</b></span>
                        <span class="info-box-number">{{ $total_turnos }} turnos</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan

        @can('admin.paralelos.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/carpetas.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Paralelos registrados</b></span>
                        <span class="info-box-number">{{ $total_paralelos }} paralelos</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan


        @can('admin.periodos.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/completar.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Periodos registrados</b></span>
                        <span class="info-box-number">{{ $total_periodos }} Periodos</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan

        @can('admin.materias.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/materias.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Materias registrados</b></span>
                        <span class="info-box-number">{{ $total_materias }} Materias</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan

        @can('admin.roles.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/roles.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Roles registrados</b></span>
                        <span class="info-box-number">{{ $total_roles }} Roles</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan


        @can('admin.administrativos.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/administrativos.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Administrativos registrados</b></span>
                        <span class="info-box-number">{{ $total_administrativos }} Administrativos</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan


        @can('admin.docentes.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/docente.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Docentes registrados</b></span>
                        <span class="info-box-number">{{ $total_docentes }} Docentes</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan


        @can('admin.estudiantes.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/estudiantes.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Estudiantes registrados</b></span>
                        <span class="info-box-number">{{ $total_estudiantes }} Estudiantes</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan


        @can('admin.pagos.index')
            <div class="col-md-3 col-sm-6 col-12">
                <div class="info-box zoomP">
                    <img src="{{ url('/img/pago.gif') }}" width="70px" alt="">
                    <div class="info-box-content">
                        <span class="info-box-text"><b>Pagos registrados</b></span>
                        <span class="info-box-number">Total Pagado: {{ $total_pagos }}</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        @endcan

    </div>

    <div class="row">

        <div class="col-md-4">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title">Total de Estudiantes matriculados</h3>
                </div>
                <div class="card-body">
                    <div>
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title">Total pagos por mes</h3>
                </div>
                <div class="card-body">
                    <div>
                        <canvas id="myChart2"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title">Estado de los estudiantes</h3>
                </div>
                <div class="card-body">
                    <div>
                        <canvas id="myChart3"></canvas>
                    </div>
                </div>
            </div>
        </div>

    </div>

@stop

@section('css')
    {{-- Add here extra stylesheets --}}
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop

@section('js')
    <script>
        var gestiones = @json($gestionesArray);
        var matriculados = @json($datosMatriculados);
        new Chart(document.getElementById('myChart'), {
            type: 'line',
            data: {
                labels: gestiones,
                datasets: [{
                    label: 'Total de Estudiantes matriculados',
                    data: matriculados,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.3
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });


        var meses = @json($meses);
        var montos = @json($montos);
        new Chart(document.getElementById('myChart2'), {
            type: 'bar',
            data: {
                labels: meses,
                datasets: [{
                    label: 'Total de pagos por mes',
                    data: montos,
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.3
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });



        var estado = ['Aprobados','Reprobados'];
        var cantidad = [{{ $cantidadAprobados }}, {{ $cantidadReprobados }}];
        new Chart(document.getElementById('myChart3'), {
            type: 'pie',
            data: {
                labels: estado,
                datasets: [{
                    label: 'Cantidad de aprobados y reprobados',
                    data: cantidad,
                    backgroundColor: ['#f39c12', '#17a2b8'],
                    
                    borderWidth: 2,
                    fill: true,
                    tension: 0.3
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        console.log("Hi, I'm using the Laravel-AdminLTE package!");
    </script>





@stop