{% extends "admin/base.html" %}
{% block page_title %}日常管理设置{% endblock %}
{% block content %}
<div class="card-box" style="max-width:920px">
  <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.daily')}}" class="btn btn-sm btn-outline-secondary">← 返回日常管理</a>
  </div>
  <form method="post" action="{{url_for('admin.daily_settings')}}" class="mb-1">
    <div class="form-section-title"><i class="bi bi-coin"></i> 审核积分（通过发放，后台可配；所有 TAB 共用）</div>
    <div class="d-flex align-items-center gap-2">
      <span class="small">审核通过奖励</span>
      <input type="number" name="reward" value="{{reward}}" min="0" class="form-control form-control-sm" style="width:90px">
      <span class="small">积分</span>
      <button class="btn btn-sm btn-brand">保存积分</button>
    </div>
  </form>
  <div class="form-section-title mt-3"><i class="bi bi-people"></i> 各 TAB 可见范围（店员仅看到自己有权的栏目；「日常管理」图标可见 = 至少一个 TAB 可见）</div>
  <div class="text-muted small">每个 TAB 独立配置 全员 / 按连锁 / 指定人员（与「文件下载」分类范围一致）。</div>
</div>

<ul class="nav nav-pills gap-2 mb-3">
  {% for item in tab_data %}
  <li class="nav-item"><a class="nav-link {% if loop.first %}active{% endif %}" data-bs-toggle="pill" href="#pane-{{item.tab.id}}">{{item.tab.name}}</a></li>
  {% endfor %}
</ul>
<div class="tab-content">
{% for item in tab_data %}
{% set tab = item.tab %}
<div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="pane-{{tab.id}}">
<div class="card-box" id="tab-{{tab.id}}">
  <form method="post" id="scope-{{tab.id}}" action="{{url_for('admin.daily_tab_scope', id=tab.id)}}">
    <h6 class="mb-2">{{tab.name}}</h6>
    <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="scope_mode" value="all" {% if tab.scope_mode!='chain' and tab.scope_mode!='staff' %}checked{% endif %} onchange="syncScope({{tab.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 tab.scope_mode=='chain' %}checked{% endif %} onchange="syncScope({{tab.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 tab.scope_mode=='staff' %}checked{% endif %} onchange="syncScope({{tab.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-{{tab.id}}">{{item.sel_chains|length}}</b> 个连锁</span>
        <button type="button" id="chainToggle-{{tab.id}}" class="btn btn-sm btn-link p-0" onclick="toggleChain({{tab.id}})">展开 ▼</button>
      </div>
      <div id="chainBody-{{tab.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({{tab.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-{{tab.id}}">{{item.sel_staff|length}}</b> 人</span>
        <button type="button" id="staffToggle-{{tab.id}}" class="btn btn-sm btn-link p-0" onclick="toggleStaff({{tab.id}})">展开 ▼</button>
      </div>
      <div id="staffBody-{{tab.id}}" style="display:none">
      <div class="d-flex flex-wrap gap-2 mb-1">
        <select id="fChain-{{tab.id}}" class="form-select form-select-sm" style="width:auto;min-width:130px" onchange="applyFilters({{tab.id}})">
          <option value="">全部连锁</option>
          {% for c in chains %}<option value="{{c.id}}">{{c.name}}</option>{% endfor %}
        </select>
        <select id="fProv-{{tab.id}}" class="form-select form-select-sm" style="width:auto;min-width:130px"><option value="">全部省份</option></select>
        <select id="fCity-{{tab.id}}" class="form-select form-select-sm" style="width:auto;min-width:130px"><option value="">全部城市</option></select>
        <input id="fSearch-{{tab.id}}" class="form-control form-control-sm" style="width:200px" placeholder="搜索姓名/手机号" oninput="applyFilters({{tab.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-{{tab.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-{{tab.id}}" name="staff_ids" value="{{st.id}}" {% if st.id in item.sel_staff %}checked{% endif %} onchange="updCnt({{tab.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(tid){
  var form=document.getElementById('scope-'+tid);
  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 applyFilters(tid){
  var ch=document.getElementById('fChain-'+tid).value,pv=document.getElementById('fProv-'+tid).value,ci=document.getElementById('fCity-'+tid).value;
  var q=document.getElementById('fSearch-'+tid).value.toLowerCase();
  document.querySelectorAll('.staff-row-'+tid).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 toggleStaff(tid){var b=document.getElementById('staffBody-'+tid),t=document.getElementById('staffToggle-'+tid);var h=b.style.display==='none';b.style.display=h?'':'none';t.textContent=h?'收起 ▲':'展开 ▼';}
function toggleChain(tid){var b=document.getElementById('chainBody-'+tid),t=document.getElementById('chainToggle-'+tid);if(!b)return;var h=b.style.display==='none';b.style.display=h?'':'none';if(t)t.textContent=h?'收起 ▲':'展开 ▼';}
function updChainCnt(tid){var n=document.querySelectorAll('#chainBody-'+tid+' input[name=chains]:checked').length;var el=document.getElementById('selChainCnt-'+tid);if(el)el.textContent=n;}
function updCnt(tid){
  var n=document.querySelectorAll('.sc-'+tid+':checked').length;
  document.getElementById('selCnt-'+tid).textContent=n;
  if(n>0){var r=document.querySelector('#scope-'+tid+' input[value=staff]');if(r&&!r.checked){r.checked=true;syncScope(tid);}}
}
(function(){var data=window.REGION_DATA;
  {% for item in tab_data %}
  (function(tid){var p=document.getElementById('fProv-'+tid),c=document.getElementById('fCity-'+tid);
    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);applyFilters(tid);});
    c.addEventListener('change',function(){applyFilters(tid);});
  })({{item.tab.id}});
  {% endfor %}
})();
{% for item in tab_data %}syncScope({{item.tab.id}});updCnt({{item.tab.id}});{% endfor %}
// 带 #tab-<id> 锚点刷新时激活对应 TAB
document.addEventListener('DOMContentLoaded',function(){
  var m=location.hash.match(/^#tab-(\d+)$/);if(!m)return;
  var pane=document.getElementById('pane-'+m[1]);if(!pane)return;
  var link=document.querySelector('.nav-pills a[href="#pane-'+m[1]+'"]');if(link)bootstrap.Tab(link).show();
});
</script>
{% endblock %}