@extends('layout.master')
@section('parentPageTitle', 'Listado de usuarios')
@section('title', 'Listado de usuarios')


@section('page-style')
<link rel="stylesheet" href="{{asset('assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">
<link rel="stylesheet" href="{{asset('assets/bootstrap.min.css')}}">
@stop


@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">


    <div class="row clearfix">
        <!--<div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>-->

        <!-- <div class="d-flex justify-content-center">-->
        
        <div class="col-md-12 d-flex justify-content-center">
       
            <div class="card patients-list">
                

                <div class="body">
                    <!-- Nav tabs -->

                    <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">
                        <big style="color: black;font-size: 25px;"class="">@yield('title')</big>
                    </div>

                    <div align="right">
                        <a href="ingresar" class="btn btn-primary btn-round">Nuevo Usuario</a>
                    </div>

                    <input type="hidden" id="idusuarioeliminar" name="idusuarioeliminar" value=""> 
                    
           
                    <!-- Tab panes -->
                    <div class="tab-content m-t-10">
                        <div class="tab-pane table-responsive active" id="All">
                            <table class="table m-b-0 table-hover" id="tabla1" name="tabla1">
                                <thead>
                                    <tr class="ui-widget-header">                                       
                                        <th>Nombre</th>
                                        <th>Apellido</th>
                                        <th>Rut</th>
                                        <!--<<th>Rol</th>--> 
                                        <th>Perfil</th>
                                        <th>Estado</th>
                                        <th>Acción</th>
                                    </tr>
                                </thead>
                                <tbody>
                                	@foreach ($data as $usuario)
                                    <tr id="{{ $usuario->id }}">
                                        <td>{{ucwords($usuario->name)}}</td>
                                        <td>
                                                                                        {{ucwords($apellido)}}
                                        </td>
                                        <td>{{ucwords($usuario->rut) }}</td>
                                        <!--<td>{{ucwords($usuario->nombrerol) }}</td>--> 
                                        <td>{{ucwords($usuario->perfil) }}</td>
                                        
                                        <td>

                                            
                                                <a href="#" id="span{{$usuario->id}}" class="tag badge badge-suc" style="border-color:#FF3636; color:#FF3636;"onclick="cambiarEstado('{{$usuario->id}}', '{{$usuario->estado}}',this.id)">Inactivo</a>

                                                <button style="display:none;" id="btn{{$usuario->id}}" class="btn btn-danger btn-round btn-sm" type="button" onclick="cambiarEstado('{{$usuario->id}}', '{{$usuario->estado}}',this.id)">Inactivo</button>


                                            
                                            
                                        <!--<button type="button" id="btn_eliusuario" class="btn btn-primary btn-round btn-sm"
                                            data-toggle="modal" data-target="#usuario_eliminar"><span
                                                class=""></span> Eliminar
                                        </button>--> 

                                            <!-- <button type="button" class="btn btn-danger btn-round" onclick="eliminar('{{$usuario->id}}')">Eliminar</button> -->
                                        </td>

                                        <td><a href="{{ $usuario->id }}" class="btn btn-primary btn-round btn-sm">Editar</a>

                                        <button type="button" class="btn btn-primary btn-round cambiarPass btn-sm" id="{{$usuario->id}}" name="{{$usuario->id}}">Cambiar contraseña</button>
                                        <!--<button type="button" id="btn_eliusuario" class="btn btn-primary btn-round btn-sm"
                                            data-toggle="modal" data-target="#usuario_eliminar"><span
                                                class=""></span> Eliminar
                                        </button>--> 

                                            <!-- <button type="button" class="btn btn-danger btn-round" onclick="eliminar('{{$usuario->id}}')">Eliminar</button> -->
                                        </td>
                                    </tr>
                                    @endforeach                                                                          
                                </tbody>
                            </table>
                        </div>


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

@stop


@section('page-script')
<script src="{{asset('assets/bundles/datatablescripts.bundle.js')}}"></script>

<script>


function cambiarEstado(id, estado, btn_id){
    var token = $('meta[name="csrf-token"]').attr('content');
    var url='ajax_cambiar_estado';
    var enviarData={"id" : id, "estado" : estado};

    $.ajax({
        type:'POST',
        url: url,
        data: enviarData,
        headers: {
            'X-CSRF-TOKEN': token
        },

        //class="btn btn-success btn-round btn-sm"

        //#18ce0f
        //#ff3636



        success:function(data){
            if(data==1){
                
                /*$("#"+btn_id).text("Activo");
                $("#"+btn_id).removeClass();
                $("#"+btn_id).addClass('btn btn-success btn-round btn-sm');
                $("#"+btn_id).attr("onclick", "cambiarEstado('"+id+"', '1', '"+btn_id+"')");*/

                $("#"+btn_id).text("Activo");
                $("#"+btn_id).removeClass('');
                $("#"+btn_id).addClass('tag badge badge-default');
                //$("#"+btn_id).addClass('tag badge badge-success');
                $("#"+btn_id).css({'border-color':'#18ce0f','color':'#18ce0f'});
                $("#"+btn_id).attr("onclick", "cambiarEstado('"+id+"', '1', '"+btn_id+"')");

            }else{
                /*$("#"+btn_id).text("Inactivo");
                $("#"+btn_id).removeClass();
                $("#"+btn_id).addClass('btn btn-danger btn-round btn-sm');
                $("#"+btn_id).attr("onclick", "cambiarEstado('"+id+"', '0', '"+btn_id+"')");*/

                $("#"+btn_id).text("Inactivo");
                $("#"+btn_id).removeClass('');
                $("#"+btn_id).addClass('tag badge badge-default');
                //$("#"+btn_id).addClass('tag badge badge-danger');
                $("#"+btn_id).css({'border-color':'#FF3636','color':'#FF3636'});
                $("#"+btn_id).attr("onclick", "cambiarEstado('"+id+"', '0', '"+btn_id+"')");
            }
        }
    });
}

$( ".cambiarPass" ).click(function() {

    var token = $('meta[name="csrf-token"]').attr('content');
    var url='ajax_seleccionar_usuario';
    var user_id = this.id;
    var data={"id" : user_id};

    $.ajax({
        type:'POST',
        url: url,
        data: data,
        headers: {
            'X-CSRF-TOKEN': token
        },
        success:function(data){
            //alert(data);
            window.location.href = "cambiar_pass";
        }
    });         

});

$(document).ready(function() {
    $('#tabla1').DataTable({
        "language": {
            "lengthMenu": "Listar _MENU_ ",
            "zeroRecords": "Aún no tiene registros",
            "info": "Página _PAGE_ de _PAGES_",
            "infoEmpty": "",
            "Search": "Buscar",
            "infoFiltered": "(filtered from _MAX_ total records)",
            "search": "Buscar",
            "zeroRecords": "Sin resultados encontrados",
            "paginate": {
                "first": "Primero",
                "last": "Ultimo",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        },
        "columnDefs": [
              //ocultar para columna rut
              { "orderable": false, "targets": 4 },
              //ocultar para columna boton
              { "orderable": false, "targets": 5 },//ocultar para columna 
            ],
        "order": [[ 3, "asc" ]]
    });
} );


</script>
@stop