<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>财务报销自动化</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/index.css" rel="stylesheet">
</head>
<body>

<div class="header text-center mb-4">
  <h3>财务报销自动化</h3>
  <p class="mb-0 opacity-75">上传发票 PDF 和支付截图，自动提取、LLM 识别并填报</p>
</div>

<div class="container" style="max-width:960px">

  <!-- 上传区域 -->
  <div class="row g-3 mb-4">
    <div class="col-md-4">
      <div class="section-title">📄 发票 PDF <span class="text-muted fw-normal" style="font-size:12px">（多选）</span></div>
      <div class="upload-zone" id="pdf-zone" onclick="document.getElementById('pdf-input').click()">
        <div class="icon">📁</div>
        <div class="text-muted" style="font-size:13px">点击或拖拽上传 PDF 文件</div>
        <div id="pdf-list" class="mt-2"></div>
      </div>
      <input type="file" id="pdf-input" accept=".pdf" multiple hidden onchange="handleFiles(this, 'pdf')">
    </div>
    <div class="col-md-4">
      <div class="section-title">🖼️ 支付截图 <span class="text-muted fw-normal" style="font-size:12px">（多选）</span></div>
      <div class="upload-zone" id="img-zone" onclick="document.getElementById('img-input').click()">
        <div class="icon">🖼️</div>
        <div class="text-muted" style="font-size:13px">点击或拖拽上传图片文件</div>
        <div id="img-list" class="mt-2"></div>
      </div>
      <input type="file" id="img-input" accept="image/*" multiple hidden onchange="handleFiles(this, 'img')">
    </div>
    <div class="col-md-4 text-center">
      <div class="section-title">📱 手机扫码上传</div>
      <div id="qrcode" style="display:inline-block"></div>
      <p class="text-muted mt-2 mb-0" style="font-size:12px">扫码即可拍照上传</p>
    </div>
  </div>

  <!-- 配置表单 -->
  <div class="card mb-4">
    <div class="card-body">
      <div class="section-title">⚙️ 配置 
        <span style="font-size:12px;font-weight:normal;cursor:pointer;color:#667eea;margin-left:8px" onclick="document.getElementById('config-upload').click()">
          📤 上传 config.json
        </span>
        <input type="file" id="config-upload" accept=".json" hidden onchange="handleConfigUpload(this)">
      </div>
      <div class="row g-2">
        <div class="col-sm-4">
          <label class="form-label" style="font-size:12px;margin-bottom:2px">账号 (工号)</label>
          <input type="text" class="form-control form-control-sm" id="cfg-username" placeholder="202xxxx">
        </div>
        <div class="col-sm-4">
          <label class="form-label" style="font-size:12px;margin-bottom:2px">密码</label>
          <input type="password" class="form-control form-control-sm" id="cfg-password" placeholder="登录密码">
        </div>
        <div class="col-sm-4">
          <label class="form-label" style="font-size:12px;margin-bottom:2px">默认姓名</label>
          <input type="text" class="form-control form-control-sm" id="cfg-name" placeholder="张三">
        </div>
        <div class="col-sm-3">
          <label class="form-label" style="font-size:12px;margin-bottom:2px">公务卡号</label>
          <input type="text" class="form-control form-control-sm" id="cfg-card" placeholder="628288...">
        </div>
        <div class="col-sm-3">
          <label class="form-label" style="font-size:12px;margin-bottom:2px">人员编号</label>
          <input type="text" class="form-control form-control-sm" id="cfg-person-id" placeholder="202xxxxx">
        </div>
        <div class="col-sm-6">
          <label class="form-label" style="font-size:12px;margin-bottom:2px">存放地点（出库单）</label>
          <input type="text" class="form-control form-control-sm" id="cfg-storage" placeholder="新工科楼">
        </div>
      </div>
    </div>
  </div>

  <!-- 操作按钮 -->
  <div class="text-center mb-4">
    <button class="btn btn-primary btn-process" id="btn-start" onclick="startProcess()">开始处理</button>
    <span id="status" class="ms-3"></span>
  </div>

  <!-- 下载区 -->
  <div class="card mb-4" id="download-section" style="display:none">
    <div class="card-body py-3">
      <div class="section-title mb-2">📥 下载文件</div>
      <div id="download-links" class="d-flex flex-wrap gap-2"></div>
      <div id="doc-fill-warning" class="text-warning mt-2" style="font-size:13px;display:none"></div>
    </div>
  </div>

  <!-- 发票数据编辑区 -->
  <div class="card mb-4" id="edit-section" style="display:none">
    <div class="card-body">
      <div class="section-title d-flex justify-content-between align-items-center">
        <span>📝 付款记录（可编辑）</span>
        <div class="d-flex justify-content-end align-items-center">
          <button class="btn btn-primary" id="btn-submit" onclick="submitFinancial()">🚀 提交到财务系统</button>
        </div>
      </div>
      <p class="edit-note">直接点击单元格即可编辑，提交时自动保存当前修改。</p>
      <div class="table-wrapper">
        <table class="table table-sm table-bordered table-editable mb-0" id="invoice-table">
          <thead id="invoice-thead"></thead>
          <tbody id="invoice-tbody"></tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- 日志 -->
  <div class="section-title">📋 处理日志</div>
  <div class="log-container mb-4" id="log-box"><div class="empty">等待开始...</div></div>

</div>

<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script src="/static/js/index.js"></script>
</body>
</html>