<?php
$anio = date('Y');
$resumen = ControladorTransacciones::ctrBalanceMensual($anio);
$data = json_decode($resumen, true); // Decodificamos el JSON recibido
?>

<div class="box">
  <div class="box-header">
    <h3 class="box-title">Balance de Ingresos vs Gastos del <?= $anio ?></h3>
  </div>
  <div class="box-body">
    <canvas id="balanceChart" style="height: 400px; width: 100%;"></canvas>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // Obtener los datos del PHP
  const meses = <?php echo json_encode($data['meses']); ?>;
  const ingresos = <?php echo json_encode($data['ingresos']); ?>;
  const gastos = <?php echo json_encode($data['gastos']); ?>;

  // Crear el gráfico
  const ctx = document.getElementById('balanceChart').getContext('2d');
  const balanceChart = new Chart(ctx, {
    type: 'line', // Tipo de gráfico: líneas
    data: {
      labels: meses, // Meses del año
      datasets: [{
        label: 'Ingresos',
        data: ingresos,
        borderColor: 'green',
        backgroundColor: 'rgba(0, 255, 0, 0.2)',
        fill: true, // Área bajo la curva
        tension: 0.3
      }, {
        label: 'Gastos',
        data: gastos,
        borderColor: 'red',
        backgroundColor: 'rgba(255, 0, 0, 0.2)',
        fill: true,
        tension: 0.3
      }]
    },
    options: {
      responsive: true,
      scales: {
        x: {
          title: {
            display: true,
            text: 'Mes'
          }
        },
        y: {
          title: {
            display: true,
            text: 'Monto ($)'
          },
          beginAtZero: true
        }
      },
      plugins: {
        legend: {
          position: 'top'
        }
      }
    }
  });
</script>
