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

$pageTitle = 'Consulta de Clientes';
$activeMenu = 'consultas';
$activePage = 'clientes';
$basePath = '..';

$conn = db();
$ciudades = $conn->query('SELECT DISTINCT ciudad FROM clientes WHERE ciudad IS NOT NULL ORDER BY ciudad');
$tipologias = $conn->query('SELECT DISTINCT tipologia FROM clientes WHERE tipologia IS NOT NULL ORDER BY tipologia');
$vendedores = $conn->query('SELECT cod_vendedor, nombre FROM vendedores ORDER BY nombre');

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-people"></i> Clientes</h4>
</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">Vendedor</label>
        <select id="fVendedor" class="form-select form-select-sm">
          <option value="">Todos</option>
          <?php while ($v = $vendedores->fetch_assoc()): ?>
          <option value="<?= h($v['cod_vendedor']) ?>"><?= h($v['nombre']) ?></option>
          <?php endwhile; ?>
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label">Ciudad</label>
        <select id="fCiudad" class="form-select form-select-sm">
          <option value="">Todas</option>
          <?php while ($c = $ciudades->fetch_assoc()): ?>
          <option value="<?= h($c['ciudad']) ?>"><?= h($c['ciudad']) ?></option>
          <?php endwhile; ?>
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label">Tipología</label>
        <select id="fTipologia" class="form-select form-select-sm">
          <option value="">Todas</option>
          <?php while ($t = $tipologias->fetch_assoc()): ?>
          <option value="<?= h($t['tipologia']) ?>"><?= h($t['tipologia']) ?></option>
          <?php endwhile; ?>
        </select>
      </div>
    </div>
  </div>
</div>

<div class="card shadow-sm">
  <div class="card-body">
    <table id="tblClientes" class="table table-striped table-hover align-middle w-100">
      <thead>
        <tr>
          <th>Código</th><th>Nombre</th><th>Nombre negocio</th><th>NIT</th><th>Teléfono</th>
          <th>Ciudad</th><th>Barrio</th><th>Tipología</th><th>Vendedor</th><th>Ruta</th><th>Días cartera</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

<?php
$extraScripts = <<<HTML
<script>
let table = initServerTable('#tblClientes', '../api/datatable_clientes.php', [
  {data: 0}, {data: 1}, {data: 2}, {data: 3}, {data: 4},
  {data: 5}, {data: 6}, {data: 7}, {data: 8}, {data: 9}, {data: 10}
], function () {
  return {
    cod_vendedor: document.getElementById('fVendedor').value,
    ciudad: document.getElementById('fCiudad').value,
    tipologia: document.getElementById('fTipologia').value,
  };
});
['fVendedor', 'fCiudad', 'fTipologia'].forEach(function (id) {
  document.getElementById(id).addEventListener('change', function () { table.ajax.reload(); });
});
</script>
HTML;
require __DIR__ . '/../includes/footer.php';
?>
