@extends('template.layout')

@section('content')
    <h1 class="page-title">
        Record Acad&eacute;mico
    </h1>
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold"> Record Acad&eacute;mico de Alumnos por Periodo </span>
            </div>
            <div class="actions"></div>
        </div>
        <div class="portlet-body">

            <div class="row">
                <div class=" col-md-3 col-xs-5">
                    <div class="form-group">
                        <select class="form-control select2" id="selectFiltro">
                            <option value="1"> Por Carrera</option>
                            <option value="2"> Por Curso y Seccion</option>
                        </select>
                    </div>
                </div>
            </div>

            <div id="divPorEspecialidad">

                <div class="row" id="form-especialidad">
                    <div class="col-md-3 col-xs-5">
                        <div class="form-group">
                            {!! Form::select('esp-periodo', $periodos, $actual, ['id'=>'esp-periodo', 'class' => 'form-control select2']) !!}
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-5">
                        <div class="form-group">
                            {!! Form::select('esp-especialidad', [], null, ['id'=>'esp-especialidad', 'class' => 'form-control select2']) !!}
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-2">
                        <div class="form-group">
                            <button id="esp-submit" type="button" class="btn btn-primary Crear">
                                <i class="fa fa-search"></i><span class="hidden-xs"> Mostrar </span>
                            </button>
                        </div>
                    </div>
                </div>
                <table id="tb-especialidad" class="table table-hover nowrap dataTable dtr-inline collapsed"
                       width="100%">
                    <thead class="thead-default">
                    <tr>
                        <th>Orden</th>
                        <th>DNI</th>
                        <th>Nombre Completo</th>
                        <th>Prom. Actual</th>
                        <th>Prom. Acumulado</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>

            <div id="divPorCursoySeccion" style="display: none">

                <div class="row" id="form-cursoseccion">

                    <div class="col-md-3 col-xs-3">
                        <div class="form-group">
                            {!! Form::select('esp-periodo1', $periodos, $actual, ['id'=>'esp-periodo1', 'class' => 'form-control select2']) !!}
                        </div>
                    </div>

                    <div class="col-md-3 col-xs-3">
                        <div class="form-group">
                            {!! Form::select('esp-cursos', [], null, ['id'=>'esp-cursos', 'class' => 'form-control select2']) !!}
                        </div>
                    </div>

                    <div class="col-md-3 col-xs-3">
                        <div class="form-group">
                            <select id="esp-seccion" name=esp-seccion" class="form-control select2">
                                <option value="0"> Todos</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3 col-xs-3">
                        <div class="form-group">
                            <button id="esp-submitcurso" type="button" class="btn btn-primary Crear">
                                <i class="fa fa-search"></i><span class="hidden-xs"> Mostrar </span>
                            </button>
                        </div>
                    </div>

                </div>

                <table id="tb-cursoseccion" class="table table-hover nowrap dataTable dtr-inline collapsed"
                       width="100%">
                    <thead class="thead-default">
                    <tr>
                        <th>Orden</th>
                        <th>DNI</th>
                        <th>Nombre Completo</th>
                        <th>Nota Final</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>

        </div>
    </div>
