{% extends 'ewoooc_base.html' %}

{% block title %}EwoooC 缺貨匯入{% endblock %}
{% block page_attrs %}data-page-group="monitor" data-page-id="vendor-import"{% endblock %}

{% block extra_css %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/page-vendor-import.css') }}">
{% endblock %}

{% block ewooo_content %}
{# Upload action is implemented in page-vendor-import.js via fetchWithCSRF('/vendor-stockout/api/import/excel', ...). #}
<div class="stockout-import-stack">

  <section class="stockout-import-header">
    <div>
      <div class="stockout-import-eyebrow momo-mono">
        <i class="fas fa-file-import"></i>STOCKOUT IMPORT
      </div>
      <h1 class="stockout-import-title">Excel 匯入</h1>
      <p class="stockout-import-subtitle">
        上傳正式缺貨 Excel 後，系統會使用既有匯入 API 寫入 vendor_stockout，完成後直接回傳批次編號與成功、重複、失敗筆數。
      </p>
      <div class="stockout-import-actions is-header">
        <a class="stockout-action" href="{{ url_for('vendor.index') }}">
          <i class="fas fa-arrow-left"></i>回總覽
        </a>
        <a class="stockout-action" href="{{ url_for('vendor.list_page') }}">
          <i class="fas fa-table-list"></i>缺貨清單
        </a>
      </div>
    </div>
    <aside class="stockout-import-note">
      <div class="stockout-import-note-label momo-mono">資料原則</div>
      <div class="stockout-import-note-value">只匯入使用者上傳的正式 Excel，不預填任何資料列。</div>
    </aside>
  </section>

  <section class="stockout-upload-panel" aria-label="Excel 匯入">
    <button class="stockout-dropzone" id="stockoutDropzone" type="button">
      <input id="stockoutFileInput" type="file" accept=".xlsx,.xls" hidden>
      <span class="stockout-dropzone-inner">
        <span class="stockout-upload-icon">
          <i class="fas fa-cloud-arrow-up"></i>
        </span>
        <span class="stockout-dropzone-title d-block">選擇或拖曳 Excel 檔案</span>
        <span class="stockout-dropzone-subtitle d-block">
          支援 .xlsx / .xls。檔案送出後會寫入正式缺貨資料表，請確認內容是可匯入的正式清單。
        </span>
        <span class="stockout-action is-primary stockout-file-picker">
          <i class="fas fa-folder-open"></i>選擇檔案
        </span>
      </span>
    </button>

    <aside class="stockout-import-side">
      <div class="stockout-import-card">
        <div class="stockout-card-label momo-mono">必要欄位</div>
        <div class="stockout-card-title">來源供應商編號、來源供應商名稱、商品ID、商品名稱</div>
        <div class="stockout-card-meta momo-mono">缺少必要欄位時，API 會拒絕匯入並回傳錯誤原因。</div>
      </div>
      <div class="stockout-import-card">
        <div class="stockout-card-label momo-mono">欄位範本</div>
        <div class="stockout-card-title">下載只有正式欄位標題的空白範本</div>
        <div class="stockout-card-meta">
          <a class="stockout-action" href="{{ url_for('vendor.api_import_template') }}">
            <i class="fas fa-download"></i>下載範本
          </a>
        </div>
      </div>
    </aside>
  </section>

  <section class="stockout-file-panel" id="stockoutFilePanel">
    <div class="stockout-file-row">
      <div>
        <div class="stockout-card-label momo-mono">已選擇檔案</div>
        <div class="stockout-file-name" id="stockoutFileName"></div>
        <div class="stockout-file-size momo-mono" id="stockoutFileSize"></div>
      </div>
      <button class="stockout-action is-primary" id="stockoutUploadButton" type="button">
        <i class="fas fa-upload"></i>開始匯入
      </button>
    </div>
  </section>

  <section class="stockout-progress-panel" id="stockoutProgressPanel">
    <div class="stockout-card-label momo-mono stockout-progress-label">匯入中</div>
    <div class="stockout-progress-track">
      <div class="stockout-progress-bar"></div>
    </div>
  </section>

  <section class="stockout-result-panel" id="stockoutResultPanel">
    <div class="stockout-card-label momo-mono">匯入結果</div>
    <div class="stockout-result-grid">
      <div class="stockout-result-cell">
        <div class="stockout-result-value momo-mono" id="stockoutTotalCount">0</div>
        <div class="stockout-result-label">總筆數</div>
      </div>
      <div class="stockout-result-cell">
        <div class="stockout-result-value momo-mono" id="stockoutSuccessCount">0</div>
        <div class="stockout-result-label">成功匯入</div>
      </div>
      <div class="stockout-result-cell">
        <div class="stockout-result-value momo-mono" id="stockoutDuplicateCount">0</div>
        <div class="stockout-result-label">重複項目</div>
      </div>
      <div class="stockout-result-cell">
        <div class="stockout-result-value momo-mono" id="stockoutFailedCount">0</div>
        <div class="stockout-result-label">失敗</div>
      </div>
    </div>
    <div class="stockout-batch-id momo-mono">批次編號 <span id="stockoutBatchId"></span></div>
    <div class="stockout-import-actions is-result">
      <a class="stockout-action is-primary" href="{{ url_for('vendor.list_page') }}">
        <i class="fas fa-table-list"></i>查看缺貨清單
      </a>
      <button class="stockout-action" id="stockoutImportAgainButton" type="button">
        <i class="fas fa-rotate-right"></i>再次匯入
      </button>
    </div>
  </section>

  <section class="stockout-error-panel" id="stockoutErrorPanel">
    <div class="stockout-card-label momo-mono">匯入失敗</div>
    <div class="stockout-card-title" id="stockoutErrorMessage"></div>
  </section>

</div>
{% endblock %}

{% block extra_js %}
  <script src="{{ url_for('static', filename='js/page-vendor-import.js') }}"></script>
{% endblock %}