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

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

    <a href="<?= URL ?>/veiculos/cadastrar" class="btn btn-primary mb-3">Cadastrar Novo Veículo</a>

    <style>
        #tabela-veiculos th,
        #tabela-veiculos 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-veiculos" class="table table-striped table-bordered table-hover datatable" style="width:100%">
            <thead class="text-center">
                <tr class="text-center">
                    <th>#</th>
                    <th>Placa</th>
                    <th>Modelo</th>
                    <th>Marca</th>
                    <th>Ano</th>
                    <th>Combustível</th>
                    <th>Departamento</th>
                    <th>Km Revisão</th>
                    <th>Patrimônio</th>
                    <th>Opções</th>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($dados['veiculos'])): ?>
                    <?php foreach ($dados['veiculos'] as $veiculo): ?>
                        <tr>
                            <td><?= $veiculo->id_veiculo ?></td>
                            <td><?= htmlspecialchars($veiculo->placa ?? '-') ?></td>
                            <td><?= htmlspecialchars($veiculo->modelo ?? '-') ?></td>
                            <td><?= htmlspecialchars($veiculo->marca ?? '-') ?></td>
                            <td><?= htmlspecialchars($veiculo->ano_modelo ?? '-') ?></td>
                            <td><?= htmlspecialchars($veiculo->nome_combustivel) ?></td>
                            <td><?= htmlspecialchars($veiculo->nome_departamento) ?></td>
                            <td><?= isset($veiculo->km_revisao) ? number_format($veiculo->km_revisao, 2, ',', '.') : '-' ?></td>

                            <td><?= htmlspecialchars($veiculo->num_patrimonio) ?></td>
                            <td class="text-center">
                                <div class="d-flex flex-wrap justify-content-center gap-1">
                                    <a href="<?= URL ?>/veiculos/visualizar/<?= $veiculo->id_veiculo ?>" class="btn btn-info btn-sm" title="Ver">
                                        <i class="fas fa-eye"></i> Ver
                                    </a>
                                    <a href="<?= URL ?>/veiculos/editar/<?= $veiculo->id_veiculo ?>" 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="<?= $veiculo->id_veiculo ?>" 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">Nenhum veículo 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 ?>/veiculos/deletar/" + id;
                    }
                });
            });
        });

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