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

@section('content')
    <h1 class="page-title"> Gesti&oacute;n de Apoderados </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 Alumnos </span>
                    </div>
                </div>
                <div class="portlet-body">
                    <table class="table table-striped table-hover" id="table_gestion">
                        <thead>
                        <tr>
                            <th>C&oacute;digo</th>
                            <th>Apellido Paterno</th>
                            <th>Apellido Materno</th>
                            <th>Nombre</th>
                            <th>DNI</th>
                            <th>Ficha Adjunta</th>
                            <th>Apoderado</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="modal"></div>
@endsection

@section('scripts')
    <script>
        var urlData = "{{ route('gestion.apoderados.get') }}";
        var urlBase = "{{ url('admin/apoderados') }}";
    </script>
    <script>
        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 nombre:",
                "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',
                error: function(error){
                    console.log(error);
                }
            },
            columns:[
                {
                    data:'codigo',
                    name:'alumno.codigo',
                    "searchable": true
                },
                {
                    data:'apellido_paterno',
                    name:'usuario.apellido_paterno',
                    "searchable": true
                },
                {
                    data:'apellido_materno',
                    name:'usuario.apellido_materno',
                    "searchable": true
                },
                {
                    data:'nombres',
                    name:'usuario.nombres',
                    "searchable": true
                },
                {
                    data:'dni',
                    name:'usuario.dni',
                    "searchable": true
                },
                {
                    data:'ficha',
                    name:'ficha',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'+
                            '<button class="btn btn-outline btn-circle btn-sm green ficha" data-id="'+ data +'">'+
                            '<i class="fa fa-user"></i> Ver Ficha </button>'+
                            '</td>'
                    }
                },
                {
                    data: 'id',
                    name: 'id',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'+
                            '<button class="btn btn-outline btn-circle dark btn-sm black editar" data-id="' + data + '"><i class="fa fa-hand-pointer-o"></i>' + (row.id_apoderado > 0 ? ' Ver Apoderado' : ' Registrar') + '</button>'+
                            '</td>'

                    }
                }
            ],
            "pageLength": 15,
            "columnDefs": [{ // set default column settings
                'orderable': false,
                'targets': [0]
            }, {
                "searchable": true,
                "targets": [0]
            }],
            "bInfo": false,
            "bLengthChange": false,
            "ordering": false
        });

        $('#table_gestion').on('click','.editar', function () {
            var aux = $(this);
            var id = aux.data('id');
            aux.prop('disabled', true);
            aux.blur();
            $.ajax({
                url: urlBase + "/editar",
                data: {
                    id: id
                },
                type: 'GET',
                cache: false,
                success: function (result) {
                    $('#modal').html(result).find('.modal').modal({
                        show: true
                    });
                },
                complete: function () {
                    aux.removeAttr("disabled");
                    aux.prop('disabled', false);
                }
            });
            return false;
        });

        $('#table_gestion').on('click','.ficha', function () {
            var aux = $(this);
            var id = aux.data('id');
            aux.prop('disabled', true);
            aux.blur();
            $.ajax({
                url: urlBase + "/ficha/" + id,
                type: 'GET',
                cache: false,
                success: function (result) {
                    console.log(result);
                    $('#modal').html(result).find('.modal').modal({
                        show: true
                    });
                },
                complete: function () {
                    aux.removeAttr("disabled");
                    aux.prop('disabled', false);
                }
            });
            return false;
        });
    </script>
@endsection