{% extends "admin/base.html" %}
{% block page_title %}游戏选题 · {{e.title}}{% endblock %}
{% block content %}
<style>
.gc-picker .sselect{flex:1 1 300px;min-width:260px;}
.cat-filter .sselect{flex:0 0 180px;}
</style>
<div class="card-box">
  <h6>「{{e.title}}」· 游戏闯关选题</h6>
  <div class="text-muted small mb-3">每关先选「游戏形式」，下方题库自动按该形式允许的题型过滤；勾选题目分配到该关。某关没题则游戏自动跳过该关。</div>
  <form method="post">
    {% for b in buckets %}
      <div class="form-section-title mt-2 d-flex align-items-center justify-content-between flex-wrap gap-1">
        <span><i class="bi bi-controller"></i> 第{{b.round}}关</span>
        <span class="badge bg-secondary" id="cnt-{{b.round}}">0题已选</span>
      </div>
      <div class="d-flex align-items-center gap-2 mt-1 mb-1 gc-picker">
        <span class="small text-muted text-nowrap">游戏形式：</span>
        <select name="game_code_round{{b.round}}" class="form-select" onchange="filterRound({{b.round}})">
          <option value="">— 选择游戏形式 —</option>
          {% for t in templates %}
            <option value="{{t.code}}" {% if b.game_code==t.code %}selected{% endif %}>{{t.name}}（{{t.qtypes|join('·')}}）</option>
          {% endfor %}
        </select>
      </div>
      <div class="text-muted small mb-1" id="hint-{{b.round}}">请先选择游戏形式</div>
      <div class="d-flex align-items-center gap-2 mb-1 flex-wrap cat-filter">
        <span class="small text-muted text-nowrap">产品筛选：</span>
        <select class="form-select" id="catRound{{b.round}}" style="max-width:200px" onchange="filterRound({{b.round}})">
          <option value="">全部产品</option>
          {% for c in cats %}<option value="{{c}}">{{c}}</option>{% endfor %}
        </select>
        <span class="small text-muted text-nowrap">搜题干：</span>
        <input type="text" class="form-control" id="kwRound{{b.round}}" style="max-width:180px" placeholder="输入关键词…" oninput="filterRound({{b.round}})">
      </div>
      <div style="max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-bottom:8px">
        <table class="table table-sm mb-0 align-middle">
          <tbody>
          {% for q in all_q %}
            <tr data-qtype="{{q.qtype}}" data-category="{{q.category}}" data-stem="{{q.stem}}" data-round="{{b.round}}" style="display:none">
              <td style="width:40px"><input type="checkbox" class="form-check-input" name="round{{b.round}}" value="{{q.id}}" data-qtype="{{q.qtype}}" {% if assigned.get(q.id)==b.round %}checked{% endif %}></td>
              <td><span class="badge bg-info me-1">{{q.category}}</span><span class="badge bg-light me-1">{{q.qtype}}</span><span class="small">{{q.stem[:70]}}</span>
                {% if q.qtype=='配对' %}<span class="small text-muted">（{{q.opt_a}} ↔ {{q.opt_b}}）</span>{% endif %}
                {% if q.qtype=='分类' %}<span class="small text-muted">（正确分类：{{q.opt_a}}）</span>{% endif %}
              </td>
            </tr>
          {% else %}
            <tr><td colspan="2" class="text-center text-muted py-3 small">题库为空，请先到「题库管理」添加题目</td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    {% endfor %}
    <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>
  var GAME_TEMPLATES = {{templates_json|safe}};
  // 按第 r 关选中的游戏形式，过滤该关题库（仅显示允许题型，并清掉越界勾选）
  function filterRound(r){
    var sel = document.querySelector('select[name="game_code_round'+r+'"]');
    var code = sel ? sel.value : '';
    var qtypes = (code && GAME_TEMPLATES[code]) ? GAME_TEMPLATES[code].qtypes : [];
    var catSel = document.getElementById('catRound'+r);
    var cat = catSel ? catSel.value : '';
    var kwEl = document.getElementById('kwRound'+r);
    var kw = kwEl ? kwEl.value.trim().toLowerCase() : '';
    var rows = document.querySelectorAll('tr[data-round="'+r+'"]');
    var checked = 0;
    rows.forEach(function(tr){
      var cb = tr.querySelector('input[type=checkbox]');
      var okQ = qtypes.indexOf(tr.getAttribute('data-qtype')) >= 0;
      if(!okQ && cb && cb.checked){ cb.checked = false; }   // 仅题型不匹配才清勾选
      var okC = !cat || tr.getAttribute('data-category') === cat;
      var okK = !kw || (tr.getAttribute('data-stem')||'').toLowerCase().indexOf(kw) >= 0;
      tr.style.display = (okQ && okC && okK) ? '' : 'none';
      if(cb && cb.checked) checked++;
    });
    var cnt = document.getElementById('cnt-'+r); if(cnt) cnt.textContent = checked + '题已选';
    var hint = document.getElementById('hint-'+r);
    if(hint) hint.textContent = code ? ('允许题型：'+qtypes.join(' / ')) : '请先选择游戏形式';
  }
  {% for b in buckets %}filterRound({{b.round}});{% endfor %}
</script>
{% endblock %}