@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div>
            <div class="panel panel-primary">
                <div class="panel-heading">Roles</div>
                <div class="panel-body">
                    
                    <input type ="button" class="btn btn-success pull-right" value = "Nuevo" id = "nuevo">
                    <br>
                    <br>

                    <table id="tabla" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
                        <thead>
                            <tr>

                                <th>#</th>
                                <th>Nombre</th>
                                <th>Descripción</th>
                                <th>Permisos</th>
                                <th>#</th>
                       
                            </tr>
                        </thead>

                        <tbody id = "tablaBody">                                            
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal" 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="exampleModalLabel">Rol</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">


            <form action="/rol/crear" method="post" id = "formRol" accept-charset="utf-8">
                
                <div class="form-group">
                    <label for="nombreRol">Nombre del Rol:</label>
                    <input type="text" id = "nombreRol" name = "nombreRol">                    
                </div>

                <div class="form-group">
                    <label for="descripcionRol">Descripción del Rol:</label>
                    <input type="text" id = "descripcionRol">                    
                </div>

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

            </form>
      </div>

{{--       <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div> --}}

    </div>
  </div>
</div>



<div class="modal fade" id="modalPermisos" 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="elrol"></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="idRol" id = "idRol">                

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

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

{{--       <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div> --}}

    </div>
  </div>
</div>
 
<div class="modal fade" id="modalEditar" 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="exampleModalLabel">Editar Rol</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">


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

                <input type="hidden" name="idEditarRol" id = "idEditarRol">                
                
                <div class="form-group">
                    <label for="nombreRol">Nombre del Rol:</label>
                    <input type="text" id = "editarNombreRol" name = "editarNombreRol">                    
                </div>

                <div class="form-group">
                    <label for="descripcionRol">Descripción del Rol:</label>
                    <input type="text" id = "editarDescripcionRol">                    
                </div>

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

            </form>
      </div>

{{--       <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div> --}}

    </div>
  </div>
</div>

@endsection


