@extends('template.layout')

@section('content')
    @include('sweet::alert')

    <h1 class="page-title">
        Reporte estadístico de inserción laboral
    </h1>

    <div class="portlet light portlet-fit portlet-datatable bordered">

        <div class="portlet-body">

            <div class="row" style="padding-top: 4%;">
                <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" style="padding-bottom: 3%;"> Empresas con más ofertas</span>
                            <div>
                                <div id="graph3">
                                </div>
                            </div>


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

            <div class=" row" style="padding-top: 4%;">
                <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" style="padding-bottom: 3%;"> Reporte de Alumnos trabajando vs no trabajando </span>
                            <div>
                                <div id="graph1">
                                </div>
                                <div id="legend" class="donut-legend">
                                </div>
                            </div>


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

            <div class="row" style="padding-top: 4%;">
                <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" style="padding-bottom: 3%;"> Empresas mas concurridas por alumnos </span>
                            <div>
                                <div id="graph2">
                                </div>
                            </div>


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

            <div class=" row" style="padding-top: 4%;">
                <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" style="padding-bottom: 3%;"> Reporte de Alumnos con experiencia laboral vs Alumnos sin experiencia laboral </span>
                            <div>
                                <div id="graph4">
                                </div>
                                <div id="legend4" class="donut-legend">
                                </div>
                            </div>


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

            <div class=" row" style="padding-top: 4%;">
                <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" style="padding-bottom: 3%;"> Reporte de egresados con experiencia laboral vs egresados sin experiencia laboral </span>
                            <div>
                                <div id="graph5">
                                </div>
                                <div id="legend5" class="donut-legend">
                                </div>
                            </div>


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

            <div class=" row" style="padding-top: 4%;">
                <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" style="padding-bottom: 3%;"> Reporte de egresados laborando vs no laborando </span>
                            <div>
                                <div id="graphegresadoslaborando">
                                </div>
                            </div>

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

            <div class=" row" style="padding-top: 4%;">
                <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" style="padding-bottom: 3%;"> Reporte de titulados laborando vs no laborando </span>
                            <div>
                                <div id="graphtituladoslaborando">
                                </div>
                            </div>

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

        </div>

    </div>


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

        $(document).ready(function () {

            var color_array = ['#03658C', '#7CA69E', '#F2594A', '#F28C4B', '#7E6F6A', '#36AFB2', '#9c6db2', '#d24a67', '#89a958', '#00739a', '#BDBDBD'];

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

            $.ajax({
                url: "{{ url('reportesestadisticos/bolsatrabajo/graph1') }}",
                type: "GET",
                success: function (result) {

                    if (result.length < 1) {
                        $("#graph1").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");
                    } else {
                        var browsersChart = Morris.Donut({
                            element: 'graph1',
                            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('reportesestadisticos/bolsatrabajo/graph2') }}",
                type: "GET",
                success: function (result) {

                    if (result.length < 1) {
                        $("#graph2").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");
                    } else {
                        new Morris.Bar({
                            element: 'graph2',
                            data: result,
                            xkey: 'label',
                            ykeys: ['value'],
                            labels: ['Cantidad de alumnos:']
                        });
                    }

                }
            });

            $.ajax({
                url: "{{ url('reportesestadisticos/bolsatrabajo/graph3') }}",
                type: "GET",
                success: function (result) {

                    if (result.length < 1) {
                        $("#graph3").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");
                    } else {
                        new Morris.Bar({
                            element: 'graph3',
                            data: result,
                            xkey: 'label',
                            ykeys: ['value'],
                            labels: ['Cantidad de ofertas:']
                        });
                    }
                }
            });

            $.ajax({
                url: "{{ url('reportesestadisticos/bolsatrabajo/graph4') }}",
                type: "GET",
                success: function (result) {

                    if (result.length < 1) {
                        $("#graph4").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");
                    } else {
                        var browsersChart = Morris.Donut({
                            element: 'graph4',
                            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]);
                            $('#legend4').append(legendItem)
                        });
                    }

                }
            });

            $.ajax({
                url: "{{ url('reportesestadisticos/bolsatrabajo/egresadosconexpvsegresadossinexp') }}",
                type: "GET",
                success: function (result) {

                    if (result.length < 1) {
                        $("#graph5").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");
                    } else {
                        var browsersChart = Morris.Donut({
                            element: 'graph5',
                            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]);
                            $('#legend5').append(legendItem)
                        });
                    }

                }
            });

            $.ajax({
                url: "{{ url('reportesestadisticos/bolsatrabajo/egresadoslaborando') }}",
                type: "GET",
                success: function (result) {

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

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

                    }

                }
            });

            $.ajax({
                url: "{{ url('reportesestadisticos/bolsatrabajo/tituladoslaborando') }}",
                type: "GET",
                success: function (result) {

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

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

                    }

                }
            });


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

        });

    </script>
@endsection