@extends('template.layout')

@section('content')
    <h1 class="page-title">
        Reportes matrícula
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-body">
            <span>Periodos:</span>
            <select id="selectPeriodo" class="form-control placeholder-no-fix select2">
                @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 postulantes por especialidad </span>
                            <div id="graphbar">
                            </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"> Postulantes vs Alumnos por especialidad</span>
                            <div id="graphbar2">
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>

@endsection

@section('scripts')
    <link href="{{asset('graphs/morris.css')}}" rel="stylesheet" type="text/css"/>
    <script src="{{asset('graphs/morris.js')}}" type="text/javascript"></script>
    <script src="{{asset('graphs/raphael-min.js')}}" type="text/javascript"></script>
    <script>

        $(document).ready(function () {

            var id =$('#selectPeriodo').val();
            var graphDiv;

            $.ajax({
                url: "{{url('reportes/cantPostulantesxPeriodo')}}" + "/" + id,
                type: "GET",
                success: function (result) {
                    $("#graphbar").empty();


                    if(result.length != 0){
                        if (typeof graphDiv !== 'undefined') {
                            delete this.graphDiv.handlers.click;
                            delete this.graphDiv.handlers.gridclick;
                        }

                        graphDiv = Morris.Bar({
                            element: 'graphbar',
                            data: result,
                            xkey: 'x',
                            ykeys: ['y'],
                            labels: ["Cantidad"],
                            barColors: ['#005300'],
                            smooth: false,
                            hideHover: 'auto'
                        }).on('click', function(i, row) {
                            console.log(i, row);
                        });

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

                    }

                }
            });

            $.ajax({
                url: "{{ url('reportes/cantPostulantesvscantAlumnosxPeriodo') }}" + "/" + id,
                type: "GET",
                success: function (result) {

                    $("#graphbar2").empty();

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

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

                    }


                }
            });

        });

        $("#selectPeriodo").change(function () {

            var id =$('#selectPeriodo').val();

            $.ajax({
                url: "{{url('reportes/cantPostulantesxPeriodo')}}" + "/" + id,
                type: "GET",
                success: function (result) {
                    $("#graphbar").empty();

                    if(result.length != 0){
                        if (typeof graphDiv !== 'undefined') {
                            delete this.graphDiv.handlers.click;
                            delete this.graphDiv.handlers.gridclick;
                        }

                        graphDiv = Morris.Bar({
                            element: 'graphbar',
                            data: result,
                            xkey: 'x',
                            ykeys: ['y'],
                            labels: ["Cantidad"],
                            barColors: ['#005300'],
                            smooth: false,
                            hideHover: 'auto'
                        }).on('click', function(i, row) {
                            console.log(i, row);
                        });

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

                    }

                }
            });

            $.ajax({
                url: "{{ url('reportes/cantPostulantesvscantAlumnosxPeriodo') }}" + "/" + id,
                type: "GET",
                success: function (result) {

                    $("#graphbar2").empty();

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

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

                    }

                }
            });

        });

    </script>
@endsection