<?php
$statusLabel = [
    'New' => ['label' => 'New — Phase A not sent', 'color' => '#94a3b8'],
    'A_sent' => ['label' => 'Phase A sent — awaiting applicant', 'color' => '#3b82f6'],
    'A_done' => ['label' => 'Phase A done — I-9 §2 due from HR', 'color' => '#f59e0b'],
    'I9_done' => ['label' => 'I-9 verified — mark training complete', 'color' => '#8b5cf6'],
    'Training' => ['label' => 'Training done — ready for Phase B', 'color' => '#0ea5e9'],
    'B_sent' => ['label' => 'Phase B sent — awaiting applicant', 'color' => '#3b82f6'],
    'Final' => ['label' => 'Complete — all documents on file', 'color' => '#16a34a'],
];
?>
<!DOCTYPE html><html><head><meta charset="utf-8">
<style>
  body{margin:0;font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:13px;color:#1e293b;background:#fff;}
  .row{border-bottom:1px solid #eef1f4;padding:12px 4px;}
  .row:last-child{border-bottom:none;}
  .name{font-weight:700;font-size:14px;}
  .meta{color:#64748b;font-size:12px;margin-top:1px;}
  .pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;margin-top:6px;}
  .steps{display:flex;gap:4px;margin-top:8px;}
  .step{flex:1;height:5px;border-radius:3px;background:#e5e9ee;}
  .step.done{background:#16a34a;}
  .step.current{background:#f59e0b;}
  .docs{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
  .doc-link{font-size:11px;color:#2563eb;text-decoration:none;background:#eff6ff;padding:3px 8px;border-radius:6px;}
  .doc-link:hover{background:#dbeafe;}
  .empty{color:#94a3b8;padding:20px 4px;text-align:center;}
  .activity{margin-top:16px;padding-top:12px;border-top:2px solid #f1f4f7;}
  .activity h4{font-size:12px;text-transform:uppercase;color:#64748b;margin:0 0 8px;}
  .activity-item{font-size:12px;padding:6px 0;border-bottom:1px solid #f5f7f9;}
  .activity-item .who{color:#94a3b8;font-size:11px;}
</style></head>
<body>

<?php if (empty($hires)): ?>
  <div class="empty">No hires yet. Click "Open Employee Onboarding" to add one.</div>
<?php else: ?>
  <?php
  $stepOrder = ['New', 'A_sent', 'A_done', 'I9_done', 'Training', 'B_sent', 'Final'];
  foreach ($hires as $h):
      $status = $h['status'];
      $info = $statusLabel[$status] ?? ['label' => $status, 'color' => '#94a3b8'];
      $stepIdx = array_search($status, $stepOrder);
  ?>
  <div class="row">
    <div class="name"><?= htmlspecialchars(trim($h['first'] . ' ' . $h['last'])) ?></div>
    <div class="meta"><?= htmlspecialchars($h['position'] ?: '') ?> · <?= htmlspecialchars($h['site'] ?: '') ?> · <?= htmlspecialchars($h['email'] ?: '') ?></div>
    <div class="pill" style="background:<?= $info['color'] ?>;"><?= htmlspecialchars($info['label']) ?></div>
    <div class="steps">
      <?php foreach ($stepOrder as $i => $s): ?>
        <div class="step <?= ($i < $stepIdx || ($i === $stepIdx && $status === 'Final')) ? 'done' : ($i === $stepIdx ? 'current' : '') ?>" title="<?= htmlspecialchars($s) ?>"></div>
      <?php endforeach; ?>
    </div>
    <?php if (!empty($h['documents']) || !empty($h['pdfs'])): ?>
      <div class="docs">
        <?php foreach (($h['documents'] ?? []) as $d): ?>
          <a class="doc-link" href="<?= htmlspecialchars($d['url']) ?>" target="_blank" rel="noopener">📄 <?= htmlspecialchars($d['title']) ?></a>
        <?php endforeach; ?>
        <?php foreach (($h['pdfs'] ?? []) as $f): ?>
          <a class="doc-link" href="<?= htmlspecialchars($f['url']) ?>" target="_blank" rel="noopener">📄 <?= htmlspecialchars($f['title']) ?></a>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>
  <?php endforeach; ?>
<?php endif; ?>

<script>
// Tell the parent page (project.php) how tall this content actually is,
// so the iframe can size itself instead of showing a fixed, possibly-too-short box.
window.parent.postMessage({type:'onb-embed-resize', height: document.body.scrollHeight}, '*');
</script>
</body></html>