@endsection
@section('scripts')
    <script>
        var urlBase = "{{ url('record') }}";
    </script>

    <script>

        $(document).ready(function () {
            cargaEspEspecialidades();
            cargaCursos();
        });

        function cargaEspEspecialidades() {
            var periodo = $('#esp-periodo').val();
            $('#form-especialidad').block({message: null});
            $.ajax({
                type: "GET",
                url: urlBase + '/especialidad/list',
                data: {
                    id: periodo
                },
                dataType: "json",
                success: function (data) {
                    $("#esp-especialidad").get(0).options.length = 0;
                    $.each(data, function (index, item) {
                        $("#esp-especialidad").get(0).options[$("#esp-especialidad").get(0).options.length] = new Option(item.nombre, item.id);
                    });
                },
                error: function () {
                    $("#esp-especialidad").get(0).options.length = 0;
                    console.log(error);
                },
                complete: function () {
                    $('#form-especialidad').unblock();
                }
            });
        }

        $('#esp-periodo').change(function () {
            cargaEspEspecialidades();
        });

        var tableEspecialidad = $('#tb-especialidad').DataTable({
            "language": {
                "sProcessing": "Procesando...",
                "sLengthMenu": "Mostrar _MENU_ registros",
                "sZeroRecords": "No se encontraron resultados",
                "sEmptyTable": "No existen registros creados",
                "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix": "",
                "sSearch": "Buscar por nombre de trámite:",
                "sUrl": "",
                "sInfoThousands": ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst": "Primero",
                    "sLast": "Último",
                    "sNext": "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
            processing: true,
            responsive: true,
            data: [],
            columns: [
                {
                    data: 'orden_merito',
                    name: 'record_academico.orden_merito',
                    "searchable": false
                },
                {
                    data: 'dni',
                    name: 'usuario.dni',
                    "searchable": true
                },
                {
                    data: 'nombre_completo',
                    name: 'nombre_completo',
                    "searchable": false
                },
                {
                    data: 'ponderado_actual',
                    name: 'record_academico.ponderado_actual',
                    "searchable": false
                },
                {
                    data: 'ponderado_acumulado',
                    name: 'record_academico.ponderado_acumulado',
                    "searchable": false
                }
            ],
            "pageLength": 15,
            "bInfo": false,
            "bLengthChange": false,
            "ordering": false,
            "bFilter": false
        });

        var tableCursoseccion = $('#tb-cursoseccion').DataTable({
            "language": {
                "sProcessing": "Procesando...",
                "sLengthMenu": "Mostrar _MENU_ registros",
                "sZeroRecords": "No se encontraron resultados",
                "sEmptyTable": "No existen registros creados",
                "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix": "",
                "sSearch": "Buscar por nombre de trámite:",
                "sUrl": "",
                "sInfoThousands": ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst": "Primero",
                    "sLast": "Último",
                    "sNext": "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
            processing: true,
            responsive: true,
            data: [],
            columns: [
                {
                    data: 'orden_merito',
                    name: 'orden_merito',
                    "searchable": false
                },
                {
                    data: 'dni',
                    name: 'u.dni',
                    "searchable": true
                },
                {
                    data: 'nombre_completo',
                    name: 'nombre_completo',
                    "searchable": true
                },
                {
                    data: 'notafinal',
                    name: 'notafinal',
                    "searchable": false
                }
            ],
            "pageLength": 15,
            "bInfo": false,
            "bLengthChange": false,
            "ordering": false,
            "bFilter": false
        });

        $("#esp-submit").on("click", function (event) {
            $('.dataTables_processing', $('#tb-especialidad').closest('.dataTables_wrapper')).show();

            var periodo = $('#esp-periodo').val();
            var especialidad = $('#esp-especialidad').val();
            $.ajax({
                url: urlBase + '/especialidad/post',
                type: "POST",
                data: {
                    id_periodo: periodo,
                    id_especialidad: especialidad
                }
            }).done(function (result) {
                console.log(result.data);
                tableEspecialidad.clear().draw();
                tableEspecialidad.rows.add(result.data).draw();

                $('.dataTables_processing', $('#tb-especialidad').closest('.dataTables_wrapper')).hide();
            }).fail(function (jqXHR, textStatus, errorThrown) {
            });
        });

        function cargaCursos() {

            var periodo = $('#esp-periodo1').val();
            $('#form-cursoseccion').block({message: null});

            $.ajax({
                type: "GET",
                url: urlBase + '/cursos/list',
                data: {
                    id: periodo
                },
                dataType: "json",
                success: function (data) {

                    $("#esp-cursos").get(0).options.length = 0;

                    $.each(data, function (index, item) {
                        $("#esp-cursos").get(0).options[$("#esp-cursos").get(0).options.length] = new Option(item.nombre, item.id);
                    });

                },
                error: function () {
                    $("#esp-cursos").get(0).options.length = 0;
                    console.log(error);
                },
                complete: function () {
                    $('#form-cursoseccion').unblock();
                }
            });

        }

        function cargaSeccion() {
            var periodo = $('#esp-periodo1').val();
            var idCurso = $('#esp-cursos').val();
            $('#form-cursoseccion').block({message: null});

            $.ajax({
                type: "GET",
                url: urlBase + '/secciones/list',
                data: {
                    idCurso: idCurso,
                    idPeriodo: periodo
                },
                dataType: "json",
                success: function (data) {

                    $("#esp-seccion").get(0).options.length = 0;

                    $("#esp-seccion").get(0).options[$("#esp-seccion").get(0).options.length] = new Option("Todos", 0);

                    $.each(data, function (index, item) {
                        $("#esp-seccion").get(0).options[$("#esp-seccion").get(0).options.length] = new Option(item.nombre, item.id);
                    });

                },
                error: function () {
                    $("#esp-seccion").get(0).options.length = 0;
                },
                complete: function () {
                    $('#form-cursoseccion').unblock();
                }
            });

        }

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

            var opcionselect = $('#selectFiltro').val();

            if (opcionselect == 2) {

                $("#divPorEspecialidad").hide();

                $("#divPorCursoySeccion").show();
                cargaSeccion();
            } else {
                $("#divPorEspecialidad").show();

                $("#divPorCursoySeccion").hide();
            }

        });

        $("#esp-cursos").change(function () {
            cargaSeccion();
        });

        $("#esp-periodo1").change(function () {
            cargaCursos();

            setTimeout(function () {
                cargaSeccion();
            }, 500);
        });

        $("#esp-submitcurso").on("click", function (event) {
            $('.dataTables_processing', $('#tb-cursoseccion').closest('.dataTables_wrapper')).show();

            var periodo = $('#esp-periodo1').val();
            var curso = $('#esp-cursos').val();
            var seccion = $('#esp-seccion').val();

            $.ajax({
                url: urlBase + '/cursoseccion/post',
                type: "POST",
                data: {
                    idPeriodo: periodo,
                    idCurso: curso,
                    idSeccion: seccion
                }
            }).done(function (result) {
                console.log(result.data);
                tableCursoseccion.clear().draw();
                tableCursoseccion.rows.add(result.data).draw();

                $('.dataTables_processing', $('#tb-cursoseccion').closest('.dataTables_wrapper')).hide();
            }).fail(function (jqXHR, textStatus, errorThrown) {
            });
        });

    </script>
@endsection