<div class="container py-5">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Lista de Usuários</li>
        </ol>
    </nav>

    <?php Sessao::mensagem('usuarios'); ?>

    <a href="<?= URL ?>/usuarios/cadastrar" class="btn btn-primary mb-3">
        <i class="bi bi-plus-circle"></i> Cadastrar Novo Usuário
    </a>

    <div class="table-responsive">
        <table id="tabela-usuarios" class="table table-striped table-bordered table-hover datatable" style="width:100%">
            <thead class="text-center">
                <tr>
                    <th>#</th>
                    <th>Nome</th>
                    <th>E-mail</th>
                    
                    <th>Status</th>
                    <th>Criado em</th>
                    <th>Opções</th>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($dados['usuarios'])): ?>
                    <?php foreach ($dados['usuarios'] as $usuario): ?>
                        <tr>
                            <td><?= $usuario->id_usuario ?></td>
                            <td class="text-start"><?= htmlspecialchars($usuario->nome ?? '-') ?></td>
                            <td class="text-start"><?= htmlspecialchars($usuario->email ?? '-') ?></td>
                            
                            <td>
    <?php if ($usuario->ativo): ?>
        <span class="badge bg-success">Ativo</span>
    <?php else: ?>
        <span class="badge bg-danger">Inativo</span>
    <?php endif; ?>
</td>


                            <td><?= !empty($usuario->criado_em) ? date('d/m/Y H:i', strtotime($usuario->criado_em)) : '-' ?></td>
                            <td class="text-center">
                                <div class="d-flex flex-wrap justify-content-center gap-1">
                                    <a href="<?= URL ?>/usuarios/editar/<?= $usuario->id_usuario ?>" class="btn btn-warning btn-sm">
                                        <i class="fas fa-edit"></i> Editar
                                    </a>
                                    <button class="btn btn-danger btn-sm btn-excluir" data-id="<?= $usuario->id_usuario ?>">
                                        <i class="fas fa-trash-alt"></i> Excluir
                                    </button>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr><td colspan="7" class="text-center">Nenhum usuário encontrado.</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- JS do DataTables e SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Botão Excluir
    document.querySelectorAll('.btn-excluir').forEach(button => {
        button.addEventListener('click', function () {
            const id = this.dataset.id;
            Swal.fire({
                title: 'Tem certeza?',
                text: 'Essa ação não poderá ser desfeita!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sim, excluir!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "<?= URL ?>/usuarios/excluir/" + id;
                }
            });
        });
    });

    // DataTables
    $('#tabela-usuarios').DataTable({
        language: {
            url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/pt-BR.json"
        },
        columnDefs: [{ orderable: false, targets: -1 }]
    });

    // Toggle Status via AJAX (requer rota /usuarios/toggleStatus/{id})
    document.querySelectorAll('.toggle-status').forEach(checkbox => {
        checkbox.addEventListener('change', function () {
            const id = this.dataset.id;
            const ativo = this.checked ? 1 : 0;

            fetch(`<?= URL ?>/usuarios/toggleStatus/${id}/${ativo}`)
                .then(res => res.json())
                .then(dados => {
                    if (dados.status !== 'ok') {
                        Swal.fire('Erro', 'Não foi possível alterar o status.', 'error');
                        this.checked = !ativo; // reverte
                    }
                })
                .catch(() => {
                    Swal.fire('Erro', 'Erro na requisição.', 'error');
                    this.checked = !ativo;
                });
        });
    });
});
</script>
