{% extends "base.html" %}
{% block body %}
<h1 class="page">供应商管理</h1>
<div class="card">
  <h2>新增供应商</h2>
  <form method="post">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="form-grid">
      <div><label>编号</label><input type="text" name="code" placeholder="S003"></div>
      <div><label>名称 *</label><input type="text" name="name" required></div>
      <div><label>公司简称（用于 PDF 文件名）</label><input type="text" name="short_name" maxlength="60" placeholder="如：精锐五金；留空使用全名"></div>
      <div><label>联系人</label><input type="text" name="contact"></div>
      <div><label>电话</label><input type="text" name="phone"></div>
      <div><label>付款方式</label><input type="text" name="payment_terms" placeholder="月结30天"></div>
      <div><label>税号</label><input type="text" name="tax_no"></div>
      <div><label>开户银行</label><input type="text" name="bank_name"></div>
      <div><label>银行帐号</label><input type="text" name="bank_account"></div>
    </div>
    <div style="margin-top:12px;"><button class="btn primary">新增</button></div>
  </form>
</div>

<div class="card">
  <div class="card-head">
    <h2>供应商列表</h2>
    <button type="button" class="btn primary sm" onclick="document.getElementById('supImpModal').style.display='flex'">批量导入 Excel</button>
  </div>
  <form method="get" class="toolbar" role="search">
    <input type="search" name="kw" value="{{ kw }}" placeholder="搜索名称、简称或编号" aria-label="搜索供应商" style="max-width:320px;">
    <button class="btn primary">搜索</button>{% if kw %}<a class="btn" href="{{ url_for('suppliers') }}">清除</a>{% endif %}
  </form>
  <table class="grid">
    <tr><th>编号</th><th>名称</th><th>联系人</th><th>电话</th><th>付款方式</th><th>税号</th><th>开户银行</th><th>银行帐号</th><th>操作</th></tr>
    {% for s in rows %}
    <tr class="{% if not s.active %}row-off{% endif %}">
      <td>{{ s.code }}</td><td>{{ s.name }}{% if s.short_name %}<div class="hint">简称：{{ s.short_name }}</div>{% endif %}</td><td>{{ s.contact }}</td><td>{{ s.phone }}</td>
      <td>{{ s.payment_terms }}</td><td>{{ s.tax_no }}</td><td>{{ s.bank_name }}</td>
      <td>{{ s.bank_account }}</td>
      <td class="nowrap">
        <button type="button" class="btn sm" onclick="openEdit(this)"
                data-id="{{ s.id }}" data-code="{{ s.code or '' }}"
                data-name="{{ s.name or '' }}" data-contact="{{ s.contact or '' }}"
                data-short_name="{{ s.short_name or '' }}"
                data-phone="{{ s.phone or '' }}"
                data-payment_terms="{{ s.payment_terms or '' }}"
                data-tax_no="{{ s.tax_no or '' }}"
                data-bank_name="{{ s.bank_name or '' }}"
                data-bank_account="{{ s.bank_account or '' }}">编辑</button>
        <form method="post" action="{{ url_for('supplier_toggle', sid=s.id) }}" style="display:inline;">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="btn sm {% if s.active %}danger{% endif %}"
                  onclick="return confirm('确定{{ '停用' if s.active else '启用' }}该供应商？')">
            {{ '停用' if s.active else '启用' }}
          </button>
        </form>
        {% if user.role == 'admin' %}
        <form method="post" action="{{ url_for('supplier_delete', sid=s.id) }}" style="display:inline;">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="btn sm danger"
                  onclick="return confirm('确定彻底删除该供应商？删除后不可恢复！')">删除</button>
        </form>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </table>
</div>

<div id="supImpModal" class="modal-mask" style="display:none;" onclick="if(event.target===this) this.style.display='none'">
  <div class="modal-box">
    <div class="modal-head">
      <span>批量导入供应商</span>
      <span class="modal-close" onclick="document.getElementById('supImpModal').style.display='none'">&times;</span>
    </div>
    <form method="post" action="{{ url_for('supplier_import_excel') }}" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="modal-body">
        <div class="hint">先下载模板按格式填好再导入。<b>名称</b>必填；已存在的按下方方式处理（优先按编号匹配，无编号则按名称）。公司简称用于 PDF 文件名；旧表没有简称列时保留原简称，简称列留空则清除原简称。</div>
        <div class="field">
          <label>1. 下载模板</label>
          <a href="{{ url_for('supplier_import_template') }}">供应商导入模板.xlsx</a>
        </div>
        <div class="field">
          <label>2. 选择 Excel 文件（.xls / .xlsx）</label>
          <input type="file" name="file" accept=".xls,.xlsx,.xlsm" required>
        </div>
        <div class="field">
          <label>3. 遇到已存在的供应商</label>
          <select name="mode">
            <option value="update">更新该供应商的资料</option>
            <option value="skip">跳过，不改动已有数据</option>
          </select>
        </div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn" onclick="document.getElementById('supImpModal').style.display='none'">取消</button>
        <button type="submit" class="btn primary">开始导入</button>
      </div>
    </form>
  </div>
</div>

<div id="editModal" class="modal-mask" style="display:none;" onclick="if(event.target===this) this.style.display='none'">
  <div class="modal-box">
    <div class="modal-head">
      <span>编辑供应商</span>
      <span class="modal-close" onclick="document.getElementById('editModal').style.display='none'">&times;</span>
    </div>
    <form method="post" action="{{ url_for('suppliers') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="id" id="edit_id">
      <div class="modal-body">
        <div class="form-grid two">
          <div><label>编号</label><input type="text" name="code" id="edit_code"></div>
          <div><label>名称 *</label><input type="text" name="name" id="edit_name" required></div>
          <div><label>公司简称（用于 PDF 文件名）</label><input type="text" name="short_name" id="edit_short_name" maxlength="60" placeholder="留空使用全名"></div>
          <div><label>联系人</label><input type="text" name="contact" id="edit_contact"></div>
          <div><label>电话</label><input type="text" name="phone" id="edit_phone"></div>
          <div><label>付款方式</label><input type="text" name="payment_terms" id="edit_payment_terms"></div>
          <div><label>税号</label><input type="text" name="tax_no" id="edit_tax_no"></div>
          <div><label>开户银行</label><input type="text" name="bank_name" id="edit_bank_name"></div>
          <div><label>银行帐号</label><input type="text" name="bank_account" id="edit_bank_account"></div>
        </div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn" onclick="document.getElementById('editModal').style.display='none'">取消</button>
        <button type="submit" class="btn primary">保存</button>
      </div>
    </form>
  </div>
</div>

<script>
function openEdit(btn){
  const d = btn.dataset;
  ['id','code','name','short_name','contact','phone','payment_terms','tax_no','bank_name','bank_account']
    .forEach(k => {
      const el = document.getElementById('edit_' + k);
      if (el) el.value = d[k] || '';
    });
  document.getElementById('editModal').style.display = 'flex';
}
</script>
{% endblock %}