<?php
declare(strict_types=1);
require_once __DIR__ . '/../includes/db.php';
require_once __DIR__ . '/../includes/functions.php';

$pageTitle = 'Dashboard';
$activeMenu = 'dashboard';
$basePath = '..';

require __DIR__ . '/../includes/header.php';
?>
<div class="row g-3 mb-2" id="kpiRow">
  <div class="col-md-4 col-lg-2">
    <div class="card kpi-card">
      <div class="card-body">
        <div class="kpi-label">Cartera total</div>
        <div class="kpi-value text-primary" id="kpiCarteraTotal">-</div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-lg-2">
    <div class="card kpi-card">
      <div class="card-body">
        <div class="kpi-label">Cartera vencida</div>
        <div class="kpi-value text-danger" id="kpiCarteraVencida">-</div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-lg-2">
    <div class="card kpi-card">
      <div class="card-body">
        <div class="kpi-label">Facturas pendientes</div>
        <div class="kpi-value" id="kpiFacturasPendientes">-</div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-lg-2">
    <div class="card kpi-card">
      <div class="card-body">
        <div class="kpi-label">Ventas del mes</div>
        <div class="kpi-value text-success" id="kpiVentasMes">-</div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-lg-2">
    <div class="card kpi-card">
      <div class="card-body">
        <div class="kpi-label">Recaudo del mes</div>
        <div class="kpi-value text-success" id="kpiRecaudoMes">-</div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-lg-2">
    <div class="card kpi-card">
      <div class="card-body">
        <div class="kpi-label">Clientes / Productos</div>
        <div class="kpi-value" style="font-size:1.1rem" id="kpiClientesProductos">-</div>
      </div>
    </div>
  </div>
</div>

<div class="row g-3 mt-1">
  <div class="col-lg-6">
    <div class="card chart-card">
      <div class="card-body">
        <h6 class="mb-3">Cartera por rango de días vencidos</h6>
        <canvas id="chartCarteraRango" height="220"></canvas>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card chart-card">
      <div class="card-body">
        <h6 class="mb-3">Ventas vs. Recaudo (últimos 12 meses)</h6>
        <canvas id="chartVentasMensual" height="220"></canvas>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card chart-card">
      <div class="card-body">
        <h6 class="mb-3">Top 10 clientes por saldo pendiente</h6>
        <canvas id="chartTopClientes" height="260"></canvas>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card chart-card">
      <div class="card-body">
        <h6 class="mb-3">Ventas por vendedor (mes en curso)</h6>
        <canvas id="chartVentasVendedor" height="260"></canvas>
      </div>
    </div>
  </div>
</div>

<?php
$extraScripts = <<<HTML
<script>
const money = (v) => new Intl.NumberFormat('es-CO', {style:'currency', currency:'COP', maximumFractionDigits:0}).format(v);
const colors = ['#0d6efd','#20c997','#fd7e14','#dc3545','#6f42c1','#0dcaf0','#ffc107','#6610f2','#198754','#adb5bd'];

fetch('../api/kpi_dashboard.php').then(r => r.json()).then(d => {
  document.getElementById('kpiCarteraTotal').textContent = money(d.cartera_total);
  document.getElementById('kpiCarteraVencida').textContent = money(d.cartera_vencida);
  document.getElementById('kpiFacturasPendientes').textContent = d.facturas_pendientes;
  document.getElementById('kpiVentasMes').textContent = money(d.ventas_mes);
  document.getElementById('kpiRecaudoMes').textContent = money(d.recaudo_mes);
  document.getElementById('kpiClientesProductos').textContent = d.total_clientes + ' / ' + d.total_productos;
});

fetch('../api/chart_cartera_rango.php').then(r => r.json()).then(d => {
  new Chart(document.getElementById('chartCarteraRango'), {
    type: 'bar',
    data: { labels: d.labels, datasets: [{ label: 'Saldo', data: d.data, backgroundColor: colors }] },
    options: { plugins: { legend: { display: false } }, scales: { y: { ticks: { callback: v => money(v) } } } }
  });
});

fetch('../api/chart_ventas_mensual.php').then(r => r.json()).then(d => {
  new Chart(document.getElementById('chartVentasMensual'), {
    type: 'line',
    data: {
      labels: d.labels,
      datasets: [
        { label: 'Ventas', data: d.ventas, borderColor: '#0d6efd', backgroundColor: 'rgba(13,110,253,.15)', fill: true, tension: .3 },
        { label: 'Recaudo', data: d.recaudos, borderColor: '#20c997', backgroundColor: 'rgba(32,201,151,.15)', fill: true, tension: .3 },
      ]
    },
    options: { scales: { y: { ticks: { callback: v => money(v) } } } }
  });
});

fetch('../api/chart_top_clientes.php').then(r => r.json()).then(d => {
  new Chart(document.getElementById('chartTopClientes'), {
    type: 'bar',
    data: { labels: d.labels, datasets: [{ label: 'Saldo pendiente', data: d.data, backgroundColor: '#0d6efd' }] },
    options: { indexAxis: 'y', plugins: { legend: { display: false } }, scales: { x: { ticks: { callback: v => money(v) } } } }
  });
});

fetch('../api/chart_ventas_vendedor.php').then(r => r.json()).then(d => {
  new Chart(document.getElementById('chartVentasVendedor'), {
    type: 'doughnut',
    data: { labels: d.labels, datasets: [{ data: d.data, backgroundColor: colors }] },
  });
});
</script>
HTML;
require __DIR__ . '/../includes/footer.php';
?>
