{% 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" required placeholder="M-1004"></div>
      <div><label>物料规格 / 名称</label><input type="text" name="spec"></div>
      <div><label>单位</label><input type="text" name="unit" placeholder="件"></div>
      <div><label>默认含税单价</label><input type="number" step="0.01" name="price" value="0"></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('matImpModal').style.display='flex'">批量导入 Excel</button>
  </div>
  <table class="grid">
    <tr><th>物料代码</th><th>物料规格</th><th>单位</th><th class="num">默认含税单价</th><th>操作</th></tr>
    {% for m in rows %}
    <tr class="{% if not m.active %}row-off{% endif %}">
      <td>{{ m.code }}</td><td>{{ m.spec }}</td><td class="center">{{ m.unit }}</td>
      <td class="num">{{ '%.2f'|format(m.price) }}</td>
      <td class="nowrap">
        <button type="button" class="btn sm" onclick="openEdit(this)"
                data-id="{{ m.id }}" data-code="{{ m.code }}"
                data-spec="{{ m.spec or '' }}" data-unit="{{ m.unit or '' }}"
                data-price="{{ m.price or 0 }}">编辑</button>
        <form method="post" action="{{ url_for('material_toggle', mid=m.id) }}" style="display:inline;">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="btn sm {% if m.active %}danger{% endif %}"
                  onclick="return confirm('确定{{ '停用' if m.active else '启用' }}该物料？')">
            {{ '停用' if m.active else '启用' }}
          </button>
        </form>
        {% if user.role == 'admin' %}
        <form method="post" action="{{ url_for('material_delete', mid=m.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="matImpModal" 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('matImpModal').style.display='none'">&times;</span>
    </div>
    <form method="post" action="{{ url_for('material_import_excel') }}" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="modal-body">
        <div class="hint">先下载模板按格式填好再导入。<b>物料代码</b>必填；已存在的代码按下方方式处理。</div>
        <div class="field">
          <label>1. 下载模板</label>
          <a href="{{ url_for('material_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('matImpModal').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('materials') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="id" id="edit_id">
      <div class="modal-body">
        <div class="field">
          <label>物料代码 *</label>
          <input type="text" name="code" id="edit_code" required>
        </div>
        <div class="field">
          <label>物料规格 / 名称</label>
          <input type="text" name="spec" id="edit_spec">
        </div>
        <div class="form-grid two">
          <div><label>单位</label><input type="text" name="unit" id="edit_unit"></div>
          <div><label>默认含税单价</label><input type="number" step="0.01" name="price" id="edit_price" value="0"></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;
  document.getElementById('edit_id').value = d.id || '';
  document.getElementById('edit_code').value = d.code || '';
  document.getElementById('edit_spec').value = d.spec || '';
  document.getElementById('edit_unit').value = d.unit || '';
  document.getElementById('edit_price').value = d.price || 0;
  document.getElementById('editModal').style.display = 'flex';
}
</script>
{% endblock %}