@extends('template.layout')

@section('styles')
@endsection

@section('content')
    <h1 class="page-title">
        Areas de Usuarios
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold uppercase"> Lista de Usuarios </span>
                <span class="caption-helper"></span>
            </div>
        </div>
        <div class="portlet-body">
            <table id="dataTable" class="table table-hover nowrap dataTable dtr-inline">
                <thead>
                <tr>
                    <th>Nombre</th>
                    <th>DNI</th>
                    <th>Teléfono</th>
                    <th>E-mail</th>
                    <th>Opciones</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </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: {
                        type: "POST",
                        url: "{{ route('usuario.rolesdependencia.post') }}",
                        error: function (jqXHR, textStatus, errorThrown) {
                            /*console.log(jqXHR);
                            console.log(textStatus);
                            console.log(errorThrown);*/
                        }
                    },
                    columns: [
                        {
                            data: "usuario_nombres",
                            name: "usuario_nombres"
                        },
                        {
                            data: "usuario_dni",
                            name: "usuario_dni",
                            render: function(data, type, row) {
                                var render = "";

                                if (data != "") {
                                    render = "<td>" + data + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        },
                        {
                            data: "usuario_telefono",
                            name: "usuario_telefono"
                        },
                        {
                            data: "usuario_email",
                            name: "usuario_email"
                        },
                        {
                            data: "user_id",
                            name: "user_id",
                            render: function(data, type, row) {
                                var render = "";
                                render += "<td class=\"td_center\">";
                                render += " <a onclick=\"Editar(" + data + ")\" title=\"Editar\" class=\"btn btn-outline btn-circle btn-sm purple\">";
                                render += "     <i class=\"fa fa-edit\"></i> Editar";
                                render += " </a>";
                                render += "</td>";

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

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

        window.onload = function() {
            CargarDataTables();
        };

        function CargarDataTables(index, args) {
            index = index || -1;
            args = args || null;

            if (index < 0) {
                var dataTableLength = dataTable.length;
                for (var i = 0; i < dataTableLength; i++) {
                    dataTable[i](args);
                }
            } else {
                dataTable[index](args);
            }
        }

        function Editar(user_id) {
            window.location.href = "{{ url('admin/dependencia/usuario/editar/') }}" + "/" + user_id;
        }
    </script>
@endsection