@extends('template.layout')

@section('content')
    @include('sweet::alert')
    <h1 class="page-title">
        Reportes avanzados
    </h1>

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

        <div class="portlet-body">

            <div class="row">
                <div class="col-lg-12">

                    <div class="col-lg-2">
                        <span class="caption-subject uppercase">Periodo: </span>

                        <select class="bs-select form-control" id="selectCiclo">
                            @foreach($periodos as $item)
                                <option value="{{$item->id}}">{{$item->nombre}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-lg-2">
                        <span class="caption-subject uppercase">Especialidad: </span>

                        <select class="bs-select form-control" id="selectEspecialidad">
                            @foreach($especialidad as $item)
                                <option value="{{$item->id}}">{{$item->nombre}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-lg-2">
                        <span class="caption-subject uppercase">Curso: </span>

                        <select class="bs-select form-control" id="selectCurso">
                            @foreach($cursos as $item)
                                <option value="{{$item->id}}">{{$item->nombre}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-lg-2">
                        <span class="caption-subject uppercase">Sección: </span>

                        <select class="bs-select form-control" id="selectSeccion">
                            @foreach($seccion as $item)
                                <option value="{{$item->id}}">{{$item->nombre_seccion}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-lg-2">
                        <span class="caption-subject uppercase">Género: </span>

                        <select class="bs-select form-control" id="selectGenero">
                            <option value="Masculino">Masculino</option>
                            <option value="Femenino">Femenino</option>
                        </select>
                    </div>

                    <div class="col-lg-2">
                        <div style="padding: 6% 0% 0% 0%">
                            <button class="btn btn-primary" onclick="GenerarGraph()">Aplicar Busqueda</button>
                        </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"> Rendimiento académico aprobados vs desaprobados por sección</span>
                            <div id="divgraph">
                            </div>
                            <div id="legend" class="donut-legend">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>


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

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

            var periodoID = $("#selectCiclo").val();

            $.ajax({
                url: "{{ url('especialidad/periodo') }}" + "/" + periodoID,
                type: "GET",
                success: function (result) {
                    $('#selectEspecialidad').empty();

                    $.each(result, function (key, value) {
                        $('#selectEspecialidad')
                            .append($("<option></option>")
                                .attr("value", key)
                                .text(value));
                    });

                }
            });

            //---------------------------------
            var especialidadID = $('#selectEspecialidad').val();

            $.ajax({

                url: "{{ url('especialidad/curso') }}" + "/" + especialidadID,
                type: "GET",
                success: function (result) {
                    $('#selectCurso').empty();
                    $.each(result, function (key, value) {
                        $('#selectCurso')
                            .append($("<option></option>")
                                .attr("value", key)
                                .text(value));
                    });

                }
            });

            //---------------------------------
            var cursoID = $('#selectCurso').val();

            $.ajax({

                url: "{{ url('especialidad/seccion') }}" + "/" + cursoID,
                type: "GET",
                success: function (result) {
                    $('#selectSeccion').empty();
                    $.each(result, function (key, value) {
                        $('#selectSeccion')
                            .append($("<option></option>")
                                .attr("value", key)
                                .text(value));
                    });

                }
            });

        });

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

            var especialidadID = $('#selectEspecialidad').val();

            $.ajax({

                url: "{{ url('especialidad/curso') }}" + "/" + especialidadID,
                type: "GET",
                success: function (result) {
                    $('#selectCurso').empty();
                    $.each(result, function (key, value) {
                        $('#selectCurso')
                            .append($("<option></option>")
                                .attr("value", key)
                                .text(value));
                    });

                }
            });

        });

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

            var cursoID = $('#selectCurso').val();

            $.ajax({

                url: "{{ url('especialidad/seccion') }}" + "/" + cursoID,
                type: "GET",
                success: function (result) {
                    $('#selectSeccion').empty();
                    $.each(result, function (key, value) {
                        $('#selectSeccion')
                            .append($("<option></option>")
                                .attr("value", key)
                                .text(value));
                    });

                }
            });

        });

        function GenerarGraph() {
            var idseccion = $("#selectSeccion").val();
            var genero = $("#selectGenero").val();

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

            $.ajax({
                url: "{{ url('reportesnotas/reporteavanzado/graph') }}" + "/" + idseccion + "/" + genero,
                type: "GET",
                success: function (result) {
                    $("#divgraph").empty();
                    $('#legend').empty();

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

        }

    </script>
@endsection