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

$pageTitle = 'Informe de Ventas y Recaudo';
$activeMenu = 'informes';
$activePage = 'ventas';
$basePath = '..';

require __DIR__ . '/../includes/header.php';
?>
<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="mb-0"><i class="bi bi-bar-chart-line"></i> Ventas por período</h4>
  <button id="btnExportar" class="btn btn-outline-success btn-sm">
    <i class="bi bi-file-earmark-excel"></i> Exportar a Excel
  </button>
</div>

<div class="card shadow-sm mb-3">
  <div class="card-body">
    <div class="row g-3">
      <div class="col-md-3">
        <label class="form-label">Desde</label>
        <input type="date" id="fDesde" class="form-control form-control-sm" value="<?= h(date('Y-m-01')) ?>">
      </div>
      <div class="col-md-3">
        <label class="form-label">Hasta</label>
        <input type="date" id="fHasta" class="form-control form-control-sm" value="<?= h(date('Y-m-d')) ?>">
      </div>
      <div class="col-md-2 d-flex align-items-end">
        <button id="btnFiltrar" class="btn btn-sm btn-primary w-100"><i class="bi bi-funnel"></i> Aplicar</button>
      </div>
    </div>
  </div>
</div>

<div class="row g-3">
  <div class="col-lg-6">
    <div class="card chart-card">
      <div class="card-body">
        <h6 class="mb-3">Ventas por vendedor</h6>
        <canvas id="chartVendedor" 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 categoría de producto</h6>
        <canvas id="chartCategoria" 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','#e83e8c','#795548'];
let chartVendedor, chartCategoria;

function cargar() {
  const desde = document.getElementById('fDesde').value;
  const hasta = document.getElementById('fHasta').value;

  fetch('../api/chart_ventas_vendedor.php?desde=' + desde + '&hasta=' + hasta).then(r => r.json()).then(d => {
    if (chartVendedor) chartVendedor.destroy();
    chartVendedor = new Chart(document.getElementById('chartVendedor'), {
      type: 'bar',
      data: { labels: d.labels, datasets: [{ label: 'Ventas', data: d.data, backgroundColor: '#0d6efd' }] },
      options: { indexAxis: 'y', plugins: { legend: { display: false } }, scales: { x: { ticks: { callback: v => money(v) } } } }
    });
  });

  fetch('../api/chart_ventas_categoria.php?desde=' + desde + '&hasta=' + hasta).then(r => r.json()).then(d => {
    if (chartCategoria) chartCategoria.destroy();
    chartCategoria = new Chart(document.getElementById('chartCategoria'), {
      type: 'pie',
      data: { labels: d.labels, datasets: [{ data: d.data, backgroundColor: colors }] },
    });
  });
}
document.getElementById('btnFiltrar').addEventListener('click', cargar);
cargar();

document.getElementById('btnExportar').addEventListener('click', function () {
  const params = new URLSearchParams({
    desde: document.getElementById('fDesde').value,
    hasta: document.getElementById('fHasta').value,
  });
  window.location.href = '../api/exportar_ventas.php?' + params.toString();
});
</script>
HTML;
require __DIR__ . '/../includes/footer.php';
?>
