<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>缺貨管理 - 廠商缺貨系統</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
            min-height: 100vh;
            padding-top: 70px;
        }

        /* Custom Dark Gray Navbar */
        .navbar.bg-custom-dark {
            background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .navbar.bg-custom-dark .navbar-brand {
            color: #ffffff;
            font-weight: 600;
        }

        .navbar.bg-custom-dark .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.85);
            font-weight: 500;
        }

        .navbar.bg-custom-dark .navbar-nav .nav-link:hover {
            color: #ffffff;
        }

        .navbar.bg-custom-dark .navbar-nav .nav-link.active {
            color: #ffffff;
            font-weight: 600;
        }

        .navbar.bg-custom-dark .navbar-text {
            color: rgba(255, 255, 255, 0.75);
        }

        /* 主要標籤樣式 */
        .main-tabs {
            background: white;
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .main-tabs .nav-tabs {
            border-bottom: none;
        }

        .main-tabs .nav-link {
            border: none;
            border-radius: 0;
            padding: 1rem 2rem;
            font-weight: 600;
            color: #6c757d;
            transition: all 0.3s;
            position: relative;
        }

        .main-tabs .nav-link.active {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: white;
        }

        .main-tabs .nav-link:hover:not(.active) {
            background: #f8f9fa;
        }

        .main-tabs .nav-link .badge {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 0.7rem;
        }

        /* 狀態子標籤 */
        .status-tabs {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .status-tabs .nav-link {
            border: none;
            border-radius: 8px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            color: #6c757d;
            transition: all 0.3s;
            margin-right: 0.5rem;
        }

        .status-tabs .nav-link.active {
            background: white;
            color: #2c3e50;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .status-tabs .nav-link.tab-pending.active {
            border-left: 3px solid #f39c12;
        }

        .status-tabs .nav-link.tab-sent.active {
            border-left: 3px solid #27ae60;
        }

        .table-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            overflow: hidden;
        }

        .filter-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .table {
            margin-bottom: 0;
        }

        .table thead th {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: white;
            border: none;
            font-weight: 600;
            padding: 1rem;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .table thead th.th-pending {
            background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%);
        }

        .table thead th.th-sent {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
        }

        .table tbody tr {
            transition: all 0.2s ease;
        }

        .table tbody tr:hover {
            background-color: #f8f9fa;
            transform: translateX(5px);
        }

        .badge {
            padding: 0.5rem 0.8rem;
            font-size: 0.85rem;
        }

        .status-pending {
            background-color: #ffc107;
            color: #000;
        }

        .status-sent {
            background-color: #28a745;
        }

        .status-failed {
            background-color: #dc3545;
        }

        .btn-action {
            padding: 0.4rem 0.8rem;
            font-size: 0.875rem;
        }

        .stats-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            margin-bottom: 1.5rem;
            transition: transform 0.2s;
            border-top: 4px solid #3498db;
        }

        .stats-card:hover {
            transform: translateY(-5px);
        }

        .stats-card.card-total { border-top-color: #3498db; }
        .stats-card.card-pending { border-top-color: #f39c12; }
        .stats-card.card-sent { border-top-color: #27ae60; }
        .stats-card.card-vendor { border-top-color: #9b59b6; }

        .stats-number {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .stats-label {
            color: #6c757d;
            font-size: 0.9rem;
        }

        .upload-area {
            border: 3px dashed #3498db;
            border-radius: 20px;
            padding: 3rem;
            text-align: center;
            background: white;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .upload-area:hover {
            border-color: #2980b9;
            background: #f8f9fa;
            transform: scale(1.02);
        }

        .upload-area.dragover {
            border-color: #27ae60;
            background: #d5f4e6;
        }

        .upload-icon {
            font-size: 5rem;
            color: #3498db;
            margin-bottom: 1rem;
        }

        .btn-upload {
            padding: 1rem 3rem;
            font-size: 1.1rem;
            border-radius: 50px;
            font-weight: 600;
        }

        .progress {
            height: 30px;
            border-radius: 15px;
        }

        .result-card {
            border-left: 5px solid #3498db;
        }

        /* 流程提示樣式 */
        .workflow-guide {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .workflow-guide h5 {
            margin-bottom: 1rem;
        }

        .workflow-steps {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .workflow-step {
            display: flex;
            align-items: center;
            flex-direction: column;
            text-align: center;
        }

        .workflow-step .step-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.5rem;
            font-size: 1.2rem;
        }

        .workflow-step .step-icon.active {
            background: white;
            color: #667eea;
        }

        .workflow-step .step-text {
            font-size: 0.85rem;
        }

        .workflow-arrow {
            font-size: 1.5rem;
            opacity: 0.5;
        }

        /* 重送確認 Modal 特殊樣式 */
        .resend-warning {
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .resend-warning i {
            color: #856404;
        }

        /* 批次操作區塊改進 */
        .batch-actions-card {
            background: white;
            border-radius: 12px;
            padding: 1rem 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .batch-actions-card.pending-actions {
            border-left: 4px solid #f39c12;
        }

        .batch-actions-card.sent-actions {
            border-left: 4px solid #27ae60;
        }

        /* 使用者下拉選單 */
        .user-dropdown .dropdown-toggle::after {
            display: none;
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        /* 空狀態提示 */
        .empty-state {
            padding: 4rem 2rem;
            text-align: center;
        }

        .empty-state i {
            font-size: 4rem;
            color: #dee2e6;
            margin-bottom: 1rem;
        }

        .empty-state h5 {
            color: #6c757d;
            margin-bottom: 0.5rem;
        }

        .empty-state p {
            color: #adb5bd;
        }
    </style>
</head>
<body>
    <!-- 導航列 (使用共用組件) -->
    {% include 'components/_navbar.html' %}

<div class="container-fluid" style="padding: 2rem;">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">
                <i class="fas fa-box-open me-2" style="color: #27ae60;"></i>缺貨管理
            </h2>
            <a href="/vendor-stockout" class="btn btn-outline-secondary">
                <i class="fas fa-home me-2"></i>返回主頁
            </a>
        </div>

        <!-- 流程提示 -->
        <div class="workflow-guide" id="workflowGuide">
            <h5><i class="fas fa-route me-2"></i>操作流程</h5>
            <div class="workflow-steps">
                <div class="workflow-step">
                    <div class="step-icon" id="step1Icon"><i class="fas fa-file-upload"></i></div>
                    <div class="step-text">1. 匯入 Excel</div>
                </div>
                <div class="workflow-arrow"><i class="fas fa-chevron-right"></i></div>
                <div class="workflow-step">
                    <div class="step-icon" id="step2Icon"><i class="fas fa-check-square"></i></div>
                    <div class="step-text">2. 勾選待發送</div>
                </div>
                <div class="workflow-arrow"><i class="fas fa-chevron-right"></i></div>
                <div class="workflow-step">
                    <div class="step-icon" id="step3Icon"><i class="fas fa-paper-plane"></i></div>
                    <div class="step-text">3. 發送郵件</div>
                </div>
                <div class="workflow-arrow"><i class="fas fa-chevron-right"></i></div>
                <div class="workflow-step">
                    <div class="step-icon" id="step4Icon"><i class="fas fa-history"></i></div>
                    <div class="step-text">4. 查看記錄</div>
                </div>
            </div>
        </div>

        <!-- 主分頁標籤 -->
        <div class="main-tabs">
            <ul class="nav nav-tabs" id="mainTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="list-tab" data-bs-toggle="tab" data-bs-target="#list" type="button">
                        <i class="fas fa-list me-2"></i>缺貨清單
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="import-tab" data-bs-toggle="tab" data-bs-target="#import" type="button">
                        <i class="fas fa-file-upload me-2"></i>Excel 匯入
                    </button>
                </li>
            </ul>
        </div>

        <div class="tab-content" id="mainTabContent">
            <!-- 缺貨清單 Tab -->
            <div class="tab-pane fade show active" id="list" role="tabpanel">
                <!-- 統計卡片 -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="stats-card card-total">
                            <div class="stats-number text-primary" id="totalCount">0</div>
                            <div class="stats-label">總缺貨筆數</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-card card-pending">
                            <div class="stats-number text-warning" id="pendingCount">0</div>
                            <div class="stats-label">待發送</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-card card-sent">
                            <div class="stats-number text-success" id="sentCount">0</div>
                            <div class="stats-label">已發送</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-card card-vendor">
                            <div class="stats-number text-purple" id="vendorCount" style="color: #9b59b6;">0</div>
                            <div class="stats-label">涉及廠商數</div>
                        </div>
                    </div>
                </div>

                <!-- 狀態子標籤（待發送/已發送） -->
                <div class="status-tabs">
                    <ul class="nav" id="statusTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link tab-pending active" id="pending-tab" data-status="pending" type="button">
                                <i class="fas fa-clock me-2"></i>待發送
                                <span class="badge bg-warning text-dark ms-2" id="pendingBadge">0</span>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link tab-sent" id="sent-tab" data-status="sent" type="button">
                                <i class="fas fa-check-circle me-2"></i>已發送
                                <span class="badge bg-success ms-2" id="sentBadge">0</span>
                            </button>
                        </li>
                    </ul>
                </div>

                <!-- 篩選區域 -->
                <div class="filter-card">
                    <h5 class="mb-3"><i class="fas fa-filter me-2 text-success"></i>篩選條件</h5>
                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label">批次選擇</label>
                            <select class="form-select" id="filterBatch">
                                <option value="">全部批次</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">廠商代碼/名稱</label>
                            <input type="text" class="form-control" id="filterVendor" placeholder="輸入廠商代碼或名稱">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">排序方式</label>
                            <select class="form-select" id="sortBy">
                                <option value="created_at_desc">最新匯入</option>
                                <option value="created_at_asc">最早匯入</option>
                                <option value="vendor_code_asc">廠商代碼</option>
                                <option value="stockout_days_desc">缺貨天數</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <button class="btn btn-success w-100" id="applyFilter">
                                <i class="fas fa-search me-2"></i>套用篩選
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 待發送批次操作 -->
                <div class="batch-actions-card pending-actions" id="pendingActions">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <input type="checkbox" id="selectAllPending" class="form-check-input me-2">
                            <label for="selectAllPending" class="form-check-label">
                                全選待發送 (<span id="selectedPendingCount">0</span> 筆)
                            </label>
                        </div>
                        <div>
                            <button class="btn btn-outline-secondary btn-action me-2" onclick="openEmailTemplateModal()">
                                <i class="fas fa-cog me-1"></i>郵件模板
                            </button>
                            <button class="btn btn-primary btn-action me-2" id="batchSendGrouped" disabled>
                                <i class="fas fa-paper-plane me-1"></i>按廠商發送
                            </button>
                            <button class="btn btn-info btn-action me-2" id="batchSendSingle" disabled>
                                <i class="fas fa-envelope me-1"></i>按商品發送
                            </button>
                            <button class="btn btn-outline-success btn-action me-2" id="batchMarkSent" disabled>
                                <i class="fas fa-check me-1"></i>標記已發送
                            </button>
                            <button class="btn btn-outline-danger btn-action" id="batchDeletePending" disabled>
                                <i class="fas fa-trash me-1"></i>刪除
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 已發送批次操作（預設隱藏） -->
                <div class="batch-actions-card sent-actions" id="sentActions" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <input type="checkbox" id="selectAllSent" class="form-check-input me-2">
                            <label for="selectAllSent" class="form-check-label">
                                全選已發送 (<span id="selectedSentCount">0</span> 筆)
                            </label>
                        </div>
                        <div>
                            <button class="btn btn-warning btn-action me-2" id="batchResend" disabled>
                                <i class="fas fa-redo me-1"></i>重新發送
                            </button>
                            <button class="btn btn-outline-warning btn-action me-2" id="batchMarkPending" disabled>
                                <i class="fas fa-undo me-1"></i>重設為待發送
                            </button>
                            <button class="btn btn-outline-danger btn-action" id="batchDeleteSent" disabled>
                                <i class="fas fa-trash me-1"></i>刪除
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 資料表格 -->
                <div class="table-container">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead id="tableHead">
                                <tr>
                                    <th style="width: 50px;"></th>
                                    <th>批次</th>
                                    <th>廠商代碼</th>
                                    <th>廠商名稱</th>
                                    <th>商品ID</th>
                                    <th>商品名稱</th>
                                    <th>缺貨天數</th>
                                    <th>日均銷量</th>
                                    <th>可賣量</th>
                                    <th>狀態</th>
                                    <th>匯入時間</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="dataTable">
                                <tr>
                                    <td colspan="12" class="text-center py-5">
                                        <i class="fas fa-spinner fa-spin fa-2x text-muted mb-3"></i>
                                        <p class="text-muted">載入中...</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 分頁 -->
                <div class="d-flex justify-content-between align-items-center mt-4">
                    <div class="text-muted">
                        顯示 <span id="pageInfo">0-0 / 0</span> 筆
                    </div>
                    <nav>
                        <ul class="pagination mb-0" id="pagination">
                            <li class="page-item disabled"><a class="page-link" href="#">上一頁</a></li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item disabled"><a class="page-link" href="#">下一頁</a></li>
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- Excel 匯入 Tab -->
            <div class="tab-pane fade" id="import" role="tabpanel">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <!-- 頁面說明 -->
                        <div class="card mb-4" style="border-radius: 16px;">
                            <div class="card-body">
                                <h4 class="mb-3">
                                    <i class="fas fa-file-excel text-primary me-3"></i>Excel 匯入
                                </h4>
                                <p class="text-muted mb-0">上傳包含缺貨商品資料的 Excel 檔案，系統會自動檢測並匯入</p>
                            </div>
                        </div>

                        <!-- 上傳區域 -->
                        <div class="card mb-4" style="border-radius: 16px;">
                            <div class="card-body">
                                <div class="upload-area" id="uploadArea">
                                    <input type="file" id="fileInput" accept=".xlsx,.xls" style="display: none;">
                                    <div class="upload-icon">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                    </div>
                                    <h4 class="mb-3">拖曳檔案到此處或點擊選擇檔案</h4>
                                    <p class="text-muted">支援格式: Excel (.xlsx, .xls)</p>
                                    <button type="button" class="btn btn-primary btn-upload mt-3" id="selectFileBtn">
                                        <i class="fas fa-folder-open me-2"></i>選擇檔案
                                    </button>
                                </div>

                                <!-- 檔案資訊 -->
                                <div id="fileInfo" class="mt-4" style="display: none;">
                                    <div class="alert alert-info">
                                        <i class="fas fa-file me-2"></i>
                                        <strong>已選擇檔案:</strong> <span id="fileName"></span>
                                        <span class="badge bg-primary ms-2" id="fileSize"></span>
                                    </div>
                                    <button type="button" class="btn btn-success w-100 btn-upload" id="uploadBtn">
                                        <i class="fas fa-upload me-2"></i>開始匯入
                                    </button>
                                </div>

                                <!-- 進度條 -->
                                <div id="progressArea" class="mt-4" style="display: none;">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                                             role="progressbar" style="width: 100%">
                                            匯入中...
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 匯入結果 -->
                        <div id="resultArea" style="display: none;">
                            <div class="card result-card" style="border-radius: 16px;">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        <i class="fas fa-check-circle text-success me-2"></i>匯入完成
                                    </h5>
                                    <div class="row mt-4">
                                        <div class="col-md-3">
                                            <div class="text-center">
                                                <h3 class="text-primary" id="importTotalCount">0</h3>
                                                <small class="text-muted">總筆數</small>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="text-center">
                                                <h3 class="text-success" id="importSuccessCount">0</h3>
                                                <small class="text-muted">成功匯入</small>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="text-center">
                                                <h3 class="text-warning" id="importDuplicateCount">0</h3>
                                                <small class="text-muted">重複項目</small>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="text-center">
                                                <h3 class="text-danger" id="importFailedCount">0</h3>
                                                <small class="text-muted">失敗</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-4">
                                        <p class="mb-2">
                                            <i class="fas fa-barcode me-2"></i>
                                            <strong>批次編號:</strong> <code id="batchId"></code>
                                        </p>
                                    </div>
                                    <div class="mt-4 text-center">
                                        <button type="button" class="btn btn-primary me-2" onclick="switchToListTab()">
                                            <i class="fas fa-list me-2"></i>查看缺貨清單
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" id="importAgainBtn">
                                            <i class="fas fa-redo me-2"></i>再次匯入
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 錯誤訊息 -->
                        <div id="errorArea" style="display: none;">
                            <div class="alert alert-danger">
                                <h5><i class="fas fa-exclamation-circle me-2"></i>匯入失敗</h5>
                                <p class="mb-0" id="errorMessage"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 編輯 Modal -->
    <div class="modal fade" id="editModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-edit me-2"></i>編輯缺貨資料</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="editId">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">廠商代碼</label>
                            <input type="text" class="form-control" id="editVendorCode" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">廠商名稱</label>
                            <input type="text" class="form-control" id="editVendorName" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">商品ID</label>
                            <input type="text" class="form-control" id="editProductCode" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">商品名稱</label>
                            <input type="text" class="form-control" id="editProductName">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">缺貨天數</label>
                            <input type="number" class="form-control" id="editStockoutDays">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">日均銷量</label>
                            <input type="number" step="0.01" class="form-control" id="editDailyAvgSales">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">可賣量</label>
                            <input type="number" class="form-control" id="editCurrentStock">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label">備註</label>
                            <textarea class="form-control" id="editNotes" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" id="saveEdit">
                        <i class="fas fa-save me-2"></i>儲存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 郵件模板設定 Modal -->
    <div class="modal fade" id="emailTemplateModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="fas fa-cog me-2"></i>郵件模板設定</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- 說明 -->
                    <div class="alert alert-info mb-3">
                        <i class="fas fa-info-circle me-2"></i>
                        設定郵件模板內容，之後所有廠商缺貨通知郵件都會套用此模板。
                    </div>

                    <!-- 可用變數提示 -->
                    <div class="mb-3 p-3 bg-light rounded">
                        <div class="mb-2">
                            <i class="fas fa-lightbulb text-warning me-1"></i>
                            <strong>可用變數（會自動替換為實際值）：</strong>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <code class="text-primary">{{vendor_name}}</code>
                                <small class="text-muted ms-1">廠商名稱</small>
                            </div>
                            <div class="col-md-4">
                                <code class="text-primary">{{vendor_code}}</code>
                                <small class="text-muted ms-1">廠商代碼</small>
                            </div>
                            <div class="col-md-4">
                                <code class="text-primary">{{item_count}}</code>
                                <small class="text-muted ms-1">缺貨商品數量</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <!-- 郵件主旨 -->
                            <div class="mb-3">
                                <label class="form-label fw-bold">
                                    <i class="fas fa-heading me-1"></i>郵件主旨
                                </label>
                                <input type="text" class="form-control" id="emailSubjectInput"
                                       oninput="refreshEmailPreview()">
                            </div>

                            <!-- 郵件內容 -->
                            <div class="mb-3">
                                <label class="form-label fw-bold">
                                    <i class="fas fa-file-alt me-1"></i>郵件內容 (HTML)
                                </label>
                                <textarea class="form-control" id="emailBodyInput" rows="12"
                                          oninput="refreshEmailPreview()"></textarea>
                                <div class="form-text">支援 HTML 格式標籤，如 &lt;p&gt;、&lt;br&gt;、&lt;b&gt; 等</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <!-- 預覽區 -->
                            <div class="mb-3">
                                <label class="form-label fw-bold">
                                    <i class="fas fa-eye me-1"></i>郵件預覽（範例）
                                </label>
                                <div class="border rounded p-3 bg-white" style="min-height: 350px; max-height: 400px; overflow-y: auto;">
                                    <div class="mb-2 pb-2 border-bottom">
                                        <strong>主旨：</strong>
                                        <span id="emailPreviewSubject" class="text-primary"></span>
                                    </div>
                                    <div id="emailPreviewBody"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-warning" onclick="resetEmailTemplate()">
                        <i class="fas fa-undo me-2"></i>恢復預設
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveEmailTemplate()">
                        <i class="fas fa-save me-2"></i>儲存模板
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 重新發送確認 Modal -->
    <div class="modal fade" id="resendConfirmModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2"></i>確認重新發送</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="resend-warning">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>注意：</strong>這些項目已經發送過郵件通知給廠商。
                    </div>
                    <p>您確定要重新發送嗎？</p>
                    <ul class="mb-3">
                        <li>選取的 <strong id="resendCount">0</strong> 筆記錄將會重新發送郵件</li>
                        <li>廠商將會收到重複的通知</li>
                    </ul>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="confirmResend">
                        <label class="form-check-label" for="confirmResend">
                            我了解並確認要重新發送
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-warning" id="confirmResendBtn" disabled>
                        <i class="fas fa-paper-plane me-2"></i>確認重新發送
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // ====== Global Variables ======
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        let currentPage = 1;
        let pageSize = 50;
        let totalCount = 0;
        let allData = [];
        let selectedIds = new Set();
        let editModal;
        let emailTemplateModal;
        let resendConfirmModal;
        let selectedFile = null;
        let currentStatus = 'pending'; // 當前檢視的狀態：pending 或 sent

        // ====== Initialize ======
        document.addEventListener('DOMContentLoaded', async () => {
            editModal = new bootstrap.Modal(document.getElementById('editModal'));
            emailTemplateModal = new bootstrap.Modal(document.getElementById('emailTemplateModal'));
            resendConfirmModal = new bootstrap.Modal(document.getElementById('resendConfirmModal'));
            await loadBatches();
            await loadData();
            bindEvents();
            updateWorkflowGuide();
        });

        // ====== Bind Events ======
        function bindEvents() {
            // 狀態標籤切換
            document.querySelectorAll('#statusTabs .nav-link').forEach(tab => {
                tab.addEventListener('click', (e) => {
                    document.querySelectorAll('#statusTabs .nav-link').forEach(t => t.classList.remove('active'));
                    e.target.classList.add('active');
                    currentStatus = e.target.dataset.status;
                    currentPage = 1;
                    selectedIds.clear();
                    loadData();
                    updateUIForStatus();
                });
            });

            // 篩選與全選
            document.getElementById('applyFilter').addEventListener('click', () => {
                currentPage = 1;
                loadData();
            });

            // 待發送全選
            document.getElementById('selectAllPending').addEventListener('change', (e) => {
                handleSelectAll(e.target.checked);
            });

            // 已發送全選
            document.getElementById('selectAllSent').addEventListener('change', (e) => {
                handleSelectAll(e.target.checked);
            });

            // 批次操作按鈕
            document.getElementById('batchDeletePending').addEventListener('click', batchDelete);
            document.getElementById('batchDeleteSent').addEventListener('click', batchDelete);
            document.getElementById('batchMarkSent').addEventListener('click', batchMarkSent);
            document.getElementById('batchMarkPending').addEventListener('click', batchMarkPending);
            document.getElementById('batchSendGrouped').addEventListener('click', batchSendGrouped);
            document.getElementById('batchSendSingle').addEventListener('click', batchSendSingle);
            document.getElementById('batchResend').addEventListener('click', openResendConfirm);
            document.getElementById('saveEdit').addEventListener('click', saveEdit);

            // 重送確認
            document.getElementById('confirmResend').addEventListener('change', (e) => {
                document.getElementById('confirmResendBtn').disabled = !e.target.checked;
            });
            document.getElementById('confirmResendBtn').addEventListener('click', executeResend);

            // Excel 匯入相關
            bindImportEvents();
        }

        // 更新 UI 根據當前狀態
        function updateUIForStatus() {
            const isPending = currentStatus === 'pending';

            // 顯示/隱藏對應的操作區塊
            document.getElementById('pendingActions').style.display = isPending ? 'block' : 'none';
            document.getElementById('sentActions').style.display = isPending ? 'none' : 'block';

            // 更新表頭顏色
            const headers = document.querySelectorAll('#tableHead th');
            headers.forEach(th => {
                th.classList.remove('th-pending', 'th-sent');
                th.classList.add(isPending ? 'th-pending' : 'th-sent');
            });

            // 重置選取
            document.getElementById('selectAllPending').checked = false;
            document.getElementById('selectAllSent').checked = false;
            updateBatchButtons();
        }

        // 全選處理
        function handleSelectAll(checked) {
            document.querySelectorAll('.row-checkbox').forEach(cb => {
                cb.checked = checked;
                if (checked) {
                    selectedIds.add(parseInt(cb.value));
                } else {
                    selectedIds.delete(parseInt(cb.value));
                }
            });
            updateBatchButtons();
        }

        // ====== 缺貨清單功能 ======

        // 載入批次清單
        async function loadBatches() {
            try {
                const response = await fetch('/vendor-stockout/api/stockout/batches');
                const result = await response.json();
                if (result.success) {
                    const select = document.getElementById('filterBatch');
                    result.data.forEach(batch => {
                        const option = document.createElement('option');
                        option.value = batch.batch_number;
                        option.textContent = `${batch.batch_number} (${batch.count} 筆)`;
                        select.appendChild(option);
                    });
                }
            } catch (error) {
                console.error('載入批次失敗:', error);
            }
        }

        // 載入資料
        async function loadData() {
            try {
                // 建立查詢參數
                const params = new URLSearchParams({
                    page: currentPage,
                    page_size: pageSize,
                    status: currentStatus
                });

                const batch = document.getElementById('filterBatch').value;
                const vendor = document.getElementById('filterVendor').value;
                const sortBy = document.getElementById('sortBy').value;

                if (batch) params.append('batch_number', batch);
                if (vendor) params.append('vendor', vendor);
                if (sortBy) params.append('sort_by', sortBy);

                const response = await fetch(`/vendor-stockout/api/stockout/list?${params}`);
                const result = await response.json();

                if (result.success) {
                    allData = result.data.records;
                    totalCount = result.data.total;
                    renderTable(allData);
                    updateStats(result.data.stats);
                    updatePagination();
                    updateUIForStatus();
                }
            } catch (error) {
                console.error('載入資料失敗:', error);
                document.getElementById('dataTable').innerHTML = `
                    <tr>
                        <td colspan="12" class="text-center py-5 text-danger">
                            <i class="fas fa-exclamation-circle fa-2x mb-3"></i>
                            <p>載入失敗: ${error.message}</p>
                        </td>
                    </tr>
                `;
            }
        }

        // 渲染表格
        function renderTable(data) {
            const tbody = document.getElementById('dataTable');
            const isPending = currentStatus === 'pending';

            if (data.length === 0) {
                const emptyMessage = isPending
                    ? '暫無待發送的缺貨資料<br><small class="text-muted">請先匯入 Excel 檔案或從「已發送」重設項目</small>'
                    : '暫無已發送的記錄<br><small class="text-muted">發送郵件後會顯示在此處</small>';

                tbody.innerHTML = `
                    <tr>
                        <td colspan="12">
                            <div class="empty-state">
                                <i class="fas ${isPending ? 'fa-inbox' : 'fa-paper-plane'}"></i>
                                <h5>${emptyMessage}</h5>
                            </div>
                        </td>
                    </tr>
                `;
                return;
            }

            tbody.innerHTML = data.map(record => `
                <tr>
                    <td>
                        <input type="checkbox" class="form-check-input row-checkbox" value="${record.id}"
                               ${selectedIds.has(record.id) ? 'checked' : ''}>
                    </td>
                    <td><span class="badge bg-info">${record.batch_number || '-'}</span></td>
                    <td><strong>${record.vendor_code}</strong></td>
                    <td>${record.vendor_name}</td>
                    <td><code>${record.product_code}</code></td>
                    <td>${record.product_name || '-'}</td>
                    <td><span class="badge bg-danger">${record.stockout_days || 0} 天</span></td>
                    <td>${record.daily_avg_sales ? record.daily_avg_sales.toFixed(1) : '-'}</td>
                    <td>${record.current_stock || 0}</td>
                    <td>${getStatusBadge(record.send_status)}</td>
                    <td><small>${formatDateTime(record.created_at)}</small></td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary me-1" onclick="editRecord(${record.id})">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger" onclick="deleteRecord(${record.id})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `).join('');

            // 綁定勾選事件
            document.querySelectorAll('.row-checkbox').forEach(cb => {
                cb.addEventListener('change', handleRowSelect);
            });
        }

        // 更新統計
        function updateStats(stats) {
            document.getElementById('totalCount').textContent = stats.total || 0;
            document.getElementById('pendingCount').textContent = stats.pending || 0;
            document.getElementById('sentCount').textContent = stats.sent || 0;
            document.getElementById('vendorCount').textContent = stats.vendor_count || 0;

            // 更新標籤上的徽章
            document.getElementById('pendingBadge').textContent = stats.pending || 0;
            document.getElementById('sentBadge').textContent = stats.sent || 0;
        }

        // 更新分頁
        function updatePagination() {
            const totalPages = Math.ceil(totalCount / pageSize);
            const start = (currentPage - 1) * pageSize + 1;
            const end = Math.min(currentPage * pageSize, totalCount);

            document.getElementById('pageInfo').textContent = totalCount > 0 ? `${start}-${end} / ${totalCount}` : '0 筆';

            const pagination = document.getElementById('pagination');
            let html = '';

            // 上一頁
            html += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${currentPage - 1}); return false;">上一頁</a>
            </li>`;

            // 頁碼
            for (let i = 1; i <= totalPages; i++) {
                if (i === 1 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)) {
                    html += `<li class="page-item ${i === currentPage ? 'active' : ''}">
                        <a class="page-link" href="#" onclick="changePage(${i}); return false;">${i}</a>
                    </li>`;
                } else if (i === currentPage - 3 || i === currentPage + 3) {
                    html += `<li class="page-item disabled"><a class="page-link">...</a></li>`;
                }
            }

            // 下一頁
            html += `<li class="page-item ${currentPage === totalPages || totalPages === 0 ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="changePage(${currentPage + 1}); return false;">下一頁</a>
            </li>`;

            pagination.innerHTML = html;
        }

        // 切換頁面
        function changePage(page) {
            const totalPages = Math.ceil(totalCount / pageSize);
            if (page < 1 || page > totalPages) return;
            currentPage = page;
            loadData();
        }

        // 處理行勾選
        function handleRowSelect(e) {
            const id = parseInt(e.target.value);
            if (e.target.checked) {
                selectedIds.add(id);
            } else {
                selectedIds.delete(id);
                // 取消全選勾選
                if (currentStatus === 'pending') {
                    document.getElementById('selectAllPending').checked = false;
                } else {
                    document.getElementById('selectAllSent').checked = false;
                }
            }
            updateBatchButtons();
        }

        // 更新批次按鈕狀態
        function updateBatchButtons() {
            const count = selectedIds.size;

            if (currentStatus === 'pending') {
                document.getElementById('selectedPendingCount').textContent = count;
                document.getElementById('batchDeletePending').disabled = count === 0;
                document.getElementById('batchMarkSent').disabled = count === 0;
                document.getElementById('batchSendGrouped').disabled = count === 0;
                document.getElementById('batchSendSingle').disabled = count === 0;
            } else {
                document.getElementById('selectedSentCount').textContent = count;
                document.getElementById('batchDeleteSent').disabled = count === 0;
                document.getElementById('batchMarkPending').disabled = count === 0;
                document.getElementById('batchResend').disabled = count === 0;
            }
        }

        // 編輯記錄
        async function editRecord(id) {
            const record = allData.find(r => r.id === id);
            if (!record) return;

            document.getElementById('editId').value = record.id;
            document.getElementById('editVendorCode').value = record.vendor_code;
            document.getElementById('editVendorName').value = record.vendor_name;
            document.getElementById('editProductCode').value = record.product_code;
            document.getElementById('editProductName').value = record.product_name || '';
            document.getElementById('editStockoutDays').value = record.stockout_days || 0;
            document.getElementById('editDailyAvgSales').value = record.daily_avg_sales || 0;
            document.getElementById('editCurrentStock').value = record.current_stock || 0;
            document.getElementById('editNotes').value = record.notes || '';

            editModal.show();
        }

        // 儲存編輯
        async function saveEdit() {
            const id = document.getElementById('editId').value;
            const data = {
                product_name: document.getElementById('editProductName').value,
                stockout_days: parseInt(document.getElementById('editStockoutDays').value) || 0,
                daily_avg_sales: parseFloat(document.getElementById('editDailyAvgSales').value) || 0,
                current_stock: parseInt(document.getElementById('editCurrentStock').value) || 0,
                notes: document.getElementById('editNotes').value
            };

            try {
                const response = await fetch(`/vendor-stockout/api/stockout/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify(data)
                });

                const result = await response.json();
                if (result.success) {
                    editModal.hide();
                    await loadData();
                    alert('更新成功！');
                } else {
                    alert('更新失敗: ' + result.message);
                }
            } catch (error) {
                alert('更新失敗: ' + error.message);
            }
        }

        // 刪除記錄
        async function deleteRecord(id) {
            if (!confirm('確定要刪除這筆記錄嗎？')) return;

            try {
                const response = await fetch(`/vendor-stockout/api/stockout/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRFToken': csrfToken
                    }
                });

                const result = await response.json();
                if (result.success) {
                    await loadData();
                    alert('刪除成功！');
                } else {
                    alert('刪除失敗: ' + result.message);
                }
            } catch (error) {
                alert('刪除失敗: ' + error.message);
            }
        }

        // 批次刪除
        async function batchDelete() {
            if (selectedIds.size === 0) return;
            if (!confirm(`確定要刪除選取的 ${selectedIds.size} 筆記錄嗎？`)) return;

            try {
                const response = await fetch('/vendor-stockout/api/stockout/batch/delete', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify({
                        ids: Array.from(selectedIds)
                    })
                });

                const result = await response.json();
                if (result.success) {
                    selectedIds.clear();
                    await loadData();
                    alert(`成功刪除 ${result.data.deleted_count} 筆記錄！`);
                } else {
                    alert('刪除失敗: ' + result.message);
                }
            } catch (error) {
                alert('刪除失敗: ' + error.message);
            }
        }

        // 批次標記已發送
        async function batchMarkSent() {
            if (selectedIds.size === 0) return;
            if (!confirm(`確定要將選取的 ${selectedIds.size} 筆記錄標記為已發送嗎？\n（這不會發送實際郵件）`)) return;

            try {
                const response = await fetch('/vendor-stockout/api/stockout/batch/mark-sent', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify({
                        ids: Array.from(selectedIds)
                    })
                });

                const result = await response.json();
                if (result.success) {
                    selectedIds.clear();
                    await loadData();
                    alert(`成功更新 ${result.data.updated_count} 筆記錄！`);
                } else {
                    alert('更新失敗: ' + result.message);
                }
            } catch (error) {
                alert('更新失敗: ' + error.message);
            }
        }

        // 批次標記為待發送（從已發送重設）
        async function batchMarkPending() {
            if (selectedIds.size === 0) return;
            if (!confirm(`確定要將選取的 ${selectedIds.size} 筆記錄重設為「待發送」狀態嗎？`)) return;

            try {
                const response = await fetch('/vendor-stockout/api/stockout/batch/mark-pending', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify({
                        ids: Array.from(selectedIds)
                    })
                });

                const result = await response.json();
                if (result.success) {
                    selectedIds.clear();
                    await loadData();
                    alert(`成功更新 ${result.data.updated_count} 筆記錄！`);
                } else {
                    alert('更新失敗: ' + result.message);
                }
            } catch (error) {
                alert('更新失敗: ' + error.message);
            }
        }

        // 開啟重送確認對話框
        function openResendConfirm() {
            if (selectedIds.size === 0) return;
            document.getElementById('resendCount').textContent = selectedIds.size;
            document.getElementById('confirmResend').checked = false;
            document.getElementById('confirmResendBtn').disabled = true;
            resendConfirmModal.show();
        }

        // 執行重新發送
        async function executeResend() {
            resendConfirmModal.hide();
            await batchSendGrouped();
        }

        // 按廠商分組發送郵件
        async function batchSendGrouped() {
            if (selectedIds.size === 0) return;

            const vendorCount = new Set(allData.filter(r => selectedIds.has(r.id)).map(r => r.vendor_code)).size;

            // 如果是從已發送重送，不需要再次確認（已經在 Modal 確認過）
            if (currentStatus === 'pending') {
                if (!confirm(`確定要按廠商分組發送嗎？\n\n將發送給 ${vendorCount} 個廠商\n選取的 ${selectedIds.size} 個商品將按廠商整合為一封郵件`)) return;
            }

            try {
                const response = await fetch('/vendor-stockout/api/email/send/grouped', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify({
                        stockout_ids: Array.from(selectedIds)
                    })
                });

                const result = await response.json();
                if (result.success) {
                    selectedIds.clear();
                    await loadData();

                    // 顯示詳細結果
                    let message = result.message + '\n\n';
                    if (result.data.success_vendors && result.data.success_vendors.length > 0) {
                        message += '✅ 成功發送:\n';
                        result.data.success_vendors.forEach(v => {
                            message += `  - ${v.vendor_name} (${v.vendor_code}): ${v.item_count} 個商品\n`;
                        });
                    }
                    if (result.data.failed_vendors && result.data.failed_vendors.length > 0) {
                        message += '\n❌ 發送失敗:\n';
                        result.data.failed_vendors.forEach(v => {
                            message += `  - ${v.vendor_name} (${v.vendor_code}): ${v.reason}\n`;
                        });
                    }
                    alert(message);
                    updateWorkflowGuide();
                } else {
                    alert('發送失敗: ' + result.message);
                }
            } catch (error) {
                alert('發送失敗: ' + error.message);
            }
        }

        // 按商品單筆發送郵件
        async function batchSendSingle() {
            if (selectedIds.size === 0) return;

            if (!confirm(`確定要按商品單筆發送嗎？\n\n將為 ${selectedIds.size} 個商品各發送一封獨立郵件`)) return;

            try {
                const response = await fetch('/vendor-stockout/api/email/send/single', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify({
                        stockout_ids: Array.from(selectedIds)
                    })
                });

                const result = await response.json();
                if (result.success) {
                    selectedIds.clear();
                    await loadData();

                    // 顯示詳細結果
                    let message = result.message + '\n\n';
                    if (result.data.success_items && result.data.success_items.length > 0) {
                        message += `✅ 成功發送 ${result.data.success_items.length} 封郵件\n`;
                    }
                    if (result.data.failed_items && result.data.failed_items.length > 0) {
                        message += '\n❌ 發送失敗:\n';
                        result.data.failed_items.forEach(item => {
                            message += `  - ${item.product_name} (${item.product_code}): ${item.reason}\n`;
                        });
                    }
                    alert(message);
                    updateWorkflowGuide();
                } else {
                    alert('發送失敗: ' + result.message);
                }
            } catch (error) {
                alert('發送失敗: ' + error.message);
            }
        }

        // 更新流程提示
        function updateWorkflowGuide() {
            // 根據目前狀態更新流程圖標
            const pendingCount = parseInt(document.getElementById('pendingCount').textContent) || 0;
            const sentCount = parseInt(document.getElementById('sentCount').textContent) || 0;

            // Step 1: 匯入
            document.getElementById('step1Icon').classList.toggle('active', true);

            // Step 2: 勾選
            document.getElementById('step2Icon').classList.toggle('active', pendingCount > 0);

            // Step 3: 發送
            document.getElementById('step3Icon').classList.toggle('active', sentCount > 0);

            // Step 4: 查看記錄
            document.getElementById('step4Icon').classList.toggle('active', sentCount > 0);
        }

        // ====== Excel 匯入功能 ======

        function bindImportEvents() {
            const uploadArea = document.getElementById('uploadArea');
            const fileInput = document.getElementById('fileInput');
            const selectFileBtn = document.getElementById('selectFileBtn');

            uploadArea.addEventListener('click', () => fileInput.click());
            selectFileBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                fileInput.click();
            });

            fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));

            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.classList.add('dragover');
            });

            uploadArea.addEventListener('dragleave', () => {
                uploadArea.classList.remove('dragover');
            });

            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                uploadArea.classList.remove('dragover');
                handleFile(e.dataTransfer.files[0]);
            });

            document.getElementById('uploadBtn').addEventListener('click', uploadExcel);
            document.getElementById('importAgainBtn').addEventListener('click', resetImport);
        }

        function handleFile(file) {
            if (!file) return;

            if (!file.name.match(/\.(xlsx|xls)$/i)) {
                alert('請選擇 Excel 檔案 (.xlsx 或 .xls)');
                return;
            }

            selectedFile = file;
            document.getElementById('fileName').textContent = file.name;
            document.getElementById('fileSize').textContent = formatFileSize(file.size);
            document.getElementById('fileInfo').style.display = 'block';
            document.getElementById('resultArea').style.display = 'none';
            document.getElementById('errorArea').style.display = 'none';
        }

        async function uploadExcel() {
            if (!selectedFile) return;

            const formData = new FormData();
            formData.append('file', selectedFile);

            document.getElementById('fileInfo').style.display = 'none';
            document.getElementById('progressArea').style.display = 'block';
            document.getElementById('errorArea').style.display = 'none';
            document.getElementById('resultArea').style.display = 'none';

            try {
                const response = await fetch('/vendor-stockout/api/import/excel', {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': csrfToken
                    },
                    body: formData
                });

                const result = await response.json();

                document.getElementById('progressArea').style.display = 'none';

                if (result.success) {
                    // 顯示成功結果
                    document.getElementById('importTotalCount').textContent = result.data.total_count;
                    document.getElementById('importSuccessCount').textContent = result.data.success_count;
                    document.getElementById('importDuplicateCount').textContent = result.data.duplicate_count;
                    document.getElementById('importFailedCount').textContent = result.data.failed_count;
                    document.getElementById('batchId').textContent = result.data.batch_id;
                    document.getElementById('resultArea').style.display = 'block';
                } else {
                    // 顯示錯誤
                    document.getElementById('errorMessage').textContent = result.message;
                    document.getElementById('errorArea').style.display = 'block';
                }
            } catch (error) {
                document.getElementById('progressArea').style.display = 'none';
                document.getElementById('errorMessage').textContent = '網路錯誤: ' + error.message;
                document.getElementById('errorArea').style.display = 'block';
            }
        }

        function resetImport() {
            selectedFile = null;
            document.getElementById('fileInput').value = '';
            document.getElementById('fileInfo').style.display = 'none';
            document.getElementById('resultArea').style.display = 'none';
            document.getElementById('errorArea').style.display = 'none';
        }

        function switchToListTab() {
            const listTab = new bootstrap.Tab(document.getElementById('list-tab'));
            listTab.show();
            loadData();
        }

        // ====== 工具函數 ======

        function getStatusBadge(status) {
            const badges = {
                'pending': '<span class="badge status-pending"><i class="fas fa-clock me-1"></i>待發送</span>',
                'sent': '<span class="badge status-sent"><i class="fas fa-check me-1"></i>已發送</span>',
                'failed': '<span class="badge status-failed"><i class="fas fa-times me-1"></i>失敗</span>'
            };
            return badges[status] || badges['pending'];
        }

        function formatDateTime(dateStr) {
            if (!dateStr) return '-';
            const date = new Date(dateStr);
            return date.toLocaleString('zh-TW', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        function formatFileSize(bytes) {
            if (bytes < 1024) return bytes + ' B';
            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
        }

        // ====== 郵件模板設定功能 ======

        // 開啟郵件模板設定 Modal
        async function openEmailTemplateModal() {
            await loadEmailTemplate();
            emailTemplateModal.show();
        }

        // 載入郵件模板
        async function loadEmailTemplate() {
            try {
                const response = await fetch('/vendor-stockout/api/email/template');
                const result = await response.json();
                if (result.success) {
                    document.getElementById('emailSubjectInput').value = result.data.subject || '';
                    document.getElementById('emailBodyInput').value = result.data.body || '';
                    refreshEmailPreview();
                } else {
                    alert('載入模板失敗: ' + result.message);
                }
            } catch (error) {
                alert('載入模板失敗: ' + error.message);
            }
        }

        // 儲存郵件模板
        async function saveEmailTemplate() {
            const subject = document.getElementById('emailSubjectInput').value.trim();
            const body = document.getElementById('emailBodyInput').value.trim();

            if (!subject || !body) {
                alert('請填寫郵件主旨和內容');
                return;
            }

            try {
                const response = await fetch('/vendor-stockout/api/email/template', {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify({ subject, body })
                });

                const result = await response.json();
                if (result.success) {
                    alert('郵件模板已儲存！之後發送的郵件都會套用此模板。');
                    emailTemplateModal.hide();
                } else {
                    alert('儲存失敗: ' + result.message);
                }
            } catch (error) {
                alert('儲存失敗: ' + error.message);
            }
        }

        // 恢復預設模板
        async function resetEmailTemplate() {
            if (!confirm('確定要恢復為預設郵件模板嗎？')) return;

            try {
                const response = await fetch('/vendor-stockout/api/email/template/reset', {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': csrfToken
                    }
                });

                const result = await response.json();
                if (result.success) {
                    document.getElementById('emailSubjectInput').value = result.data.subject || '';
                    document.getElementById('emailBodyInput').value = result.data.body || '';
                    refreshEmailPreview();
                    alert('已恢復為預設模板');
                } else {
                    alert('恢復失敗: ' + result.message);
                }
            } catch (error) {
                alert('恢復失敗: ' + error.message);
            }
        }

        // 重新整理郵件預覽
        function refreshEmailPreview() {
            const subject = document.getElementById('emailSubjectInput').value;
            const body = document.getElementById('emailBodyInput').value;

            // 範例資料
            const sampleData = {
                vendor_name: '範例廠商',
                vendor_code: 'V001',
                item_count: '5'
            };

            // 替換變數
            let previewSubject = subject;
            let previewBody = body;

            for (const [key, value] of Object.entries(sampleData)) {
                const regex = new RegExp(`\\{\\{${key}\\}\\}`, 'g');
                previewSubject = previewSubject.replace(regex, value);
                previewBody = previewBody.replace(regex, value);
            }

            document.getElementById('emailPreviewSubject').textContent = previewSubject;
            document.getElementById('emailPreviewBody').innerHTML = previewBody;
        }
    </script>
    <script>
        // 更新導航列時鐘
        function updateNavTime() {
            const now = new Date();
            const elem = document.getElementById('nav-time');
            if (elem) {
                elem.textContent = now.toLocaleString('zh-TW', {
                    year: 'numeric', month: '2-digit', day: '2-digit',
                    hour: '2-digit', minute: '2-digit', second: '2-digit'
                });
            }
        }
        updateNavTime();
        setInterval(updateNavTime, 1000);
    </script>
</body>
</html>
