{% extends "admin/base.html" %}
{% block page_title %}可见范围设置{% endblock %}
{% block content %}
<div class="card-box">
  <div class="d-flex justify-content-between align-items-center mb-2">
    <h6 class="mb-0"><i class="bi bi-gear"></i> 可见范围设置</h6>
    <a href="{{url_for('admin.downloads')}}" class="btn btn-sm btn-outline-secondary">← 返回文件下载</a>
  </div>
  <div class="text-muted small">为每个下载分类配置可见范围（全员 / 按连锁 / 指定人员）。店员仅看到自己有权的分类。</div>
</div>
<ul class="nav nav-pills gap-2 mb-3">
  {% for item in cat_data %}
  <li class="nav-item"><a class="nav-link {% if loop.first %}active{% endif %}" data-bs-toggle="pill" href="#pane-{{item.cat.id}}">{{item.cat.name}}</a></li>
  {% endfor %}
</ul>
<div class="tab-content">
{% for item in cat_data %}
{% set cat = item.cat %}
<div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="pane-{{cat.id}}">
<div class="card-box" id="cat-{{cat.id}}">
  <form method="post" id="scope-{{cat.id}}" action="{{url_for('admin.downloads_category_scope', id=cat.id)}}">
    <h6 class="mb-2">{{cat.name}}</h6>
    <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="scope_mode" value="all" {% if cat.scope_mode!='chain' and cat.scope_mode!='staff' %}checked{% endif %} onchange="syncScope({{cat.id}})"> <label class="form-check-label">全员</label></div>
    <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="scope_mode" value="chain" {% if cat.scope_mode=='chain' %}checked{% endif %} onchange="syncScope({{cat.id}})"> <label class="form-check-label">按连锁</label></div>
    <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="scope_mode" value="staff" {% if cat.scope_mode=='staff' %}checked{% endif %} onchange="syncScope({{cat.id}})"> <label class="form-check-label">指定人员</label></div>

    <div class="blk-chain mt-2" style="display:none">
      <div class="d-flex justify-content-between align-items-center mb-1">
        <span class="small">已选 <b id="selChainCnt-{{cat.id}}">{{item.sel_chains|length}}</b> 个连锁</span>
        <button type="button" id="chainToggle-{{cat.id}}" class="btn btn-sm btn-link p-0" onclick="toggleChain({{cat.id}})">展开 ▼</button>
      </div>
      <div id="chainBody-{{cat.id}}" style="display:none;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}}" {% if c.id in item.sel_chains %}checked{% endif %} onchange="updChainCnt({{cat.id}})"> <label class="form-check-label">{{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 class="blk-staff mt-2" style="display:none">
      <div class="d-flex justify-content-between align-items-center mb-1">
        <span class="small">已选 <b id="selCnt-{{cat.id}}">{{item.sel_staff|length}}</b> 人</span>
        <button type="button" id="staffToggle-{{cat.id}}" class="btn btn-sm btn-link p-0" onclick="toggleDlStaff({{cat.id}})">展开 ▼</button>
      </div>
      <div id="staffBody-{{cat.id}}" style="display:none">
      <div class="d-flex flex-wrap gap-2 mb-1">
        <select id="fChain-{{cat.id}}" class="form-select form-select-sm" style="width:auto;min-width:130px" onchange="applyDlFilters({{cat.id}})">
          <option value="">全部连锁</option>
          {% for c in chains %}<option value="{{c.id}}">{{c.name}}</option>{% endfor %}
        </select>
        <select id="fProv-{{cat.id}}" class="form-select form-select-sm" style="width:auto;min-width:130px"><option value="">全部省份</option></select>
        <select id="fCity-{{cat.id}}" class="form-select form-select-sm" style="width:auto;min-width:130px"><option value="">全部城市</option></select>
        <input id="fSearch-{{cat.id}}" class="form-control form-control-sm" style="width:200px" placeholder="搜索姓名/手机号" oninput="applyDlFilters({{cat.id}})">
      </div>
      <div style="max-height:300px;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-{{cat.id}}" data-kw="{{(st.name or '')|lower}} {{st.phone}}" data-chain="{{st.store.chain.id if (st.store and st.store.chain) else ''}}" data-prov="{{st.province or ''}}" data-city="{{st.city or ''}}">
            <td style="width:36px"><input type="checkbox" class="form-check-input sc-{{cat.id}}" name="staff_ids" value="{{st.id}}" {% if st.id in item.sel_staff %}checked{% endif %} onchange="updDlCnt({{cat.id}})"></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>
    <div class="mt-2"><button class="btn btn-sm btn-brand">保存可见范围</button></div>
  </form>
</div>
</div>
{% endfor %}
</div>

{% include "admin/_region_data.html" %}
<script>
function syncScope(catId){
  var form=document.getElementById('scope-'+catId);
  var m=form.querySelector('input[name=scope_mode]:checked').value;
  form.querySelector('.blk-chain').style.display=(m==='chain')?'':'none';
  form.querySelector('.blk-staff').style.display=(m==='staff')?'':'none';
}
function applyDlFilters(catId){
  var ch=document.getElementById('fChain-'+catId).value,pv=document.getElementById('fProv-'+catId).value,ci=document.getElementById('fCity-'+catId).value;
  var q=document.getElementById('fSearch-'+catId).value.toLowerCase();
  document.querySelectorAll('.staff-row-'+catId).forEach(function(r){
    var ok=(!ch||r.dataset.chain===ch)&&(!pv||r.dataset.prov===pv)&&(!ci||r.dataset.city===ci)&&(!q||r.dataset.kw.indexOf(q)>=0);
    r.style.display=ok?'':'none';
  });
}
function toggleDlStaff(catId){var b=document.getElementById('staffBody-'+catId),t=document.getElementById('staffToggle-'+catId);var h=b.style.display==='none';b.style.display=h?'':'none';t.textContent=h?'收起 ▲':'展开 ▼';}
function toggleChain(catId){var b=document.getElementById('chainBody-'+catId),t=document.getElementById('chainToggle-'+catId);if(!b)return;var h=b.style.display==='none';b.style.display=h?'':'none';if(t)t.textContent=h?'收起 ▲':'展开 ▼';}
function updChainCnt(catId){var n=document.querySelectorAll('#chainBody-'+catId+' input[name=chains]:checked').length;var el=document.getElementById('selChainCnt-'+catId);if(el)el.textContent=n;}
function updDlCnt(catId){
  var n=document.querySelectorAll('.sc-'+catId+':checked').length;
  document.getElementById('selCnt-'+catId).textContent=n;
  if(n>0){var r=document.querySelector('#scope-'+catId+' input[value=staff]');if(r&&!r.checked){r.checked=true;syncScope(catId);}}
}
(function(){var data=window.REGION_DATA;
  {% for item in cat_data %}
  (function(catId){var p=document.getElementById('fProv-'+catId),c=document.getElementById('fCity-'+catId);
    Object.keys(data).forEach(function(k){var o=document.createElement('option');o.value=k;o.textContent=k;p.appendChild(o);});
    function fillCity(prov){c.innerHTML='<option value="">全部城市</option>';(data[prov]||[]).forEach(function(x){var o=document.createElement('option');o.value=x;o.textContent=x;c.appendChild(o);});}
    p.addEventListener('change',function(){fillCity(this.value);applyDlFilters(catId);});
    c.addEventListener('change',function(){applyDlFilters(catId);});
  })({{item.cat.id}});
  {% endfor %}
})();
{% for item in cat_data %}syncScope({{item.cat.id}});updDlCnt({{item.cat.id}});{% endfor %}
</script>
{% endblock %}