<?php
require_once __DIR__ . '/../../admin/_nav.php';
$pageTitle  = 'Competency Ratings';
$sidebarNav = adminNav();
$u = function($p) { return \Core\View::url($p); };
$ratingColors = ['EE'=>'badge-success','ME'=>'badge-info','AE'=>'badge-warning','BE'=>'badge-danger'];
?>
<div class="page-header">
  <div><h1><i class="bi bi-stars"></i> Key Competency Ratings</h1><p>Rate learners on CBC core competencies</p></div>
</div>

<!-- Filter -->
<div class="card" style="margin-bottom:20px">
  <div class="card-body" style="padding:14px">
    <form method="GET" style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
      <div class="form-group" style="margin:0;flex:1;min-width:160px">
        <label>Term</label>
        <select name="term_id">
          <option value="">Select Term</option>
          <?php foreach($terms as $t): ?>
          <option value="<?= $t['id'] ?>" <?= $t['id']==$termId?'selected':'' ?>><?= htmlspecialchars($t['year_name'].' - '.$t['name']) ?></option>
          <?php endforeach; ?>
        </select>
      </div>
      <div class="form-group" style="margin:0;flex:1;min-width:160px">
        <label>Stream</label>
        <select name="stream_id">
          <option value="">Select Stream</option>
          <?php foreach($streams as $s): ?>
          <option value="<?= $s['id'] ?>" <?= $s['id']==$streamId?'selected':'' ?>><?= htmlspecialchars($s['full_name']) ?></option>
          <?php endforeach; ?>
        </select>
      </div>
      <button type="submit" class="btn btn-primary">Load Learners</button>
    </form>
  </div>
</div>

<?php if(!empty($students) && !empty($competencies)): ?>
<div class="card">
  <div class="card-header">
    <h5>Rate <?= count($students) ?> Learners — <?= count($competencies) ?> Competencies</h5>
    <div style="display:flex;gap:6px">
      <?php foreach(['EE'=>'success','ME'=>'info','AE'=>'warning','BE'=>'danger'] as $r=>$c): ?>
      <span class="badge badge-<?= $c ?>"><?= $r ?></span>
      <?php endforeach; ?>
    </div>
  </div>
  <form method="POST" action="<?= $u('admin/competency/save') ?>">
    <?= \Core\View::csrf() ?>
    <input type="hidden" name="term_id" value="<?= $termId ?>">
    <input type="hidden" name="stream_id" value="<?= $streamId ?>">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th style="min-width:160px">Learner</th>
            <?php foreach($competencies as $c): ?>
            <th style="min-width:110px;font-size:11px"><?= htmlspecialchars($c['code']) ?><br><span style="font-weight:400;color:var(--gray)"><?= htmlspecialchars(substr($c['name'],0,18)) ?>...</span></th>
            <?php endforeach; ?>
          </tr>
        </thead>
        <tbody>
          <?php foreach($students as $s): ?>
          <tr>
            <td>
              <div style="font-weight:500;font-size:13px"><?= htmlspecialchars($s['name']) ?></div>
              <div style="font-size:11px;color:var(--gray)"><?= htmlspecialchars($s['assessment_no']) ?></div>
            </td>
            <?php foreach($competencies as $c): ?>
            <?php $current = $ratings[$s['id']][$c['id']] ?? ''; ?>
            <td>
              <select name="ratings[<?= $s['id'] ?>][<?= $c['id'] ?>]" class="rating-select" style="width:80px;padding:5px 6px;font-size:12px;border-radius:6px" data-val="<?= $current ?>">
                <option value="">-</option>
                <?php foreach(['EE','ME','AE','BE'] as $r): ?>
                <option value="<?= $r ?>" <?= $current===$r?'selected':'' ?>><?= $r ?></option>
                <?php endforeach; ?>
              </select>
            </td>
            <?php endforeach; ?>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
    <div style="padding:16px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center">
      <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Save All Ratings</button>
      <button type="button" onclick="fillAll('ME')" class="btn btn-secondary btn-sm">Fill All ME</button>
      <span style="font-size:12px;color:var(--gray)">Tip: Use Tab to move between cells quickly</span>
    </div>
  </form>
</div>
<?php elseif($streamId || $termId): ?>
<div class="card"><div class="card-body" style="text-align:center;padding:40px;color:var(--gray)">Select both a term and stream to load learners.</div></div>
<?php endif; ?>

<!-- Competency Legend -->
<div class="card">
  <div class="card-header"><h5>CBC Key Competencies Reference</h5></div>
  <div class="card-body">
    <div class="grid g2">
      <?php foreach($competencies as $c): ?>
      <div style="display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border)">
        <span class="badge badge-info" style="flex-shrink:0"><?= htmlspecialchars($c['code']) ?></span>
        <div><div style="font-weight:500;font-size:13px"><?= htmlspecialchars($c['name']) ?></div></div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>

<?php $extraScripts = '<script>
// Color-code selects based on value
function colorSelect(sel){
  const colors={EE:"#d1fae5",ME:"#dbeafe",AE:"#fef3c7",BE:"#fee2e2","":"#fff"};
  sel.style.background=colors[sel.value]||"#fff";
}
document.querySelectorAll(".rating-select").forEach(s=>{colorSelect(s);s.addEventListener("change",()=>colorSelect(s));});
function fillAll(val){document.querySelectorAll(".rating-select").forEach(s=>{if(!s.value){s.value=val;colorSelect(s);}});}
</script>'; ?>

