<?php
$active = 'kpi';
$pageTitle = 'KPI Setup';
require __DIR__ . '/../layout/admin_header.php';
?>
<div class="topbar">
  <div>
    <h1>KPI Field Setup</h1>
    <div class="crumbs">Workspace → Admin → KPI Tracker → Setup</div>
  </div>
  <div class="user-chip"><span class="dot"></span> <?= htmlspecialchars($admin['name']) ?></div>
</div>

<?php if ($flash): ?>
  <div class="alert alert-<?= $flash['type'] === 'error' ? 'error' : 'success' ?>"><?= htmlspecialchars($flash['msg']) ?></div>
<?php endif; ?>

<div class="card">
  <form method="GET" action="/admin/kpi/setup" style="margin-bottom:6px;">
    <div class="field" style="margin-bottom:0;max-width:280px;">
      <label>Department</label>
      <select name="dept" onchange="this.form.submit()" style="width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;">
        <?php foreach ($departments as $d): ?>
          <option value="<?= $d['id'] ?>" <?= $selectedDeptId === (int)$d['id'] ? 'selected' : '' ?>><?= htmlspecialchars($d['name']) ?></option>
        <?php endforeach; ?>
      </select>
    </div>
  </form>
</div>

<div class="card" style="max-width:720px;">
  <h3>KPI Fields for this Department</h3>
  <p style="color:var(--text-muted);font-size:12.5px;margin-top:-8px;">
    These fields will appear on the weekly KPI entry form for every manager/employee assigned to this department.
  </p>
  <form method="POST" action="/admin/kpi/setup/save">
    <input type="hidden" name="department_id" value="<?= $selectedDeptId ?>">
    <div id="metricRows">
      <?php foreach ($metrics as $m): ?>
        <div style="display:flex;gap:10px;margin-bottom:10px;align-items:center;" class="metric-row">
          <input type="text" name="label[]" value="<?= htmlspecialchars($m['metric_label']) ?>" placeholder="Label" style="flex:2;padding:10px;border:1px solid var(--border);border-radius:10px;">
          <input type="text" name="unit[]" value="<?= htmlspecialchars($m['unit']) ?>" placeholder="Unit (%, count...)" style="flex:1;padding:10px;border:1px solid var(--border);border-radius:10px;">
          <select name="type[]" style="flex:1;padding:10px;border:1px solid var(--border);border-radius:10px;">
            <option value="number" <?= $m['input_type'] === 'number' ? 'selected' : '' ?>>Number</option>
            <option value="percent" <?= $m['input_type'] === 'percent' ? 'selected' : '' ?>>Percent</option>
            <option value="text" <?= $m['input_type'] === 'text' ? 'selected' : '' ?>>Text</option>
          </select>
          <button type="button" class="btn-danger" onclick="this.closest('.metric-row').remove()">✕</button>
        </div>
      <?php endforeach; ?>
    </div>
    <button type="button" class="btn-secondary" onclick="addMetricRow()" style="margin-bottom:16px;">+ Add Field</button>
    <br>
    <button type="submit" class="btn-primary">Save KPI Fields</button>
  </form>
</div>

<script>
function addMetricRow(){
  const div = document.createElement('div');
  div.className = 'metric-row';
  div.style = 'display:flex;gap:10px;margin-bottom:10px;align-items:center;';
  div.innerHTML = `
    <input type="text" name="label[]" placeholder="Label" style="flex:2;padding:10px;border:1px solid var(--border);border-radius:10px;">
    <input type="text" name="unit[]" placeholder="Unit (%, count...)" style="flex:1;padding:10px;border:1px solid var(--border);border-radius:10px;">
    <select name="type[]" style="flex:1;padding:10px;border:1px solid var(--border);border-radius:10px;">
      <option value="number">Number</option>
      <option value="percent">Percent</option>
      <option value="text">Text</option>
    </select>
    <button type="button" class="btn-danger" onclick="this.closest('.metric-row').remove()">✕</button>`;
  document.getElementById('metricRows').appendChild(div);
}
</script>

<?php require __DIR__ . '/../layout/admin_footer.php'; ?>
