@extends('layouts.admin.app')

@section('content')
<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold text-info">Utilizadores</h4>
        <a href="{{ route('dashboard.admin.users.create') }}" class="btn btn-info">
            <i class="fas fa-user-plus"></i> Novo Utilizador
        </a>
    </div>

    <div class="card shadow-lg border-0">
        <div class="card-body bg-dark text-light rounded">

            {{-- Filtro dinâmico --}}
            <div class="mb-3">
                <input type="text" id="userFilter" class="form-control bg-light text-dark border-info"
                       placeholder="Pesquisar por Nome, Email ou Perfil...">
            </div>

            <div class="table-responsive">
                <table class="table table-dark table-hover align-middle" id="usersTable">
                    <thead class="text-info">
                        <tr>
                            <th>Nome</th>
                            <th>Email</th>
                            <th>Perfil</th>
                            <th>Último Login</th>
                            <th>Estado</th>
                            <th class="text-center">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                        <tr>
                            <td class="user-name">{{ $user->name }}</td>
                            <td class="user-email">{{ $user->email }}</td>
                            <td class="user-role">
                                {{ $user->role }}
                            </td>
                            <td>
                                {{ $user->last_login_at ? $user->last_login_at->format('d/m/Y H:i') : 'Nunca' }}
                            </td>
                            <td>
                                @if($user->is_active)
                                    <span class="badge bg-success">Ativo</span>
                                @else
                                    <span class="badge bg-danger">Inativo</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <a href="{{ route('dashboard.admin.users.show',$user) }}" class="btn btn-sm btn-outline-info">
                                    <i class="fas fa-eye"></i>
                                </a>

                                <a href="{{ route('dashboard.admin.users.edit',$user) }}" class="btn btn-sm btn-outline-warning">
                                    <i class="fas fa-edit"></i>
                                </a>

                                <form action="{{ route('dashboard.admin.users.toggle-status',$user) }}"
                                      method="POST" class="d-inline">
                                    @csrf @method('PATCH')
                                    <button class="btn btn-sm btn-outline-secondary">
                                        <i class="fas fa-power-off"></i>
                                    </button>
                                </form>

                                <form action="{{ route('dashboard.admin.users.destroy',$user) }}"
                                      method="POST" class="d-inline"
                                      onsubmit="return confirm('Remover utilizador?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>

</div>

{{-- Script direto no final da view --}}
<script>
const filterInput = document.getElementById('userFilter');
const table = document.getElementById('usersTable');

filterInput.addEventListener('input', () => {
    const filter = filterInput.value.toLowerCase();
    const rows = table.tBodies[0].rows;

    for (let row of rows) {
        const name = row.querySelector('.user-name').textContent.toLowerCase();
        const email = row.querySelector('.user-email').textContent.toLowerCase();
        const role = row.querySelector('.user-role').textContent.toLowerCase();

        if (name.includes(filter) || email.includes(filter) || role.includes(filter)) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    }
});
</script>

@endsection