@section('scripts')
<script>

    $('#tabla').DataTable( {
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "order": [[ 1, "asc" ]],
        stateSave: true,
        "ajax":{
        "url": "/rol/list",
        "type": "GET"
        },


        "columns": [
            {"data":"id"},
            {"data":"name"},
            {"data":"description"},
        ],
        "language": {
            "url":"/js/Spanish.json"
        },

        "columnDefs": [
            {
                "orderable":true,                
                "render": function ( data, type, row ) {    
                        row.id;    
                }   
            },

            {
                "orderable":true,                
                "render": function ( data, type, row ) {    
                        row.name;    
                }   
            },

            {
                "orderable":true,                
                "render": function ( data, type, row ) {    
                        row.description;    
                }   
            },
            
            {
                "orderable":false,  
                "targets" : 3,              
                "render": function ( data, type, row ) {    
                        return '<i class="fa fa-list pull-right" style="cursor:pointer;"  onClick = modalPermisos('+row.id+',"'+encodeURIComponent(row.name)+'")></i>'; 
                }   
            },   
            {
                "orderable":false,  
                "targets" : 4,                            
               "render": function ( data, type, row ) {    
                    return '<i class="fa fa-trash-o pull-right" title = "eliminar" style="cursor:pointer;"  onClick = eliminar('+row.id+')></i><i class="fa fa-pencil pull-right" title = "editar" style="cursor:pointer;"  onClick = editar('+row.id+')></i>' ; 
                }
            },         
        ]    
         
    });


    $('#modal').modal('hide');
    $('#modalPermisos').modal('hide');

    $('#nuevo').click(function(event) {
        $('#nombreRol').val('');
        $('#descripcionRol').val('');
        $('#modal').modal('show');
    });

    

        $("#formRol").validate( {
            rules: {
                nombreRol: {
                    required: true,
                    minlength: 5,
                },

            },
            messages: {
                nombreRol: "Por favor ingrese un nombre",            
            },

            errorElement: "nombreRol",
            errorPlacement: function ( error, element ) {
                    // Add the `help-block` class to the error element
                    error.addClass( "help-block" );

                    if ( element.prop( "type" ) === "checkbox" ) {
                        error.insertAfter( element.parent( "label" ) );
                    } else {
                        error.insertAfter( element );
                    }
                },
        
            submitHandler: function(form) {
                $.ajax({
                    url: '/rol/crear',
                    type: "POST",
                    dataType: "json",            
                    data: {
                            nombreRol: $('#nombreRol').val(),
                            descripcionRol: $('#descripcionRol').val(),
                           },

                })
                .done(function() {
                    alert('Rol creado con éxito.');                    
                    $('#modal').modal('hide');
                    location.reload();
                })
                .fail(function() {
                    console.log("error");
                })
            }
        
        } );

        function modalPermisos(id,name){

            // limpio el formulario
            $('#updatePermisos').empty();  
                        
            $.ajax({
                url: '/rol/listPermisos',
                type: "GET",
                dataType: "json",            
                data: {
                        id: id,                        
                       },

            })
            .done(function(data) {              


                $.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>';
                        $('#updatePermisos').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>';
                        $('#updatePermisos').append(input); 
                    }

                });
                
                // esto de abajo, es xq cuando pasamos el valor de name por onclick, los espacios en blanco les pone %20
                $('#elrol').text(name.replace(/\%20/g, ' '));
                $('#idRol').val(id);                
                $('#modalPermisos').modal('show');

            })
            .fail(function() {
                console.log("error");
            })

        }
       

    $('#guardarPermisos').click(function(event) {
       
       var idRol = $('#idRol').val();

       var ids = [];
       
       $("#updatePermisos input:checkbox:checked").each(function() {
            ids.push(($(this).attr('id')));            
        });    

        $.ajax({
                url: '/rol/actualizarPermisos',
                type: "POST",
                dataType: "json",            
                data: {
                        ids: ids, 
                        idRol: idRol,                       
                       },

        })
        .done(function(data) {              
            alert('Guardado con éxito');            
            $('#modalPermisos').modal('hide');

        })
        .fail(function() {
            console.log("error");
        })

    });

    function editar(id){
        $.ajax({
            url: '/rol/editar',
            type: "GET",
            dataType: "json",            
            data: {
                    id:id                         
                   },

        })
        .done(function(data) {

            $('#idEditarRol').val(data.data.id);
            $('#editarNombreRol').val(data.data.name);
            $('#editarDescripcionRol').val(data.data.description);

            $('#modalEditar').modal('show');
            
        })
        .fail(function() {
            console.log("error");
        })
    }
        $("#formEditarRol").validate( {
            rules: {
                editarNombreRol: {
                    required: true,
                    minlength: 5,
                },

            },
            messages: {
                editarNombreRol: "Por favor ingrese un nombre",            
            },

            errorElement: "nombreRol",
            errorPlacement: function ( error, element ) {
                    // Add the `help-block` class to the error element
                    error.addClass( "help-block" );

                    if ( element.prop( "type" ) === "checkbox" ) {
                        error.insertAfter( element.parent( "label" ) );
                    } else {
                        error.insertAfter( element );
                    }
                },
        
            submitHandler: function(form) {
                $.ajax({
                    url: '/rol/actualizar',
                    type: "POST",
                    dataType: "json",            
                    data: {
                            id: $('#idEditarRol').val(),
                            nombreRol: $('#editarNombreRol').val(),
                            descripcionRol: $('#editarDescripcionRol').val(),
                           },

                })
                .done(function() {
                    alert('Rol actualizado con éxito.');                    
                    $('#modalEditar').modal('hide');
                    location.reload();
                })
                .fail(function() {
                    console.log("error");
                })
            }
        
        } );

        function eliminar(id){

               var pregunta = confirm("¿Deseas eliminar este registro?");

               if(pregunta){                    
                 $.ajax({
                        url: '/rol/eliminar',
                        type: "DELETE",
                        dataType: "json",            
                        data: {
                                id: id,
                               },

                    })
                    .done(function() {
                        alert('Rol eliminado con éxito.');                                        
                        location.reload();
                    })
                    .fail(function() {
                        console.log("error");
                    })
               }
                
        }
    



</script>
@endsection