{% extends "admin/base.html" %}
{% block page_title %}参与人员 · {{e.title}}{% endblock %}
{% block content %}
<div class="card-box" style="max-width:820px">
  <h6>「{{e.title}}」参与人员（{% if e.mode=='game' %}游戏闯关{% else %}考试{% endif %}）</h6>
  <div class="text-muted small mb-3">设置谁能看到并参加。未在范围内的人员在前台看不到此项。</div>
  <form method="post">
    <div class="form-section-title"><i class="bi bi-people"></i> 参与范围</div>
    <div class="mb-2">
      <div class="form-check"><input class="form-check-input" type="radio" name="scope_mode" id="sc-all" value="all" {% if e.scope_mode!='chain' and e.scope_mode!='staff' %}checked{% endif %} onchange="syncScope()"> <label class="form-check-label" for="sc-all"><b>全员参加</b>（所有店员可见）</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="scope_mode" id="sc-chain" value="chain" {% if e.scope_mode=='chain' %}checked{% endif %} onchange="syncScope()"> <label class="form-check-label" for="sc-chain"><b>按连锁</b>（选中连锁下的所有店员）</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="scope_mode" id="sc-staff" value="staff" {% if e.scope_mode=='staff' %}checked{% endif %} onchange="syncScope()"> <label class="form-check-label" for="sc-staff"><b>指定人员</b>（逐个勾选）</label></div>
    </div>

    <div id="blk-chain" style="display:none">
      <div class="form-section-title mt-2"><i class="bi bi-shop-window"></i> 选择连锁</div>
      <div style="max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px 10px">
        {% for c in chains %}
          <div class="form-check"><input class="form-check-input" type="checkbox" name="chains" value="{{c.id}}" id="ch-{{c.id}}" {% if c.id in selected_chains %}checked{% endif %}> <label class="form-check-label" for="ch-{{c.id}}">{{c.name}} <span class="text-muted small">（{{chain_counts.get(c.id, 0)}} 人）</span></label></div>
        {% else %}
          <div class="text-muted small py-2">暂无连锁，请先在「连锁门店」录入</div>
        {% endfor %}
      </div>
    </div>

    <div id="blk-staff" style="display:none">
      <div class="form-section-title mt-2 d-flex justify-content-between align-items-center">
        <span><i class="bi bi-person-check"></i> 选择人员（已选 <b id="selCnt">{{selected_staff|length}}</b> 人）</span>
        <input id="staffSearch" class="form-control form-control-sm" style="width:200px" placeholder="搜索姓名/手机号" oninput="filterStaff()">
      </div>
      <div style="max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:8px">
        <table class="table table-sm mb-0 align-middle">
          <tbody>
          {% for st in staff_list %}
            <tr class="staff-row" data-kw="{{(st.name or '')|lower}} {{st.phone}}">
              <td style="width:40px"><input type="checkbox" class="form-check-input sc" name="staff_ids" value="{{st.id}}" {% if st.id in selected_staff %}checked{% endif %} onchange="updCnt()"></td>
              <td><b>{{st.name}}</b> <span class="text-muted small">{{st.phone}}</span><br><span class="small text-muted">{{st.store.chain.name if (st.store and st.store.chain) else '—'}} · {{st.store.name if st.store else '未分配门店'}}</span></td>
            </tr>
          {% else %}
            <tr><td colspan="2" class="text-center text-muted py-3 small">暂无店员</td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="mt-3"><button class="btn btn-brand">保存</button> <a href="{{url_for('admin.exams')}}" class="btn btn-outline-secondary">返回</a></div>
  </form>
</div>
<script>
function syncScope(){
  var m=document.querySelector('input[name=scope_mode]:checked').value;
  document.getElementById('blk-chain').style.display=(m==='chain')?'':'none';
  document.getElementById('blk-staff').style.display=(m==='staff')?'':'none';
}
function filterStaff(){
  var q=document.getElementById('staffSearch').value.toLowerCase();
  document.querySelectorAll('.staff-row').forEach(function(r){ r.style.display=(r.dataset.kw.indexOf(q)>=0)?'':'none'; });
}
function updCnt(){ document.getElementById('selCnt').textContent=document.querySelectorAll('.sc:checked').length; }
syncScope();
</script>
{% endblock %}