@extends('adminlte::page')

@section('title', 'Reef | List')
@section('content_header')
    <h1 class="m-0 text-dark">Users</h1>
@stop

@section('css')
 
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">

                    <div class="d-flex align-items-center justify-content-between w-100">
                        <h3 class="card-title">Users List</h3>
                        <a class="btn btn-success" href="{{route('user.create')}}">New user</a>
                    </div>
                </div>
             
                <livewire:tables.users-admin />
                {{-- <div class="card-body">
                    <table id="table-users" class="table table-hover text-center align-middle">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Image</th>
                                <th scope="col">Role</th>
                                <th scope="col">Username</th>
                                <th scope="col">Name</th>
                                <th scope="col">Email</th>

                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @csrf
                            @foreach($users as $user)
                            <tr id="{{ $user->id }}">
                                <td>{{ $user->id }}</td>
                                <td><img class="profile-user-img img-fluid img-circle" src="{{ $user->avatar ? route('file_storage_serve', ['params' => 'images', 'file' => $user->avatar]) : '/images/avatar.png'}}" alt="User profile picture"></td>
                                <td>{{ $user->user_role()->name }}</td>
                                <td>{{ $user->username }}</td>
                                <td>{{ $user->first_name }} {{ $user->last_name }}</td>
                                <td>{{ $user->email }}</td>

                                <td>
                                    <div class="btn-group-vertical">
                                        <a id="button_edit_user" href="" class="btn btn-success">Edit</a>
                                        <button id="button_unban_user" type="button" class="button_unban_user btn btn-warning button_unban_user" user_id="{{ $user->id }}" style="{{ $user->isBanned ? '' : 'display:none' }}">Un-Ban</button>
                                        <button id="button_ban_user" type="button" class="button_ban_user btn btn-warning button_ban_user" user_id="{{ $user->id }}" style="{{ !$user->isBanned ? '' : 'display:none' }}">Ban</button>
                                        <button id="button_delete_user" type="button" class="button_delete_user btn btn-danger" user_id="{{ $user->id }}" user_name="{{ $user->username }}" user_full_name="{{ $user->first_name . ' ' . $user->last_name }}"/button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div> --}}
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
@stop

@section('js')
<script>
    window.addEventListener('delete-user', event => {
    console.log(event);
    alert(event.detail.message);
    })

</script>
@stop