<?php
$pageTitle = __('documentation');
include 'header.php';
?>

<div class="container py-5">
    <div class="row">
        <div class="col-lg-12">
            <div class="hero-section mb-5 text-center">
                <div class="container">
                    <h1 class="display-4 fw-bold text-white mb-4">
                        <i class="fas fa-book me-3"></i><?= __('documentation') ?>
                    </h1>
                    <p class="lead text-white opacity-75">
                        <?= __('complete_guide') ?? 'Complete guide to using Excellent Blog platform' ?>
                    </p>
                </div>
            </div>

            <div class="card border-0 shadow-lg">
                <div class="card-body p-5">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="nav flex-column nav-pills sticky-top" id="v-pills-tab" role="tablist" style="top: 100px;">
                                <button class="nav-link active" id="v-pills-overview-tab" data-bs-toggle="pill" data-bs-target="#v-pills-overview" type="button">
                                    <i class="fas fa-home me-2"></i>系統概述
                                </button>
                                <button class="nav-link" id="v-pills-setup-tab" data-bs-toggle="pill" data-bs-target="#v-pills-setup" type="button">
                                    <i class="fas fa-cog me-2"></i>安裝設定
                                </button>
                                <button class="nav-link" id="v-pills-admin-tab" data-bs-toggle="pill" data-bs-target="#v-pills-admin" type="button">
                                    <i class="fas fa-user-shield me-2"></i>管理後台
                                </button>
                                <button class="nav-link" id="v-pills-articles-tab" data-bs-toggle="pill" data-bs-target="#v-pills-articles" type="button">
                                    <i class="fas fa-newspaper me-2"></i>文章管理
                                </button>
                                <button class="nav-link" id="v-pills-ai-tab" data-bs-toggle="pill" data-bs-target="#v-pills-ai" type="button">
                                    <i class="fas fa-robot me-2"></i>AI 功能
                                </button>
                                <button class="nav-link" id="v-pills-chat-tab" data-bs-toggle="pill" data-bs-target="#v-pills-chat" type="button">
                                    <i class="fas fa-comments me-2"></i>聊天功能
                                </button>
                                <button class="nav-link" id="v-pills-multilang-tab" data-bs-toggle="pill" data-bs-target="#v-pills-multilang" type="button">
                                    <i class="fas fa-language me-2"></i>多語系
                                </button>
                                <button class="nav-link" id="v-pills-api-tab" data-bs-toggle="pill" data-bs-target="#v-pills-api" type="button">
                                    <i class="fas fa-code me-2"></i>API 文件
                                </button>
                                <button class="nav-link" id="v-pills-troubleshooting-tab" data-bs-toggle="pill" data-bs-target="#v-pills-troubleshooting" type="button">
                                    <i class="fas fa-tools me-2"></i>故障排除
                                </button>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="tab-content" id="v-pills-tabContent">
                                <!-- 系統概述 -->
                                <div class="tab-pane fade show active" id="v-pills-overview">
                                    <h2 class="mb-4">🚀 Excellent Blog 系統概述</h2>
                                    <p class="lead">Excellent Blog 是一個結合 AI、自動化與跨平台推廣的現代化部落格系統。</p>

                                    <div class="row g-4 mb-5">
                                        <div class="col-md-6">
                                            <div class="card h-100 border-primary">
                                                <div class="card-body">
                                                    <h5 class="card-title text-primary">
                                                        <i class="fas fa-robot me-2"></i>AI 驅動
                                                    </h5>
                                                    <p class="card-text">自動生成文章、智能聊天助手、內容優化</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card h-100 border-success">
                                                <div class="card-body">
                                                    <h5 class="card-title text-success">
                                                        <i class="fas fa-globe me-2"></i>國際化
                                                    </h5>
                                                    <p class="card-text">6 種語言支援、國際平台自動發布</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h4>主要功能</h4>
                                    <ul class="list-group list-group-flush mb-4">
                                        <li class="list-group-item d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-3"></i>
                                            <strong>內部與外部部落格</strong> - 支援內部知識分享與外部行銷推廣
                                        </li>
                                        <li class="list-group-item d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-3"></i>
                                            <strong>AI 自動寫作</strong> - 使用 GPT API 自動生成文章內容
                                        </li>
                                        <li class="list-group-item d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-3"></i>
                                            <strong>多語系支援</strong> - 支援繁中、簡中、英文、日文、越南文、馬來文
                                        </li>
                                        <li class="list-group-item d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-3"></i>
                                            <strong>即時聊天</strong> - 前台後台都有 AI 聊天助手
                                        </li>
                                        <li class="list-group-item d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-3"></i>
                                            <strong>自動爬蟲</strong> - 定時抓取相關文章並發布
                                        </li>
                                        <li class="list-group-item d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-3"></i>
                                            <strong>國際平台推送</strong> - 自動推送到歐美及東南亞平台
                                        </li>
                                    </ul>

                                    <h4>技術架構</h4>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <div class="text-center p-3 bg-light rounded">
                                                <i class="fab fa-php fa-2x text-primary mb-2"></i>
                                                <p class="mb-0"><strong>後端</strong><br>PHP 8.2 + Apache</p>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="text-center p-3 bg-light rounded">
                                                <i class="fas fa-database fa-2x text-success mb-2"></i>
                                                <p class="mb-0"><strong>資料庫</strong><br>MySQL 8.0</p>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="text-center p-3 bg-light rounded">
                                                <i class="fab fa-docker fa-2x text-info mb-2"></i>
                                                <p class="mb-0"><strong>部署</strong><br>Docker Compose</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 安裝設定 -->
                                <div class="tab-pane fade" id="v-pills-setup">
                                    <h2 class="mb-4">⚙️ 安裝設定指南</h2>

                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>系統需求：</strong>Docker、Docker Compose、2GB RAM、5GB 硬碟空間
                                    </div>

                                    <h4>快速安裝</h4>
                                    <div class="card bg-dark text-light mb-4">
                                        <div class="card-body">
                                            <h6 class="card-title">
                                                <i class="fas fa-terminal me-2"></i>安裝指令
                                            </h6>
                                            <pre class="mb-0"><code>cd /root/docker/blog
