<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

require_once 'config/database.php';
require_once 'includes/functions.php';

$pageTitle = 'راهنمای کاربران - سامانه جامع مهدی';
?>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $pageTitle; ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/portal/assets/css/style.css">
    <style>
        body {
            background: #f1f5f9;
            font-family: 'Vazirmatn', 'Tahoma', sans-serif;
            padding: 25px 0;
        }
        .help-wrapper {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 20px;
        }
        /* ===== هدر ===== */
        .help-header {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            color: white;
            padding: 35px 40px;
            border-radius: 18px;
            margin-bottom: 30px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .help-header::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 300px;
            height: 300px;
            background: rgba(255,255,255,0.05);
            border-radius: 50%;
        }
        .help-header .icon-big {
            font-size: 4rem;
            display: block;
            margin-bottom: 8px;
        }
        .help-header h1 {
            font-size: 2.8rem;
            font-weight: 800;
            margin-bottom: 6px;
            letter-spacing: -0.5px;
        }
        .help-header p {
            font-size: 1.2rem;
            opacity: 0.85;
            margin: 0;
        }
        .help-header .back-link {
            display: inline-block;
            margin-top: 12px;
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
            transition: color 0.2s;
        }
        .help-header .back-link:hover {
            color: white;
        }

        /* ===== منوی کناری (TOC) ===== */
        .toc-wrapper {
            position: sticky;
            top: 20px;
        }
        .toc-card {
            background: white;
            border-radius: 14px;
            border: 1px solid #e9edf2;
            padding: 18px 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .toc-card h6 {
            font-weight: 700;
            font-size: 1rem;
            color: #0f172a;
            border-bottom: 2px solid #e9edf2;
            padding-bottom: 10px;
            margin-bottom: 12px;
        }
        .toc-card .toc-item {
            display: block;
            padding: 6px 10px;
            border-radius: 8px;
            color: #475569;
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.2s ease;
            margin-bottom: 2px;
        }
        .toc-card .toc-item:hover {
            background: #f1f5f9;
            color: #4f46e5;
        }
        .toc-card .toc-item i {
            margin-left: 8px;
            font-size: 0.85rem;
            color: #94a3b8;
        }
        .toc-card .toc-item.active {
            background: #4f46e5;
            color: white;
        }
        .toc-card .toc-item.active i {
            color: white;
        }

        /* ===== بخش‌های اصلی ===== */
        .help-section {
            background: white;
            border-radius: 14px;
            border: 1px solid #e9edf2;
            padding: 28px 32px;
            margin-bottom: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: all 0.2s ease;
            scroll-margin-top: 20px;
        }
        .help-section:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
        }
        .help-section .section-title {
            font-weight: 700;
            font-size: 1.6rem;
            color: #0f172a;
            border-bottom: 3px solid #e9edf2;
            padding-bottom: 14px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .help-section .section-title i {
            color: #4f46e5;
            font-size: 1.8rem;
        }
        .help-section .section-title .badge-role {
            font-size: 0.7rem;
            padding: 2px 14px;
            border-radius: 20px;
            font-weight: 600;
            margin-right: 10px;
        }
        .badge-role.admin { background: #fee2e2; color: #dc2626; }
        .badge-role.expert { background: #fef3c7; color: #d97706; }
        .badge-role.representative { background: #dcfce7; color: #16a34a; }
        .badge-role.reporter { background: #dbeafe; color: #2563eb; }
        .badge-role.all { background: #e9edf2; color: #475569; }

        .help-section .section-desc {
            font-size: 1.05rem;
            color: #475569;
            margin-bottom: 18px;
            line-height: 1.8;
        }

        /* ===== استپ‌ها ===== */
        .step {
            display: flex;
            gap: 18px;
            align-items: flex-start;
            padding: 14px 0;
            border-bottom: 1px solid #f1f5f9;
        }
        .step:last-child {
            border-bottom: none;
        }
        .step .step-number {
            background: #4f46e5;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .step .step-content {
            flex: 1;
        }
        .step .step-content strong {
            font-size: 1.1rem;
            color: #0f172a;
            display: block;
            margin-bottom: 2px;
        }
        .step .step-content .step-desc {
            font-size: 0.98rem;
            color: #475569;
            line-height: 1.7;
        }
        .step .step-content .step-desc code {
            background: #f1f5f9;
            padding: 2px 10px;
            border-radius: 6px;
            font-size: 0.85rem;
            color: #4f46e5;
        }
        .step .step-content .step-note {
            font-size: 0.85rem;
            color: #94a3b8;
            margin-top: 4px;
        }
        .step .step-content .step-note i {
            color: #4f46e5;
        }

        /* ===== نکات و هشدارها ===== */
        .alert-tip {
            background: #eef2ff;
            border-right: 4px solid #4f46e5;
            padding: 14px 18px;
            border-radius: 8px;
            margin: 12px 0;
            font-size: 0.95rem;
            color: #1e293b;
        }
        .alert-tip i {
            color: #4f46e5;
            margin-left: 8px;
        }
        .alert-warning {
            background: #fef3c7;
            border-right: 4px solid #f59e0b;
            padding: 14px 18px;
            border-radius: 8px;
            margin: 12px 0;
            font-size: 0.95rem;
            color: #92400e;
        }
        .alert-warning i {
            color: #f59e0b;
            margin-left: 8px;
        }

        /* ===== فوتر ===== */
        .help-footer {
            text-align: center;
            color: #94a3b8;
            font-size: 0.9rem;
            padding: 25px 0;
            border-top: 1px solid #e9edf2;
            margin-top: 20px;
        }
        .help-footer i {
            color: #4f46e5;
        }

        /* ===== ریسپانسیو ===== */
        @media (max-width: 992px) {
            .toc-wrapper {
                position: relative;
                top: 0;
                margin-bottom: 20px;
            }
            .help-section .section-title {
                font-size: 1.3rem;
            }
            .help-header h1 {
                font-size: 2rem;
            }
        }
        @media (max-width: 768px) {
            .help-header { padding: 20px; }
            .help-header h1 { font-size: 1.6rem; }
            .help-section { padding: 18px 16px; }
            .step { flex-direction: column; gap: 6px; }
            .step .step-number { width: 30px; height: 30px; font-size: 0.85rem; }
            .help-section .section-title { font-size: 1.1rem; }
        }
    
.help-link{text-decoration:none}
.help-link code{background:#eef2ff;color:#2563eb;cursor:pointer;transition:.2s}
.help-link:hover code{background:#2563eb;color:#fff}

</style>
</head>
<body>
    <div class="help-wrapper">
        <div class="row g-4">
            <!-- ===== منوی کناری (TOC) ===== -->
            <div class="col-lg-3 order-lg-1 order-2">
                <div class="toc-wrapper">
                    <div class="toc-card">
                        <h6><i class="bi bi-list-ul"></i> فهرست مطالب</h6>
                        <a href="#section-roles" class="toc-item"><i class="bi bi-person-badge"></i> نقش‌های کاربری</a>
                        <a href="#section-login" class="toc-item"><i class="bi bi-box-arrow-in-right"></i> ورود و خروج</a>
                        <a href="#section-register" class="toc-item"><i class="bi bi-person-plus"></i> ثبت‌نام دانشجو</a>
                        <a href="#section-fields" class="toc-item"><i class="bi bi-layout-text-window"></i> فیلدهای داینامیک</a>
                        <a href="#section-followup" class="toc-item"><i class="bi bi-clipboard-check"></i> پیگیری و ویرایش</a>
                        <a href="#section-reports" class="toc-item"><i class="bi bi-file-earmark-text"></i> گزارشات و جستجو</a>
                        <a href="#section-users" class="toc-item"><i class="bi bi-people"></i> مدیریت کاربران</a>
                        <a href="#section-utm" class="toc-item"><i class="bi bi-link-45deg"></i> لینک‌های تبلیغاتی</a>
                        <a href="#section-logs" class="toc-item"><i class="bi bi-clock-history"></i> لاگ سیستم</a>
                        <a href="#section-faq" class="toc-item"><i class="bi bi-question-lg"></i> سوالات متداول</a>
                    </div>
                </div>
            </div>

            <!-- ===== محتوای اصلی ===== -->
            <div class="col-lg-9 order-lg-2 order-1">

                <!-- ===== هدر ===== -->
                <div class="help-header">
                    <span class="icon-big"><i class="bi bi-question-circle"></i></span>
                    <h1>📘 راهنمای کامل سامانه</h1>
                    <p>سامانه جامع مهدی - مدیریت ثبت‌نام و پیگیری دانشجویان</p>
                    <a href="/portal/index.php" class="back-link">
                        <i class="bi bi-arrow-right"></i> بازگشت به صفحه اصلی
                    </a>
                </div>

                
<div class="help-section">
<div class="section-title"><i class="bi bi-lightning-charge-fill"></i> دسترسی سریع</div>
<div class="row g-2">
<div class="col-md-3 col-6"><a class="btn btn-primary w-100" target="_blank" href="/portal/auth/login.php"><i class="bi bi-box-arrow-in-right"></i> ورود</a></div><div class="col-md-3 col-6"><a class="btn btn-success w-100" target="_blank" href="/portal/register.php"><i class="bi bi-person-plus"></i> ثبت نام</a></div><div class="col-md-3 col-6"><a class="btn btn-info w-100" target="_blank" href="/portal/members/register.php"><i class="bi bi-person-check"></i> ثبت داخلی</a></div><div class="col-md-3 col-6"><a class="btn btn-warning w-100" target="_blank" href="/portal/admin/users.php"><i class="bi bi-people"></i> کاربران</a></div><div class="col-md-3 col-6"><a class="btn btn-secondary w-100" target="_blank" href="/portal/admin/reports.php"><i class="bi bi-bar-chart"></i> گزارشات</a></div><div class="col-md-3 col-6"><a class="btn btn-dark w-100" target="_blank" href="/portal/admin/fields.php"><i class="bi bi-layout-text-window"></i> فیلدها</a></div><div class="col-md-3 col-6"><a class="btn btn-dark w-100" target="_blank" href="/portal/admin/utm_links.php"><i class="bi bi-link-45deg"></i> UTM</a></div><div class="col-md-3 col-6"><a class="btn btn-danger w-100" target="_blank" href="/portal/admin/system_logs.php"><i class="bi bi-clock-history"></i> لاگ</a></div></div></div>
<!-- ============================================================
                بخش ۱: نقش‌های کاربری
                ============================================================ -->
                <div id="section-roles" class="help-section">
                    <div class="section-title">
                        <i class="bi bi-person-badge"></i>
                        نقش‌های کاربری
                        <span class="badge-role all">همه کاربران</span>
                    </div>
                    <p class="section-desc">
                        در این سامانه، هر کاربر بر اساس نقشی که دارد، به بخش‌های خاصی دسترسی دارد. این نقش‌ها توسط مدیر ارشد تعیین می‌شوند.
                    </p>
                    <div class="row g-3">
                        <div class="col-md-3 col-6">
                            <div class="border rounded p-3 text-center h-100 bg-white">
                                <span class="badge-role admin" style="font-size:0.9rem; padding:4px 18px;">مدیر ارشد</span>
                                <p class="mt-2 mb-0 small text-muted">دسترسی کامل به تمام بخش‌ها</p>
                                <small class="text-muted">مدیریت کاربران، فیلدها، گزارشات، لینک‌ها و لاگ</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="border rounded p-3 text-center h-100 bg-white">
                                <span class="badge-role expert" style="font-size:0.9rem; padding:4px 18px;">مسئول ثبت‌نام</span>
                                <p class="mt-2 mb-0 small text-muted">پیگیری و ویرایش دانشجویان</p>
                                <small class="text-muted">مشاهده دانشجویان در انتظار تماس</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="border rounded p-3 text-center h-100 bg-white">
                                <span class="badge-role representative" style="font-size:0.9rem; padding:4px 18px;">معرف‌کننده</span>
                                <p class="mt-2 mb-0 small text-muted">مشاهده دانشجویان معرفی شده</p>
                                <small class="text-muted">مشاهده و ویرایش دانشجویان ناتأیید</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="border rounded p-3 text-center h-100 bg-white">
                                <span class="badge-role reporter" style="font-size:0.9rem; padding:4px 18px;">گزارشگر</span>
                                <p class="mt-2 mb-0 small text-muted">مشاهده گزارشات</p>
                                <small class="text-muted">جستجو و فیلتر دانشجویان</small>
                            </div>
                        </div>
                    </div>
                    <div class="alert-tip mt-3">
                        <i class="bi bi-info-circle"></i>
                        <strong>نکته:</strong> هر کاربر فقط به بخش‌هایی دسترسی دارد که با نقش او هماهنگ است. برای تغییر نقش کاربر، با مدیر ارشد تماس بگیرید.
                    </div>
                </div>

                <!-- ============================================================
                بخش ۲: ورود و خروج
                ============================================================ -->
                <div id="section-login" class="help-section">
                    <div class="section-title">
                        <i class="bi bi-box-arrow-in-right"></i>
                        ورود و خروج از سامانه
                        <span class="badge-role all">همه کاربران</span>
                    </div>
                    <p class="section-desc">
                        برای استفاده از سامانه، ابتدا باید وارد شوید. پس از پایان کار، حتماً از حساب خود خارج شوید.
                    </p>
                    <div class="step">
                        <div class="step-number">۱</div>
                        <div class="step-content">
                            <strong>ورود به سامانه</strong>
                            <div class="step-desc">
                                آدرس <a href="/portal/auth/login.php" target="_blank" class="help-link"><code>/portal/auth/login.php</code></a> را در مرورگر باز کنید.
                                نام کاربری و رمز عبور خود را وارد کرده و روی دکمه <strong>«ورود»</strong> کلیک کنید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-person"></i> کاربر پیش‌فرض: <code>admin</code> | رمز: <code>password</code>
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۲</div>
                        <div class="step-content">
                            <strong>خروج از سامانه</strong>
                            <div class="step-desc">
                                در بالای صفحه، روی نام کاربری خود کلیک کرده و گزینه <strong>«خروج»</strong> را انتخاب کنید.
                                یا مستقیماً آدرس <a href="/portal/auth/logout.php" target="_blank" class="help-link"><code>/portal/auth/logout.php</code></a> را باز کنید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-shield-lock"></i> همیشه پس از پایان کار، از سیستم خارج شوید تا امنیت اطلاعات حفظ شود.
                            </div>
                        </div>
                    </div>
                    <div class="alert-warning">
                        <i class="bi bi-exclamation-triangle"></i>
                        <strong>توجه:</strong> رمز پیش‌فرض را پس از اولین ورود تغییر دهید. برای تغییر رمز، با مدیر ارشد تماس بگیرید.
                    </div>
                </div>

                <!-- ============================================================
                بخش ۳: ثبت‌نام دانشجو
                ============================================================ -->
                <div id="section-register" class="help-section">
                    <div class="section-title">
                        <i class="bi bi-person-plus"></i>
                        ثبت‌نام دانشجو
                        <span class="badge-role all">همه کاربران</span>
                    </div>
                    <p class="section-desc">
                        ثبت‌نام دانشجو از دو طریق امکان‌پذیر است: <strong>فرم داخلی</strong> (توسط کارکنان) و <strong>فرم عمومی</strong> (توسط خود دانشجو).
                    </p>
                    <div class="step">
                        <div class="step-number">۱</div>
                        <div class="step-content">
                            <strong>فرم داخلی (توسط کارکنان)</strong>
                            <div class="step-desc">
                                از منوی اصلی روی <strong>«ثبت‌نام جدید»</strong> کلیک کنید یا آدرس
                                <a href="/portal/members/register.php" target="_blank" class="help-link"><code>/portal/members/register.php</code></a> را باز کنید.
                                این فرم نیاز به لاگین دارد و برای کارشناسان و ادمین‌ها طراحی شده است.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-person-check"></i> ادمین‌ها تمام فیلدها را می‌بینند، اما کارشناسان فقط اطلاعات شخصی و تحصیلی را مشاهده می‌کنند.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۲</div>
                        <div class="step-content">
                            <strong>فرم عمومی (توسط دانشجو)</strong>
                            <div class="step-desc">
                                لینک <a href="/portal/register.php" target="_blank" class="help-link"><code>/portal/register.php</code></a> را در اختیار دانشجویان قرار دهید.
                                این فرم بدون نیاز به لاگین باز می‌شود و اطلاعات را به‌صورت خودکار ذخیره می‌کند.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-globe"></i> این فرم برای استفاده عموم طراحی شده و وضعیت‌ها به‌صورت پیش‌فرض تنظیم می‌شوند.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۳</div>
                        <div class="step-content">
                            <strong>تکمیل فرم</strong>
                            <div class="step-desc">
                                فیلدهای دارای <span class="text-danger">*</span> اجباری هستند.
                                اطلاعات شخصی (نام، شماره تماس، کد ملی، جنسیت) و تحصیلی (مقطع، رشته) را وارد کنید.
                                در فرم داخلی، ادمین می‌تواند وضعیت‌ها و معرف را نیز تنظیم کند.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-check-circle"></i> کد ملی باید دقیقاً ۱۰ رقم باشد و قبلاً در سیستم ثبت نشده باشد.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۴</div>
                        <div class="step-content">
                            <strong>ذخیره و تأیید</strong>
                            <div class="step-desc">
                                روی دکمه <strong>«ثبت‌نام»</strong> کلیک کنید.
                                در صورت موفقیت، پیام تأیید نمایش داده می‌شود و دانشجو در دیتابیس ذخیره می‌شود.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-arrow-up-circle"></i> پس از ثبت، وضعیت دانشجو به‌صورت خودکار «در انتظار پیگیری» تنظیم می‌شود.
                            </div>
                        </div>
                    </div>
                    <div class="alert-tip">
                        <i class="bi bi-lightbulb"></i>
                        <strong>نکته:</strong> برای ثبت‌نام گروهی یا سریع، از فرم داخلی استفاده کنید. برای ثبت‌نام انبوه از طریق لینک‌های تبلیغاتی، از فرم عمومی استفاده کنید.
                    </div>
                </div>

                <!-- ============================================================
                بخش ۴: فیلدهای داینامیک
                ============================================================ -->
                <div id="section-fields" class="help-section">
                    <div class="section-title">
                        <i class="bi bi-layout-text-window"></i>
                        مدیریت فیلدهای داینامیک
                        <span class="badge-role admin">فقط ادمین</span>
                    </div>
                    <p class="section-desc">
                        فیلدهای داینامیک به شما امکان می‌دهند بدون تغییر کد، فیلدهای جدید به فرم ثبت‌نام اضافه یا کم کنید.
                        این قابلیت فقط برای مدیر ارشد در دسترس است.
                    </p>
                    <div class="step">
                        <div class="step-number">۱</div>
                        <div class="step-content">
                            <strong>دسترسی به مدیریت فیلدها</strong>
                            <div class="step-desc">
                                از منوی اصلی روی <strong>«فیلدها»</strong> کلیک کنید یا آدرس
                                <a href="/portal/admin/fields.php" target="_blank" class="help-link"><code>/portal/admin/fields.php</code></a> را باز کنید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۲</div>
                        <div class="step-content">
                            <strong>افزودن فیلد جدید</strong>
                            <div class="step-desc">
                                نام انگلیسی، لیبل فارسی، بخش (شخصی/تحصیلی/وضعیت‌ها/معرف)، اجباری بودن و ترتیب را وارد کنید.
                                روی دکمه <strong>«+»</strong> کلیک کنید تا فیلد اضافه شود.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-info-circle"></i> نام انگلیسی باید یکتا باشد و در کدهای سیستم استفاده می‌شود.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۳</div>
                        <div class="step-content">
                            <strong>ویرایش، غیرفعال و حذف</strong>
                            <div class="step-desc">
                                روی دکمه <strong>«مداد»</strong> برای ویرایش، <strong>«مکث»</strong> برای غیرفعال و
                                <strong>«سطل زباله»</strong> برای حذف کلیک کنید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-shield-lock"></i> فیلدهای سیستمی مانند <code>fullname</code> و <code>national_code</code> را حذف نکنید.
                            </div>
                        </div>
                    </div>
                    <div class="alert-warning">
                        <i class="bi bi-exclamation-triangle"></i>
                        <strong>توجه:</strong> فیلد <code>registration_status</code> به‌عنوان فیلد ثابت در نظر گرفته شده و در فرم نمایش داده نمی‌شود.
                    </div>
                </div>

                <!-- ============================================================
                بخش ۵: پیگیری و ویرایش
                ============================================================ -->
                <div id="section-followup" class="help-section">
                    <div class="section-title">
                        <i class="bi bi-clipboard-check"></i>
                        پیگیری و ویرایش دانشجو
                        <span class="badge-role expert">کارشناس + ادمین</span>
                    </div>
                    <p class="section-desc">
                        کارشناسان و ادمین‌ها می‌توانند دانشجویان را پیگیری کرده و اطلاعات آن‌ها را ویرایش کنند.
                        هدف اصلی این بخش، مدیریت تماس‌ها و به‌روزرسانی وضعیت دانشجویان است.
                    </p>
                    <div class="step">
                        <div class="step-number">۱</div>
                        <div class="step-content">
                            <strong>داشبورد کارشناس</strong>
                            <div class="step-desc">
                                آدرس <a href="/portal/expert/dashboard.php" target="_blank" class="help-link"><code>/portal/expert/dashboard.php</code></a> را باز کنید.
                                در این صفحه، دانشجویانی که وضعیت تماس آن‌ها
                                <strong>«تماس گرفته نشده»</strong>، <strong>«در انتظار پاسخ»</strong> یا <strong>«عدم پاسخ گویی»</strong> است، نمایش داده می‌شوند.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-filter"></i> می‌توانید بر اساس وضعیت تماس یا معرف‌کننده فیلتر کنید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۲</div>
                        <div class="step-content">
                            <strong>ویرایش اطلاعات دانشجو</strong>
                            <div class="step-desc">
                                روی دکمه <strong>«پیگیری»</strong> یا <strong>«ویرایش»</strong> کلیک کنید.
                                تمام اطلاعات دانشجو شامل اطلاعات شخصی، تحصیلی و وضعیت‌ها قابل تغییر است.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-save"></i> پس از ویرایش، روی <strong>«ذخیره تغییرات»</strong> کلیک کنید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۳</div>
                        <div class="step-content">
                            <strong>تأیید خودکار (قانون طلایی)</strong>
                            <div class="step-desc">
                                اگر وضعیت پرداخت <strong>«پرداخت شده»</strong> و وضعیت مدارک <strong>«مدارک تکمیل شده»</strong> باشد،
                                وضعیت مدارک به‌صورت خودکار به <strong>«تایید شده»</strong> تغییر می‌کند.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-robot"></i> این قانون به‌صورت خودکار در سیستم اجرا می‌شود و نیازی به اقدام دستی ندارد.
                            </div>
                        </div>
                    </div>
                    <div class="alert-tip">
                        <i class="bi bi-lightbulb"></i>
                        <strong>نکته:</strong> معرف‌کنندگان فقط می‌توانند دانشجویانی را ویرایش کنند که خودشان معرفی کرده‌اند و هنوز تأیید نشده‌اند.
                    </div>
                </div>

                <!-- ============================================================
                بخش ۶: گزارشات و جستجو
                ============================================================ -->
                <div id="section-reports" class="help-section">
                    <div class="section-title">
                        <i class="bi bi-file-earmark-text"></i>
                        گزارشات و جستجو
                        <span class="badge-role all">همه کاربران</span>
                    </div>
                    <p class="section-desc">
                        در این بخش می‌توانید لیست تمام دانشجویان را مشاهده، جستجو، فیلتر و خروجی بگیرید.
                        این ابزار برای تحلیل داده‌ها و پیگیری وضعیت دانشجویان بسیار مفید است.
                    </p>
                    <div class="step">
                        <div class="step-number">۱</div>
                        <div class="step-content">
                            <strong>دسترسی به گزارشات</strong>
                            <div class="step-desc">
                                از منوی اصلی روی <strong>«گزارشات»</strong> کلیک کنید یا آدرس
                                <a href="/portal/admin/reports.php" target="_blank" class="help-link"><code>/portal/admin/reports.php</code></a> را باز کنید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۲</div>
                        <div class="step-content">
                            <strong>جستجو و فیلتر</strong>
                            <div class="step-desc">
                                با استفاده از فیلدهای بالای صفحه، می‌توانید بر اساس
                                <strong>نام، کد ملی، رشته، مقطع، جنسیت، وضعیت تماس، وضعیت مدارک، وضعیت پرداخت و بازه زمانی</strong> جستجو کنید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-search"></i> برای جستجوی دقیق‌تر، از چند فیلتر هم‌زمان استفاده کنید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۳</div>
                        <div class="step-content">
                            <strong>جستجوی زنده (Live Search)</strong>
                            <div class="step-desc">
                                با تایپ کردن در باکس جستجو، نتایج به‌صورت آنی و بدون رفرش صفحه نمایش داده می‌شوند.
                                همچنین لیست کشویی با تکمیل خودکار (Autocomplete) به شما کمک می‌کند سریع‌تر پیدا کنید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-arrow-return-left"></i> برای دیدن نتایج کامل، کافی است ۲ حرف تایپ کنید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۴</div>
                        <div class="step-content">
                            <strong>خروجی گزارش</strong>
                            <div class="step-desc">
                                با کلیک روی دکمه <strong>«پرینت»</strong>، نسخه چاپی گزارش باز می‌شود.
                                با کلیک روی <strong>«خروجی اکسل»</strong>، گزارش به صورت فایل CSV دانلود می‌شود.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-download"></i> خروجی اکسل برای تحلیل داده‌ها در نرم‌افزارهای صفحه‌گسترده بسیار مفید است.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۵</div>
                        <div class="step-content">
                            <strong>نمایش دانشجویان انصرافی</strong>
                            <div class="step-desc">
                                با کلیک روی دکمه <strong>«کاربران انصرافی»</strong>، دانشجویانی که بایگانی شده‌اند را مشاهده کنید.
                                در این حالت، امکان <strong>«بازیابی»</strong> آن‌ها وجود دارد.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-arrow-counterclockwise"></i> بازیابی، دانشجو را به وضعیت «فعال» بازمی‌گرداند.
                            </div>
                        </div>
                    </div>
                    <div class="alert-tip">
                        <i class="bi bi-lightbulb"></i>
                        <strong>نکته:</strong> گزارشات بر اساس نقش کاربر فیلتر می‌شوند. برای مثال، معرف‌کننده فقط دانشجویان خود را می‌بیند.
                    </div>
                </div>

                <!-- ============================================================
                بخش ۷: مدیریت کاربران
                ============================================================ -->
                <div id="section-users" class="help-section">
                    <div class="section-title">
                        <i class="bi bi-people"></i>
                        مدیریت کاربران
                        <span class="badge-role admin">فقط ادمین</span>
                    </div>
                    <p class="section-desc">
                        در این بخش، مدیر ارشد می‌تواند کاربران جدید ایجاد، اطلاعات آن‌ها را ویرایش یا کاربران را حذف کند.
                        این بخش برای مدیریت دسترسی‌های سامانه بسیار حیاتی است.
                    </p>
                    <div class="step">
                        <div class="step-number">۱</div>
                        <div class="step-content">
                            <strong>دسترسی به مدیریت کاربران</strong>
                            <div class="step-desc">
                                از منوی اصلی روی <strong>«کاربران»</strong> کلیک کنید یا آدرس
                                <a href="/portal/admin/users.php" target="_blank" class="help-link"><code>/portal/admin/users.php</code></a> را باز کنید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۲</div>
                        <div class="step-content">
                            <strong>افزودن کاربر جدید</strong>
                            <div class="step-desc">
                                نام کامل، نام کاربری، رمز عبور و نقش کاربر را وارد کنید.
                                سپس روی دکمه <strong>«افزودن»</strong> کلیک کنید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-person-plus"></i> نقش‌های موجود: مدیر ارشد، مسئول ثبت‌نام، معرف‌کننده، گزارشگر.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۳</div>
                        <div class="step-content">
                            <strong>ویرایش کاربر</strong>
                            <div class="step-desc">
                                روی دکمه <strong>«مداد»</strong> کنار کاربر کلیک کنید.
                                می‌توانید نام کامل، رمز عبور و نقش کاربر را تغییر دهید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-shield-lock"></i> نمی‌توانید سطح دسترسی خود را تغییر دهید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۴</div>
                        <div class="step-content">
                            <strong>حذف کاربر</strong>
                            <div class="step-desc">
                                روی دکمه <strong>«سطل زباله»</strong> کلیک کنید.
                                توجه داشته باشید که کاربرانی که دانشجو ثبت کرده‌اند قابل حذف نیستند.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-exclamation-triangle"></i> قبل از حذف کاربر، دانشجویان او را به کاربر دیگری منتقل کنید.
                            </div>
                        </div>
                    </div>
                    <div class="alert-warning">
                        <i class="bi bi-exclamation-triangle"></i>
                        <strong>توجه:</strong> کاربر <code>admin</code> را نمی‌توان حذف کرد. همیشه حداقل یک مدیر ارشد در سیستم وجود داشته باشد.
                    </div>
                </div>

                <!-- ============================================================
                بخش ۸: لینک‌های تبلیغاتی
                ============================================================ -->
                <div id="section-utm" class="help-section">
                    <div class="section-title">
                        <i class="bi bi-link-45deg"></i>
                        مدیریت لینک‌های تبلیغاتی (UTM)
                        <span class="badge-role admin">فقط ادمین</span>
                    </div>
                    <p class="section-desc">
                        با استفاده از این بخش، می‌توانید لینک‌های اختصاصی برای هر کانال تبلیغاتی بسازید و عملکرد آن‌ها را اندازه‌گیری کنید.
                        این ابزار برای تحلیل بازدهی تبلیغات بسیار مفید است.
                    </p>
                    <div class="step">
                        <div class="step-number">۱</div>
                        <div class="step-content">
                            <strong>ساخت لینک جدید</strong>
                            <div class="step-desc">
                                از منوی اصلی روی <strong>«مدیریت لینک‌ها»</strong> کلیک کنید یا آدرس
                                <a href="/portal/admin/utm_links.php" target="_blank" class="help-link"><code>/portal/admin/utm_links.php</code></a> را باز کنید.
                                نام کانال، <code>utm_source</code>، <code>utm_medium</code> و <code>utm_campaign</code> را وارد کنید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-tag"></i> مثال: نام: اینستاگرام، utm_source: instagram، utm_medium: social، utm_campaign: summer1404
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۲</div>
                        <div class="step-content">
                            <strong>دریافت لینک</strong>
                            <div class="step-desc">
                                پس از ساخت، لینک تولید شده در جدول نمایش داده می‌شود.
                                آن را کپی کرده و در تبلیغات خود استفاده کنید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-clipboard"></i> لینک به این شکل است: <a href="/portal/register.php?utm_source=...&utm_medium=...&utm_campaign=...&utm_link_id=..." target="_blank" class="help-link"><code>/portal/register.php?utm_source=...&utm_medium=...&utm_campaign=...&utm_link_id=...</code></a>
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۳</div>
                        <div class="step-content">
                            <strong>مشاهده آمار</strong>
                            <div class="step-desc">
                                در جدول، تعداد <strong>کلیک</strong> و <strong>ثبت‌نام</strong> برای هر لینک نمایش داده می‌شود.
                                با کلیک روی دکمه <strong>«دید» (👁️)</strong>، لیست دانشجویانی که از طریق آن لینک ثبت‌نام کرده‌اند را مشاهده کنید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-bar-chart"></i> با این آمار می‌توانید بهترین کانال تبلیغاتی را شناسایی کنید.
                            </div>
                        </div>
                    </div>
                    <div class="alert-tip">
                        <i class="bi bi-lightbulb"></i>
                        <strong>نکته:</strong> برای هر کمپین تبلیغاتی، یک لینک مجزا بسازید تا بتوانید عملکرد هر کدام را به‌طور دقیق اندازه‌گیری کنید.
                    </div>
                </div>

                <!-- ============================================================
                بخش ۹: لاگ سیستم
                ============================================================ -->
                <div id="section-logs" class="help-section">
                    <div class="section-title">
                        <i class="bi bi-clock-history"></i>
                        لاگ سیستم
                        <span class="badge-role admin">فقط ادمین</span>
                    </div>
                    <p class="section-desc">
                        در این بخش، تمام فعالیت‌های کاربران ثبت می‌شود. این قابلیت برای پیگیری امنیتی و تحلیل رفتار کاربران بسیار مفید است.
                    </p>
                    <div class="step">
                        <div class="step-number">۱</div>
                        <div class="step-content">
                            <strong>دسترسی به لاگ</strong>
                            <div class="step-desc">
                                از منوی اصلی روی <strong>«لاگ»</strong> کلیک کنید یا آدرس
                                <a href="/portal/admin/system_logs.php" target="_blank" class="help-link"><code>/portal/admin/system_logs.php</code></a> را باز کنید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۲</div>
                        <div class="step-content">
                            <strong>فیلتر لاگ‌ها</strong>
                            <div class="step-desc">
                                می‌توانید بر اساس <strong>کاربر، نوع رویداد و تاریخ</strong> فیلتر کنید.
                                این کار به شما کمک می‌کند سریع‌تر به لاگ مورد نظر برسید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-filter"></i> نوع رویدادها شامل: ورود، خروج، ایجاد، ویرایش، حذف، بایگانی و بازیابی است.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">۳</div>
                        <div class="step-content">
                            <strong>مشاهده جزئیات</strong>
                            <div class="step-desc">
                                هر لاگ شامل: <strong>تاریخ، کاربر، نوع رویداد، توضیحات و IP</strong> است.
                                این اطلاعات به شما کمک می‌کند فعالیت‌های مشکوک را شناسایی کنید.
                            </div>
                            <div class="step-note">
                                <i class="bi bi-shield-lock"></i> لاگ‌ها به‌صورت خودکار ثبت می‌شوند و قابل حذف نیستند.
                            </div>
                        </div>
                    </div>
                    <div class="alert-warning">
                        <i class="bi bi-exclamation-triangle"></i>
                        <strong>توجه:</strong> لاگ‌ها برای تحلیل امنیتی و رفتار کاربران بسیار مهم هستند. به‌صورت دوره‌ای آن‌ها را بررسی کنید.
                    </div>
                </div>

                <!-- ============================================================
                بخش ۱۰: سوالات متداول
                ============================================================ -->
                <div id="section-faq" class="help-section">
                    <div class="section-title">
                        <i class="bi bi-question-lg"></i>
                        سوالات متداول
                        <span class="badge-role all">همه کاربران</span>
                    </div>
                    <div class="step">
                        <div class="step-number">?</div>
                        <div class="step-content">
                            <strong>چرا بعضی فیلدها را در فرم ثبت‌نام نمی‌بینم؟</strong>
                            <div class="step-desc">
                                دسترسی شما به فیلدها بر اساس <strong>نقش کاربری</strong> شما تعیین می‌شود.
                                برای مثال، فقط ادمین می‌تواند وضعیت‌ها و بخش معرف را ببیند.
                                اگر نیاز به دسترسی بیشتر دارید، با مدیر ارشد تماس بگیرید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">?</div>
                        <div class="step-content">
                            <strong>چطور یک دانشجو را بایگانی (انصراف) کنم؟</strong>
                            <div class="step-desc">
                                به صفحه <strong>«گزارشات»</strong> بروید، دانشجو را پیدا کنید و روی دکمه
                                <strong>«حذف»</strong> (سطل زباله) کلیک کنید.
                                دانشجو به وضعیت <strong>«انصرافی»</strong> منتقل می‌شود.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">?</div>
                        <div class="step-content">
                            <strong>چطور یک دانشجوی انصرافی را بازیابی کنم؟</strong>
                            <div class="step-desc">
                                در صفحه <strong>«گزارشات»</strong>، گزینه <strong>«کاربران انصرافی»</strong> را فعال کنید.
                                سپس روی دکمه <strong>«بازیابی»</strong> کلیک کنید تا دانشجو به وضعیت «فعال» بازگردد.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">?</div>
                        <div class="step-content">
                            <strong>رمز عبور خود را فراموش کردم، چیکار کنم؟</strong>
                            <div class="step-desc">
                                با <strong>مدیر ارشد</strong> سیستم تماس بگیرید تا رمز عبور شما را تغییر دهد.
                                در حال حاضر امکان بازیابی رمز به‌صورت خودکار وجود ندارد.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">?</div>
                        <div class="step-content">
                            <strong>چطور یک فیلد جدید به فرم ثبت‌نام اضافه کنم؟</strong>
                            <div class="step-desc">
                                اگر <strong>مدیر ارشد</strong> هستید، به بخش <strong>«فیلدها»</strong> بروید و فیلد جدید اضافه کنید.
                                اگر دسترسی ندارید، از مدیر ارشد بخواهید این کار را انجام دهد.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">?</div>
                        <div class="step-content">
                            <strong>آیا می‌توانم گزارشات را به صورت فایل دریافت کنم؟</strong>
                            <div class="step-desc">
                                بله. در صفحه <strong>«گزارشات»</strong>، روی دکمه <strong>«پرینت»</strong> یا
                                <strong>«خروجی اکسل»</strong> کلیک کنید تا گزارش را به‌صورت چاپی یا فایل CSV دریافت کنید.
                            </div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">?</div>
                        <div class="step-content">
                            <strong>چطور بفهمم کدام کانال تبلیغاتی بهتر عمل کرده است؟</strong>
                            <div class="step-desc">
                                به بخش <strong>«مدیریت لینک‌ها»</strong> بروید و تعداد <strong>کلیک</strong> و
                                <strong>ثبت‌نام</strong> هر لینک را مقایسه کنید.
                                کانالی که بیشترین ثبت‌نام را دارد، بهترین عملکرد را داشته است.
                            </div>
                        </div>
                    </div>
                    <div class="alert-tip">
                        <i class="bi bi-lightbulb"></i>
                        <strong>نکته:</strong> در صورت بروز هرگونه مشکل یا سوال دیگر، با تیم پشتیبانی فنی تماس بگیرید.
                    </div>
                </div>

                <!-- ===== فوتر ===== -->
                <div class="help-footer">
                    <i class="bi bi-mortarboard-fill"></i>
                    سامانه جامع مهدی - نسخه ۱.۰
                    <br>
                    <span class="text-muted" style="font-size: 0.8rem;">
                        برای اطلاعات بیشتر یا گزارش مشکلات، با تیم پشتیبانی تماس بگیرید.
                    </span>
                </div>

            </div><!-- end col-lg-9 -->
        </div><!-- end row -->
    </div><!-- end help-wrapper -->

    <!-- ===== اسکریپت برای منوی کناری ===== -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tocLinks = document.querySelectorAll('.toc-item');
            const sections = document.querySelectorAll('.help-section');

            function updateActiveLink() {
                let currentSectionId = '';
                sections.forEach(function(section) {
                    const rect = section.getBoundingClientRect();
                    if (rect.top <= 120) {
                        currentSectionId = section.id;
                    }
                });

                tocLinks.forEach(function(link) {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === '#' + currentSectionId) {
                        link.classList.add('active');
                    }
                });
            }

            window.addEventListener('scroll', updateActiveLink);
            updateActiveLink();

            // اسکرول نرم برای لینک‌های منو
            tocLinks.forEach(function(link) {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href').substring(1);
                    const targetElement = document.getElementById(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                });
            });
        });
    </script>

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