{% extends "admin/base.html" %}
{% block page_title %}店员管理{% endblock %}
{% block content %}
<style>
.staff-name-link{color:inherit;text-decoration:none}
.staff-name-link:hover{color:var(--brand);text-decoration:underline}
table.tbl td.name-col,table.tbl th.name-col,
table.tbl td.op-col,table.tbl th.op-col,
table.tbl td.pos-col,table.tbl th.pos-col{white-space:nowrap}
</style>
<div class="card-box">
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <form method="get" style="display:grid;grid-template-columns:repeat(4,1fr) auto;gap:8px;align-items:center">
      <select name="chain_id" class="form-select form-select-sm" onchange="this.form.submit()">
        <option value="">全部连锁</option>
        {% for c in chains %}<option value="{{c.id}}" {% if chain_id==c.id %}selected{% endif %}>{{c.name}}</option>{% endfor %}
      </select>
      <select id="fProv" name="province" class="form-select form-select-sm">
        <option value="">全部省份</option>
      </select>
      <select id="fCity" name="city" class="form-select form-select-sm">
        <option value="">全部城市</option>
      </select>
      <input name="q" class="form-control form-control-sm" value="{{q}}" placeholder="姓名/手机号">
      <button class="btn btn-sm btn-outline-secondary">筛选</button>
    </form>
    <div class="d-flex gap-2">
      {% if current_user.role == 'super' %}
      <button type="button" class="btn btn-outline-danger btn-sm" onclick="batchDelete()"><i class="bi bi-trash"></i> 批量删除</button>
      <form id="batchForm" method="post" action="{{url_for('admin.staff_delete_batch')}}" class="d-none">
        <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
      </form>
      <a href="{{url_for('admin.staff_trash')}}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-archive"></i> 已删除店员</a>
      {% endif %}
      <a href="{{url_for('admin.staff_import')}}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-upload"></i> 批量导入</a>
      <a href="{{url_for('admin.staff_export')}}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-download"></i> 导出</a>
      <a href="{{url_for('admin.staff_edit')}}" class="btn btn-brand btn-sm"><i class="bi bi-plus-lg"></i> 新增店员</a>
    </div>
  </div>
  <div class="mb-3">
    <div class="btn-group btn-group-sm" role="group">
      <a href="?{{active_href}}" class="btn {% if status_filter!='disabled' %}btn-brand{% else %}btn-outline-secondary{% endif %}">在岗正常</a>
      <a href="?{{disabled_href}}" class="btn {% if status_filter=='disabled' %}btn-brand{% else %}btn-outline-secondary{% endif %}">已停用</a>
    </div>
  </div>
  <table class="table table-hover align-middle tbl">
    <thead><tr>
      {% if current_user.role == 'super' %}<th style="width:32px"><input type="checkbox" onclick="toggleAll(this)"></th>{% endif %}
      <th width="50">序号</th>
      <th class="name-col">姓名</th><th>手机号</th><th>连锁</th><th>门店</th><th>省市</th><th class="pos-col">职务</th><th>积分</th><th class="op-col">操作</th>
    </tr></thead>
    <tbody>
    {% for s in staff %}
      <tr>
        {% if current_user.role == 'super' %}<td><input type="checkbox" name="ids" value="{{s.id}}"></td>{% endif %}
        <td>{{(page-1)*per_page + loop.index}}</td>
        <td class="name-col"><a href="{{url_for('admin.staff_detail', id=s.id)}}" class="staff-name-link">{{s.name}}</a></td>
        <td>{{s.phone}}</td>
        <td>{{s.store.chain.name if (s.store and s.store.chain) else '-'}}</td>
        <td>{{s.store.name if s.store else '-'}}</td>
        <td>{% if s.province %}{{s.province}} {{s.city or ''}}{% else %}-{% endif %}</td>
        <td class="pos-col">{{s.position or '-'}}</td>
        <td><b style="color:var(--brand)">{{s.points_balance}}</b></td>
        <td class="op-col">
          <a href="{{url_for('admin.staff_detail', id=s.id)}}" class="btn btn-sm btn-outline-secondary">详情</a>
          <a href="{{url_for('admin.staff_edit', id=s.id)}}" class="btn btn-sm btn-outline-secondary">编辑</a>
          <form method="post" action="{{url_for('admin.staff_toggle', id=s.id)}}" class="d-inline">
            <button class="btn btn-sm btn-outline-warning">{% if s.status=='active' %}停用{% else %}启用{% endif %}</button>
          </form>
          <form method="post" action="{{url_for('admin.staff_reset', id=s.id)}}" class="d-inline"
                onsubmit="return confirm('重置「{{s.name}}」的密码为手机号后6位？')">
            <button class="btn btn-sm btn-outline-primary">重置密码</button>
          </form>
          {% if current_user.role == 'super' %}
          <form method="post" action="{{url_for('admin.staff_delete', id=s.id)}}" class="d-inline"
                onsubmit="return confirm('确认删除店员「{{s.name}}」？（软删除，数据保留可恢复）')">
            <button class="btn btn-sm btn-outline-danger">删除</button>
          </form>
          {% endif %}
        </td>
      </tr>
    {% else %}
      <tr><td colspan="{{10 if current_user.role=='super' else 9}}" class="text-center text-muted py-4">暂无店员，点击右上角新增或批量导入</td></tr>
    {% endfor %}
    </tbody>
  </table>
  {% if pages and pages > 1 %}
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3">
    <span class="text-muted small">共 {{total}} 条 · 第 {{page}}/{{pages}} 页</span>
    <ul class="pagination pagination-sm mb-0">
      <li class="page-item {% if page <= 1 %}disabled{% endif %}"><a class="page-link" href="?{{pag_qs}}{% if pag_qs %}&{% endif %}page={{ page-1 if page>1 else 1 }}">‹</a></li>
      {% for p in range(1, pages+1) %}
        {% if p == page %}<li class="page-item active"><span class="page-link">{{p}}</span></li>
        {% else %}<li class="page-item"><a class="page-link" href="?{{pag_qs}}{% if pag_qs %}&{% endif %}page={{p}}">{{p}}</a></li>{% endif %}
      {% endfor %}
      <li class="page-item {% if page >= pages %}disabled{% endif %}"><a class="page-link" href="?{{pag_qs}}{% if pag_qs %}&{% endif %}page={{ page+1 if page<pages else pages }}">›</a></li>
    </ul>
  </div>
  {% endif %}
</div>
{% include "admin/_region_data.html" %}
<script>
initRegionPicker(document.getElementById('fProv'), document.getElementById('fCity'),
                 {{ province|tojson }}, {{ city|tojson }}, '全部城市');
function toggleAll(src){
  document.querySelectorAll('input[name=ids]').forEach(function(c){ c.checked = src.checked; });
}
function batchDelete(){
  var checked = document.querySelectorAll('input[name=ids]:checked');
  if(!checked.length){ alert('请先勾选要删除的店员'); return; }
  if(!confirm('确认批量删除选中的 ' + checked.length + ' 名店员？（软删除，数据保留可恢复）')) return;
  var f = document.getElementById('batchForm');
  f.querySelectorAll('input[name=ids]').forEach(function(e){ e.remove(); });
  checked.forEach(function(c){
    var i = document.createElement('input');
    i.type = 'hidden'; i.name = 'ids'; i.value = c.value;
    f.appendChild(i);
  });
  f.submit();
}
</script>
{% endblock %}