{% extends "admin/base.html" %}
{% block page_title %}选题 · {{e.title}}{% endblock %}
{% block content %}
<style>.cat-filter .sselect{flex:0 0 170px;}</style>
<div class="card-box">
  <h6>「{{e.title}}」选题（已选 <span id="selCnt">{{selected|length}}</span> 题）</h6>
  <form method="post">
    <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="catFilter" onchange="filterExamQ()">
        <option value="">全部产品</option>
        {% for c in cats %}<option value="{{c}}">{{c}}</option>{% endfor %}
      </select>
      <span class="small text-muted text-nowrap">题型：</span>
      <select class="form-select" id="qtypeFilter" onchange="filterExamQ()">
        <option value="">全部题型</option>
        {% for qt in qtypes %}<option value="{{qt}}">{{qt}}</option>{% endfor %}
      </select>
      <span class="small text-muted text-nowrap">搜题干：</span>
      <input type="text" class="form-control" id="kwFilter" style="max-width:180px" placeholder="输入关键词…" oninput="filterExamQ()">
    </div>
    <div class="mb-2">
      <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleAll(true)">全选可见</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleAll(false)">全不选</button>
    </div>
    <div style="max-height:520px;overflow:auto;border:1px solid var(--line);border-radius:8px">
      <table class="table table-sm mb-0 align-middle">
        <tbody>
        {% for q in all_q %}
          <tr data-category="{{q.category}}" data-qtype="{{q.qtype}}" data-stem="{{q.stem}}">
            <td style="width:40px"><input type="checkbox" class="qchk form-check-input" name="qids" value="{{q.id}}" {% if q.id in selected %}checked{% endif %} onchange="updateSelCnt()"></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[:80]}}</span></td>
          </tr>
        {% else %}
          <tr><td colspan="2" class="text-center text-muted py-4">题库为空，请先到「题库管理」添加或导入题目</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </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 filterExamQ(){
  var cat=document.getElementById('catFilter').value;
  var qt=document.getElementById('qtypeFilter').value;
  var kw=(document.getElementById('kwFilter').value||'').trim().toLowerCase();
  document.querySelectorAll('table tbody tr').forEach(function(tr){
    if(!tr.dataset.category)return;
    var okC=!cat||tr.dataset.category===cat;
    var okT=!qt||tr.dataset.qtype===qt;
    var okK=!kw||(tr.dataset.stem||'').toLowerCase().indexOf(kw)>=0;
    tr.style.display=(okC&&okT&&okK)?'':'none';
  });
}
function toggleAll(on){
  document.querySelectorAll('table tbody tr').forEach(function(tr){
    if(tr.style.display==='none')return;
    var cb=tr.querySelector('.qchk');if(cb)cb.checked=on;
  });
  updateSelCnt();
}
function updateSelCnt(){
  var n=document.querySelectorAll('.qchk:checked').length;
  var el=document.getElementById('selCnt');if(el)el.textContent=n;
}
</script>
{% endblock %}