@extends('template.layout')
@section('styles')
@endsection

@section('content')
    <h1 class="page-title"> Convalidaci&oacute;n de Pr&aacute;cticas </h1>

    <div class="row">
        <div class="col-md-12">
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject bold"> Lista de Pr&aacute;cticantes </span>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row">
                        <div class="col-md-6 col-lg-4" style="margin-bottom: 5px;">
                            <label class="control-label" for="especialidad">Periodo Acad&eacute;mico: </label>
                            {!! Form::select('periodo', $periodos, $actual, ['id'=>'periodo', 'class' => 'form-control select2']) !!}
                        </div>
                    </div>
                    <table class="table table-striped table-hover" id="table_gestion">
                        <thead>
                        <tr>
                            <th>Periodo</th>
                            <th>DNI</th>
                            <th>Apellido Paterno</th>
                            <th>Apellido Materno</th>
                            <th>Nombre</th>
                            <th>Estado</th>
                            <th>Validar</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="modal"></div>
@endsection

@section('scripts')
    <script>
        var urlData = "{{ route('gestion.practicas.get') }}";
        var urlBase = "{{ url('admin/practicas') }}";
    </script>
    <script>
        $('.select2').select2({
            placeholder: "Seleccionar",
            minimumResultsForSearch: -1,
            width: '100%'
        });

        var oTable = $('#table_gestion').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 DNI:",
                "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,
            serverSide: true,
            destroy: true,
            responsive:true,
            ajax:{
                url: urlData,
                method: 'POST',
                data: function(d){
                    d.periodo = $('#periodo').select2("val");
                },
                error: function(error){
                    console.log(error);
                }
            },
            columns:[
                {
                    data:'periodo',
                    name:'periodo.nombre',
                    "searchable": false
                },
                {
                    data:'dni',
                    name:'usuario.dni',
                    "searchable": true
                },
                {
                    data:'apellido_paterno',
                    name:'usuario.apellido_paterno',
                    "searchable": false
                },
                {
                    data:'apellido_materno',
                    name:'usuario.apellido_materno',
                    "searchable": false
                },
                {
                    data:'nombres',
                    name:'usuario.nombres',
                    "searchable": false
                },
                {
                    data:'convalidado',
                    name:'convalidado',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'+
                            (data == 1 ? '<span class="label label-success"> Aprobado </span>'
                                : '<span class="label label-warning"> Pendiente </span>') +
                            '</td>'
                    }
                },
                {
                    data: 'practica_id',
                    name: 'practica_id',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'+
                            (row.convalidado == 1 ? '---'
                                : '<button class="btn btn-circle btn-sm green-dark validar" data-id="' + data + '"> Validar </button>') +
                            '</td>'

                    }
                }
            ],
            "pageLength": 15,
            "columnDefs": [{ // set default column settings
                'orderable': false,
                'targets': [0]
            }, {
                "searchable": true,
                "targets": [0]
            }],
            "bInfo": false,
            "bLengthChange": false,
            "ordering": false
        });
        function tableRefresh() {
            oTable.draw();
        }
        $('#periodo').change(function () {
            tableRefresh();
        });
        $('#table_gestion').on('click','.validar', function () {
            var aux = $(this);
            var id = aux.data('id');
            aux.prop('disabled', true);
            aux.blur();
            $.ajax({
                url: urlBase + "/validar",
                data: {
                    id: id
                },
                type: 'POST',
                cache: false,
                success: function () {
                    tableRefresh();
                },
                error: function () {
                    swal('Ocurrió un problema','No se pudo proceder con la validación de la práctica','error')
                },
                complete: function () {
                    aux.removeAttr("disabled");
                    aux.prop('disabled', false);
                }
            });
            return false;
        });
    </script>
@endsection