{% extends "admin/base.html" %}
{% block page_title %}游学发票{% endblock %}
{% block content %}
<style>.inv-file{color:#2b2f3a;text-decoration:none;transition:color .15s}.inv-file:hover{color:var(--brand)}</style>
<div class="card-box">
  <div class="d-flex justify-content-between mb-3 align-items-center flex-wrap gap-2">
    <h6 class="mb-0">游学发票列表（{{invoices|length}}）</h6>
  </div>
  <form method="get" class="d-flex flex-wrap gap-2 mb-3 align-items-center">
    <select name="year" class="form-select form-select-sm" style="width:auto;min-width:110px" onchange="this.form.submit()">
      <option value="">全部年份</option>
      {% for y in years %}<option value="{{y}}" {% if year==y %}selected{% endif %}>{{y}}年</option>{% endfor %}
    </select>
    <select name="month" class="form-select form-select-sm" style="width:auto;min-width:110px" onchange="this.form.submit()">
      <option value="">全部月份</option>
      {% for m in range(1, 13) %}<option value="{{m}}" {% if month==m|string %}selected{% endif %}>{{m}}月</option>{% endfor %}
    </select>
    <select name="chain" class="form-select form-select-sm" style="width:auto;min-width:130px" onchange="this.form.submit()">
      <option value="">全部连锁</option>
      {% for c in chains %}<option value="{{c.id}}" {% if chain==c.id|string %}selected{% endif %}>{{c.name}}</option>{% endfor %}
    </select>
    <select name="province" id="fProv" class="form-select form-select-sm" style="width:auto;min-width:130px"><option value="">全部省份</option></select>
    <select name="city" id="fCity" class="form-select form-select-sm" style="width:auto;min-width:130px"><option value="">全部城市</option></select>
    <input name="q" class="form-control form-control-sm" style="width:170px" value="{{q or ''}}" placeholder="店员姓名/手机号">
    <button class="btn btn-sm btn-outline-secondary" style="white-space:nowrap">筛选</button>
  </form>
  <form method="post" action="{{url_for('admin.invoice_download_batch')}}">
    <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
      <div class="small text-muted">勾选发票后点「批量下载」打包为 zip；点文件名可单个下载。下载后自动标记「已下载」。</div>
      <div class="d-flex" style="gap:6px">
        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleAll()">全选/反选</button>
        <button type="submit" class="btn btn-sm btn-brand" onclick="return checkSel()">批量下载选中</button>
        {% if current_user.role == 'super' %}
        <button type="button" class="btn btn-sm btn-outline-danger" onclick="return prepInvDel()">批量删除选中</button>
        {% endif %}
      </div>
    </div>
    <table class="table table-hover align-middle">
      <thead><tr><th style="width:34px"></th><th width="50">序号</th><th>店员</th><th>连锁</th><th>省份</th><th>文件</th><th>下载状态</th><th>上传时间</th>{% if current_user.role == 'super' %}<th>操作</th>{% endif %}</tr></thead>
      <tbody>
      {% for inv in invoices %}
        <tr>
          <td><input type="checkbox" name="ids" value="{{inv.id}}" class="inv-chk"></td>
          <td>{{loop.index}}</td>
          <td>{{inv.staff.name if inv.staff else '-'}}</td>
          <td>{{inv.staff.store.chain.name if (inv.staff and inv.staff.store and inv.staff.store.chain) else '-'}}</td>
          <td>{{inv.staff.province if (inv.staff and inv.staff.province) else '-'}}</td>
          <td><a class="inv-file" href="{{url_for('admin.invoice_download', id=inv.id)}}">{{inv.filename or '查看/下载'}}</a></td>
          <td>
            {% if inv.downloaded %}
              <span class="badge bg-success">已下载</span>
              <span class="small text-muted">{{inv.downloaded_at.strftime('%m-%d %H:%M') if inv.downloaded_at}}</span>
            {% else %}
              <span class="badge bg-secondary">未下载</span>
            {% endif %}
          </td>
          <td class="small">{{inv.created_at.strftime('%Y-%m-%d %H:%M')}}</td>
          {% if current_user.role == 'super' %}
          <td class="text-nowrap">
            <a class="btn btn-sm btn-outline-secondary" href="{{url_for('admin.invoice_download', id=inv.id)}}">下载</a>
            <button type="button" class="btn btn-sm btn-outline-danger" data-del-url="{{url_for('admin.invoice_delete', id=inv.id)}}" data-name="{{(inv.filename or inv.id)|e}}" onclick="delInv(this)">删除</button>
          </td>
          {% endif %}
        </tr>
      {% else %}
        <tr><td colspan="{{9 if current_user.role=='super' else 8}}" class="text-center text-muted py-4">暂无游学发票</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </form>
  <div class="form-text">点击文件名下载该发票（PDF/图片）；勾选多条可批量打包下载。</div>
</div>
{% include "admin/_region_data.html" %}
<script>
initRegionPicker(document.getElementById('fProv'), document.getElementById('fCity'),
                 {{ province|tojson }}, {{ city|tojson }}, '全部城市');
function toggleAll(){
  document.querySelectorAll('.inv-chk').forEach(function(c){c.checked=!c.checked;});
}
function checkSel(){
  if(!document.querySelector('.inv-chk:checked')){alert('请先勾选要下载的发票');return false;}
  return true;
}
// 动态创建的 form 用 .submit() 提交不触发 submit 事件，base.html 的 CSRF 自动注入
// （监听 submit）拿不到 token，故这里手动注入 csrf_token，否则 POST 报 CSRF missing。
function csrfField(){
  var meta=document.querySelector('meta[name=csrf-token]');
  var i=document.createElement('input');
  i.type='hidden';i.name='csrf_token';i.value=meta?meta.content:'';
  return i;
}
// 单条删除：不能再用嵌套 form（外层是批量下载 form，HTML 禁嵌套会令删除按钮归到
// 下载 form → 点删除变下载）。改为 type=button + 动态建独立 form 提交。
function delInv(btn){
  var name=btn.getAttribute('data-name');
  if(!confirm('确认删除该发票（'+name+'）？此操作不可逆，记录与文件都会删除。'))return;
  var f=document.createElement('form');
  f.method='POST';
  f.action=btn.getAttribute('data-del-url');
  f.appendChild(csrfField());
  document.body.appendChild(f);
  f.submit();
}
function prepInvDel(){
  var ids=Array.from(document.querySelectorAll('.inv-chk:checked')).map(function(c){return c.value;});
  if(!ids.length){alert('请先勾选要删除的发票');return false;}
  if(!confirm('确认删除选中的 '+ids.length+' 条发票？此操作不可逆，记录与磁盘文件都会删除。'))return false;
  var f=document.createElement('form');
  f.method='POST';
  f.action="{{url_for('admin.invoice_delete_batch')}}";
  ids.forEach(function(id){var i=document.createElement('input');i.type='hidden';i.name='ids';i.value=id;f.appendChild(i);});
  f.appendChild(csrfField());
  document.body.appendChild(f);
  f.submit();
  return false;
}
</script>
{% endblock %}