<div class="container mt-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Lista de Pessoas</li>
        </ol>
    </nav>

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

    <a href="<?= URL ?>/pessoas/cadastrar" class="btn btn-primary mb-3">
        <i class="bi bi-plus-circle"></i> Cadastrar Nova Pessoa
    </a>

    <style>
        #tabela-pessoas th,
        #tabela-pessoas td {
            text-align: center;
            vertical-align: middle;
        }

        @media (max-width: 768px) {
            .table td,
            .table th {
                font-size: 0.8rem;
                padding: 0.4rem;
            }

            .btn-sm {
                font-size: 0.75rem;
                padding: 0.3rem 0.5rem;
            }
        }
    </style>

    <div class="table-responsive">
        <table id="tabela-pessoas" class="table table-striped table-bordered table-hover datatable" style="width:100%">
            <thead class="text-center">
                <tr>
                    <th>#</th>
                    <th>Nome</th>
                    <th>CPF</th>
                    <th>Data Nascimento</th>
                    <th>E-mail</th>
                    <th>Opções</th>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($dados['pessoas'])): ?>
                    <?php foreach ($dados['pessoas'] as $index => $pessoa): ?>
                        <tr>
                            <td><?= $index + 1 ?></td>
                            <td><?= htmlspecialchars($pessoa->nome ?? '-') ?></td>
                            <td><?= htmlspecialchars($pessoa->cpf ?? '-') ?></td>
                            <td><?= !empty($pessoa->data_nascimento) ? date('d/m/Y', strtotime($pessoa->data_nascimento)) : '-' ?></td>
                            <td><?= htmlspecialchars($pessoa->email ?? '-') ?></td>
                            <td class="text-center">
                                <div class="d-flex flex-wrap justify-content-center gap-1">
                                    <a href="<?= URL ?>/pessoas/visualizar/<?= $pessoa->id_pessoa ?>" class="btn btn-info btn-sm" title="Ver">
                                        <i class="fas fa-eye"></i> Ver
                                    </a>
                                    <a href="<?= URL ?>/pessoas/editar/<?= $pessoa->id_pessoa ?>" class="btn btn-warning btn-sm" title="Editar">
                                        <i class="fas fa-edit"></i> Editar
                                    </a>
                                    <button class="btn btn-danger btn-sm btn-excluir" data-id="<?= $pessoa->id_pessoa ?>" title="Excluir">
                                        <i class="fas fa-trash-alt"></i> Excluir
                                    </button>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="6" class="text-center">Nenhuma pessoa cadastrada.</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- DataTables -->
<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 () {
        document.querySelectorAll('.btn-excluir').forEach(function (btn) {
            btn.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 ?>/pessoas/deletar/" + id;
                    }
                });
            });
        });

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