@extends('template.layout')

@section('content')
    @include('sweet::alert')
    <h1 class="page-title">
        Reporte estadístico alumnos
    </h1>
    <div class="portlet light portlet-fit portlet-datatable bordered">

        <div class="portlet-body">

            <span class="caption-subject uppercase">Periodo: </span>
            <select class="bs-select form-control" id="selectPeriodo">
                @foreach($periodo as $item)
                    <option value="{{$item->id}}">{{$item->nombre}}</option>
                @endforeach
            </select>

            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row">
                        <div class="col-lg-12" style="text-align: center;">
                            <span class="caption-subject font-green sbold uppercase"> Cantidad de Alumnos por especialidad por periodo </span>
                            <div id="graph1">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row">
                        <div class="col-lg-12" style="text-align: center;">
                            <span class="caption-subject font-green sbold uppercase"> Cantidad de Proyecciones sociales por especialidad por periodo </span>
                            <div id="graph3">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row">
                        <div class="col-lg-12" style="text-align: center;">
                            <span class="caption-subject font-green sbold uppercase"> Cantidad de Alumnos por genero </span>
                            <div id="graph2">
                            </div>
                            <div id="legend" class="donut-legend">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row" style="text-align: center;">
                        <span class="caption-subject font-green sbold uppercase"> Cantidad de Alumnos por departamento </span>
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-12" style="padding-top: 5%">
                                    <div id="graphCantDepartamento"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row" style="text-align: center;">
                        <span class="caption-subject font-green sbold uppercase"> Listado de Alumnos por departamento </span>
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-12" style="padding-top: 5%">

                                    <table class="table table-hover nowrap dataTable dtr-inline collapsed tbAlumno"
                                           id="tbAlumno" width="100%" role="grid"
                                           aria-describedby="tbAlumno_info">
                                        <thead class="thead-default">
                                        <tr>

                                            <th> Apellido Paterno</th>
                                            <th> Apellido Materno</th>
                                            <th> Nombre</th>
                                            <th> Departamento</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($alumnos as $item)
                                            <tr>
                                                <td> {{ $item->apellido_paterno }} </td>
                                                <td> {{ $item->apellido_materno }} </td>
                                                <td> {{ $item->nombres }} </td>
                                                <td> {{ $item->departamento }} </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row" style="text-align: center;">
                        <span class="caption-subject font-green sbold uppercase"> Cantidad de Alumnos por tipo de colegio de procedencia </span>
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-12" style="padding-top: 5%">

                                    <div id="graphColegioProcedencia"></div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row" style="text-align: center;">
                        <span class="caption-subject font-green sbold uppercase"> Listado de Alumnos por tipo de colegio de procedencia </span>
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-12" style="padding-top: 5%">

                                    <table class="table table-hover nowrap dataTable dtr-inline collapsed tbAlumnoprocedencia"
                                           id="tbAlumnoprocedencia" width="100%" role="grid"
                                           aria-describedby="tbAlumnoprocedencia_info">
                                        <thead class="thead-default">
                                        <tr>

                                            <th> Apellido Paterno</th>
                                            <th> Apellido Materno</th>
                                            <th> Nombre</th>
                                            <th> Tipo colegio procedencia</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($procedencia as $item)
                                            <tr>
                                                <td> {{ $item->apellido_paterno }} </td>
                                                <td> {{ $item->apellido_materno }} </td>
                                                <td> {{ $item->nombres }} </td>
                                                <td> {{ $item->tipocolegio }} </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row" style="text-align: center;">
                        <span class="caption-subject font-green sbold uppercase"> Cantidad de Alumnos por Tipo de Ingreso </span>
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-12" style="padding-top: 5%">

                                    <div id="graphTipoIngreso"></div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row" style="text-align: center;">
                        <span class="caption-subject font-green sbold uppercase"> Listado de Alumnos por Tipo de Ingreso </span>
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-12" style="padding-top: 5%">

                                    <table class="table table-hover nowrap dataTable dtr-inline collapsed tbAlumnoPostulacion"
                                           id="tbAlumnoPostulacion" width="100%" role="grid"
                                           aria-describedby="tbAlumnoPostulacion_info">
                                        <thead class="thead-default">
                                        <tr>
                                            <th> Codigo Alumno </th>
                                            <th> Apellido Paterno</th>
                                            <th> Apellido Materno</th>
                                            <th> Nombre</th>
                                            <th> Tipo postulación</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($alumnostipoIngreso as $item)
                                            <tr>
                                                <td> {{ $item->codigo }} </td>
                                                <td> {{ $item->apellido_paterno }} </td>
                                                <td> {{ $item->apellido_materno }} </td>
                                                <td> {{ $item->nombres }} </td>
                                                <td> {{ $item->nombre }} </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>


