<div class="container" style="max-width: 70%;">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Lista de Departamentos</li>
        </ol>
    </nav>

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

    <a href="<?= URL ?>/departamentos/cadastrar" class="btn btn-primary mb-3">Cadastrar Novo Departamento</a>

    <style>
        #tabela-departamentos th,
        #tabela-departamentos 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-departamentos" class="table table-striped table-bordered table-hover datatable" style="width:100%">
            <thead class="text-center">
                <tr class="text-center">
                    <th>#</th>
                    <th>Nome</th>
                   
                   
                    <th>Opções</th>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($dados['departamentos'])): ?>
                    <?php foreach ($dados['departamentos'] as $dep): ?>
                        <tr>
                            <td><?= $dep->id_departamento ?></td>
                            <td><?= htmlspecialchars($dep->nome_departamento ?? '-') ?></td>
                           
                            
                            <td class="text-center">
                                <div class="d-flex flex-wrap justify-content-center gap-1">

                                    <a href="<?= URL ?>/departamentos/visualizar/<?= $dep->id_departamento ?>" class="btn btn-info btn-sm" title="Ver">
                                        <i class="fas fa-eye"></i> Ver
                                    </a>
                                    <a href="<?= URL ?>/departamentos/editar/<?= $dep->id_departamento ?>" 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="<?= $dep->id_departamento ?>" title="Excluir">
                                        <i class="fas fa-trash-alt"></i> Excluir
                                    </button>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="5" class="text-center">Nenhum departamento cadastrado.</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 ?>/departamentos/deletar/" + id;
                    }
                });
            });
        });

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