<?php
// 包含认证检查
require_once 'includes/auth.php';
checkLogin();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助中心 - 口腔检查管理系统</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css">
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/vendor/jquery.min.js"></script>
</head>
<body>
    <!-- Modern Dashboard Layout -->
    <div class="dashboard-container">
        <!-- Sidebar -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo">
                    <i class="fas fa-tooth"></i>
                    <span data-i18n="system_name">口腔检查系统</span>
                </div>
                <button class="sidebar-toggle" id="sidebarToggle">
                    <i class="fas fa-bars"></i>
                </button>
            </div>

            <ul class="sidebar-menu">
                <li class="menu-item">
                    <a href="index.php" class="menu-link">
                        <i class="fas fa-tachometer-alt"></i>
                        <span data-i18n="dashboard">仪表板</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="patients.php" class="menu-link">
                        <i class="fas fa-users"></i>
                        <span data-i18n="patients">患者管理</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="capture.php" class="menu-link">
                        <i class="fas fa-camera"></i>
                        <span data-i18n="capture">影像采集</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="comparison.php" class="menu-link">
                        <i class="fas fa-exchange-alt"></i>
                        <span data-i18n="comparison">影像对比</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="edit.php" class="menu-link">
                        <i class="fas fa-edit"></i>
                        <span data-i18n="edit">影像编辑</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="reports.php" class="menu-link">
                        <i class="fas fa-file-medical"></i>
                        <span data-i18n="reports">报告管理</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="settings.php" class="menu-link">
                        <i class="fas fa-cog"></i>
                        <span data-i18n="settings">系统设置</span>
                    </a>
                </li>
                <li class="menu-item active">
                    <a href="help.php" class="menu-link">
                        <i class="fas fa-question-circle"></i>
                        <span data-i18n="help">帮助中心</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Sidebar Overlay for Mobile -->
        <div class="sidebar-overlay"></div>

        <!-- Main Content -->
        <main class="main-content">
            <!-- Top Header -->
            <header class="top-header">
                <div class="header-left">
                    <h1 class="page-title" data-i18n="help">帮助中心</h1>
                </div>
                <div class="header-right">
                    <div class="header-notifications">
                        <button class="notification-btn">
                            <i class="fas fa-bell"></i>
                            <span class="notification-badge">0</span>
                        </button>
                    </div>
                    <?php echo getUserDisplayHtml(); ?>
                </div>
            </header>

            <!-- Help Content -->
            <div class="content-wrapper">
                <h1 class="mb-4" data-i18n="help">帮助中心</h1>

                <!-- 快速开始 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 data-i18n="quick_start">快速开始</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <h6 data-i18n="step1_title">1. 患者管理</h6>
                                <p data-i18n="step1_description">首先添加患者信息，包括姓名、性别、年龄等基本资料。</p>
                                <a href="patients.php" class="btn btn-sm btn-primary" data-i18n="go_to_patients">前往患者管理</a>
                            </div>
                            <div class="col-md-4">
                                <h6 data-i18n="step2_title">2. 影像采集</h6>
                                <p data-i18n="step2_description">连接摄像头，为患者拍摄口腔影像或录制视频。</p>
                                <a href="capture.php" class="btn btn-sm btn-success" data-i18n="start_capture">开始影像采集</a>
                            </div>
                            <div class="col-md-4">
                                <h6 data-i18n="step3_title">3. 生成报告</h6>
                                <p data-i18n="step3_description">基于采集的影像生成专业的检查报告。</p>
                                <a href="reports.php" class="btn btn-sm btn-info" data-i18n="create_report">创建报告</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 功能说明 -->
                <div class="accordion" id="helpAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#patientHelp" data-i18n="patients">
                                患者管理
                            </button>
                        </h2>
                        <div id="patientHelp" class="accordion-collapse collapse show" data-bs-parent="#helpAccordion">
                            <div class="accordion-body">
                                <h6 data-i18n="add_patient">添加患者</h6>
                                <p data-i18n="add_patient_description">点击"添加患者"按钮，填写患者的基本信息。所有标记为*的字段为必填项。</p>

                                <h6 data-i18n="edit_patient">编辑患者</h6>
                                <p data-i18n="edit_patient_description">在患者列表中点击"编辑"按钮，可以修改患者信息。</p>

                                <h6 data-i18n="search_patient">搜索患者</h6>
                                <p data-i18n="search_patient_description">使用顶部的搜索框，可以通过姓名、电话或身份证号快速查找患者。</p>

                                <h6 data-i18n="delete_patient">删除患者</h6>
                                <p data-i18n="delete_patient_description">点击"删除"按钮可以删除患者记录。删除后无法恢复，请谨慎操作。</p>
                            </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="#captureHelp" data-i18n="capture">
                                影像采集
                            </button>
                        </h2>
                        <div id="captureHelp" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                            <div class="accordion-body">
                                <h6 data-i18n="camera_settings">摄像头设置</h6>
                                <p data-i18n="camera_setup_steps">1. 选择患者<br>2. 点击"启动摄像头"按钮<br>3. 允许浏览器访问摄像头</p>

                                <h6 data-i18n="take_photos">拍摄照片</h6>
                                <p data-i18n="take_photos_description">调整缩放和镜像后，点击"拍照"按钮。照片会自动保存并显示在下方列表中。</p>

                                <h6 data-i18n="record_video">录制视频</h6>
                                <p data-i18n="record_video_description">点击"开始录像"开始录制，点击"停止录像"结束。视频文件会自动保存。</p>

                                <h6 data-i18n="capture_settings">拍摄设置</h6>
                                <ul>
                                    <li><strong data-i18n="zoom_level">缩放级别：</strong><span data-i18n="zoom_level_description">调整图像放大倍数</span></li>
                                    <li><strong data-i18n="mirror_mode">镜像模式：</strong><span data-i18n="mirror_mode_description">水平翻转图像，方便观察</span></li>
                                    <li><strong data-i18n="image_quality">图像质量：</strong><span data-i18n="image_quality_description">设置照片保存质量</span></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="#comparisonHelp" data-i18n="comparison">
                                影像对比
                            </button>
                        </h2>
                        <div id="comparisonHelp" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                            <div class="accordion-body">
                                <h6 data-i18n="select_comparison_images">选择对比影像</h6>
                                <p data-i18n="select_comparison_steps">1. 选择患者<br>2. 点击"选择影像A"和"选择影像B"<br>3. 从弹出的影像库中选择要对比的图片</p>

                                <h6 data-i18n="comparison_mode">对比模式</h6>
                                <ul>
                                    <li><strong data-i18n="side_by_side">并排对比：</strong><span data-i18n="side_by_side_description">左右显示两个影像</span></li>
                                    <li><strong data-i18n="overlay">叠加对比：</strong><span data-i18n="overlay_description">一个影像叠加在另一个上，可调整透明度</span></li>
                                    <li><strong data-i18n="slider">滑块对比：</strong><span data-i18n="slider_description">使用滑块分割显示两个影像</span></li>
                                </ul>

                                <h6 data-i18n="save_comparison_result">保存对比结果</h6>
                                <p data-i18n="save_comparison_description">可以截图保存对比结果，或生成对比报告。</p>
                            </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="#reportHelp" data-i18n="reports">
                                报告管理
                            </button>
                        </h2>
                        <div id="reportHelp" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                            <div class="accordion-body">
                                <h6 data-i18n="generate_report">生成报告</h6>
                                <p data-i18n="generate_report_steps">1. 选择患者<br>2. 选择报告模板<br>3. 点击"生成报告"</p>

                                <h6 data-i18n="edit_report">编辑报告</h6>
                                <p data-i18n="edit_report_description">点击"编辑报告"可以添加诊断结论、治疗建议等内容。</p>

                                <h6 data-i18n="print_report">打印报告</h6>
                                <p data-i18n="print_report_description">点击"打印报告"按钮，在弹出的窗口中选择打印选项。</p>

                                <h6 data-i18n="save_report">保存报告</h6>
                                <p data-i18n="save_report_description">报告会自动保存到系统，可以在报告历史中查看。</p>
                            </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="#settingsHelp" data-i18n="settings">
                                系统设置
                            </button>
                        </h2>
                        <div id="settingsHelp" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                            <div class="accordion-body">
                                <h6 data-i18n="basic_settings">基本设置</h6>
                                <ul>
                                    <li><strong data-i18n="language_select">界面语言：</strong><span data-i18n="language_select_description">选择中文或英文界面</span></li>
                                    <li><strong data-i18n="timezone_select">时区设置：</strong><span data-i18n="timezone_select_description">设置系统时区</span></li>
                                    <li><strong data-i18n="theme_select">界面主题：</strong><span data-i18n="theme_select_description">选择浅色或深色主题</span></li>
                                </ul>

                                <h6 data-i18n="image_settings">影像设置</h6>
                                <ul>
                                    <li><strong data-i18n="image_format">图片格式：</strong><span data-i18n="image_format_description">JPG、PNG等格式</span></li>
                                    <li><strong data-i18n="video_quality">视频质量：</strong><span data-i18n="video_quality_description">高、中、低质量</span></li>
                                    <li><strong data-i18n="camera_resolution">摄像头分辨率：</strong><span data-i18n="camera_resolution_description">设置采集分辨率</span></li>
                                </ul>

                                <h6 data-i18n="report_settings">报告设置</h6>
                                <ul>
                                    <li><strong data-i18n="hospital_name">医院名称：</strong><span data-i18n="hospital_name_description">设置报告显示的医院名称</span></li>
                                    <li><strong data-i18n="report_title">报告标题：</strong><span data-i18n="report_title_description">自定义报告标题</span></li>
                                    <li><strong data-i18n="report_content">包含内容：</strong><span data-i18n="report_content_description">选择报告包含的信息</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 常见问题 -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 data-i18n="faq">常见问题</h5>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="faqAccordion">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" data-i18n="faq_camera_not_start">
                                        摄像头无法启动怎么办？
                                    </button>
                                </h2>
                                <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <p data-i18n="faq_camera_solution">1. 确保已连接USB摄像头<br>
                                        2. 允许浏览器访问摄像头权限<br>
                                        3. 尝试刷新页面<br>
                                        4. 检查摄像头是否被其他程序占用</p>
                                    </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="#faq2" data-i18n="faq_how_backup">
                                        如何备份数据？
                                    </button>
                                </h2>
                                <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <p data-i18n="faq_backup_answer">系统会自动备份重要数据。您也可以通过系统设置中的"备份数据库"功能手动备份。</p>
                                    </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="#faq3" data-i18n="faq_upload_failed">
                                        文件上传失败怎么办？
                                    </button>
                                </h2>
                                <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <p data-i18n="faq_upload_solution">1. 检查文件大小是否超过限制<br>
                                        2. 确保文件格式正确<br>
                                        3. 检查网络连接<br>
                                        4. 联系管理员检查服务器配置</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 联系支持 -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 data-i18n="contact_support">联系支持</h5>
                    </div>
                    <div class="card-body text-center">
                        <p data-i18n="contact_support_description">如果您遇到问题或需要帮助，请联系技术支持：</p>
                        <div class="row">
                            <div class="col-md-4">
                                <h6 data-i18n="technical_support">技术支持</h6>
                                <p>work@silubaba.com.cn</p>
                                <p>086-15057908025</p>
                            </div>
                            <div class="col-md-4">
                                <h6 data-i18n="working_hours">工作时间</h6>
                                <p data-i18n="working_hours_detail">周一至周五  节假日休息</p>
                                <p>9:00 - 18:00</p>
                            </div>
                            <div class="col-md-4">
                                <h6 data-i18n="version_info">版本信息</h6>
                                <p data-i18n="current_version">当前版本: v1.0.0</p>
                                <p data-i18n="update_date">更新日期: 2025-10-1</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 高亮当前页面导航
        document.addEventListener('DOMContentLoaded', function() {
            const currentPage = window.location.pathname.split('/').pop();
            const navLinks = document.querySelectorAll('.navbar-nav .nav-link');

            navLinks.forEach(link => {
                if (link.getAttribute('href') === currentPage) {
                    link.classList.add('active');
                } else {
                    link.classList.remove('active');
                }
            });
        });

        // Dashboard functionality for help page
        document.addEventListener('DOMContentLoaded', function() {
            initDatabase();

            // Sidebar toggle functionality
            const sidebarToggle = document.getElementById('sidebarToggle');
            if (sidebarToggle) {
                sidebarToggle.addEventListener('click', function() {
                    const sidebar = document.querySelector('.sidebar');
                    const mainContent = document.querySelector('.main-content');

                    // 检查是否为移动端
                    if (window.innerWidth <= 768) {
                        // 移动端：切换显示/隐藏
                        sidebar.classList.toggle('show');
                        // 添加遮罩
                        let overlay = document.querySelector('.sidebar-overlay');
                        if (!overlay) {
                            overlay = document.createElement('div');
                            overlay.className = 'sidebar-overlay';
                            overlay.style.cssText = `
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background: rgba(0,0,0,0.5);
                                z-index: 1099;
                                opacity: 0;
                                transition: opacity 0.3s ease;
                            `;
                            document.body.appendChild(overlay);

                            overlay.addEventListener('click', function() {
                                sidebar.classList.remove('show');
                                overlay.style.opacity = '0';
                                setTimeout(() => overlay.remove(), 300);
                            });
                        }

                        if (sidebar.classList.contains('show')) {
                            overlay.style.opacity = '1';
                        } else {
                            overlay.style.opacity = '0';
                            setTimeout(() => overlay.remove(), 300);
                        }
                    } else {
                        // 桌面端：切换折叠/展开
                        sidebar.classList.toggle('collapsed');
                        mainContent.classList.toggle('expanded');
                    }
                });
            }

            // 窗口大小改变时自动调整
            window.addEventListener('resize', function() {
                const sidebar = document.querySelector('.sidebar');
                const overlay = document.querySelector('.sidebar-overlay');

                if (window.innerWidth > 768) {
                    sidebar.classList.remove('show');
                    if (overlay) {
                        overlay.remove();
                    }
                }
            });
        });
    </script>
    <script src="assets/js/language-switcher.js"></script>

    <!-- Footer -->
    <footer class="system-footer">
        <div class="footer-content">
            <div class="copyright-info">
                <p>&copy; 2025 义乌市噢欧进出口有限公司 | <a href="http://silubaba.com.cn" target="_blank">silubaba.com.cn</a></p>
                <p>技术支持: 15057908025</p>
            </div>
        </div>
    </footer>
</body>
</html>
