    </main>
</div>
</div>

<footer class="text-center text-muted my-4">
    <hr>
    <small>&copy; <?= date('Y') ?> - SOV - Sistema de Ordem de Viagens</small>
</footer>

<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>


<script>
    $(document).ready(function () {
        $('#tabelaOrdens').DataTable({
            responsive: true,
            autoWidth: false,
            language: {
                url: "//cdn.datatables.net/plug-ins/1.13.6/i18n/pt-BR.json"
            }
        });
    });
</script>
<script>
    $(document).ready(function () {
        const hasData = $('table tbody tr').length > 1 || ($('table tbody tr').length === 1 && !$('table tbody tr td').hasClass('text-center'));
        if (hasData) {
           $('#tabelaListagem').DataTable();({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.13.4/i18n/pt-BR.json"
                }
            });
        }
    });
</script>
<script>
    $(document).ready(function () {
        $('#tabelaFuncionarios').DataTable({
            responsive: true,
            autoWidth: false,
            language: {
                url: "//cdn.datatables.net/plug-ins/1.13.6/i18n/pt-BR.json"
            }
        });
    });
</script>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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 ?>/ordens/deletar/` + id;
                    }
                });
            });
        });
    });
</script>








<!-- Chart.js e Gráficos Dinâmicos -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const meses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];

    // Despesas por Mês
    fetch('<?= URL ?>/dashboard/dadosDespesas')
        .then(res => res.json())
        .then(dados => {
            console.log('DADOS:', dados); // Adicione esta linha
            const labels = dados.map(item => meses[parseInt(item.mes) - 1]);
            const valores = dados.map(item => parseFloat(item.total));
            const el = document.getElementById('graficoBI');
            if (el) {
                new Chart(el, {
                    type: 'bar',
                    data: {
                        labels,
                        datasets: [{
                            label: 'Despesas (R$)',
                            data: valores,
                            backgroundColor: 'rgba(54, 162, 235, 0.6)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 1,
                            borderRadius: 5
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: { position: 'top' },
                            tooltip: {
                                callbacks: {
                                    label: ctx => 'R$ ' + ctx.raw.toFixed(2).replace('.', ',')
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: { display: true, text: 'Valor (R$)' }
                            }
                        }
                    }
                });
            }
        });


// Gráfico Top 5 Diárias por Funcionário
const ctxDiarias = document.getElementById('graficoDiariasFuncionario');
if (ctxDiarias) {
    fetch('<?= URL ?>/dashboard/diariasPorFuncionario')
        .then(response => {
            if (!response.ok) throw new Error('Erro ao buscar dados');
            return response.json();
        })
        .then(data => {
            if (!data || data.length === 0) return;

            const nomes = data.map(item => item.nome);
            const totais = data.map(item => parseFloat(item.total));

            new Chart(ctxDiarias, {
                type: 'bar',
                data: {
                    labels: nomes,
                    datasets: [{
                        label: 'Total em R$',
                        data: totais,
                        backgroundColor: 'rgba(54, 162, 235, 0.7)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Top 5 Diárias por Funcionário'
                        },
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function (value) {
                                    return 'R$ ' + value.toFixed(2).replace('.', ',');
                                }
                            }
                        }
                    }
                }
            });
        })
        .catch(error => {
            console.error('Erro ao carregar gráfico de diárias por funcionário:', error);
        });
}

 



    // Gráfico: Despesas por Tipo
        fetch('<?= URL ?>/dashboard/despesasPorTipo')
  .then(res => res.json())
  .then(dados => {
    const labels = dados.map(d => d.tipo);
    const valores = dados.map(d => parseFloat(d.total));
    new Chart(document.getElementById('graficoTipos'), {
      type: 'pie',
      data: {
        labels,
        datasets: [{
          label: 'Por Tipo',
          data: valores,
          backgroundColor: ['#007bff', '#ffc107', '#28a745', '#dc3545']
        }]
      },
      options: {
        plugins: {
          title: { display: true, text: 'Despesas por Tipo' }
        }
      }
    });
  });



























   

    // Gráfico: Ordens por Status
    fetch('<?= URL ?>/dashboard/ordensPorStatus')
        .then(res => res.json())
        .then(dados => {
            const labels = dados.map(d => d.status);
            const valores = dados.map(d => parseInt(d.total));
            const el = document.getElementById('graficoOrdensStatus');
            if (el) {
                new Chart(el, {
                    type: 'doughnut',
                    data: {
                        labels,
                        datasets: [{
                            data: valores,
                            backgroundColor: ['#17a2b8', '#ffc107', '#28a745', '#dc3545', '#6c757d']
                        }]
                    },
                    options: {
                        plugins: {
                            title: { display: true, text: 'Ordens por Status' },
                            tooltip: {
                                callbacks: {
                                    label: ctx => ctx.label + ': ' + ctx.raw
                                }
                            }
                        }
                    }
                });
            }
        });
});
</script>


</body>
</html>
