<!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>廠商缺貨通知系統 - WOOO TECH</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;
        }

        .navbar-dark.bg-primary {
            background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%) !important;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
        }

        .navbar-dark .navbar-brand {
            color: #ffffff !important;
            font-weight: 600;
        }

        .navbar-dark .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            transition: all 0.3s;
        }

        .navbar-dark .navbar-nav .nav-link:hover {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 6px;
        }

        .navbar-dark .navbar-nav .nav-link.active {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 6px;
            font-weight: 600;
        }

        .navbar-dark .navbar-text {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        .navbar {
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
        }

        .navbar.bg-custom-dark {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
        }

        .function-card {
            border: none;
            border-radius: 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            height: 100%;
            background: #fff;
        }

        .function-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 32px rgba(0,0,0,0.18);
        }

        .function-card .card-body {
            padding: 2rem;
            text-align: center;
            padding-top: 70px;
        }

        .function-icon {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            display: inline-block;
            transition: transform 0.3s ease;
        }

        .function-card:hover .function-icon {
            transform: scale(1.1) rotate(5deg);
        }

        .function-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #2c3e50;
        }

        .function-description {
            color: #6c757d;
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }

        .btn-function {
            padding: 0.75rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }

        .card-import { border-top: 4px solid #3498db; }
        .card-import .function-icon { color: #3498db; }
        .card-import .btn-function { background: #3498db; color: white; border: none; }
        .card-import .btn-function:hover { background: #2980b9; transform: scale(1.05); }

        .card-list { border-top: 4px solid #2ecc71; }
        .card-list .function-icon { color: #2ecc71; }
        .card-list .btn-function { background: #2ecc71; color: white; border: none; }
        .card-list .btn-function:hover { background: #27ae60; transform: scale(1.05); }

        .card-vendor { border-top: 4px solid #9b59b6; }
        .card-vendor .function-icon { color: #9b59b6; }
        .card-vendor .btn-function { background: #9b59b6; color: white; border: none; }
        .card-vendor .btn-function:hover { background: #8e44ad; transform: scale(1.05); }

        .card-email { border-top: 4px solid #e74c3c; }
        .card-email .function-icon { color: #e74c3c; }
        .card-email .btn-function { background: #e74c3c; color: white; border: none; }
        .card-email .btn-function:hover { background: #c0392b; transform: scale(1.05); }

        .card-history { border-top: 4px solid #f39c12; }
        .card-history .function-icon { color: #f39c12; }
        .card-history .btn-function { background: #f39c12; color: white; border: none; }
        .card-history .btn-function:hover { background: #e67e22; transform: scale(1.05); }

        .page-header {
            background: white;
            padding: 2rem;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            margin-bottom: 2rem;
        }

        .page-header h1 {
            font-size: 2.5rem;
            font-weight: 800;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }

        .page-header p {
            color: #6c757d;
            font-size: 1.1rem;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <!-- 導航列 -->
    {% include 'components/_navbar.html' %}

    <!-- 主要內容 -->
    <div class="container-fluid" style="padding: 2rem;">
        <!-- 頁面標題 -->
        <div class="page-header">
            <h1><i class="fas fa-box-open me-3"></i>廠商缺貨通知自動化系統</h1>
            <p>管理缺貨商品資料、廠商聯絡資訊，並自動發送缺貨通知郵件</p>
        </div>

        <!-- 功能卡片 -->
        <div class="row g-4">
            <!-- Excel 匯入 -->
            <div class="col-md-6 col-lg-4">
                <div class="card function-card card-import">
                    <div class="card-body">
                        <div class="function-icon">
                            <i class="fas fa-file-excel"></i>
                        </div>
                        <h3 class="function-title">Excel 匯入</h3>
                        <p class="function-description">
                            匯入缺貨商品資料，系統會自動檢測重複項目並標記狀態
                        </p>
                        <a href="/vendor-stockout/import" class="btn btn-function">
                            <i class="fas fa-upload me-2"></i>開始匯入
                        </a>
                    </div>
                </div>
            </div>

            <!-- 缺貨清單 -->
            <div class="col-md-6 col-lg-4">
                <div class="card function-card card-list">
                    <div class="card-body">
                        <div class="function-icon">
                            <i class="fas fa-list-ul"></i>
                        </div>
                        <h3 class="function-title">缺貨清單</h3>
                        <p class="function-description">
                            查看、編輯、篩選已匯入的缺貨商品，支援批次操作與排序
                        </p>
                        <a href="/vendor-stockout/list" class="btn btn-function">
                            <i class="fas fa-search me-2"></i>查看清單
                        </a>
                    </div>
                </div>
            </div>

            <!-- 廠商管理 -->
            <div class="col-md-6 col-lg-4">
                <div class="card function-card card-vendor">
                    <div class="card-body">
                        <div class="function-icon">
                            <i class="fas fa-building"></i>
                        </div>
                        <h3 class="function-title">廠商管理</h3>
                        <p class="function-description">
                            管理廠商基本資料與聯絡郵件，支援多個郵件地址設定
                        </p>
                        <a href="/vendor-stockout/vendor-management" class="btn btn-function">
                            <i class="fas fa-users-cog me-2"></i>管理廠商
                        </a>
                    </div>
                </div>
            </div>

            <!-- 郵件發送 -->
            <div class="col-md-6 col-lg-4">
                <div class="card function-card card-email">
                    <div class="card-body">
                        <div class="function-icon">
                            <i class="fas fa-paper-plane"></i>
                        </div>
                        <h3 class="function-title">郵件發送</h3>
                        <p class="function-description">
                            依廠商分組發送缺貨通知郵件，附件包含該廠商的缺貨清單
                        </p>
                        <a href="/vendor-stockout/send-email" class="btn btn-function">
                            <i class="fas fa-envelope me-2"></i>發送郵件
                        </a>
                    </div>
                </div>
            </div>

            <!-- 發送歷史 -->
            <div class="col-md-6 col-lg-4">
                <div class="card function-card card-history">
                    <div class="card-body">
                        <div class="function-icon">
                            <i class="fas fa-history"></i>
                        </div>
                        <h3 class="function-title">發送歷史</h3>
                        <p class="function-description">
                            查看郵件發送記錄、成功率統計，以及失敗項目的錯誤訊息
                        </p>
                        <a href="/vendor-stockout/history" class="btn btn-function">
                            <i class="fas fa-clock me-2"></i>查看記錄
                        </a>
                    </div>
                </div>
            </div>

            <!-- 下載範本 -->
            <div class="col-md-6 col-lg-4">
                <div class="card function-card" style="border-top: 4px solid #34495e;">
                    <div class="card-body">
                        <div class="function-icon" style="color: #34495e;">
                            <i class="fas fa-download"></i>
                        </div>
                        <h3 class="function-title">下載範本</h3>
                        <p class="function-description">
                            下載 Excel 匯入範本，確保資料格式正確無誤
                        </p>
                        <a href="/vendor-stockout/api/import/template" class="btn btn-function"
                           style="background: #34495e; color: white; border: none;">
                            <i class="fas fa-file-download me-2"></i>下載範本
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系統說明 -->
        <div class="card mt-4" style="border-radius: 16px;">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="fas fa-info-circle me-2 text-info"></i>系統使用說明
                </h5>
                <div class="row mt-3">
                    <div class="col-md-6">
                        <h6><i class="fas fa-arrow-right text-primary me-2"></i>基本流程</h6>
                        <ol class="small text-muted">
                            <li>下載 Excel 範本，填入缺貨商品資料</li>
                            <li>使用「Excel 匯入」功能上傳檔案</li>
                            <li>在「缺貨清單」中檢視並編輯資料</li>
                            <li>在「廠商管理」中設定廠商郵件</li>
                            <li>使用「郵件發送」功能通知廠商</li>
                            <li>在「發送歷史」中查看執行結果</li>
                        </ol>
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-arrow-right text-success me-2"></i>功能特色</h6>
                        <ul class="small text-muted">
                            <li>自動偵測重複資料並標記</li>
                            <li>支援一次匯入多筆缺貨記錄</li>
                            <li>依廠商分組自動產生郵件附件</li>
                            <li>郵件發送前可預覽內容</li>
                            <li>完整的操作記錄與錯誤追蹤</li>
                            <li>支援失敗郵件重新發送</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
