<?php
// $hire, $phase, $phaseKeys, $forms, $err are provided by
// OnboardingPublicController::renderForm(). Deliberately standalone HTML
// — does NOT include workspace_header.php or any admin layout, since
// participants must never see the admin portal.
?>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hammer Head — Onboarding</title>
<style>
body{font-family:Arial,sans-serif;background:#f4f6f9;margin:0;color:#1e293b}
.wrap{max-width:800px;margin:20px auto;padding:0 16px}
.card{background:#fff;padding:20px;border-radius:10px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.fld{display:inline-block;margin:6px 12px 6px 0;min-width:220px}
label{display:block;font-size:11px;text-transform:uppercase;color:#64748b;margin-bottom:3px}
input{padding:7px;border:1px solid #cbd5e1;border-radius:6px;width:100%;box-sizing:border-box}
.err{color:#dc2626;margin-bottom:10px;padding:10px;background:#fef2f2;border-radius:8px;}
.sigpad{border:2px solid #cbd5e1;border-radius:8px;width:100%;height:100px}
.btn{background:#3b82f6;color:#fff;border:none;padding:10px 18px;border-radius:6px;cursor:pointer;font-size:14px;margin-top:20px}
</style></head><body><div class="wrap">
<h2>Welcome, <?= htmlspecialchars($hire['first'] ?? '') ?></h2>
<p>Sign each form below, then submit at the bottom.</p>
<?php if ($err): ?><div class="err"><?= htmlspecialchars($err) ?></div><?php endif; ?>
<form method="post" id="wizForm">
<input type="hidden" name="signer_name" value="<?= htmlspecialchars(onb_full_name($hire)) ?>">
<input type="hidden" name="signatures_json" id="signaturesJson" value="{}">

<?php foreach ($phaseKeys as $key):
    $form = $forms[$key];
    $body = $form['body'];
    $body = preg_replace_callback('/name="f\[([a-zA-Z0-9_]+)\]"([^>]*)>/', function($m) use ($hire) {
        $val = htmlspecialchars(onb_autofill_value($hire, $m[1]));
        $attrs = $m[2];
        if ($val !== '' && strpos($attrs, 'value=') === false) $attrs = ' value="' . $val . '"' . $attrs;
        return 'name="f[' . $m[1] . ']"' . $attrs . '>';
    }, $body);
?>
  <div class="card">
    <h3><?= htmlspecialchars($form['title']) ?></h3>
    <?= $body ?>
    <div style="margin-top:14px">
      <label>Sign here</label>
      <canvas class="sigpad" data-key="<?= htmlspecialchars($key) ?>"></canvas>
      <button type="button" class="btn" style="background:#64748b" onclick="clearPad(this)">Clear</button>
    </div>
  </div>
<?php endforeach; ?>

<button class="btn" type="submit">Submit my package</button>
</form>
</div>
<script>
const pads = {};
document.querySelectorAll('.sigpad').forEach(function(c){
  const ctx = c.getContext('2d');
  const r = c.getBoundingClientRect(); c.width = r.width; c.height = r.height;
  ctx.lineWidth = 2; ctx.strokeStyle = '#0f2038';
  let drawing = false, last = null;
  const pos = e => { const b = c.getBoundingClientRect(); const p = e.touches ? e.touches[0] : e; return {x:p.clientX-b.left,y:p.clientY-b.top}; };
  c.addEventListener('mousedown', e=>{drawing=true;last=pos(e);});
  c.addEventListener('mousemove', e=>{ if(!drawing) return; const p=pos(e); ctx.beginPath();ctx.moveTo(last.x,last.y);ctx.lineTo(p.x,p.y);ctx.stroke(); last=p; pads[c.dataset.key]=c.toDataURL('image/png'); });
  window.addEventListener('mouseup', ()=>drawing=false);
});
function clearPad(btn){ const c = btn.previousElementSibling; c.getContext('2d').clearRect(0,0,c.width,c.height); delete pads[c.dataset.key]; }
document.getElementById('wizForm').addEventListener('submit', function(){
  const sigs = {};
  Object.keys(pads).forEach(k => sigs[k] = { kind:'draw', data: pads[k], name: <?= json_encode(onb_full_name($hire)) ?>, ts: new Date().toISOString() });
  document.getElementById('signaturesJson').value = JSON.stringify(sigs);
});
</script>
</body></html>
