{% extends "admin/base.html" %}
{% block page_title %}销售看板{% endblock %}
{% block content %}
<div class="card-box" style="max-width:900px">
  <h6><i class="bi bi-graph-up-arrow"></i> 销售看板</h6>

  <div class="row g-2 mb-3">
    <div class="col-auto"><div class="card-box" style="padding:12px 18px">
      <div class="small text-muted">当前发货总金额（不含税）</div>
      <div class="num-brand" style="font-size:22px">{% if total %}{{ total }} 万元{% else %}—{% endif %}</div>
    </div></div>
    <div class="col-auto"><div class="card-box" style="padding:12px 18px">
      <div class="small text-muted">金额最近变更</div>
      <div style="font-size:14px">{% if changed_at %}{{ changed_at[:16]|replace('T',' ') }}{% else %}—{% endif %}</div>
    </div></div>
    <div class="col-auto"><div class="card-box" style="padding:12px 18px">
      <div class="small text-muted">店员访问地址</div>
      <div style="font-size:13px"><a href="https://yaocloud.win/xyxkb/xyx/kb.html" target="_blank">yaocloud.win/xyxkb/xyx/kb.html</a></div>
    </div></div>
  </div>

  {% if xyx_configured %}
  <div class="form-section-title"><i class="bi bi-cloud-upload"></i> 更新看板数据</div>
  <div class="d-flex gap-2 flex-wrap align-items-center mb-1">
    <form method="post" action="{{ url_for('admin.salesboard_upload_xls') }}" enctype="multipart/form-data" class="d-flex gap-2 align-items-center">
      <input class="form-control" type="file" name="xls" accept=".xls,.xlsx" required>
      <button class="btn btn-brand" style="white-space:nowrap"><i class="bi bi-upload"></i> 上传并重生成</button>
    </form>
  </div>
  {% else %}
  <div class="alert alert-warning small mb-3">未配置 xyx 看板目录（XYX_DIR），上传/同步功能不可用；可见范围配置仍可用。</div>
  {% endif %}

  <hr class="form-divider">
  <form method="post">
    <div class="form-section-title"><i class="bi bi-people"></i> 可见范围（谁能看到「销售看板」图标）</div>
    <div class="mb-2">
      <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="scope_mode" id="sc-all" value="all" {% if f.scope_mode!='chain' and f.scope_mode!='staff' %}checked{% endif %} onchange="syncScope()"> <label class="form-check-label" for="sc-all"><b>全员可见</b>（所有店员）</label></div>
      <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="scope_mode" id="sc-chain" value="chain" {% if f.scope_mode=='chain' %}checked{% endif %} onchange="syncScope()"> <label class="form-check-label" for="sc-chain"><b>按连锁</b>（选中连锁下的所有店员）</label></div>
      <div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="scope_mode" id="sc-staff" value="staff" {% if f.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="d-flex justify-content-between align-items-center mb-1">
        <span class="small">已选 <b id="selChainCnt">{{selected_chains|length}}</b> 个连锁</span>
        <button type="button" id="chainToggle" class="btn btn-sm btn-link p-0" onclick="toggleChain()">展开 ▼</button>
      </div>
      <div id="chainBody" style="display:none">
        <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 %} onchange="updChainCnt()"> <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>

    <div id="blk-staff" style="display:none">
      <div class="d-flex justify-content-between align-items-center mb-1">
        <span class="small">已选 <b id="selCnt">{{selected_staff|length}}</b> 人</span>
        <button type="button" id="staffToggle" class="btn btn-sm btn-link p-0" onclick="toggleStaff()">展开 ▼</button>
      </div>
      <div id="staffBody" style="display:none">
      <div class="d-flex flex-wrap gap-2 mb-2">
        <select id="fChain" class="form-select form-select-sm" style="width:auto;min-width:130px" onchange="applyFilters()">
          <option value="">全部连锁</option>
          {% for c in chains %}<option value="{{c.id}}">{{c.name}}</option>{% endfor %}
        </select>
        <select id="fProv" class="form-select form-select-sm" style="width:auto;min-width:130px"><option value="">全部省份</option></select>
        <select id="fCity" class="form-select form-select-sm" style="width:auto;min-width:130px"><option value="">全部城市</option></select>
        <input id="staffSearch" class="form-control form-control-sm" style="width:200px" placeholder="搜索姓名/手机号" oninput="applyFilters()">
      </div>
      <div style="max-height:340px;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}}" 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: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 '未分配门店'}}{% if st.province %} · {{st.province}}{% if st.city and st.city != st.province %}{{st.city}}{% endif %}{% endif %}</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-3"><button class="btn btn-brand">保存可见范围</button></div>
  </form>
</div>
{% include "admin/_region_data.html" %}
<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 applyFilters(){
  var ch=document.getElementById('fChain').value,pv=document.getElementById('fProv').value,ci=document.getElementById('fCity').value;
  var q=document.getElementById('staffSearch').value.toLowerCase();
  document.querySelectorAll('.staff-row').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 updCnt(){document.getElementById('selCnt').textContent=document.querySelectorAll('.sc:checked').length;}
function toggleStaff(){var b=document.getElementById('staffBody'),t=document.getElementById('staffToggle');var h=b.style.display==='none';b.style.display=h?'':'none';t.textContent=h?'收起 ▲':'展开 ▼';}
function toggleChain(){var b=document.getElementById('chainBody'),t=document.getElementById('chainToggle');var h=b.style.display==='none';b.style.display=h?'':'none';t.textContent=h?'收起 ▲':'展开 ▼';}
function updChainCnt(){document.getElementById('selChainCnt').textContent=document.querySelectorAll('input[name="chains"]:checked').length;}
(function(){var data=window.REGION_DATA,p=document.getElementById('fProv'),c=document.getElementById('fCity');
  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();});
  c.addEventListener('change',applyFilters);
})();
syncScope();
</script>
{% endblock %}