<?php
if (session_status() === PHP_SESSION_NONE) session_start();
require_once '../config.php';

if (!isLoggedIn()) redirect('../login.php');
if (!isRepresentative()) {
    setMessage('دسترسی غیرمجاز', 'error');
    redirect('../login.php');
}

$page_title = 'مرکز آموزش نمایندگان';
require_once '../includes/header.php';
?>

<style>
.tutorial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    transition: all 0.3s ease;
}
.tutorial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-color: var(--accent-primary);
}
.step-number {
    width: 35px;
    height: 35px;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}
.tutorial-icon {
    font-size: 2.5rem;
    color: var(--accent-primary);
    margin-bottom: 1.5rem;
    opacity: 0.8;
}
.pro-badge {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}
.tutorial-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    padding: 3rem;
    border-radius: 24px;
    margin-bottom: 2rem;
    border: 1px solid rgba(255,255,255,0.05);
}
</style>

<div class="container-fluid">
    <!-- Header -->
    <div class="tutorial-header text-center shadow-lg">
        <h2 class="text-white fw-bold mb-3"><i class="bi bi-book me-2 text-success"></i> راهنمای شروع سریع نمایندگان</h2>
        <p class="text-white-50 fs-5 mb-0">همه چیزهایی که برای شروع فعالیت حرفه‌ای خود نیاز دارید را اینجا بیابید.</p>
    </div>

    <div class="row g-4">
        <!-- Step 1: Wallet -->
        <div class="col-md-6 col-xl-4">
            <div class="tutorial-card p-4">
                <div class="d-flex justify-content-between mb-3">
                    <div class="step-number">۱</div>
                    <span class="pro-badge">بخش مالی</span>
                </div>
                <div class="tutorial-icon"><i class="bi bi-wallet2"></i></div>
                <h5 class="text-white fw-bold mb-3">شارژ کیف پول</h5>
                <p class="text-muted small mb-4">قبل از ساخت هر کاربری، ابتدا باید کیف پول خود را شارژ کنید.</p>
                <ul class="list-unstyled text-white-50 small">
                    <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i> به صفحه <strong>کیف پول</strong> بروید.</li>
                    <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i> شماره کارت مدیریت را بردارید و واریز کنید.</li>
                    <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i> تصویر فیش را آپلود و درخواست ثبت کنید.</li>
                    <li><i class="bi bi-check2-circle text-success me-2"></i> پس از تأیید مدیر، موجودی شما افزایش می‌یابد.</li>
                </ul>
            </div>
        </div>

        <!-- Step 2: Add User -->
        <div class="col-md-6 col-xl-4">
            <div class="tutorial-card p-4">
                <div class="d-flex justify-content-between mb-3">
                    <div class="step-number">۲</div>
                    <span class="pro-badge">مدیریت کاربران</span>
                </div>
                <div class="tutorial-icon"><i class="bi bi-person-plus"></i></div>
                <h5 class="text-white fw-bold mb-3">ساخت اولین کاربر</h5>
                <p class="text-muted small mb-4">ایجاد دسترسی برای مشتریان جدید بسیار ساده است.</p>
                <ul class="list-unstyled text-white-50 small">
                    <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i> به بخش <strong>کاربران</strong> بروید.</li>
                    <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i> روی دکمه <strong>کاربر جدید</strong> کلیک کنید.</li>
                    <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i> ایمیل، حجم (GB) و مدت زمان را تعیین کنید.</li>
                    <li><i class="bi bi-check2-circle text-success me-2"></i> هزینه به صورت خودکار از کیف پول شما کسر می‌شود.</li>
                </ul>
            </div>
        </div>

        <!-- Step 3: Configs -->
        <div class="col-md-6 col-xl-4">
            <div class="tutorial-card p-4">
                <div class="d-flex justify-content-between mb-3">
                    <div class="step-number">۳</div>
                    <span class="pro-badge">تحویل سرویس</span>
                </div>
                <div class="tutorial-icon"><i class="bi bi-qr-code-scan"></i></div>
                <h5 class="text-white fw-bold mb-3">دریافت کانفیگ و QR Code</h5>
                <p class="text-muted small mb-4">لینک‌های اتصال را به راحتی در اختیار مشتری بگذارید.</p>
                <ul class="list-unstyled text-white-50 small">
                    <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i> در جدول کاربران، روی آیکون <strong>QR Code</strong> بزنید.</li>
                    <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i> لینک مستقیم یا لینک اشتراک را کپی کنید.</li>
                    <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i> مشتری می‌تواند با اسکن QR Code متصل شود.</li>
                    <li><i class="bi bi-check2-circle text-success me-2"></i> از لینک ساب برای دریافت خودکار تغییرات استفاده کنید.</li>
                </ul>
            </div>
        </div>

        <!-- Tip 1: Telegram Bot -->
        <div class="col-md-6 col-xl-4">
            <div class="tutorial-card p-4">
                <div class="d-flex justify-content-between mb-3">
                    <div class="step-number"><i class="bi bi-lightbulb"></i></div>
                    <span class="pro-badge text-info">نکته هوشمند</span>
                </div>
                <div class="tutorial-icon text-info"><i class="bi bi-telegram"></i></div>
                <h5 class="text-white fw-bold mb-3">ربات تلگرام استعلام</h5>
                <p class="text-muted small mb-4">مشتریان خود را خودکفا کنید تا ترافیک خود را چک کنند.</p>
                <ul class="list-unstyled text-white-50 small">
                    <li class="mb-2"><i class="bi bi-info-circle text-info me-2"></i> برای هر کاربر یک <strong>کد استعلام</strong> وجود دارد.</li>
                    <li class="mb-2"><i class="bi bi-info-circle text-info me-2"></i> این کد را به همراه آیدی ربات به مشتری بدهید.</li>
                    <li><i class="bi bi-info-circle text-info me-2"></i> مشتری با ارسال کد به ربات، باقی‌مانده حجم را می‌بیند.</li>
                </ul>
            </div>
        </div>

        <!-- Tip 2: Support -->
        <div class="col-md-6 col-xl-4">
            <div class="tutorial-card p-4">
                <div class="d-flex justify-content-between mb-3">
                    <div class="step-number"><i class="bi bi-headset"></i></div>
                    <span class="pro-badge text-warning">پشتیبانی</span>
                </div>
                <div class="tutorial-icon text-warning"><i class="bi bi-chat-dots"></i></div>
                <h5 class="text-white fw-bold mb-3">سیستم تیکتینگ</h5>
                <p class="text-muted small mb-4">هر مشکلی داشتید، ما در کنار شما هستیم.</p>
                <ul class="list-unstyled text-white-50 small">
                    <li class="mb-2"><i class="bi bi-question-circle text-warning me-2"></i> از منوی کناری به بخش <strong>تیکت</strong> بروید.</li>
                    <li class="mb-2"><i class="bi bi-question-circle text-warning me-2"></i> موضوع و مشکل خود را دقیق شرح دهید.</li>
                    <li><i class="bi bi-question-circle text-warning me-2"></i> کارشناسان ما در کمترین زمان پاسخگو خواهند بود.</li>
                </ul>
            </div>
        </div>

        <!-- Tip 3: Dashboard Stats -->
        <div class="col-md-6 col-xl-4">
            <div class="tutorial-card p-4">
                <div class="d-flex justify-content-between mb-3">
                    <div class="step-number"><i class="bi bi-graph-up-arrow"></i></div>
                    <span class="pro-badge text-primary">آنالیز</span>
                </div>
                <div class="tutorial-icon text-primary"><i class="bi bi-speedometer2"></i></div>
                <h5 class="text-white fw-bold mb-3">تحلیل داشبورد</h5>
                <p class="text-muted small mb-4">وضعیت کلی فروش و مصرف خود را رصد کنید.</p>
                <ul class="list-unstyled text-white-50 small">
                    <li class="mb-2"><i class="bi bi-bar-chart text-primary me-2"></i> نمودارها وضعیت آنلاین بودن کاربران را نشان می‌دهند.</li>
                    <li class="mb-2"><i class="bi bi-bar-chart text-primary me-2"></i> ۵ کاربر پرمصرف را در صفحه اصلی ببینید.</li>
                    <li><i class="bi bi-bar-chart text-primary me-2"></i> به محدودیت ترافیک کل خود در داشبورد دقت کنید.</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Footer Action -->
    <div class="mt-5 text-center p-5 bg-white bg-opacity-5 rounded-4 border border-white border-opacity-10">
        <h4 class="text-white mb-3">آماده شروع هستید؟</h4>
        <p class="text-white-50 mb-4">همین حالا اولین کاربر خود را بسازید و کسب و کارتان را رونق دهید.</p>
        <a href="users.php" class="btn btn-success btn-lg px-5 rounded-pill shadow">
            <i class="bi bi-rocket-takeoff me-2"></i> رفتن به بخش کاربران
        </a>
    </div>
</div>

<?php require_once '../includes/header.php'; ?>
