<?php
$pills = [
  '' => 'All',
  'OPEN' => 'Open',
  'PENDING_CUSTOMER' => 'Awaiting your reply',
  'RESOLVED_MONTH' => 'Resolved this month',
  'CLOSED' => 'Closed',
];
$activeLabel = $pills[$status] ?? status_label($status);
?>
<div class="toolbar">
  <div class="pill-tabs">
    <?php foreach ($pills as $value => $label) : ?>
      <a href="<?= url('/portal/tickets' . ($value !== '' ? '?status=' . $value : '')) ?>" class="pill-tab <?= $status === $value ? 'active' : '' ?>"><?= e($label) ?></a>
    <?php endforeach; ?>
  </div>
  <a href="<?= url('/portal/tickets/new') ?>" class="btn btn-primary">+ Raise a ticket</a>
</div>

<?php if (!array_key_exists($status, $pills)) : ?>
  <p class="text-faint text-sm" style="margin-top:-10px;margin-bottom:14px">Showing: <strong><?= e($activeLabel) ?></strong> — <a href="<?= url('/portal/tickets') ?>">clear filter</a></p>
<?php endif; ?>

<div class="card">
  <div class="card-header"><h3 class="mb-0"><?= count($tickets) ?> ticket<?= count($tickets) === 1 ? '' : 's' ?></h3></div>
  <div class="table-wrap">
    <table class="table">
      <thead><tr><th>Ticket</th><th>Subject</th><th>Priority</th><th>Status</th><th>Last update</th><th>Promised response</th></tr></thead>
      <tbody>
      <?php foreach ($tickets as $t) : ?>
        <tr>
          <td class="mono"><a class="row-link" href="<?= url('/portal/tickets/' . $t['id']) ?>"><?= e($t['ticket_no']) ?></a></td>
          <td><?= e($t['subject']) ?></td>
          <td><?= priority_badge(['code' => $t['p_code'], 'color' => $t['p_color']]) ?></td>
          <td><span class="<?= status_badge_class($t['status']) ?>"><?= status_label($t['status']) ?></span></td>
          <td class="text-sm"><?= fmt_dt($t['updated_at']) ?></td>
          <td class="text-sm"><?= fmt_dt($t['response_due_at']) ?></td>
        </tr>
      <?php endforeach; ?>
      <?php if (empty($tickets)) : ?><tr><td colspan="6"><div class="empty-state">No tickets under "<?= e($activeLabel) ?>" right now.</div></td></tr><?php endif; ?>
      </tbody>
    </table>
  </div>
</div>
