@extends('template.layout')

@section('styles')
    <link href="{{asset('css/icheck/skins/all.css')}}" rel="stylesheet" type="text/css"/>
    <style>
        .td_center {
            text-align: center !important;
        }
    </style>
@endsection

@section('content')
    <h1 class="page-title">
        <a href="{{ url('matricula/traslado') }}"><i class="icon-action-undo"></i></a>
        Convalidación de Alumnos de Traslado
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">Datos del Alumno</div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="col-lg-12">
                    {{ Form::model(null) }}
                    <div class="form-horizontal">
                        <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                            {!! Form::label('apellido_paterno', 'Apellido Paterno:', ['class' => 'control-label']) !!}
                            {!! Form::text('apellido_paterno', $fichaPostulacion->apellido_paterno, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                        </div>
                        <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                            {!! Form::label('apellido_materno', 'Apellido Materno:', ['class' => 'control-label']) !!}
                            {!! Form::text('apellido_materno', $fichaPostulacion->apellido_materno, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                        </div>
                        <div class="form-group col-xs-12 col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                            {!! Form::label('nombres', 'Nombres:', ['class' => 'control-label']) !!}
                            {!! Form::text('nombres', $fichaPostulacion->nombres, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                        </div>
                        <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                            {!! Form::label('alumno_codigo', 'Código de alumno:', ['class' => 'control-label']) !!}
                            {!! Form::text('alumno_codigo', ($fichaPostulacion->alumno_codigo != "" ? $fichaPostulacion->alumno_codigo : "---"), ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
        <br>
        <div class="portlet-title">
            <div class="caption">Convalidación de Cursos</div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="col-lg-12">
                    <div id="divCiclo">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-0 col-xs-12 text-center">
                <a class="btn btn-primary" href="#" id="convalidar" style="display: none" onclick="Convalidar('{{ $fichaPostulacion->alumno_id }}')">Convalidar</a>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var cursosConvalidados = {};
        var cursosDesconvalidados = {};

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

        window.onload = function() {
            var args = {
                id_especialidad: {{ $fichaPostulacion->id_especialidad }},
                id_usuario: {{ $fichaPostulacion->id_usuario }},
                id_alumno: {{ $fichaPostulacion->alumno_id }}
            }

            CargarTables(args);
        };

        function CargarTables(args) {
            $.ajax({
                url: '{{ route('matricula.traslado.especialidadperiodo.post') }}',
                method: 'POST',
                data: {
                    'id_especialidad': args.id_especialidad,
                    'id_alumno': args.id_alumno,
                },
                success: function(data) {
                    CargarTablesData(data);
                },
                error: function(error) {
                    //console.log(error);
                }
            });
        }

        function CargarTablesData(data) {
            //console.log(data);

            var dataLength = 0;
            if (data != null) {
                dataLength = data.length;
            }

            var divCiclo = "";
            var ciclo = -1;

            document.getElementById("convalidar").style = "display: none;";

            for (var i = 0; i < dataLength; i++) {
                var dataObject = data[i];

                if (divCiclo != "" && ciclo != dataObject.ciclo_id) {
                    divCiclo += "               </tbody>";
                    divCiclo += "           </table>";
                    divCiclo += "       </div>";
                    /*divCiclo += "   </div>";
                     divCiclo += "</div>";*/
                }

                if (divCiclo == "" || ciclo != dataObject.ciclo_id) {
                    ciclo = dataObject.ciclo_id;

                    /*divCiclo += "<div class=\"col-xs-12 col-md-6\">";
                     divCiclo += "   <div class=\"row\">";*/
                    divCiclo += "       <div class=\"col-xs-12\">";
                    divCiclo += "           <h3 class=\"caption-subject font-green sbold uppercase\">";
                    divCiclo += dataObject.ciclo_nombre;
                    divCiclo += "           </h3>";
                    divCiclo += "           <table class=\"table table-striped table-bordered table-hover table-bg dataTable no-footer dtr-inline\">";
                    divCiclo += "               <thead>";
                    divCiclo += "                   <tr>";
                    divCiclo += "                       <th>Código</th>";
                    divCiclo += "                       <th>Nombre del curso</th>";
                    divCiclo += "                       <th>Nota</th>";
                    divCiclo += "                       <th>Seleccionar</th>";
                    divCiclo += "                   </tr>";
                    divCiclo += "               </thead>";
                    divCiclo += "               <tbody>";
                }

                divCiclo += "                   <tr onclick=\"SeleccionarCurso(" + dataObject.curso_id + ")\">";
                divCiclo += "                       <td>";
                divCiclo += dataObject.curso_codigo;
                divCiclo += "                       </td>";
                divCiclo += "                       <td>";
                divCiclo += dataObject.curso_nombre;
                divCiclo += "                       </td>";
                divCiclo += "                       <td>";
                divCiclo += "                           <input type=\"number\" id=\"curso-nota-";
                divCiclo += dataObject.curso_id;
                divCiclo += "\" min=\"0\" max=\"20\" value=\"";

                if (dataObject.convalidacion_id != null) {
                    divCiclo += dataObject.convalidacion_nota;
                } else {
                    divCiclo += 0;
                }

                divCiclo += "\" onkeyup=\"ActualizarCursoNota(event, ";
                divCiclo += dataObject.curso_id;
                divCiclo += ")\">";
                divCiclo += "                       </td>";
                divCiclo += "                       <td>";
                divCiclo += "                           <input type=\"checkbox\" id=\"curso-seleccion-";
                divCiclo += dataObject.curso_id;
                divCiclo += "\" onclick=\"ActualizarCursoSeleccion(event, ";
                divCiclo += dataObject.curso_id;
                divCiclo += ")\"";

                if (dataObject.convalidacion_id != null) {
                    divCiclo += " checked=\"checked\"";

                    //document.getElementById("convalidar").style = "display: inline-block;";
                    cursosConvalidados[dataObject.curso_id] = {
                        id: dataObject.curso_id,
                        nota: dataObject.convalidacion_nota
                    }
                }

                divCiclo += ">";
                divCiclo += "                       </td>";
                divCiclo += "                   </tr>";
            }

            if (divCiclo == "") {
                divCiclo = "No hay datos disponibles";
            } else {
                document.getElementById("convalidar").style = "display: inline-block;";
            }

            document.getElementById("divCiclo").innerHTML = divCiclo;

            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"
                }
            };

            $('table.dataTable').DataTable({
                language: dataTableLanguage,
                processing: true,
                serverSide: false,
                destroy: true,
                responsive: true,
                pageLength: 5,
                columnDefs: [{
                    orderable: false,
                    targets: [0]
                }, {
                    searchable: true,
                    targets: [0]
                }, {
                    width: 100,
                    targets: [0, 2, 3]
                }],
                bInfo: false,
                bLengthChange: false,
                ordering: false,
                searching: false
            });
        }

        function SeleccionarCurso(id) {
            //document.getElementById("curso-seleccion-" + id).click();
        }

        function ActualizarCursoNota(event, id) {
            event.stopPropagation();

            var nota = document.getElementById("curso-nota-" + id);
            if (nota.value * 1 < nota.min * 1) {
                nota.value = nota.min;
            }

            if (nota.value * 1 > nota.max * 1) {
                nota.value = nota.max;
            }

            var curso = document.getElementById("curso-seleccion-" + id);
            cursosConvalidados[id] = {
                id: id,
                nota: nota.value * 1
            }

            if (id in cursosDesconvalidados) {
                delete cursosDesconvalidados[id]
            }

            if (!curso.checked) {
                curso.checked = true;
            }

            //document.getElementById("convalidar").style = "display: inline-block;";
        }

        function ActualizarCursoSeleccion(event, id) {
            event.stopPropagation();

            var nota = document.getElementById("curso-nota-" + id);
            var curso = document.getElementById("curso-seleccion-" + id);
            if (curso.checked) {
                cursosConvalidados[id] = {
                    id: id,
                    nota: nota.value * 1
                }

                if (id in cursosDesconvalidados) {
                    delete cursosDesconvalidados[id]
                }
            } else {
                delete cursosConvalidados[id];

                if (!(id in cursosDesconvalidados)) {
                    cursosDesconvalidados[id] = {
                        id: id
                    }
                }
            }

            /*f (Object.keys(cursosConvalidados).length > 0) {
                document.getElementById("convalidar").style = "display: inline-block;";
            } else {
                document.getElementById("convalidar").style = "display: none;";
            }*/
        }

        function Convalidar(id_alumno) {
            if (Object.keys(cursosConvalidados).length > 0) {
                $.ajax({
                    url: '{{ route('matricula.traslado.convalidacion.agregar.post') }}',
                    method: 'POST',
                    data: {
                        'id_alumno': id_alumno,
                        'cursos_convalidados': JSON.stringify(cursosConvalidados),
                        'cursos_desconvalidados': JSON.stringify(cursosDesconvalidados),
                    },
                    success: function(data) {
                        //console.log(data);

                        swal({
                            title: 'Éxito',
                            text: 'Se convalidaron los cursos exitósamente',
                            type: 'success',
                            showCancelButton: false,
                            showConfirmButton: true
                        });

                        //window.location.href = "{{ url('matricula/traslado/') }}";
                    },
                    error: function(error) {
                        //console.log(error);

                        swal({
                            title: 'Error',
                            text: 'No se pudieron convalidar los cursos',
                            type: 'error',
                            showCancelButton: false,
                            showConfirmButton: true
                        });
                    }
                });
            } else {
                swal({
                    title: 'Error',
                    text: 'No se han seleccionado cursos',
                    type: 'error',
                    showCancelButton: false,
                    showConfirmButton: true
                });
            }
        }
    </script>
@endsection