<div class="row g-3">
  <div class="col-lg-5">
    <div class="card"><div class="card-header"><i class="bi bi-bullseye me-1"></i>Tetapkan Target ACP</div>
      <form method="post" action="<?= url('/acp/target') ?>" class="card-body">
        <?= csrf() ?>
        <div class="mb-2"><label class="form-label required" for="t_scope">Lingkup</label>
          <select class="form-select" id="t_scope" name="scope" required>
            <option value="global">Seluruh Perusahaan</option>
            <option value="area">Per Area</option>
            <option value="business_unit">Per Unit Bisnis</option>
            <option value="salesperson">Per Sales</option>
            <option value="job_category">Per Kategori Pekerjaan</option>
          </select></div>
        <div class="mb-2 d-none" id="wrapScopeId"><label class="form-label" for="t_scope_id">Pilih</label>
          <select class="form-select" id="t_scope_id" name="scope_id"></select></div>
        <div class="row g-2 mb-2">
          <div class="col-6"><label class="form-label required" for="t_year">Tahun</label>
            <input type="number" class="form-control" id="t_year" name="period_year" min="2000" max="2100" value="<?= (int)$tahun ?>" required></div>
          <div class="col-6"><label class="form-label" for="t_month">Bulan</label>
            <select class="form-select" id="t_month" name="period_month"><option value="0">Seluruh Tahun</option>
              <?php foreach (App\Core\Dates::BULAN as $m=>$nm): ?><option value="<?= $m ?>"><?= e($nm) ?></option><?php endforeach; ?></select></div>
        </div>
        <div class="row g-2 mb-3">
          <div class="col-6"><label class="form-label required" for="t_days">Target (hari)</label>
            <input type="number" class="form-control" id="t_days" name="target_days" min="1" max="365" step="0.5" value="45" required></div>
          <div class="col-6"><label class="form-label" for="t_tol">Toleransi (hari)</label>
            <input type="number" class="form-control" id="t_tol" name="tolerance_days" min="0" max="90" step="0.5" value="5"></div>
        </div>
        <div class="mb-3"><label class="form-label" for="t_notes">Catatan</label>
          <input type="text" class="form-control" id="t_notes" name="notes" maxlength="255"></div>
        <button class="btn btn-primary w-100" type="submit"><i class="bi bi-check-lg me-1"></i>Simpan Target</button>
        <div class="form-text mt-2">Indikator: <span class="badge bg-success">Hijau</span> memenuhi target ·
          <span class="badge bg-warning">Kuning</span> dalam toleransi · <span class="badge bg-danger">Merah</span> di bawah target.</div>
      </form>
    </div>
  </div>
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header"><i class="bi bi-list-check me-1"></i>Target Tahun <?= (int)$tahun ?>
        <div class="card-actions">
          <form method="get" class="d-flex gap-1"><input type="number" class="form-control form-control-sm" name="tahun" value="<?= (int)$tahun ?>" style="width:100px">
            <button class="btn btn-sm btn-light">Tampilkan</button></form>
        </div>
      </div>
      <div class="table-wrap"><table class="table table-hover table-sm mb-0">
        <thead><tr><th>Lingkup</th><th>Nama</th><th class="ctr">Periode</th><th class="num">Target</th><th class="num">Toleransi</th><th>Catatan</th><th class="ctr">Aksi</th></tr></thead>
        <tbody>
        <?php if (!$targets): ?><tr><td colspan="7"><div class="empty-state"><i class="bi bi-bullseye"></i>Belum ada target untuk tahun ini.</div></td></tr><?php endif; ?>
        <?php foreach ($targets as $t): ?>
          <tr>
            <td><?= e(['global'=>'Perusahaan','area'=>'Area','business_unit'=>'Unit Bisnis','customer'=>'Customer','salesperson'=>'Sales','job_category'=>'Kategori'][$t['scope']] ?? $t['scope']) ?></td>
            <td><?= e($t['scope_label']) ?></td>
            <td class="ctr"><?= $t['period_month'] ? e(App\Core\Dates::monthName((int)$t['period_month'])) : 'Seluruh Tahun' ?></td>
            <td class="num cell-strong"><?= nf($t['target_days'],1) ?> hari</td>
            <td class="num"><?= nf($t['tolerance_days'],1) ?> hari</td>
            <td class="small text-body-secondary"><?= e(truncate($t['notes'],36)) ?></td>
            <td class="ctr">
              <?php if (can('acp','edit')): ?>
              <form method="post" action="<?= url('/acp/target/hapus') ?>"><?= csrf() ?>
                <input type="hidden" name="id" value="<?= (int)$t['id'] ?>">
                <button class="btn btn-sm btn-light py-0 px-1 text-danger" data-konfirmasi="Hapus target ini?"><i class="bi bi-trash"></i></button></form>
              <?php endif; ?>
            </td>
          </tr>
        <?php endforeach; ?>
        </tbody></table></div>
    </div>
  </div>
</div>
<?php viewStart('scripts'); ?>
<script>
(function(){
  const DATA = {
    area: <?= json_encode($areas, JSON_UNESCAPED_UNICODE) ?>,
    business_unit: <?= json_encode($bus, JSON_UNESCAPED_UNICODE) ?>,
    salesperson: <?= json_encode($salespersons, JSON_UNESCAPED_UNICODE) ?>,
    job_category: <?= json_encode($jobCats, JSON_UNESCAPED_UNICODE) ?>
  };
  const sc = document.getElementById('t_scope'), wrap = document.getElementById('wrapScopeId'), sel = document.getElementById('t_scope_id');
  sc.addEventListener('change', function(){
    const d = DATA[this.value];
    if (!d) { wrap.classList.add('d-none'); sel.innerHTML=''; return; }
    wrap.classList.remove('d-none');
    sel.innerHTML = d.map(x => '<option value="'+x.id+'">'+x.name+'</option>').join('');
  });
})();
</script>
<?php viewStop(); ?>
