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

$q = trim((string)($_GET['q'] ?? ''));
$params = [];
$sql = "
  SELECT id, name, is_active
  FROM shipping_lines
";

if ($q !== '') {
  $sql .= " WHERE name LIKE ? ";
  $params[] = '%' . $q . '%';
}

$sql .= " ORDER BY name ASC LIMIT 300";

$stmt = $db->prepare($sql);
$stmt->execute($params);
$rows = $stmt->fetchAll();
?>

<div class="max-w-5xl">
  <div class="flex items-center justify-between mb-4">
    <div>
      <h1 class="text-2xl font-semibold text-ink-900">Shipping Lines</h1>
      <div class="text-sm text-ink-600 mt-1">Create and search shipping lines used when capturing Master BLs.</div>
    </div>
  </div>

  <!-- Create -->
  <div class="glass rounded-3xl p-5 mb-4">
    <div class="flex items-center justify-between mb-3">
      <div class="font-semibold text-ink-900">Add Shipping Line</div>
      <div class="text-xs text-ink-500">Create a carrier once, then reuse it in all MBL forms.</div>
    </div>

    <form class="grid md:grid-cols-4 gap-3"
          action="<?= h($basePath) ?>/api/shipping-lines/create"
          method="post"
          data-ajax
          data-refresh="1">

      <div class="md:col-span-3">
        <label class="form-label">Shipping Line Name</label>
        <input name="name"
               required
               class="mt-1 w-full px-3 py-2 rounded-2xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400"
               placeholder="e.g. Maersk, MSC, CMA CGM, Evergreen..." />
      </div>

      <div class="flex items-end">
        <button class="btn-primary px-5 py-2 rounded-2xl transition w-full">
          Save Shipping Line
        </button>
      </div>
    </form>
  </div>

  <!-- Search -->
  <div class="glass rounded-3xl p-5 mb-4">
    <form class="grid md:grid-cols-5 gap-3"
          onsubmit="event.preventDefault();
                    const q=this.q.value.trim();
                    const base=<?= json_encode($basePath, JSON_UNESCAPED_SLASHES) ?>;
                    const url=(base?base:'') + '/shipping-lines' + (q?('?q='+encodeURIComponent(q)):'');
                    window.loadPartial ? loadPartial(url,true) : (location.href=url);">

      <div class="md:col-span-4">
        <label class="form-label">Search Shipping Lines</label>
        <input name="q"
               value="<?= h($q) ?>"
               class="mt-1 w-full px-3 py-2 rounded-2xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400"
               placeholder="Type part of the shipping line name..." />
      </div>

      <div class="flex items-end gap-2">
        <button class="px-4 py-2 rounded-2xl bg-white border border-orange-200 text-orange-700 hover:bg-orange-50 transition w-full">
          Search
        </button>
      </div>
    </form>
  </div>

  <!-- List -->
  <div class="glass rounded-3xl overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-ink-100 text-ink-700">
          <tr class="text-left">
            <th class="p-3 font-semibold">ID</th>
            <th class="p-3 font-semibold">Shipping Line</th>
            <th class="p-3 font-semibold">Status</th>
          </tr>
        </thead>

        <tbody class="text-ink-900">
          <?php foreach ($rows as $r): ?>
            <tr class="border-t border-ink-200 hover:bg-ink-50/70">
              <td class="p-3"><?= (int)$r['id'] ?></td>
              <td class="p-3 font-medium"><?= h($r['name']) ?></td>
              <td class="p-3">
                <?php if ((int)$r['is_active'] === 1): ?>
                  <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800 border border-orange-200">
                    Active
                  </span>
                <?php else: ?>
                  <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-slate-100 text-slate-700 border border-slate-200">
                    Inactive
                  </span>
                <?php endif; ?>
              </td>
            </tr>
          <?php endforeach; ?>

          <?php if (!$rows): ?>
            <tr>
              <td colspan="3" class="p-4 text-ink-500">
                <?= $q !== '' ? 'No shipping lines matched your search.' : 'No shipping lines yet.' ?>
              </td>
            </tr>
          <?php endif; ?>
        </tbody>
      </table>
    </div>
  </div>
</div>