./start.sh</code></pre>
                                        </div>
                                    </div>

                                    <h4>訪問地址</h4>
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead class="table-dark">
                                                <tr>
                                                    <th>服務</th>
                                                    <th>地址</th>
                                                    <th>說明</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><i class="fas fa-home me-2"></i>前台</td>
                                                    <td><code>http://192.168.168.241:8480</code></td>
                                                    <td>部落格主頁</td>
                                                </tr>
                                                <tr>
                                                    <td><i class="fas fa-cog me-2"></i>後台</td>
                                                    <td><code>http://192.168.168.241:8480/admin</code></td>
                                                    <td>管理面板</td>
                                                </tr>
                                                <tr>
                                                    <td><i class="fas fa-database me-2"></i>PhpMyAdmin</td>
                                                    <td><code>http://192.168.168.241:8481</code></td>
                                                    <td>資料庫管理</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="alert alert-warning">
                                        <i class="fas fa-key me-2"></i>
                                        <strong>預設帳號：</strong><br>
                                        使用者名稱：<code>jeff</code><br>
                                        密碼：<code>ulik9910</code>
                                    </div>
                                </div>

                                <!-- 管理後台 -->
                                <div class="tab-pane fade" id="v-pills-admin">
                                    <h2 class="mb-4">👤 管理後台使用指南</h2>

                                    <h4>登入系統</h4>
                                    <ol class="list-group list-group-numbered mb-4">
                                        <li class="list-group-item">前往管理員登入頁面</li>
                                        <li class="list-group-item">輸入帳號 <code>jeff</code> 和密碼 <code>ulik9910</code></li>
                                        <li class="list-group-item">成功登入後進入儀表板</li>
                                    </ol>

                                    <h4>主要功能</h4>
                                    <div class="row g-4">
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <h5 class="card-title">
                                                        <i class="fas fa-tachometer-alt me-2 text-primary"></i>儀表板
                                                    </h5>
                                                    <p class="card-text">統計資訊、最新文章、快速操作、系統狀態</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <h5 class="card-title">
                                                        <i class="fas fa-newspaper me-2 text-success"></i>文章管理
                                                    </h5>
                                                    <p class="card-text">新增、編輯、刪除文章，管理分類和標籤</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <h5 class="card-title">
                                                        <i class="fas fa-robot me-2 text-info"></i>AI 寫作
                                                    </h5>
                                                    <p class="card-text">使用 AI 自動生成文章內容</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <h5 class="card-title">
                                                        <i class="fas fa-cogs me-2 text-warning"></i>系統設定
                                                    </h5>
                                                    <p class="card-text">爬蟲設定、外部平台、語言設定</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 文章管理 -->
                                <div class="tab-pane fade" id="v-pills-articles">
                                    <h2 class="mb-4">📝 文章管理指南</h2>

                                    <h4>文章類型說明</h4>
                                    <div class="row g-4 mb-4">
                                        <div class="col-md-6">
                                            <div class="card border-warning">
                                                <div class="card-body">
                                                    <h5 class="card-title text-warning">
                                                        <i class="fas fa-lock me-2"></i>內部文章
                                                    </h5>
                                                    <p class="card-text">供內部同仁閱讀的知識分享文章，包含策略、流程、內部資訊等</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card border-success">
                                                <div class="card-body">
                                                    <h5 class="card-title text-success">
                                                        <i class="fas fa-globe me-2"></i>外部文章
                                                    </h5>
                                                    <p class="card-text">面向大眾的行銷推廣文章，注重 SEO 和品牌推廣</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h4>發布流程</h4>
                                    <div class="timeline">
                                        <div class="timeline-item">
                                            <div class="timeline-marker bg-primary"></div>
                                            <div class="timeline-content">
                                                <h6>1. 建立文章</h6>
                                                <p>點擊「新增文章」，填寫標題和內容</p>
                                            </div>
                                        </div>
                                        <div class="timeline-item">
                                            <div class="timeline-marker bg-info"></div>
                                            <div class="timeline-content">
                                                <h6>2. 設定屬性</h6>
                                                <p>選擇文章類型、分類、標籤</p>
                                            </div>
                                        </div>
                                        <div class="timeline-item">
                                            <div class="timeline-marker bg-warning"></div>
                                            <div class="timeline-content">
                                                <h6>3. SEO 優化</h6>
                                                <p>設定 Meta 標題、描述、關鍵字</p>
                                            </div>
                                        </div>
                                        <div class="timeline-item">
                                            <div class="timeline-marker bg-success"></div>
                                            <div class="timeline-content">
                                                <h6>4. 發布文章</h6>
                                                <p>選擇立即發布或設定排程</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- AI 功能 -->
                                <div class="tab-pane fade" id="v-pills-ai">
                                    <h2 class="mb-4">🤖 AI 功能使用指南</h2>

                                    <div class="alert alert-info">
                                        <i class="fas fa-lightbulb me-2"></i>
                                        <strong>提示：</strong>越具體的提示詞，AI 生成的內容品質越好
                                    </div>

                                    <h4>AI 文章生成步驟</h4>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row g-3">
                                                <div class="col-md-4">
                                                    <div class="text-center">
                                                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                                            <strong>1</strong>
                                                        </div>
                                                        <h6 class="mt-2">選擇設定</h6>
                                                        <small class="text-muted">選擇文章類型、語言、長度</small>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="text-center">
                                                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                                            <strong>2</strong>
                                                        </div>
                                                        <h6 class="mt-2">輸入提示</h6>
                                                        <small class="text-muted">描述文章主題和要求</small>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="text-center">
                                                        <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                                            <strong>3</strong>
                                                        </div>
                                                        <h6 class="mt-2">生成發布</h6>
                                                        <small class="text-muted">AI 生成後編輯並發布</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h4 class="mt-4">提示詞範例</h4>
                                    <div class="accordion" id="aiExamples">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#example1">
                                                    技術文章範例
                                                </button>
                                            </h2>
                                            <div id="example1" class="accordion-collapse collapse show" data-bs-parent="#aiExamples">
                                                <div class="accordion-body">
                                                    <code>寫一篇關於「Docker 容器化部署的最佳實踐」的技術文章，目標讀者是有基礎的開發者，文章需要包含實際範例和常見問題解決方案。</code>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#example2">
                                                    行銷文章範例
                                                </button>
                                            </h2>
                                            <div id="example2" class="accordion-collapse collapse" data-bs-parent="#aiExamples">
                                                <div class="accordion-body">
                                                    <code>寫一篇關於「AI 如何改變企業營運效率」的行銷文章，目標讀者是中小企業老闆，重點強調 AI 帶來的商業價值和投資回報。</code>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 聊天功能 -->
                                <div class="tab-pane fade" id="v-pills-chat">
                                    <h2 class="mb-4">💬 聊天功能使用指南</h2>

                                    <div class="row g-4">
                                        <div class="col-md-8">
                                            <h4>AI 聊天助手功能</h4>
                                            <ul class="list-group">
                                                <li class="list-group-item d-flex align-items-center">
                                                    <i class="fas fa-question-circle text-primary me-3"></i>
                                                    <div>
                                                        <strong>即時問答</strong>
                                                        <br><small class="text-muted">回答關於系統使用的問題</small>
                                                    </div>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center">
                                                    <i class="fas fa-lightbulb text-warning me-3"></i>
                                                    <div>
                                                        <strong>內容建議</strong>
                                                        <br><small class="text-muted">提供文章寫作建議和創意</small>
                                                    </div>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center">
                                                    <i class="fas fa-tools text-success me-3"></i>
                                                    <div>
                                                        <strong>技術支援</strong>
                                                        <br><small class="text-muted">協助解決技術問題</small>
                                                    </div>
                                                </li>
                                                <li class="list-group-item d-flex align-items-center">
                                                    <i class="fas fa-book text-info me-3"></i>
                                                    <div>
                                                        <strong>功能說明</strong>
                                                        <br><small class="text-muted">解釋系統功能與操作</small>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card border-primary">
                                                <div class="card-header bg-primary text-white">
                                                    <i class="fas fa-comments me-2"></i>聊天位置
                                                </div>
                                                <div class="card-body">
                                                    <p class="card-text">聊天助手位於每個頁面的右下角，點擊聊天圖示即可開始對話。</p>
                                                    <div class="text-center">
                                                        <div class="chat-demo bg-primary text-white p-2 rounded">
                                                            <i class="fas fa-comments"></i> 聊天
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 多語系 -->
                                <div class="tab-pane fade" id="v-pills-multilang">
                                    <h2 class="mb-4">🌐 多語系功能指南</h2>

                                    <h4>支援語言</h4>
                                    <div class="row g-3 mb-4">
                                        <div class="col-md-4">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <h1 class="mb-2">🇹🇼</h1>
                                                    <h6>繁體中文</h6>
                                                    <small class="text-muted">Traditional Chinese</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <h1 class="mb-2">🇨🇳</h1>
                                                    <h6>簡體中文</h6>
                                                    <small class="text-muted">Simplified Chinese</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <h1 class="mb-2">🇺🇸</h1>
                                                    <h6>English</h6>
                                                    <small class="text-muted">英文</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <h1 class="mb-2">🇯🇵</h1>
                                                    <h6>日本語</h6>
                                                    <small class="text-muted">Japanese</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <h1 class="mb-2">🇻🇳</h1>
                                                    <h6>Tiếng Việt</h6>
                                                    <small class="text-muted">Vietnamese</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <h1 class="mb-2">🇲🇾</h1>
                                                    <h6>Bahasa Melayu</h6>
                                                    <small class="text-muted">Malay</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h4>語言切換方法</h4>
                                    <ol class="list-group list-group-numbered">
                                        <li class="list-group-item">在頁面導航欄找到語言選擇器</li>
                                        <li class="list-group-item">點擊下拉選單選擇目標語言</li>
                                        <li class="list-group-item">系統會自動切換介面語言</li>
                                        <li class="list-group-item">語言設定會保存在會話中</li>
                                    </ol>
                                </div>

                                <!-- API 文件 -->
                                <div class="tab-pane fade" id="v-pills-api">
                                    <h2 class="mb-4">🔌 API 文件</h2>

                                    <div class="alert alert-warning">
                                        <i class="fas fa-lock me-2"></i>
                                        <strong>認證說明：</strong>API 使用 Session 認證，需要先登入管理後台
                                    </div>

                                    <h4>文章 API</h4>
                                    <div class="table-responsive mb-4">
                                        <table class="table table-striped">
                                            <thead class="table-dark">
                                                <tr>
                                                    <th>方法</th>
                                                    <th>端點</th>
                                                    <th>說明</th>
                                                    <th>需要認證</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span class="badge bg-success">GET</span></td>
                                                    <td><code>/api/articles</code></td>
                                                    <td>取得文章列表</td>
                                                    <td><i class="fas fa-times text-danger"></i></td>
                                                </tr>
                                                <tr>
                                                    <td><span class="badge bg-primary">POST</span></td>
                                                    <td><code>/api/articles</code></td>
                                                    <td>新增文章</td>
                                                    <td><i class="fas fa-check text-success"></i></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <h4>AI API</h4>
                                    <div class="table-responsive mb-4">
                                        <table class="table table-striped">
                                            <thead class="table-dark">
                                                <tr>
                                                    <th>方法</th>
                                                    <th>端點</th>
                                                    <th>說明</th>
                                                    <th>需要認證</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span class="badge bg-primary">POST</span></td>
                                                    <td><code>/api/ai-generate</code></td>
                                                    <td>AI 生成文章</td>
                                                    <td><i class="fas fa-check text-success"></i></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <h4>聊天 API</h4>
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead class="table-dark">
                                                <tr>
                                                    <th>方法</th>
                                                    <th>端點</th>
                                                    <th>說明</th>
                                                    <th>需要認證</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span class="badge bg-primary">POST</span></td>
                                                    <td><code>/api/chat</code></td>
                                                    <td>發送聊天訊息</td>
                                                    <td><i class="fas fa-times text-danger"></i></td>
                                                </tr>
                                                <tr>
                                                    <td><span class="badge bg-success">GET</span></td>
                                                    <td><code>/api/chat</code></td>
                                                    <td>取得聊天記錄</td>
                                                    <td><i class="fas fa-times text-danger"></i></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!-- 故障排除 -->
                                <div class="tab-pane fade" id="v-pills-troubleshooting">
                                    <h2 class="mb-4">🔧 故障排除</h2>

                                    <h4>常見問題</h4>

                                    <div class="accordion" id="troubleshootingAccordion">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#trouble1">
                                                    <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                                    無法連接到網站
                                                </button>
                                            </h2>
                                            <div id="trouble1" class="accordion-collapse collapse show" data-bs-parent="#troubleshootingAccordion">
                                                <div class="accordion-body">
                                                    <p><strong>可能原因：</strong></p>
                                                    <ul>
                                                        <li>Docker 容器未啟動</li>
                                                        <li>端口被佔用</li>
                                                        <li>防火牆阻擋</li>
                                                    </ul>
                                                    <p><strong>解決方法：</strong></p>
                                                    <div class="bg-dark text-light p-3 rounded">
                                                        <code>docker-compose ps<br>docker-compose up -d<br>docker-compose logs</code>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble2">
                                                    <i class="fas fa-database text-danger me-2"></i>
                                                    資料庫連接錯誤
                                                </button>
                                            </h2>
                                            <div id="trouble2" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
                                                <div class="accordion-body">
                                                    <p><strong>解決步驟：</strong></p>
                                                    <ol>
                                                        <li>重啟資料庫容器：<code>docker-compose restart db</code></li>
                                                        <li>檢查資料庫日誌：<code>docker-compose logs db</code></li>
                                                        <li>等待資料庫完全啟動（約 30 秒）</li>
                                                    </ol>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble3">
                                                    <i class="fas fa-robot text-info me-2"></i>
                                                    AI 功能無法使用
                                                </button>
                                            </h2>
                                            <div id="trouble3" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
                                                <div class="accordion-body">
                                                    <p><strong>檢查項目：</strong></p>
                                                    <ul>
                                                        <li>確認 .env 檔案中的 GPT_API_KEY 已設定</li>
                                                        <li>檢查 API 配額和計費狀態</li>
                                                        <li>確認網路連接正常</li>
                                                        <li>查看錯誤日誌：<code>docker-compose logs web</code></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble4">
                                                    <i class="fas fa-upload text-success me-2"></i>
                                                    檔案上傳問題
                                                </button>
                                            </h2>
                                            <div id="trouble4" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
                                                <div class="accordion-body">
                                                    <p><strong>解決方法：</strong></p>
                                                    <div class="bg-dark text-light p-3 rounded">
                                                        <code>chmod 755 src/assets/uploads<br>chown -R www-data:www-data src/assets/uploads</code>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h4 class="mt-4">聯絡支援</h4>
                                    <div class="card border-primary">
                                        <div class="card-body">
                                            <p class="card-text">如果問題仍未解決，您可以：</p>
                                            <ul class="mb-0">
                                                <li>使用頁面右下角的 AI 聊天助手</li>
                                                <li>查看 Docker 容器日誌：<code>docker-compose logs</code></li>
                                                <li>重新啟動整個系統：<code>./start.sh</code></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-color);
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

.timeline-marker {
    position: absolute;
    left: -22px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.timeline-content {
    padding-left: 20px;
}

.chat-demo {
    position: relative;
    bottom: -10px;
    right: -10px;
    width: 80px;
    font-size: 0.8rem;
    cursor: pointer;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.nav-pills .nav-link {
    border-radius: 10px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.nav-pills .nav-link:hover {
    background-color: rgba(102, 126, 234, 0.1);
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
</style>

<?php include 'footer.php'; ?>