@extends('template.layout')

@section('styles')
    <link href="{{asset('css/icheck/skins/all.css')}}" rel="stylesheet" type="text/css"/>
@endsection

@section('content')
    <h1 class="page-title">
        Matrícula de Alumnos de Traslado
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold uppercase"> Lista de Alumnos </span>
                <span class="caption-helper"></span>
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="col-xs-12">
                    <label class="control-label" for="ciclo">Especialidad: </label>
                    <select id="selectEspecialidad" class="form-control input-sm input-inline" onchange="CargarEspecialidad(event, this)"></select>
                </div>
                <br>
                <br>
                <div class="col-xs-12">
                    <table id="dataTable" class="table table-hover nowrap dataTable dtr-inline">
                        <thead>
                            <tr>
                                <th>Código</th>
                                <th>Apellido Paterno</th>
                                <th>Apellido Materno</th>
                                <th>Nombres</th>
                                <th>Especialidad</th>
                                <th>Turno</th>
                                <th>Estado de Convalidación</th>
                                <th>Estado de Matrícula</th>
                                <th>Opciones</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var dataTableLanguage = {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "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:",
            "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"
            }
        };

        var dataTable = [
            function (args) {
                $('#dataTable').DataTable({
                    language: dataTableLanguage,
                    processing: true,
                    serverSide: true,
                    destroy: true,
                    responsive: true,
                    ajax: {
                        url: '{{ route('matricula.traslado.fichapostulacion.post') }}',
                        method: 'POST',
                        data: {
                            id_especialidad: args.id_especialidad
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            /*console.log(jqXHR);
                             console.log(textStatus);
                             console.log(errorThrown);*/
                        }
                    },
                    columns: [
                        {
                            data:'alumno_codigo',
                            name:'alumno_codigo',
                            render: function(data, type, row) {
                                var render = '';
                                if (data != '') {
                                    render = '<td>' + data + '</td>';
                                } else {
                                    render = '<td>---</td>';
                                }

                                return render;
                            }
                        },
                        {
                            data:'apellido_paterno',
                            name:'apellido_paterno'
                        },
                        {
                            data:'apellido_materno',
                            name:'apellido_materno'
                        },
                        {
                            data:'nombres',
                            name:'nombres'
                        },
                        {
                            data:'especialidad_nombre',
                            name:'especialidad_nombre',
                            render: function(data, type, row) {
                                var render = '';
                                if (data != '') {
                                    render = '<td>' + data + '</td>';
                                } else {
                                    render = '<td>---</td>';
                                }

                                return render;
                            }
                        },
                        {
                            data:'turno_nombre',
                            name:'turno_nombre',
                            render: function(data, type, row) {
                                var render = '';
                                if (data != '') {
                                    render = '<td>' + data + '</td>';
                                } else {
                                    render = '<td>---</td>';
                                }

                                return render;
                            }
                        },
                        {
                            data:'estado_convalidacion_nombre',
                            name:'estado_convalidacion_nombre',
                            render: function(data, type, row) {
                                var render = '';
                                if (data != '') {
                                    render = '<td>' + data + '</td>';
                                } else {
                                    render = '<td>No convalidado</td>';
                                }

                                return render;
                            }
                        },
                        {
                            data:'matricula_matriculado',
                            name:'matricula_matriculado',
                            render: function(data, type, row) {
                                var render = '';
                                if (data) {
                                    render = '<td>Matriculado</td>';
                                } else {
                                    render = '<td>Pendiente</td>';
                                }

                                return render;
                            }
                        },
                        {
                            data:'id',
                            name:'id',
                            render: function(data, type, row) {
                                var render = '';
                                render += '<td class="td_center">';
                                render += ' <a onclick="Convalidar(' + data + ')" title="Convalidar" class="btn btn-outline btn-circle btn-sm blue">';
                                render += '     <i class="fa fa-file"></i> Convalidar';
                                render += ' </a>';

                                if (row.estado_convalidacion_nombre == 'Convalidado') {
                                    render += ' <a onclick="Matricular(' + data + ')" title="Matricular" class="btn btn-outline btn-circle dark btn-sm purple">'
                                    render += '     <i class="fa fa-file-text"></i> Matricular';
                                    render += ' </a>';
                                    render += '</td>';
                                }

                                return render;
                            }
                        }
                    ],
                    order: [
                        [0, 'asc']
                    ]
                });
            }
        ];

        var select = [
            function (args) {
                $.ajax({
                    url: "{{ route('especialidad.post') }}",
                    method: "POST",
                    data: null,
                    dataType: "json",
                    success: function(data, textStatus, jqXHR) {
                        CargarSelect("selectEspecialidad", data, null, "nombre", "id", true);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(errorThrown);
                    }
                });
            }
        ]

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        window.onload = function() {
            var args = {
                id_especialidad: null
            }

            CargarDataTables(-1, args);
            CargarSelects();
        };

        function CargarDataTables(index = -1, args = null) {
            if (index < 0) {
                var dataTableLength = dataTable.length;
                for (var i = 0; i < dataTableLength; i++) {
                    dataTable[i](args);
                }
            } else {
                dataTable[index](args);
            }
        }

        function CargarSelects(index = -1, args = null) {
            if (index < 0) {
                var selectLength = select.length;
                for (var i = 0; i < selectLength; i++) {
                    select[i](args);
                }
            } else {
                select[index](args);
            }
        }

        function CargarSelect(elementId, data, selected, name = "name", value = "id", nullable = false) {
            var options = "";
            var dataLength = 0;
            if (data != null) {
                dataLength = data.length;
            }

            if (nullable) {
                options += "<option value";

                if (selected == null) {
                    options += " selected=\"selected\"";
                }

                options += ">---</option>";
            }

            for (var i = 0; i < dataLength; i++) {
                var dataRow = data[i];
                options += "<option value=\"";
                options += dataRow[value];
                options += "\"";

                if (dataRow[value] == selected) {
                    options += " selected=\"selected\"";
                }

                options += ">";
                options += dataRow[name];
                options += "</option>";
            }

            document.getElementById(elementId).innerHTML = options;
        }

        function Convalidar(id) {
            window.location.href = "{{ url('matricula/traslado/convalidacion/') }}" + "/" + id;
        }

        function Matricular(id) {
            window.location.href = "{{ url('matricula/traslado/matricula/') }}" + "/" + id;
        }

        function CargarEspecialidad(event, element) {
            var id_especialidad = element.value;
            var args = {
                id_especialidad: id_especialidad
            }

            CargarDataTables(-1, args);
        }
    </script>
@endsection