@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div>
                <div class="panel panel-default">
                    <div class="panel-heading">Usuarios</div>
                    <div class="panel-body">
                        <div class="actions">
                            <a href="/user_nuevo"><button type="button" class="btn btn-success">Nuevo Usuario</button></a>
                        </div>

                        <table id="record_list" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>&nbsp;</th>
                                    <th>Nombre</th>
                                    <th>Email</th>
                                    <th>Roles</th>
                                    <th>&nbsp;</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modal_Roles" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id = "elusuario"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="idUser" id = "idUser">

                        <form action="/rol/actualizarRoles" method="post" id = "updateRoles" accept-charset="utf-8">
                        </form>

                        <div class="form-group">
                            <input type ="submit" class="btn btn-success pull-right" value = "Guardar" id = "guardarRoles">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        var nuevo=false;

        $(document).ready(function() {
            $('#record_list').DataTable( {
                "order": [[ 1, "asc" ]],
                stateSave: true,
                "ajax": {
                    "url": "/users_list",
                    "type": "GET"
                },
                "columns": [
                    {"data":"id"},
                    {"data":"name"},
                    {"data":"email"},
                    {"data":"role"}
                ],
                "language": {
                    "url":"/js/Spanish.json"
                },
                "columnDefs": [
                    {
                        "orderable":false,
                        "targets" : 0,
                        "render": function ( data, type, row ) {
                            return '<a href="/user/'+row.id+'"><i class="fa fa-pencil-square-o"></i><a>';
                        }
                    },
                    {
                        "orderable":false,
                        "targets" : 3,
                        "render": function ( data, type, row ) {
                            return '<i class="fa fa-list pull-right" style="cursor:pointer;"  onClick = modalRoles('+row.id+',"'+encodeURIComponent(row.name)+'")></i>';
                        }
                    },
                    {
                        "orderable":false,
                        "targets" : 4,
                        "render": function ( data, type, row ) {
                            return '<a href=# onClick="delete_record($(this).parents(\'tr\'))"><i class="fa fa-trash-o"></i><a>';
                        }
                    }
                ]
            });
        });

        function delete_record(dom_row) {
            var dt_row=$('#record_list').DataTable().row(dom_row);
            var data = dt_row.data();

            bootbox.confirm("Est&aacute; seguro de borrar este usuario? No hay deshacer!",function(answer) {
                if(answer) {
                    $.ajax({
                        url: '/user/'+data.id,
                        type: "DELETE",
                        dataType: "json",
                        contentType: "application/json",
                        success: function(result) {
                            if(result.status=='ok') {
                                $('#record_list').DataTable().ajax.reload();
                            }
                        },
                        error: function(e) {
                            alert(e);
                        }
                     });
                }
            });
        }

        $("#modal_Roles").on("hidden.bs.modal", function() {
            $('#updateRoles').children().remove();
        });

        function modalRoles(id,name) {
            var id = id;
            $('#idUser').val(id);
            $('#updateRoles').empty();

            $.ajax({
                url: '/usuarios/listRoles',
                type: "GET",
                dataType: "json",
                data: {
                    id: id,
                },
            })
            .done(function(data) {
                $('#updateRoles').attr("action","/usuarios/actualizarRoles");

                $.each(data.data, function( key, value ) {
                    if(data.data[key].estado) {
                        var input = '<label><input type="checkbox" id="'+data.data[key].id+'" checked=checked value="'+data.data[key].name+'">'+data.data[key].name+'</label><br>';
                        $('#updateRoles').append(input);
                    } else {
                        var input = '<label><input type="checkbox" id="'+data.data[key].id+'" value="'+data.data[key].name+'">'+data.data[key].name+'</label><br>';
                        $('#updateRoles').append(input);
                    }
                });

                // esto de abajo, es xq cuando pasamos el valor de name por onclick, los espacios en blanco les pone %20
                $('#elusuario').text(name.replace(/\%20/g, ' '));
                // $('#idRol').val(id);
                $('#updateRol').show();
                $('#modal_Roles').modal('show');
            })
            .fail(function() {
                console.log("error");
            })
        }

        $('#guardarRoles').click(function(event) {
            var idUser = $('#idUser').val();
            var ids = [];

            $("#updateRoles input:checked").each(function() {
                ids.push(($(this).attr('id')));
            });

            $.ajax({
                url: $('#updateRoles').attr("action"),
                type: "POST",
                dataType: "json",
                data: {
                    ids: ids,
                    idUser: idUser,
                },
            })
            .done(function(data) {
                alert('Guardado con éxito');
                $('#modal_Roles').modal('hide');
            })
            .fail(function() {
                console.log("error");
            })
        });
    </script>
@endsection