<div class="container mt-4">
  <h3>Gráficos do Sistema</h3>
  <div class="row">
    <div class="col-md-6">
      <canvas id="graficoDespesas"></canvas>
    </div>
    <div class="col-md-6">
      <canvas id="graficoTipos"></canvas>
    </div>
    <div class="col-md-6 mt-4">
      <canvas id="graficoStatus"></canvas>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  // Gráfico Despesas por Mês
  fetch('<?= URL ?>/dashboard/dadosDespesas')
    .then(res => res.json())
    .then(dados => {
      const meses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
      const labels = dados.map(d => meses[d.mes - 1]);
      const valores = dados.map(d => parseFloat(d.total));
      new Chart(document.getElementById('graficoDespesas'), {
        type: 'bar',
        data: {
          labels,
          datasets: [{
            label: 'Despesas (R$)',
            data: valores,
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
          }]
        },
        options: {
          plugins: {
            title: { display: true, text: 'Despesas por Mês' },
            tooltip: {
              callbacks: {
                label: ctx => 'R$ ' + ctx.raw.toFixed(2).replace('.', ',')
              }
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              title: { display: true, text: 'Valor (R$)' }
            }
          }
        }
      });
    });


  // Gráfico Despesas por Tipo
  document.addEventListener('DOMContentLoaded', function () {
  fetch('<?= URL ?>/dashboard/despesasPorTipo')
    .then(res => res.json())
    .then(dados => {
      const labels = dados.map(d => d.tipo ? d.tipo.trim() : 'Sem Tipo');
      const valores = dados.map(d => parseFloat(d.total));

      const cores = [
        '#007bff', '#28a745', '#dc3545', '#ffc107',
        '#6c757d', '#17a2b8', '#6610f2', '#e83e8c',
        '#20c997', '#fd7e14', '#343a40', '#adb5bd'
      ];

      new Chart(document.getElementById('graficoDespesasTipo'), {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: 'Total (R$)',
            data: valores,
            backgroundColor: cores,
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          plugins: {
            title: {
              display: true,
              text: 'Despesas por Tipo'
            },
            legend: {
              display: false
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              title: {
                display: true,
                text: 'Valor (R$)'
              }
            }
          }
        }
      });
    });
});


  // 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));
      new Chart(document.getElementById('graficoStatus'), {
        type: 'doughnut',
        data: {
          labels,
          datasets: [{
            label: 'Total de Ordens',
            data: valores,
            backgroundColor: ['#17a2b8', '#ffc107', '#28a745', '#dc3545']
          }]
        },
        options: {
          plugins: {
            title: { display: true, text: 'Ordens por Status' }
          }
        }
      });
    });
});
</script>
