@extends('layouts.app')

@section('content')
<!-- <button onclick="filtroVer()" id="user-filter-bt">
    <i class="bi bi-funnel"></i>
</button>
<div id="user-filter-cont">

</div> -->
<!-- <script>
    function filtroVer(){
        document.getElementById("user-filter-cont").style.left="0px";
        document.getElementById("user-filter-bt").style.left="250px";
        document.getElementById("user-filter-bt").setAttribute("onclick", "filtroOcultar()");
    }
    function filtroOcultar(){
        document.getElementById("user-filter-cont").style.left="-250px";
        document.getElementById("user-filter-bt").style.left="0px";
        document.getElementById("user-filter-bt").setAttribute("onclick", "filtroVer()");
    }
</script> -->
<div class="ind">
    <article>
        <div class="loader-back" id="loader-back">
            <div class="loader" id="loader"></div>
        </div>
        <div class="titlepag">
            <h2><button class="bt-arrow" onclick="history.back()"><i class="bi bi-arrow-left"></i></button>Usuarios <a href="/nuevousuario" class="new-user"><i class="bi bi-plus"></i></a></h2>
            <hr>
        </div>
        <table class="main_table">
            <thead>
                <tr id="thead">
                    <th></th>
                    <th>Nombre</th>
                    <th>Apellido</th>
                    <th>Nombre de usuario</th>
                    <th>Rol</th>
                    <th>Ultima sesion</th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $u)
                <tr style="@if($u->eliminado==1)text-decoration: line-through; opacity: 0.5;@endif">
                    <td><img @if($u->conexion==1) style="border-radius: 200px; border: 2px solid rgba(138, 201, 50, 1);padding: 1px;width: 40px; height:40px; opacity: 0.6;" title="Usuario conectado en estos momentos" @else style="width: 40px; height:40px; opacity: 0.6; padding:3px;" @endif src="/img/user.png"  alt=""></td>
                    <td><a class="tab-title-link" href="/usuariodetalle?id={{$u->id}}">{{$u->name}}</a></td>
                    <td>{{$u->lastname}}</td>
                    <td>{{$u->username}}</td>
                    <td>{{$u->rol}}</td>
                    <td>{{substr($u->ultima_sesion, 0, -4)}}</td>
                    <td>@if($u->eliminado!=1)<button class="bt-cam-cont" onclick="verEditPw({{$u->id}})">Cambiar contraseña</button>@endif</td>
                    @if($u->eliminado!=1)
                    <td><button class="bt-edit" onclick="redirigirUsuario({{$u->id}})"><i class="bi bi-pencil"></i></button></td>
                    <td><button class="bt-delete" onclick="eliminarUsuario({{$u->id}}); document.getElementById('loader-back').style.display='block'"><i class="bi bi-x"></i></button></td>
                    @else
                    <td colspan="2" style="text-align: center;"><button id="bt-react-{{$u->id}}" class="bt-reactive" onclick="reactivarUsuario({{$u->id}}); document.getElementById('loader-back').style.display='block'"><i id="icon-react-{{$u->id}}" class="bi bi-arrow-counterclockwise"></i></button></td>
                    @endif
                </tr>
                @endforeach
            </tbody>
        </table>
    </article>
    
</div>
@endsection