<?php

if ($_SESSION["perfil"] == "Especial") {
    echo '<script>
        window.location = "inicio";
    </script>';
    return;
}

?>

<?php
$anio = isset($_GET["anio"]) ? intval($_GET["anio"]) : date('Y');
$resumen = ControladorTransacciones::ctrResumenFinancieroAnual($anio);
$dataJson = ControladorTransacciones::ctrBalanceMensual($anio);

$data = json_decode($dataJson, true);
if (!$data) {
  echo "Error al cargar los datos del balance mensual.";
  exit;
}

$ingresos = $resumen["total_ingresos"] ?? 0;
$gastos = $resumen["total_gastos"] ?? 0;
$balance = $ingresos - $gastos;
?>

<div class="content-wrapper">
  <section class="content-header">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <h1>
        Balance Financiero
        <small>Resumen anual <?= htmlspecialchars($anio) ?></small>
      </h1>
    </div>

    <div class="col-xs-12 col-sm-6 text-right">
      <form method="get" action="index.php" class="form-inline" style="margin-top: 20px; display: inline-block;">
        <input type="hidden" name="ruta" value="finanzas">
        <div class="form-group">
  <label for="anio">Año:&nbsp;</label>
  <select name="anio" id="anio" class="form-control" onchange="this.form.submit()">
    <?php
      $anioActual = date("Y");
      for ($i = $anioActual; $i >= $anioActual - 5; $i--) {
        $selected = ($i == $anio) ? "selected" : "";
        echo "<option value='$i' $selected>$i</option>";
      }
    ?>
  </select>
</div>

<div class="form-group" style="margin-left: 10px;">
  <label for="mes">Mes:&nbsp;</label>
  <select name="mes" id="mes" class="form-control" onchange="this.form.submit()">
    <?php
      $mesSeleccionado = isset($_GET["mes"]) ? intval($_GET["mes"]) : date("n");
      $meses = [
        1 => 'Enero', 2 => 'Febrero', 3 => 'Marzo', 4 => 'Abril',
        5 => 'Mayo', 6 => 'Junio', 7 => 'Julio', 8 => 'Agosto',
        9 => 'Septiembre', 10 => 'Octubre', 11 => 'Noviembre', 12 => 'Diciembre'
      ];

      foreach ($meses as $num => $nombre) {
        $selected = ($num == $mesSeleccionado) ? "selected" : "";
        echo "<option value='$num' $selected>$nombre</option>";
      }
    ?>
  </select>
</div>

      </form>

      <!-- Botón PDF -->
        <a href="extensiones/tcpdf/pdf/balance-financiero-pdf.php?anio=<?= $anio ?>" class="btn btn-danger" target="_blank" style="margin-left: 10px;">
            <i class="fa fa-file-pdf-o"></i> Balance Financiero
        </a>
      
     <a href="extensiones/tcpdf/pdf/reporte-gastos-pdf.php?anio=<?= $anio ?>&mes=<?= $mesSeleccionado ?>" 
        class="btn btn-warning" target="_blank" style="margin-left: 10px;">
        <i class="fa fa-file-pdf-o"></i> Ingresos & Gastos
     </a>
    </div>
  </div>

  <!-- Breadcrumb separado abajo para que no se monte -->
<div class="row" style="margin-top: 15px;">
  <div class="col-xs-12 text-right">
    <ol class="breadcrumb" style="display: inline-block; background: transparent; margin: 0;">
      <li><a href="inicio"><i class="fa fa-dashboard"></i> Inicio</a></li>
      <li class="active">Finanzas</li>
    </ol>
  </div>
</div>

</section>


  <section class="content">
    <div class="row">
      <!-- Ingresos -->
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-green">
          <div class="inner">
            <h3>$<?= htmlspecialchars(number_format($ingresos, 2)) ?></h3>
            <p>Ingresos del <?= htmlspecialchars($anio) ?></p>
          </div>
          <div class="icon">
            <i class="fa fa-arrow-circle-up"></i>
          </div>
          <a href="ingresos" class="small-box-footer">Más info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>

      <!-- Gastos -->
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-red">
          <div class="inner">
            <h3>$<?= htmlspecialchars(number_format($gastos, 2)) ?></h3>
            <p>Gastos del <?= htmlspecialchars($anio) ?></p>
          </div>
          <div class="icon">
            <i class="fa fa-arrow-circle-down"></i>
          </div>
          <a href="gastos" class="small-box-footer">Más info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>

      <!-- Balance -->
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3>$<?= htmlspecialchars(number_format($balance, 2)) ?></h3>
            <p>Balance del <?= htmlspecialchars($anio) ?></p>
          </div>
          <div class="icon">
            <i class="fa fa-balance-scale"></i>
          </div>
          <a href="balance" class="small-box-footer">Más info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
    </div>

    <!-- Gráfico de Balance Mensual -->
    <div class="box">
      <div class="box-header with-border">
        <h3 class="box-title">Evolución mensual de ingresos y gastos</h3>
      </div>
      <div class="box-body">
        <canvas id="balanceChart" style="height: 400px; width: 100%;"></canvas>
      </div>
    </div>

  </section>
</div>

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

  const ctx = document.getElementById('balanceChart').getContext('2d');
  const balanceChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: meses,
      datasets: [
        {
          label: 'Ingresos',
          data: ingresos,
          borderColor: 'rgba(0, 204, 102, 1)', // Verde más suave
          backgroundColor: 'rgba(0, 204, 102, 0.2)', // Fondo suave
          fill: true,
          tension: 0.4,
          borderWidth: 2, // Grosor del borde
          pointBackgroundColor: 'rgba(0, 204, 102, 1)', // Puntos verdes
          pointRadius: 5, // Tamaño de los puntos
          pointHoverRadius: 7, // Tamaño cuando pasas el mouse
          pointHoverBackgroundColor: 'rgba(0, 204, 102, 1)', // Efecto hover
        },
        {
          label: 'Gastos',
          data: gastos,
          borderColor: 'rgba(255, 99, 132, 1)', // Rojo más suave
          backgroundColor: 'rgba(255, 99, 132, 0.2)', // Fondo suave
          fill: true,
          tension: 0.4,
          borderWidth: 2,
          pointBackgroundColor: 'rgba(255, 99, 132, 1)',
          pointRadius: 5,
          pointHoverRadius: 7,
          pointHoverBackgroundColor: 'rgba(255, 99, 132, 1)',
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
          labels: {
            font: {
              size: 14,
              family: 'Arial, sans-serif', // Fuente más limpia
              weight: 'bold'
            },
            color: '#333'
          }
        },
        tooltip: {
          mode: 'index',
          intersect: false,
          callbacks: {
            label: function(tooltipItem) {
              return '$' + tooltipItem.raw.toLocaleString(); // Formato de números
            }
          }
        }
      },
      interaction: {
        mode: 'nearest',
        axis: 'x',
        intersect: false
      },
      scales: {
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: 'Monto ($)',
            font: {
              size: 16,
              family: 'Arial, sans-serif',
              weight: 'bold'
            },
            color: '#333'
          },
          grid: {
            color: '#ddd', // Gris claro para las líneas de la cuadrícula
            borderColor: '#ccc' // Color de la frontera
          },
        },
        x: {
          title: {
            display: true,
            text: 'Mes',
            font: {
              size: 16,
              family: 'Arial, sans-serif',
              weight: 'bold'
            },
            color: '#333'
          },
          grid: {
            color: '#ddd'
          }
        }
      }
    }
  });
</script>

