{% extends "admin/base.html" %}
{% block page_title %}{% if is_new %}新增店员{% else %}编辑店员{% endif %}{% endblock %}
{% block content %}
<div class="card-box" style="max-width:640px">
  <form method="post">
    <div class="form-section-title"><i class="bi bi-person-plus"></i> 店员信息</div>
    <div class="mb-3"><label class="form-label">姓名 *</label><input name="name" class="form-control" value="{{s.name or ''}}" required></div>
    <div class="mb-3"><label class="form-label">手机号 *</label><input name="phone" class="form-control" value="{{s.phone or ''}}" required></div>
    <div class="row g-3">
      <div class="col-md-5"><label class="form-label">所属连锁 *</label>
        <select name="chain_id" class="form-select" required>
          <option value="">请选择连锁</option>
          {% for c in chains %}<option value="{{c.id}}" {% if s.store and s.store.chain_id==c.id %}selected{% endif %}>{{c.name}}</option>{% endfor %}
        </select>
      </div>
      <div class="col-md-7"><label class="form-label">所属门店 *</label>
        <input name="store_name" class="form-control" value="{{ s.store.name if s.store else '' }}" placeholder="输入门店名称，不存在自动新建" required>
      </div>
    </div>
    <div class="row g-3 mt-0">
      <div class="col-md-6"><label class="form-label">省份 *</label>
        <select id="fProv" name="province" class="form-select" required>
          <option value="">请选择省份</option>
        </select>
      </div>
      <div class="col-md-6"><label class="form-label">城市 *</label>
        <select id="fCity" name="city" class="form-select" required>
          <option value="">请选择城市</option>
        </select>
      </div>
    </div>
    <div class="mb-3 mt-3"><label class="form-label">职务</label>
      <select id="positionSel" class="form-select">
        {% for p in positions %}<option value="{{p}}" {% if s.position==p %}selected{% endif %}>{{p}}</option>{% endfor %}
        <option value="__other__" {% if s.position and s.position not in positions %}selected{% endif %}>其他</option>
      </select>
      <input type="text" id="positionOther" class="form-control mt-2" placeholder="请输入自定义职务"
             value="{{ s.position if (s.position and s.position not in positions) else '' }}"
             style="{% if s.position and s.position not in positions %}{% else %}display:none{% endif %}">
      <input type="hidden" name="position" id="positionHidden" value="{{ s.position or '' }}">
    </div>
    <hr class="form-divider">
    <div class="form-section-title"><i class="bi bi-shield-lock"></i> 密码与状态</div>
    <div class="mb-3"><label class="form-label">{% if is_new %}初始密码（留空=手机号后6位）{% else %}重设密码（留空不修改）{% endif %}</label>
      <input name="password" class="form-control" type="password" placeholder="留空使用默认"></div>
    <div class="mb-3"><label class="form-label">状态</label>
      <select name="status" class="form-select">
        <option value="active" {% if s.status=='active'%}selected{% endif %}>正常</option>
        <option value="disabled" {% if s.status=='disabled'%}selected{% endif %}>停用</option>
      </select>
    </div>
    <button class="btn btn-brand">保存</button>
    <a href="{{url_for('admin.staff_list')}}" class="btn btn-outline-secondary">返回</a>
  </form>
</div>
{% include "admin/_region_data.html" %}
<script>
initRegionPicker(document.getElementById('fProv'), document.getElementById('fCity'),
                 {{ s.province|tojson }}, {{ s.city|tojson }}, '请选择城市');
(function () {
  var sel = document.getElementById('positionSel');
  var other = document.getElementById('positionOther');
  var hidden = document.getElementById('positionHidden');
  function sync() {
    if (sel.value === '__other__') {
      other.style.display = '';
      hidden.value = other.value.trim();
    } else {
      other.style.display = 'none';
      hidden.value = sel.value;
    }
  }
  sel.addEventListener('change', sync);
  other.addEventListener('input', sync);
  sync();
})();
</script>
{% endblock %}