{% extends "admin/base.html" %}
{% block page_title %}门店管理{% endblock %}
{% block content %}
<style>
table.tbl td.name-col,table.tbl th.name-col,
table.tbl td.op-col,table.tbl th.op-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">
      <a href="{{url_for('admin.chains')}}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-diagram-3"></i> 连锁管理</a>
      <a href="{{url_for('admin.store_edit')}}" class="btn btn-brand btn-sm"><i class="bi bi-plus-lg"></i> 新增门店</a>
    </div>
  </div>
  <table class="table table-hover align-middle tbl">
    <thead><tr><th width="50">序号</th><th class="name-col">门店名称</th><th>所属连锁</th><th>省市</th><th>区域</th><th>编码</th><th>店员数</th><th>状态</th><th class="op-col">操作</th></tr></thead>
    <tbody>
    {% for s in stores %}
      <tr>
        <td>{{(page-1)*per_page + loop.index}}</td>
        <td class="name-col">{{s.name}}</td>
        <td>{% if s.chain %}<img src="https://staff.yaocloud.win/img/{{s.chain.name}}.png" alt="" style="width:20px;height:20px;object-fit:contain;vertical-align:middle;margin-right:5px" onerror="this.style.display='none'">{{s.chain.name}}{% else %}-{% endif %}</td>
        <td>{% if s.province %}{{s.province}} {{s.city or ''}}{% else %}-{% endif %}</td>
        <td>{{s.region or '-'}}</td><td>{{s.code or '-'}}</td><td>{{s.staff_count}}</td>
        <td>{% if s.status=='active' %}<span class="badge bg-success">正常</span>{% else %}<span class="badge bg-secondary">停用</span>{% endif %}</td>
        <td class="op-col">
          <a href="{{url_for('admin.store_edit', id=s.id)}}" class="btn btn-sm btn-outline-secondary">编辑</a>
          <form method="post" action="{{url_for('admin.store_delete', id=s.id)}}" class="d-inline"
                onsubmit="return confirm('删除门店「{{s.name}}」？其下不能有店员。')">
            <button class="btn btn-sm btn-outline-danger">删除</button>
          </form>
        </td>
      </tr>
    {% else %}
      <tr><td colspan="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="?{{base_qs}}{% if base_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="?{{base_qs}}{% if base_qs %}&{% endif %}page={{p}}">{{p}}</a></li>{% endif %}
      {% endfor %}
      <li class="page-item {% if page >= pages %}disabled{% endif %}"><a class="page-link" href="?{{base_qs}}{% if base_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 }}, '全部城市');
</script>
{% endblock %}