@extends('template.layout')

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

        <div class="portlet-body">

            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row">
                        <div class="col-lg-6" style="text-align: center;">
                            <span class="caption-subject font-green sbold uppercase"> Alumnas vs Egresadas </span>
                            <div id="graph00">
                            </div>
                            <div id="legend00" class="donut-legend">
                            </div>
                        </div>
                        <div class="col-lg-6" style="text-align: center;">
                            <span class="caption-subject font-green sbold uppercase"> Alumnos vs Egresados </span>
                            <div id="graph0">
                            </div>
                            <div id="legend0" class="donut-legend">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <span class="caption-subject uppercase">Periodo: </span>
            <select class="bs-select form-control" id="selectPeriodo">
                @foreach($periodos 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"> Alumnos aprobados contra desaprobados por carrera </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"> Alumnas aprobadas contra desaprobadas por carrera </span>
                            <div id="graph01">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" style="padding-top: 3%;">
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-lg-12" style="text-align: center;">
                            <span class="caption-subject font-green sbold uppercase"> Rendimiento académico aprobados vs desaprobados </span>
                            <div id="grapharendimientoacademico">
                            </div>
                            <div id="legend" class="donut-legend">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-lg-12" style="text-align: center;">
                            <span class="caption-subject font-green sbold uppercase"> Rendimiento académico de alumnas aprobadas vs desaprobadas </span>
                            <div id="grapharendimientoacademicoA">
                            </div>
                            <div id="legendA" class="donut-legend">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>


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

        $(document).ready(function () {

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


            //-------------Graph-----------------

            $.ajax({
                url: "{{ url('graph/situacionacademica/alumnosvsegresados') }}",
                type: "GET",
                success: function (result) {
                    var browsersChart = Morris.Donut({
                        element: 'graph0',
                        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]);
                        $('#legend0').append(legendItem)
                    });
                }
            });

            $.ajax({
                url: "{{ url('graph/situacionacademica/alumnasvsegresadas') }}",
                type: "GET",
                success: function (result) {
                    $("#graph00").empty();
                    $("#legend00").empty();

                    var browsersChart = Morris.Donut({
                        element: 'graph00',
                        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]);
                        $('#legend00').append(legendItem)
                    });
                }
            });

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

                    if (result.length > 0) {

                        var data = result,
                            config = {
                                data: data,
                                xkey: 'y',
                                ykeys: ['a', 'b'],
                                labels: ['Aprobados', 'Desaprobados'],
                                fillOpacity: 0.6,
                                hideHover: 'auto',
                                behaveLikeLine: true,
                                resize: true,
                                pointFillColors: ['#ffffff'],
                                pointStrokeColors: ['black'],
                                lineColors: ['gray', 'red']
                            };
                        config.element = 'graph1';
                        Morris.Bar(config);
                        config.element = 'stacked';
                        config.stacked = true;
                        Morris.Bar(config);

                    } else {
                        $("#graph1").html(' <div class="well" style="text-align: center;"> No se tiene información registrada</div>')
                    }


                }
            });

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

                    if (result.length > 0) {

                        var data = result,
                            config = {
                                data: data,
                                xkey: 'y',
                                ykeys: ['a', 'b'],
                                labels: ['Aprobadas', 'Desaprobadas'],
                                fillOpacity: 0.6,
                                hideHover: 'auto',
                                behaveLikeLine: true,
                                resize: true,
                                pointFillColors: ['#ffffff'],
                                pointStrokeColors: ['black'],
                                lineColors: ['gray', 'red']
                            };
                        config.element = 'graph01';
                        Morris.Bar(config);
                        config.element = 'stacked';
                        config.stacked = true;
                        Morris.Bar(config);

                    } else {
                        $("#graph01").html(' <div class="well" style="text-align: center;"> No se tiene información registrada</div>')
                    }


                }
            });

            $.ajax({
                url: "{{ url('graph/situacionacademica/rendimientoacademico') }}" + "/" + periodo,
                type: "GET",
                success: function (result) {
                    var browsersChart = Morris.Donut({
                        element: 'grapharendimientoacademico',
                        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)
                    });
                }
            });

            $.ajax({
                url: "{{ url('graph/situacionacademica/rendimientoacademicoA') }}" + "/" + periodo,
                type: "GET",
                success: function (result) {
                    var browsersChart = Morris.Donut({
                        element: 'grapharendimientoacademicoA',
                        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]);
                        $('#legendA').append(legendItem)
                    });
                }
            });

            //-------------Fin Graph-------------


        });


        $("#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/situacionacademica/aprobadosvsdesaprobados') }}" + "/" + periodo,
                type: "GET",
                success: function (result) {
                    if (result.length > 0) {

                        var data = result,
                            config = {
                                data: data,
                                xkey: 'y',
                                ykeys: ['a', 'b'],
                                labels: ['Aprobados', 'Desaprobados'],
                                fillOpacity: 0.6,
                                hideHover: 'auto',
                                behaveLikeLine: true,
                                resize: true,
                                pointFillColors: ['#ffffff'],
                                pointStrokeColors: ['black'],
                                lineColors: ['gray', 'red']
                            };
                        config.element = 'graph1';
                        Morris.Bar(config);
                        config.element = 'stacked';
                        config.stacked = true;
                        Morris.Bar(config);

                    } else {
                        $("#graph1").html(' <div class="well" style="text-align: center;"> No se tiene información registrada</div>')
                    }
                }
            });

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

                    if (result.length > 0) {

                        var data = result,
                            config = {
                                data: data,
                                xkey: 'y',
                                ykeys: ['a', 'b'],
                                labels: ['Aprobadas', 'Desaprobadas'],
                                fillOpacity: 0.6,
                                hideHover: 'auto',
                                behaveLikeLine: true,
                                resize: true,
                                pointFillColors: ['#ffffff'],
                                pointStrokeColors: ['black'],
                                lineColors: ['gray', 'red']
                            };
                        config.element = 'graph01';
                        Morris.Bar(config);
                        config.element = 'stacked';
                        config.stacked = true;
                        Morris.Bar(config);

                    } else {
                        $("#graph01").html(' <div class="well" style="text-align: center;"> No se tiene información registrada</div>')
                    }


                }
            });

            $.ajax({
                url: "{{ url('graph/situacionacademica/rendimientoacademico') }}" + "/" + periodo,
                type: "GET",
                success: function (result) {
                    $("#grapharendimientoacademico").empty();
                    $("#legend").empty();

                    var browsersChart = Morris.Donut({
                        element: 'grapharendimientoacademico',
                        data: result,
                        colors: color_array
                    });
                    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)
                    });
                }
            });

        });

    </script>
@endsection