@endsection
@section('scripts')
    <script>

        $('#tbAlumnoPostulacion').DataTable({
            "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "Todas"]],
            "bLengthChange": false,
            responsive: true,
            "autoWidth": true,
            "language": {
                "lengthMenu": "Mostrar _MENU_ Entradas",
                "zeroRecords": "No se encontraron registros",
                "info": "Mostrando la página _PAGE_ de _PAGES_",
                "infoEmpty": "No hay registros disponibles",
                "infoFiltered": "(filtrado de _MAX_ registros totales)",
                "search": "Buscar: ",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
            },
            "aoColumns": [
                {"bSearchable": true},
                {"bSearchable": true},
                {"bSearchable": true},
                {"bSearchable": true},
                {"bSearchable": true},
            ],
            "columns": [
                {"orderable": true},
                {"orderable": true},
                {"orderable": true},
                {"orderable": true},
                {"orderable": true},
            ],
            "order": [],
            dom: 'Bfrtip',
            buttons: [
                'excel', 'pdf'
            ]
        });

        $('#tbAlumno').DataTable({
            "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "Todas"]],
            "bLengthChange": false,
            responsive: true,
            "autoWidth": true,
            "language": {
                "lengthMenu": "Mostrar _MENU_ Entradas",
                "zeroRecords": "No se encontraron registros",
                "info": "Mostrando la página _PAGE_ de _PAGES_",
                "infoEmpty": "No hay registros disponibles",
                "infoFiltered": "(filtrado de _MAX_ registros totales)",
                "search": "Buscar: ",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
            },
            "aoColumns": [
                {"bSearchable": true},
                {"bSearchable": true},
                {"bSearchable": true},
                {"bSearchable": true},
            ],
            "columns": [
                {"orderable": true},
                {"orderable": true},
                {"orderable": true},
                {"orderable": true},
            ],
            "order": [],
            dom: 'Bfrtip',
            buttons: [
                'excel', 'pdf'
            ]
        });

        $('#tbAlumnoprocedencia').DataTable({
            "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "Todas"]],
            "bLengthChange": false,
            responsive: true,
            "autoWidth": true,
            "language": {
                "lengthMenu": "Mostrar _MENU_ Entradas",
                "zeroRecords": "No se encontraron registros",
                "info": "Mostrando la página _PAGE_ de _PAGES_",
                "infoEmpty": "No hay registros disponibles",
                "infoFiltered": "(filtrado de _MAX_ registros totales)",
                "search": "Buscar: ",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
            },
            "aoColumns": [
                {"bSearchable": true},
                {"bSearchable": true},
                {"bSearchable": true},
                {"bSearchable": true},
            ],
            "columns": [
                {"orderable": true},
                {"orderable": true},
                {"orderable": true},
                {"orderable": true},
            ],
            "order": [],
            dom: 'Bfrtip',
            buttons: [
                'excel', 'pdf'
            ]
        });

        $(document).ready(function () {

            var periodo = $("#selectPeriodo").val();
            var color_array = ['#03658C', '#7CA69E', '#F2594A', '#F28C4B', '#7E6F6A', '#36AFB2', '#9c6db2', '#d24a67', '#89a958', '#00739a', '#BDBDBD'];

            $.ajax({
                url: "{{ url('graph/alumnos/cantidadxespecialidad') }}" + "/" + periodo,
                type: "GET",
                success: function (result) {

                    $('#graph1').empty();

                    Morris.Bar({
                        element: 'graph1',
                        data: result,
                        xkey: 'y',
                        ykeys: ['a'],
                        labels: ['Cantidad alumnos'],
                        barColors: color_array
                    });

                }
            });

            $.ajax({
                url: "{{ url('graph/alumnos/cantidadxdepartamento') }}",
                type: "GET",
                success: function (result) {

                    $('#graphCantDepartamento').empty();

                    Morris.Bar({
                        element: 'graphCantDepartamento',
                        data: result,
                        xkey: 'y',
                        ykeys: ['a'],
                        labels: ['Cantidad alumnos'],
                        barColors: color_array
                    });

                }
            });

            $.ajax({
                url: "{{ url('graph/alumnos/cantidadxprocedencia') }}",
                type: "GET",
                success: function (result) {

                    $('#graphColegioProcedencia').empty();

                    Morris.Bar({
                        element: 'graphColegioProcedencia',
                        data: result,
                        xkey: 'y',
                        ykeys: ['a'],
                        labels: ['Cantidad alumnos'],
                        barColors: color_array
                    });

                }
            });

            $.ajax({
                url: "{{ url('graph/alumnos/cantidadxtipoingreso') }}",
                type: "GET",
                success: function (result) {

                    $('#graphTipoIngreso').empty();

                    Morris.Bar({
                        element: 'graphTipoIngreso',
                        data: result,
                        xkey: 'y',
                        ykeys: ['a'],
                        labels: ['Cantidad alumnos'],
                        barColors: color_array
                    });

                }
            });

            $.ajax({
                url: "{{ url('graph/alumnos/cantproyeccionxespecialidad') }}" + "/" + periodo,
                type: "GET",
                success: function (result) {

                    $('#graph3').empty();

                    Morris.Bar({
                        element: 'graph3',
                        data: result,
                        xkey: 'y',
                        ykeys: ['a'],
                        labels: ['Cantidad proyecciones sociales'],
                        barColors: color_array
                    });

                }
            });

            $.ajax({
                url: "{{ url('graph/alumnos/cantxgenero') }}",
                type: "GET",
                success: function (result) {
                    var browsersChart = Morris.Donut({
                        element: 'graph2',
                        data: result,
                        colors: color_array,
                        resize: true,

                    });
                    browsersChart.options.data.forEach(function (label, i) {
                        var legendItem = $('<span></span>').text(label['label']).prepend('<i>&nbsp;</i>');
                        legendItem.find('i').css('backgroundColor', browsersChart.options.colors[i]);
                        $('#legend').append(legendItem)
                    });
                }
            });

        });


        $("#selectPeriodo").change(function () {
            var periodo = $("#selectPeriodo").val();
            var color_array = ['#03658C', '#7CA69E', '#F2594A', '#F28C4B', '#7E6F6A', '#36AFB2', '#9c6db2', '#d24a67', '#89a958', '#00739a', '#BDBDBD'];

            $.ajax({
                url: "{{ url('graph/alumnos/cantidadxespecialidad') }}" + "/" + periodo,
                type: "GET",
                success: function (result) {

                    $('#graph1').empty();

                    Morris.Bar({
                        element: 'graph1',
                        data: result,
                        xkey: 'y',
                        ykeys: ['a'],
                        labels: ['Cantidad alumnos'],
                        barColors: color_array
                    });

                }
            });
            $.ajax({
                url: "{{ url('graph/alumnos/cantproyeccionxespecialidad') }}" + "/" + periodo,
                type: "GET",
                success: function (result) {

                    $('#graph3').empty();

                    Morris.Bar({
                        element: 'graph3',
                        data: result,
                        xkey: 'y',
                        ykeys: ['a'],
                        labels: ['Cantidad proyecciones sociales'],
                        barColors: color_array
                    });

                }
            });

        });

    </script>
@endsection