<?php
global $db, $config;
$basePath = rtrim(($config['app']['base_path'] ?? ''), '/');

$q = trim((string)($_GET['q'] ?? ''));
$params = [];
$sql = "SELECT id, name, contact_person, phone, email, kra_pin, address, created_at
        FROM customers ";
if ($q !== '') {
  $sql .= "WHERE name LIKE ? OR contact_person LIKE ? OR phone LIKE ? OR email LIKE ? OR kra_pin LIKE ? ";
  $like = '%' . $q . '%';
  $params = [$like,$like,$like,$like,$like];
}
$sql .= "ORDER BY id DESC LIMIT 800";
$stmt = $db->prepare($sql);
$stmt->execute($params);
$rows = $stmt->fetchAll();
?>

<div class="flex items-center justify-between mb-4">
  <div>
    <h1 class="text-2xl font-semibold">Customers</h1>
    <div class="text-xs text-white/70">Used for both Consignees and Billing Parties.</div>
  </div>
  <a class="px-4 py-2 rounded-2xl bg-white text-wsc-700 font-semibold hover:bg-white/90 transition"
     href="<?= h($basePath) ?>/customers/new" data-nav>New Customer</a>
</div>

<form class="glass rounded-3xl p-4 mb-4 flex gap-2 items-center"
      onsubmit="event.preventDefault();
                const v=this.q.value;
                const base=<?= json_encode($basePath, JSON_UNESCAPED_SLASHES) ?>;
                const url=(base?base:'') + '/customers' + (v?('?q='+encodeURIComponent(v)):'');
                window.loadPartial ? loadPartial(url,true) : (location.href=url);">
  <input name="q" value="<?= h($q) ?>" placeholder="Search name / contact / phone / email / KRA PIN…"
         class="flex-1 px-4 py-3 rounded-2xl bg-white/15 border border-white/20 outline-none" />
  <button class="px-4 py-3 rounded-2xl bg-white/15 hover:bg-white/20 transition">Search</button>
</form>

<div class="glass rounded-3xl overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-white/10">
      <tr class="text-left">
        <th class="p-3">Name</th>
        <th class="p-3">Contact Person</th>
        <th class="p-3">Phone</th>
        <th class="p-3">Email</th>
        <th class="p-3">KRA PIN</th>
        <th class="p-3">Actions</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($rows as $r): ?>
        <tr class="border-t border-white/10 hover:bg-white/5">
          <td class="p-3 font-medium"><?= h($r['name']) ?></td>
          <td class="p-3"><?= h($r['contact_person']) ?></td>
          <td class="p-3"><?= h($r['phone']) ?></td>
          <td class="p-3"><?= h($r['email']) ?></td>
          <td class="p-3"><?= h($r['kra_pin']) ?></td>
          <td class="p-3">
            <div class="flex flex-wrap gap-2">
              <a class="px-3 py-2 rounded-2xl bg-white/15 hover:bg-white/20 transition"
                 href="<?= h($basePath) ?>/customers/edit?id=<?= (int)$r['id'] ?>" data-nav>Edit</a>

              <form action="<?= h($basePath) ?>/api/customers/delete" method="post" data-ajax
                    onsubmit="return confirm('Delete this customer permanently?');">
                <input type="hidden" name="id" value="<?= (int)$r['id'] ?>" />
                <button class="px-3 py-2 rounded-2xl bg-white/15 hover:bg-white/20 transition">Delete</button>
              </form>
            </div>
          </td>
        </tr>
      <?php endforeach; ?>
      <?php if (!$rows): ?>
        <tr><td class="p-4 text-white/80" colspan="6">No customers found.</td></tr>
      <?php endif; ?>
    </tbody>
  </table>
</div>