<?php
use App\Core\View;
$assetVer = @filemtime(APP_ROOT.'/public/assets/css/app.css') ?: time();
$appName  = $appName ?? \App\Core\Config::get('app.name');
$baseUrl  = rtrim(\App\Core\Config::get('app.url', 'https://yoursite.com'), '/');
$siteLogo = \App\Models\Setting::get('site_logo', '');
$favicon  = \App\Models\Setting::get('site_favicon', '');
?>
<!doctype html>
<html dir="rtl" lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>مستندات API — <?= View::e($appName) ?></title>
<?php if ($favicon): ?><link rel="icon" href="/public/uploads/<?= htmlspecialchars($favicon) ?>"><?php endif; ?>
<link rel="stylesheet" href="/public/assets/vendor/bootstrap/bootstrap.rtl.min.css">
<link rel="stylesheet" href="/public/assets/vendor/bootstrap-icons/bootstrap-icons.min.css">
<link rel="stylesheet" href="/public/assets/css/app.css?v=<?= $assetVer ?>">
<style>
/* ══ Reset ══ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: 'Vazirmatn', Tahoma, sans-serif; background: #0d1117; color: #e6edf3; direction: rtl; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

/* ══ Topbar ══ */
.d-topbar {
    position: sticky; top: 0; z-index: 200;
    height: 62px; padding: 0 2rem;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(13,17,23,.92); backdrop-filter: blur(16px);
    border-bottom: 1px solid #21262d;
}
.d-brand { display: flex; align-items: center; gap: 10px; color: #e6edf3; font-weight: 700; font-size: .95rem; }
.d-brand-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.d-topbar-actions { display: flex; align-items: center; gap: 10px; }
.d-btn { border-radius: 8px; padding: 6px 16px; font-size: .8rem; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; font-family: inherit; transition: all .15s; }
.d-btn-ghost { color: #8b949e; border-color: #30363d; background: transparent; }
.d-btn-ghost:hover { color: #e6edf3; border-color: #8b949e; }
.d-btn-primary { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; border: none; box-shadow: 0 3px 12px rgba(99,102,241,.35); }
.d-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.d-version-badge { background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3); color: #818cf8; font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; }

/* ══ Layout ══ */
.d-layout { display: flex; min-height: calc(100vh - 62px); }

/* ══ Sidebar ══ */
.d-sidebar {
    width: 256px; flex-shrink: 0;
    background: #0d1117;
    border-left: 1px solid #21262d;
    position: sticky; top: 62px;
    height: calc(100vh - 62px); overflow-y: auto;
    padding: 1.25rem 0 3rem;
}
.d-sidebar::-webkit-scrollbar { width: 4px; }
.d-sidebar::-webkit-scrollbar-track { background: transparent; }
.d-sidebar::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
.d-sidebar-section { font-size: .65rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #484f58; padding: .9rem 1.25rem .3rem; }
.d-sidebar a {
    display: flex; align-items: center; gap: 8px;
    padding: .4rem 1.25rem;
    color: #8b949e; font-size: .8rem; border-right: 2px solid transparent;
    transition: all .12s;
}
.d-sidebar a i { font-size: .8rem; opacity: .7; flex-shrink: 0; width: 14px; }
.d-sidebar a:hover { color: #e6edf3; background: rgba(255,255,255,.04); border-right-color: #30363d; }
.d-sidebar a.active { color: #818cf8; border-right-color: #6366f1; background: rgba(99,102,241,.08); font-weight: 600; }
.d-sidebar a.active i { opacity: 1; }
.d-sidebar-divider { height: 1px; background: #21262d; margin: .75rem 1.25rem; }
.method-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-get    { background: #3fb950; }
.dot-post   { background: #58a6ff; }

/* ══ Main content ══ */
.d-main { flex: 1; min-width: 0; }
.d-section { padding: 3rem; border-bottom: 1px solid #21262d; }
.d-section:last-child { border-bottom: none; }

/* ══ Hero ══ */
.d-hero { background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%); padding: 3.5rem 3rem; border-bottom: 1px solid #21262d; position: relative; overflow: hidden; }
.d-hero::before { content: ''; position: absolute; top: -80px; left: -80px; width: 400px; height: 400px; border-radius: 50%; background: rgba(99,102,241,.06); pointer-events: none; }
.d-hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.25); color: #818cf8; font-size: .75rem; font-weight: 600; padding: 5px 13px; border-radius: 20px; margin-bottom: 1.2rem; }
.d-hero h1 { font-size: 2.2rem; font-weight: 900; line-height: 1.2; margin: 0 0 .9rem; background: linear-gradient(135deg,#e6edf3,#8b949e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.d-hero-desc { color: #8b949e; font-size: .95rem; line-height: 1.75; max-width: 640px; margin: 0 0 1.75rem; }
.d-hero-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.d-hero-pill { display: flex; align-items: center; gap: 6px; background: #161b22; border: 1px solid #30363d; color: #8b949e; font-size: .78rem; padding: 5px 13px; border-radius: 20px; }
.d-hero-pill i { color: #3fb950; font-size: .85rem; }

/* ══ Section headers ══ */
.d-section-title { font-size: 1.35rem; font-weight: 800; color: #e6edf3; margin: 0 0 .5rem; display: flex; align-items: center; gap: 10px; }
.d-section-title i { color: #6366f1; font-size: 1.1rem; }
.d-section-desc { color: #8b949e; font-size: .875rem; line-height: 1.7; margin-bottom: 1.5rem; }
.d-divider { height: 1px; background: linear-gradient(90deg, #21262d, transparent); margin: 2rem 0; }

/* ══ Endpoint cards ══ */
.ep-card { border: 1px solid #21262d; border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem; background: #161b22; }
.ep-head { padding: .85rem 1.25rem; background: #0d1117; border-bottom: 1px solid #21262d; display: flex; align-items: center; gap: 10px; font-family: 'Fira Code', monospace; font-size: .84rem; }
.ep-head .path { color: #e6edf3; }
.ep-head .path .param { color: #f78166; }
.ep-body { padding: 1.4rem 1.25rem; }
.ep-sub { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #484f58; margin: 1.2rem 0 .6rem; }
.ep-sub:first-child { margin-top: 0; }

/* ══ Method badges ══ */
.mb { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 5px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; font-family: monospace; }
.mb-get  { background: rgba(63,185,80,.15);  color: #3fb950; border: 1px solid rgba(63,185,80,.25); }
.mb-post { background: rgba(88,166,255,.15); color: #58a6ff; border: 1px solid rgba(88,166,255,.25); }

/* ══ Code blocks with tabs ══ */
.code-wrap { border-radius: 10px; overflow: hidden; border: 1px solid #30363d; margin: .5rem 0 1rem; }
.code-tabs { display: flex; align-items: center; background: #161b22; border-bottom: 1px solid #30363d; padding: 0 1rem; gap: 0; }
.code-tab { padding: .55rem .9rem; font-size: .72rem; font-weight: 600; color: #484f58; cursor: pointer; border-bottom: 2px solid transparent; transition: all .12s; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit; }
.code-tab:hover { color: #8b949e; }
.code-tab.active { color: #818cf8; border-bottom-color: #6366f1; }
.code-tabs-spacer { flex: 1; }
.code-copy { background: none; border: 1px solid #30363d; border-radius: 5px; color: #484f58; font-size: .7rem; padding: 3px 9px; cursor: pointer; font-family: inherit; transition: all .12s; display: flex; align-items: center; gap: 4px; }
.code-copy:hover { color: #e6edf3; border-color: #6366f1; }
.code-copy.copied { color: #3fb950; border-color: #3fb950; }
.code-panel { background: #0d1117; padding: 1.1rem 1.25rem; font-family: 'Fira Code', 'Courier New', monospace; font-size: .79rem; line-height: 1.75; overflow-x: auto; direction: ltr; text-align: left; white-space: pre; display: none; color: #e6edf3; }
.code-panel.active { display: block; }
/* Syntax colors */
.c-comment { color: #484f58; }
.c-key     { color: #79c0ff; }
.c-str     { color: #a5d6ff; }
.c-val     { color: #ff7b72; }
.c-num     { color: #f8c16e; }
.c-ok      { color: #3fb950; }
.c-method  { color: #d2a8ff; }
.c-url     { color: #ffa657; }
.c-header  { color: #e3b341; }
.c-curl    { color: #d2a8ff; }
.c-flag    { color: #ffa657; }
.c-php-var { color: #ff9a40; }

/* ══ Tables ══ */
.d-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.d-table th { background: #161b22; padding: .55rem .85rem; font-weight: 600; color: #8b949e; text-align: right; border: 1px solid #21262d; font-size: .75rem; }
.d-table td { padding: .55rem .85rem; border: 1px solid #21262d; color: #c9d1d9; vertical-align: top; }
.d-table td code { background: #21262d; padding: .1rem .4rem; border-radius: 4px; font-size: .78rem; color: #f78166; }
.badge-req { background: rgba(248,81,73,.15); color: #f85149; font-size: .65rem; padding: .1rem .4rem; border-radius: 3px; font-weight: 700; border: 1px solid rgba(248,81,73,.25); }
.badge-opt { background: rgba(139,148,158,.1); color: #6e7681; font-size: .65rem; padding: .1rem .4rem; border-radius: 3px; font-weight: 700; border: 1px solid rgba(139,148,158,.2); }

/* ══ Alerts ══ */
.d-alert { border-radius: 8px; padding: .9rem 1.1rem; font-size: .84rem; display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; }
.d-alert i { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.d-alert-info  { background: rgba(88,166,255,.08); border: 1px solid rgba(88,166,255,.2); color: #8b949e; }
.d-alert-info i { color: #58a6ff; }
.d-alert-warn  { background: rgba(210,167,79,.08); border: 1px solid rgba(210,167,79,.25); color: #8b949e; }
.d-alert-warn i { color: #e3b341; }
.d-alert-success { background: rgba(63,185,80,.08); border: 1px solid rgba(63,185,80,.2); color: #8b949e; }
.d-alert-success i { color: #3fb950; }

/* ══ Quick start steps ══ */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: flex; gap: 1.2rem; padding-bottom: 1.8rem; position: relative; }
.step:not(:last-child)::before { content:''; position: absolute; right: 17px; top: 36px; width: 2px; background: #21262d; bottom: 0; }
.step-num { width: 36px; height: 36px; border-radius: 50%; background: rgba(99,102,241,.12); border: 1.5px solid rgba(99,102,241,.3); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; color: #818cf8; flex-shrink: 0; }
.step-body { flex: 1; padding-top: .35rem; }
.step-title { font-weight: 700; color: #e6edf3; font-size: .9rem; margin-bottom: .3rem; }
.step-desc  { color: #8b949e; font-size: .82rem; line-height: 1.65; }

/* ══ HTTP status table ══ */
.status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.status-card { background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: .75rem 1rem; display: flex; align-items: center; gap: 10px; }
.status-code { font-size: 1.05rem; font-weight: 800; font-family: monospace; min-width: 36px; }
.s200 { color: #3fb950; } .s201 { color: #3fb950; }
.s400 { color: #f85149; } .s401 { color: #ff9a40; }
.s403 { color: #ff9a40; } .s404 { color: #e3b341; }
.s422 { color: #f85149; } .s500 { color: #8b949e; }
.status-label { font-size: .78rem; color: #8b949e; }

/* ══ Inline code ══ */
code { background: #21262d; padding: .1rem .4rem; border-radius: 4px; font-size: .82em; color: #f78166; font-family: 'Fira Code', monospace; }

/* ══ Scrollbar ══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 6px; }

/* ══ Responsive ══ */
@media (max-width: 900px) {
    .d-sidebar { display: none; }
    .d-section, .d-hero { padding: 2rem 1.25rem; }
}
</style>
</head>
<body>

<!-- ══ Topbar ══ -->
<nav class="d-topbar">
    <div class="d-brand">
        <?php if ($siteLogo): ?>
            <img src="/public/uploads/<?= htmlspecialchars($siteLogo) ?>" alt="" style="height:34px;border-radius:8px">
        <?php else: ?>
            <div class="d-brand-icon"><i class="bi bi-code-slash"></i></div>
        <?php endif; ?>
        <?= View::e($appName) ?>
        <span class="d-version-badge">API v1</span>
    </div>
    <div class="d-topbar-actions">
        <a href="/" class="d-btn d-btn-ghost"><i class="bi bi-house"></i> صفحه اصلی</a>
        <a href="/login" class="d-btn d-btn-primary"><i class="bi bi-box-arrow-in-right"></i> ورود</a>
    </div>
</nav>

<!-- ══ Layout ══ -->
<div class="d-layout">

    <!-- Sidebar -->
    <nav class="d-sidebar" id="sidebar">
        <div class="d-sidebar-section">شروع سریع</div>
        <a href="#hero" class="active" data-sec="hero"><i class="bi bi-stars"></i> معرفی</a>
        <a href="#quickstart" data-sec="quickstart"><i class="bi bi-lightning-fill"></i> شروع سریع</a>
        <a href="#auth" data-sec="auth"><i class="bi bi-key-fill"></i> احراز هویت</a>
        <a href="#token" data-sec="token"><i class="bi bi-person-badge"></i> دریافت توکن</a>
        <div class="d-sidebar-divider"></div>
        <div class="d-sidebar-section">Endpoints</div>
        <a href="#me" data-sec="me"><span class="method-dot dot-get"></span> GET /me</a>
        <a href="#forms-list" data-sec="forms-list"><span class="method-dot dot-get"></span> GET /forms</a>
        <a href="#forms-get" data-sec="forms-get"><span class="method-dot dot-get"></span> GET /forms/{id}</a>
        <a href="#forms-submit" data-sec="forms-submit"><span class="method-dot dot-post"></span> POST /forms/{id}/submit</a>
        <a href="#submissions-get" data-sec="submissions-get"><span class="method-dot dot-get"></span> GET /submissions/{id}</a>
        <a href="#submissions-pdf" data-sec="submissions-pdf"><span class="method-dot dot-get"></span> GET /submissions/{id}/pdf</a>
        <div class="d-sidebar-divider"></div>
        <div class="d-sidebar-section">راهنما</div>
        <a href="#errors" data-sec="errors"><i class="bi bi-exclamation-octagon"></i> کدهای خطا</a>
        <a href="#rate-limit" data-sec="rate-limit"><i class="bi bi-speedometer2"></i> محدودیت نرخ</a>
        <a href="#example" data-sec="example"><i class="bi bi-braces"></i> مثال کامل</a>
    </nav>

    <!-- Main -->
    <main class="d-main">

        <!-- ── Hero ── -->
        <div class="d-hero" id="hero">
            <div class="d-hero-badge"><i class="bi bi-stars"></i> REST API — نسخه ۱.۰</div>
            <h1>مستندات API<br>سامانه تولید فرم PDF</h1>
            <p class="d-hero-desc">
                با استفاده از API این سامانه می‌توانید فرم‌ها را در سایت یا اپلیکیشن خود یکپارچه کنید،
                داده‌های کاربر را ارسال کنید و خروجی PDF حرفه‌ای دریافت کنید — بدون هیچ وابستگی به پنل مدیریتی.
            </p>
            <div class="d-hero-pills">
                <div class="d-hero-pill"><i class="bi bi-check-circle-fill"></i> JSON REST API</div>
                <div class="d-hero-pill"><i class="bi bi-check-circle-fill"></i> Bearer Token Auth</div>
                <div class="d-hero-pill"><i class="bi bi-check-circle-fill"></i> PDF Binary Output</div>
                <div class="d-hero-pill"><i class="bi bi-check-circle-fill"></i> UTF-8 پشتیبانی کامل فارسی</div>
            </div>
            <div style="margin-top:1.5rem;padding:.8rem 1.1rem;background:#161b22;border:1px solid #30363d;border-radius:8px;display:inline-flex;align-items:center;gap:.75rem;font-size:.84rem;">
                <span style="color:#484f58;font-weight:600;">Base URL</span>
                <code style="background:none;color:#58a6ff;font-size:.9rem;" dir="ltr"><?= htmlspecialchars($baseUrl) ?>/api/v1</code>
            </div>
        </div>

        <!-- ── Quick Start ── -->
        <div class="d-section" id="quickstart">
            <div class="d-section-title"><i class="bi bi-lightning-fill"></i> شروع سریع</div>
            <p class="d-section-desc">در چند دقیقه اولین درخواست خود را بزنید.</p>
            <div class="steps">
                <div class="step">
                    <div class="step-num">۱</div>
                    <div class="step-body">
                        <div class="step-title">ثبت‌نام و دریافت توکن</div>
                        <div class="step-desc">در سامانه ثبت‌نام کنید، به بخش «توکن API» در پروفایل بروید و توکن خود را بسازید.</div>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">۲</div>
                    <div class="step-body">
                        <div class="step-title">لیست فرم‌ها را دریافت کنید</div>
                        <div class="step-desc">با یک درخواست GET، همه فرم‌های فعال و شناسه (id) آن‌ها را بگیرید.</div>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">۳</div>
                    <div class="step-body">
                        <div class="step-title">فرم را پر و ارسال کنید</div>
                        <div class="step-desc">با یک POST، داده‌های کاربر را ارسال کنید. در پاسخ، <code>submission_id</code> و آدرس PDF دریافت می‌کنید.</div>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">۴</div>
                    <div class="step-body">
                        <div class="step-title">PDF را دانلود کنید</div>
                        <div class="step-desc">با <code>pdf_url</code> که در پاسخ دریافت کردید، فایل PDF را مستقیم دریافت کنید.</div>
                    </div>
                </div>
            </div>
            <div class="d-alert d-alert-info mt-3">
                <i class="bi bi-info-circle-fill"></i>
                <div>همه پاسخ‌ها JSON هستند (<code>Content-Type: application/json; charset=utf-8</code>)، به جز endpoint دانلود PDF که فایل باینری برمی‌گرداند.</div>
            </div>
        </div>

        <!-- ── Auth ── -->
        <div class="d-section" id="auth">
            <div class="d-section-title"><i class="bi bi-key-fill"></i> احراز هویت</div>
            <p class="d-section-desc">تمام endpoint‌ها نیاز به ارسال توکن API دارند. توکن را در هدر <code>Authorization</code> ارسال کنید.</p>
            <div class="code-wrap">
                <div class="code-tabs">
                    <button class="code-tab active" onclick="switchTab(this,'auth')">Header</button>
                    <button class="code-tab" onclick="switchTab(this,'auth')">Query String</button>
                    <div class="code-tabs-spacer"></div>
                    <button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button>
                </div>
                <div class="code-panel active">
<span class="c-header">Authorization</span>: Bearer <span class="c-str">YOUR_API_TOKEN</span></div>
                <div class="code-panel">
<span class="c-comment"># توصیه نمی‌شود — برای تست سریع</span>
GET /api/v1/forms?<span class="c-key">api_token</span>=<span class="c-str">YOUR_API_TOKEN</span></div>
            </div>
            <div class="d-alert d-alert-warn mt-3">
                <i class="bi bi-shield-exclamation"></i>
                <div>توکن را هیچ‌گاه در کد فرانت‌اند (JavaScript سمت کلاینت) قرار ندهید. همیشه درخواست‌ها را از سرور ارسال کنید.</div>
            </div>
        </div>

        <!-- ── Token ── -->
        <div class="d-section" id="token">
            <div class="d-section-title"><i class="bi bi-person-badge"></i> نحوه دریافت توکن API</div>
            <p class="d-section-desc">توکن API شناسه منحصربه‌فرد حساب شما برای دسترسی به API است.</p>
            <div class="steps">
                <div class="step">
                    <div class="step-num">۱</div>
                    <div class="step-body">
                        <div class="step-title">ورود به حساب کاربری</div>
                        <div class="step-desc">به آدرس <a href="/login" style="color:#818cf8">/login</a> بروید و وارد شوید.</div>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">۲</div>
                    <div class="step-body">
                        <div class="step-title">بخش توکن API</div>
                        <div class="step-desc">از منوی کاربری، «توکن API» را انتخاب کنید یا مستقیم به <a href="/api-token" style="color:#818cf8">/api-token</a> بروید.</div>
                    </div>
                </div>
                <div class="step">
                    <div class="step-num">۳</div>
                    <div class="step-body">
                        <div class="step-title">ایجاد توکن جدید</div>
                        <div class="step-desc">روی «ایجاد توکن جدید» کلیک کنید. توکن فقط یک‌بار نمایش داده می‌شود — آن را کپی کنید.</div>
                    </div>
                </div>
            </div>
            <div class="d-alert d-alert-success">
                <i class="bi bi-info-circle-fill"></i>
                <div>در هر زمان می‌توانید توکن قدیمی را ابطال (revoke) کرده و توکن جدید صادر کنید. پس از ابطال، توکن قدیمی دیگر کار نمی‌کند.</div>
            </div>
        </div>

        <!-- ══════════ ENDPOINTS ══════════ -->

        <!-- ── GET /me ── -->
        <div class="d-section" id="me">
            <div class="d-section-title"><i class="bi bi-person-fill"></i> GET /api/v1/me</div>
            <p class="d-section-desc">اطلاعات حساب کاربری متصل به توکن را برمی‌گرداند.</p>
            <div class="ep-card">
                <div class="ep-head">
                    <span class="mb mb-get">GET</span>
                    <span class="path" dir="ltr"><?= htmlspecialchars($baseUrl) ?>/api/v1/me</span>
                </div>
                <div class="ep-body">
                    <div class="ep-sub">نمونه درخواست</div>
                    <div class="code-wrap">
                        <div class="code-tabs">
                            <button class="code-tab active" onclick="switchTab(this,'me')">cURL</button>
                            <button class="code-tab" onclick="switchTab(this,'me')">JavaScript</button>
                            <button class="code-tab" onclick="switchTab(this,'me')">PHP</button>
                            <div class="code-tabs-spacer"></div>
                            <button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button>
                        </div>
                        <div class="code-panel active">
<span class="c-curl">curl</span> <span class="c-flag">-X GET</span> \
  <span class="c-url">'<?= htmlspecialchars($baseUrl) ?>/api/v1/me'</span> \
  <span class="c-flag">-H</span> <span class="c-str">'Authorization: Bearer YOUR_API_TOKEN'</span></div>
                        <div class="code-panel">
<span class="c-method">const</span> res = <span class="c-method">await</span> fetch(<span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1/me'</span>, {
  headers: { <span class="c-str">'Authorization'</span>: <span class="c-str">'Bearer YOUR_API_TOKEN'</span> }
});
<span class="c-method">const</span> data = <span class="c-method">await</span> res.json();
console.log(data);</div>
                        <div class="code-panel">
<span class="c-php-var">$ch</span> = curl_init(<span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1/me'</span>);
curl_setopt(<span class="c-php-var">$ch</span>, CURLOPT_RETURNTRANSFER, <span class="c-val">true</span>);
curl_setopt(<span class="c-php-var">$ch</span>, CURLOPT_HTTPHEADER, [
    <span class="c-str">'Authorization: Bearer YOUR_API_TOKEN'</span>
]);
<span class="c-php-var">$response</span> = json_decode(curl_exec(<span class="c-php-var">$ch</span>), <span class="c-val">true</span>);</div>
                    </div>
                    <div class="ep-sub">نمونه پاسخ موفق (200)</div>
                    <div class="code-wrap">
                        <div class="code-tabs"><button class="code-tab active">JSON</button><div class="code-tabs-spacer"></div><button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button></div>
                        <div class="code-panel active">
{
  <span class="c-key">"ok"</span>: <span class="c-ok">true</span>,
  <span class="c-key">"data"</span>: {
    <span class="c-key">"id"</span>:        <span class="c-num">1</span>,
    <span class="c-key">"full_name"</span>: <span class="c-str">"علی محمدی"</span>,
    <span class="c-key">"email"</span>:    <span class="c-str">"ali@example.com"</span>,
    <span class="c-key">"role"</span>:     <span class="c-str">"user"</span>
  }
}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── GET /forms ── -->
        <div class="d-section" id="forms-list">
            <div class="d-section-title"><i class="bi bi-collection-fill"></i> GET /api/v1/forms</div>
            <p class="d-section-desc">لیست همه فرم‌های فعال سامانه را برمی‌گرداند.</p>
            <div class="ep-card">
                <div class="ep-head">
                    <span class="mb mb-get">GET</span>
                    <span class="path" dir="ltr"><?= htmlspecialchars($baseUrl) ?>/api/v1/forms</span>
                </div>
                <div class="ep-body">
                    <div class="ep-sub">نمونه درخواست</div>
                    <div class="code-wrap">
                        <div class="code-tabs">
                            <button class="code-tab active" onclick="switchTab(this,'fl')">cURL</button>
                            <button class="code-tab" onclick="switchTab(this,'fl')">JavaScript</button>
                            <button class="code-tab" onclick="switchTab(this,'fl')">PHP</button>
                            <div class="code-tabs-spacer"></div>
                            <button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button>
                        </div>
                        <div class="code-panel active">
<span class="c-curl">curl</span> <span class="c-url">'<?= htmlspecialchars($baseUrl) ?>/api/v1/forms'</span> \
  <span class="c-flag">-H</span> <span class="c-str">'Authorization: Bearer YOUR_API_TOKEN'</span></div>
                        <div class="code-panel">
<span class="c-method">const</span> { data: forms } = <span class="c-method">await</span> fetch(<span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1/forms'</span>, {
  headers: { <span class="c-str">'Authorization'</span>: <span class="c-str">'Bearer YOUR_API_TOKEN'</span> }
}).then(r => r.json());</div>
                        <div class="code-panel">
<span class="c-php-var">$ctx</span> = stream_context_create([<span class="c-str">'http'</span> => [
    <span class="c-str">'header'</span> => <span class="c-str">"Authorization: Bearer YOUR_API_TOKEN\r\n"</span>
]]);
<span class="c-php-var">$result</span> = json_decode(file_get_contents(
    <span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1/forms'</span>, false, <span class="c-php-var">$ctx</span>
), <span class="c-val">true</span>);</div>
                    </div>
                    <div class="ep-sub">نمونه پاسخ موفق (200)</div>
                    <div class="code-wrap">
                        <div class="code-tabs"><button class="code-tab active">JSON</button><div class="code-tabs-spacer"></div><button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button></div>
                        <div class="code-panel active">
{
  <span class="c-key">"ok"</span>: <span class="c-ok">true</span>,
  <span class="c-key">"data"</span>: [
    {
      <span class="c-key">"id"</span>:          <span class="c-num">1</span>,
      <span class="c-key">"title"</span>:       <span class="c-str">"فرم ثبت‌نام"</span>,
      <span class="c-key">"slug"</span>:        <span class="c-str">"registration"</span>,
      <span class="c-key">"description"</span>: <span class="c-str">"فرم ثبت‌نام اولیه"</span>
    },
    {
      <span class="c-key">"id"</span>:          <span class="c-num">2</span>,
      <span class="c-key">"title"</span>:       <span class="c-str">"فرم استخدام"</span>,
      <span class="c-key">"slug"</span>:        <span class="c-str">"employment"</span>,
      <span class="c-key">"description"</span>: <span class="c-str">"فرم درخواست استخدام"</span>
    }
  ]
}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── GET /forms/{id} ── -->
        <div class="d-section" id="forms-get">
            <div class="d-section-title"><i class="bi bi-file-earmark-text-fill"></i> GET /api/v1/forms/{id}</div>
            <p class="d-section-desc">ساختار کامل یک فرم (صفحه‌ها و فیلدها) را برمی‌گرداند. از این اطلاعات برای رندر کردن فرم در سمت خود استفاده کنید.</p>
            <div class="ep-card">
                <div class="ep-head">
                    <span class="mb mb-get">GET</span>
                    <span class="path" dir="ltr"><?= htmlspecialchars($baseUrl) ?>/api/v1/forms/<span class="param">{id}</span></span>
                </div>
                <div class="ep-body">
                    <div class="ep-sub">پارامترهای مسیر</div>
                    <table class="d-table">
                        <tr><th>پارامتر</th><th>نوع</th><th>وضعیت</th><th>توضیح</th></tr>
                        <tr><td><code>id</code></td><td>integer</td><td><span class="badge-req">الزامی</span></td><td>شناسه عددی فرم (از GET /forms به دست می‌آید)</td></tr>
                    </table>
                    <div class="ep-sub">نمونه درخواست</div>
                    <div class="code-wrap">
                        <div class="code-tabs">
                            <button class="code-tab active" onclick="switchTab(this,'fg')">cURL</button>
                            <button class="code-tab" onclick="switchTab(this,'fg')">JavaScript</button>
                            <div class="code-tabs-spacer"></div>
                            <button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button>
                        </div>
                        <div class="code-panel active">
<span class="c-curl">curl</span> <span class="c-url">'<?= htmlspecialchars($baseUrl) ?>/api/v1/forms/1'</span> \
  <span class="c-flag">-H</span> <span class="c-str">'Authorization: Bearer YOUR_API_TOKEN'</span></div>
                        <div class="code-panel">
<span class="c-method">const</span> { data: form } = <span class="c-method">await</span> fetch(<span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1/forms/1'</span>, {
  headers: { <span class="c-str">'Authorization'</span>: <span class="c-str">'Bearer YOUR_API_TOKEN'</span> }
}).then(r => r.json());</div>
                    </div>
                    <div class="ep-sub">نمونه پاسخ موفق (200)</div>
                    <div class="code-wrap">
                        <div class="code-tabs"><button class="code-tab active">JSON</button><div class="code-tabs-spacer"></div><button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button></div>
                        <div class="code-panel active">
{
  <span class="c-key">"ok"</span>: <span class="c-ok">true</span>,
  <span class="c-key">"data"</span>: {
    <span class="c-key">"id"</span>:    <span class="c-num">1</span>,
    <span class="c-key">"title"</span>: <span class="c-str">"فرم ثبت‌نام"</span>,
    <span class="c-key">"slug"</span>:  <span class="c-str">"registration"</span>,
    <span class="c-key">"pages"</span>: [
      {
        <span class="c-key">"id"</span>:     <span class="c-num">1</span>,
        <span class="c-key">"title"</span>: <span class="c-str">"اطلاعات شخصی"</span>,
        <span class="c-key">"order"</span>: <span class="c-num">1</span>,
        <span class="c-key">"fields"</span>: [
          {
            <span class="c-key">"form_field_id"</span>:  <span class="c-num">1</span>,
            <span class="c-key">"field_key"</span>:     <span class="c-str">"first_name"</span>,
            <span class="c-key">"label"</span>:         <span class="c-str">"نام"</span>,
            <span class="c-key">"type"</span>:          <span class="c-str">"text"</span>,
            <span class="c-key">"required"</span>:      <span class="c-ok">true</span>,
            <span class="c-key">"validation"</span>:   <span class="c-str">"persian"</span>,
            <span class="c-key">"description"</span>:  <span class="c-str">"نام کوچک فارسی"</span>,
            <span class="c-key">"pdf_field_name"</span>:<span class="c-str">"name_field"</span>
          },
          {
            <span class="c-key">"form_field_id"</span>:  <span class="c-num">2</span>,
            <span class="c-key">"field_key"</span>:     <span class="c-str">"national_code"</span>,
            <span class="c-key">"label"</span>:         <span class="c-str">"کد ملی"</span>,
            <span class="c-key">"type"</span>:          <span class="c-str">"text"</span>,
            <span class="c-key">"required"</span>:      <span class="c-ok">true</span>,
            <span class="c-key">"validation"</span>:   <span class="c-str">"national_code"</span>
          }
        ]
      }
    ]
  }
}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── POST /forms/{id}/submit ── -->
        <div class="d-section" id="forms-submit">
            <div class="d-section-title"><i class="bi bi-send-fill"></i> POST /api/v1/forms/{id}/submit</div>
            <p class="d-section-desc">داده‌های فرم را ارسال می‌کند. در پاسخ، <code>submission_id</code> و آدرس PDF دریافت می‌کنید.</p>
            <div class="ep-card">
                <div class="ep-head">
                    <span class="mb mb-post">POST</span>
                    <span class="path" dir="ltr"><?= htmlspecialchars($baseUrl) ?>/api/v1/forms/<span class="param">{id}</span>/submit</span>
                </div>
                <div class="ep-body">
                    <div class="d-alert d-alert-warn mb-3">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        <div>هدر <code>Content-Type: application/json</code> الزامی است. داده‌ها را در بدنه JSON ارسال کنید.</div>
                    </div>
                    <div class="ep-sub">پارامترهای مسیر</div>
                    <table class="d-table">
                        <tr><th>پارامتر</th><th>نوع</th><th>وضعیت</th><th>توضیح</th></tr>
                        <tr><td><code>id</code></td><td>integer</td><td><span class="badge-req">الزامی</span></td><td>شناسه عددی فرم</td></tr>
                    </table>
                    <div class="ep-sub">بدنه درخواست (JSON)</div>
                    <table class="d-table" style="margin-bottom:.75rem">
                        <tr><th>کلید</th><th>نوع</th><th>وضعیت</th><th>توضیح</th></tr>
                        <tr><td><code>{field_key}</code></td><td>string</td><td><span class="badge-req">بسته به فرم</span></td><td>مقدار هر فیلد با <code>field_key</code> آن (از GET /forms/{id})</td></tr>
                    </table>
                    <div class="ep-sub">نمونه درخواست</div>
                    <div class="code-wrap">
                        <div class="code-tabs">
                            <button class="code-tab active" onclick="switchTab(this,'fs')">cURL</button>
                            <button class="code-tab" onclick="switchTab(this,'fs')">JavaScript</button>
                            <button class="code-tab" onclick="switchTab(this,'fs')">PHP</button>
                            <div class="code-tabs-spacer"></div>
                            <button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button>
                        </div>
                        <div class="code-panel active">
<span class="c-curl">curl</span> <span class="c-flag">-X POST</span> \
  <span class="c-url">'<?= htmlspecialchars($baseUrl) ?>/api/v1/forms/1/submit'</span> \
  <span class="c-flag">-H</span> <span class="c-str">'Authorization: Bearer YOUR_API_TOKEN'</span> \
  <span class="c-flag">-H</span> <span class="c-str">'Content-Type: application/json'</span> \
  <span class="c-flag">-d</span> <span class="c-str">'{
    "first_name":    "علی",
    "last_name":     "محمدی",
    "national_code": "0012345678",
    "mobile":        "09121234567"
  }'</span></div>
                        <div class="code-panel">
<span class="c-method">const</span> result = <span class="c-method">await</span> fetch(<span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1/forms/1/submit'</span>, {
  method: <span class="c-str">'POST'</span>,
  headers: {
    <span class="c-str">'Authorization'</span>: <span class="c-str">'Bearer YOUR_API_TOKEN'</span>,
    <span class="c-str">'Content-Type'</span>:  <span class="c-str">'application/json'</span>
  },
  body: JSON.stringify({
    first_name:    <span class="c-str">'علی'</span>,
    last_name:     <span class="c-str">'محمدی'</span>,
    national_code: <span class="c-str">'0012345678'</span>,
    mobile:        <span class="c-str">'09121234567'</span>
  })
}).then(r => r.json());
<span class="c-comment">// result.submission_id → برای دریافت PDF</span></div>
                        <div class="code-panel">
<span class="c-php-var">$data</span> = json_encode([
    <span class="c-str">'first_name'</span>    => <span class="c-str">'علی'</span>,
    <span class="c-str">'last_name'</span>     => <span class="c-str">'محمدی'</span>,
    <span class="c-str">'national_code'</span> => <span class="c-str">'0012345678'</span>,
], JSON_UNESCAPED_UNICODE);

<span class="c-php-var">$ch</span> = curl_init(<span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1/forms/1/submit'</span>);
curl_setopt_array(<span class="c-php-var">$ch</span>, [
    CURLOPT_RETURNTRANSFER => <span class="c-val">true</span>,
    CURLOPT_POST           => <span class="c-val">true</span>,
    CURLOPT_POSTFIELDS     => <span class="c-php-var">$data</span>,
    CURLOPT_HTTPHEADER     => [
        <span class="c-str">'Authorization: Bearer YOUR_API_TOKEN'</span>,
        <span class="c-str">'Content-Type: application/json'</span>
    ]
]);
<span class="c-php-var">$result</span> = json_decode(curl_exec(<span class="c-php-var">$ch</span>), <span class="c-val">true</span>);</div>
                    </div>
                    <div class="ep-sub">نمونه پاسخ موفق (201)</div>
                    <div class="code-wrap">
                        <div class="code-tabs"><button class="code-tab active">JSON</button><div class="code-tabs-spacer"></div><button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button></div>
                        <div class="code-panel active">
{
  <span class="c-key">"ok"</span>:            <span class="c-ok">true</span>,
  <span class="c-key">"submission_id"</span>: <span class="c-num">42</span>,
  <span class="c-key">"message"</span>:       <span class="c-str">"فرم با موفقیت ثبت شد."</span>,
  <span class="c-key">"pdf_url"</span>:       <span class="c-str">"/api/v1/submissions/42/pdf"</span>
}</div>
                    </div>
                    <div class="ep-sub">نمونه پاسخ خطای اعتبارسنجی (422)</div>
                    <div class="code-wrap">
                        <div class="code-tabs"><button class="code-tab active">JSON</button></div>
                        <div class="code-panel active">
{
  <span class="c-key">"ok"</span>:    <span class="c-val">false</span>,
  <span class="c-key">"error"</span>: <span class="c-str">"فیلد الزامی «کد ملی» خالی است."</span>
}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── GET /submissions/{id} ── -->
        <div class="d-section" id="submissions-get">
            <div class="d-section-title"><i class="bi bi-clipboard-data-fill"></i> GET /api/v1/submissions/{id}</div>
            <p class="d-section-desc">وضعیت، داده‌ها و لینک PDF یک ارسال را برمی‌گرداند. فقط صاحب ارسال یا مدیر دسترسی دارد.</p>
            <div class="ep-card">
                <div class="ep-head">
                    <span class="mb mb-get">GET</span>
                    <span class="path" dir="ltr"><?= htmlspecialchars($baseUrl) ?>/api/v1/submissions/<span class="param">{id}</span></span>
                </div>
                <div class="ep-body">
                    <div class="ep-sub">پارامترهای مسیر</div>
                    <table class="d-table">
                        <tr><th>پارامتر</th><th>نوع</th><th>وضعیت</th><th>توضیح</th></tr>
                        <tr><td><code>id</code></td><td>integer</td><td><span class="badge-req">الزامی</span></td><td>شناسه عددی ارسال (از POST submit دریافت می‌شود)</td></tr>
                    </table>
                    <div class="ep-sub">نمونه درخواست</div>
                    <div class="code-wrap">
                        <div class="code-tabs">
                            <button class="code-tab active" onclick="switchTab(this,'sg')">cURL</button>
                            <button class="code-tab" onclick="switchTab(this,'sg')">JavaScript</button>
                            <div class="code-tabs-spacer"></div>
                            <button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button>
                        </div>
                        <div class="code-panel active">
<span class="c-curl">curl</span> <span class="c-url">'<?= htmlspecialchars($baseUrl) ?>/api/v1/submissions/42'</span> \
  <span class="c-flag">-H</span> <span class="c-str">'Authorization: Bearer YOUR_API_TOKEN'</span></div>
                        <div class="code-panel">
<span class="c-method">const</span> { data } = <span class="c-method">await</span> fetch(<span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1/submissions/42'</span>, {
  headers: { <span class="c-str">'Authorization'</span>: <span class="c-str">'Bearer YOUR_API_TOKEN'</span> }
}).then(r => r.json());</div>
                    </div>
                    <div class="ep-sub">نمونه پاسخ موفق (200)</div>
                    <div class="code-wrap">
                        <div class="code-tabs"><button class="code-tab active">JSON</button><div class="code-tabs-spacer"></div><button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button></div>
                        <div class="code-panel active">
{
  <span class="c-key">"ok"</span>: <span class="c-ok">true</span>,
  <span class="c-key">"data"</span>: {
    <span class="c-key">"id"</span>:         <span class="c-num">42</span>,
    <span class="c-key">"form_id"</span>:    <span class="c-num">1</span>,
    <span class="c-key">"status"</span>:     <span class="c-str">"paid"</span>,
    <span class="c-key">"created_at"</span>: <span class="c-str">"2026-05-11 10:30:00"</span>,
    <span class="c-key">"fields"</span>: {
      <span class="c-key">"first_name"</span>:    <span class="c-str">"علی"</span>,
      <span class="c-key">"last_name"</span>:     <span class="c-str">"محمدی"</span>,
      <span class="c-key">"national_code"</span>: <span class="c-str">"0012345678"</span>
    },
    <span class="c-key">"pdf_url"</span>: <span class="c-str">"/api/v1/submissions/42/pdf"</span>
  }
}</div>
                    </div>
                    <div class="ep-sub">مقادیر وضعیت (status)</div>
                    <table class="d-table">
                        <tr><th>مقدار</th><th>معنا</th></tr>
                        <tr><td><code>pending_payment</code></td><td>در انتظار پرداخت</td></tr>
                        <tr><td><code>paid</code></td><td>پرداخت شده — PDF قابل دریافت است</td></tr>
                        <tr><td><code>cancelled</code></td><td>لغو شده</td></tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- ── GET /submissions/{id}/pdf ── -->
        <div class="d-section" id="submissions-pdf">
            <div class="d-section-title"><i class="bi bi-file-earmark-pdf-fill"></i> GET /api/v1/submissions/{id}/pdf</div>
            <p class="d-section-desc">فایل PDF ارسال را به صورت باینری دانلود می‌کند. پاسخ <strong>JSON نیست</strong> — مستقیم داده باینری PDF برمی‌گردد.</p>
            <div class="ep-card">
                <div class="ep-head">
                    <span class="mb mb-get">GET</span>
                    <span class="path" dir="ltr"><?= htmlspecialchars($baseUrl) ?>/api/v1/submissions/<span class="param">{id}</span>/pdf</span>
                </div>
                <div class="ep-body">
                    <div class="d-alert d-alert-info mb-3">
                        <i class="bi bi-info-circle-fill"></i>
                        <div>پاسخ با هدر <code>Content-Type: application/pdf</code> و <code>Content-Disposition: attachment</code> ارسال می‌شود.</div>
                    </div>
                    <div class="ep-sub">نمونه درخواست</div>
                    <div class="code-wrap">
                        <div class="code-tabs">
                            <button class="code-tab active" onclick="switchTab(this,'sp')">cURL</button>
                            <button class="code-tab" onclick="switchTab(this,'sp')">JavaScript</button>
                            <button class="code-tab" onclick="switchTab(this,'sp')">PHP</button>
                            <div class="code-tabs-spacer"></div>
                            <button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button>
                        </div>
                        <div class="code-panel active">
<span class="c-comment"># ذخیره مستقیم روی دیسک</span>
<span class="c-curl">curl</span> <span class="c-flag">-OJ</span> \
  <span class="c-flag">-H</span> <span class="c-str">'Authorization: Bearer YOUR_API_TOKEN'</span> \
  <span class="c-url">'<?= htmlspecialchars($baseUrl) ?>/api/v1/submissions/42/pdf'</span></div>
                        <div class="code-panel">
<span class="c-method">const</span> blob = <span class="c-method">await</span> fetch(<span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1/submissions/42/pdf'</span>, {
  headers: { <span class="c-str">'Authorization'</span>: <span class="c-str">'Bearer YOUR_API_TOKEN'</span> }
}).then(r => r.blob());

<span class="c-comment">// دانلود در مرورگر</span>
<span class="c-method">const</span> url  = URL.createObjectURL(blob);
<span class="c-method">const</span> link = document.createElement(<span class="c-str">'a'</span>);
link.href     = url;
link.download = <span class="c-str">'form_42.pdf'</span>;
link.click();
URL.revokeObjectURL(url);</div>
                        <div class="code-panel">
<span class="c-php-var">$ch</span> = curl_init(<span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1/submissions/42/pdf'</span>);
curl_setopt_array(<span class="c-php-var">$ch</span>, [
    CURLOPT_RETURNTRANSFER => <span class="c-val">true</span>,
    CURLOPT_HTTPHEADER     => [<span class="c-str">'Authorization: Bearer YOUR_API_TOKEN'</span>]
]);
<span class="c-php-var">$pdfData</span> = curl_exec(<span class="c-php-var">$ch</span>);

<span class="c-comment">// ارسال به مرورگر</span>
header(<span class="c-str">'Content-Type: application/pdf'</span>);
header(<span class="c-str">'Content-Disposition: attachment; filename="form_42.pdf"'</span>);
echo <span class="c-php-var">$pdfData</span>;</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── Errors ── -->
        <div class="d-section" id="errors">
            <div class="d-section-title"><i class="bi bi-exclamation-octagon-fill"></i> کدهای خطا</div>
            <p class="d-section-desc">همه پاسخ‌های خطا دارای ساختار <code>{"ok": false, "error": "..."}</code> هستند.</p>
            <div class="status-grid">
                <div class="status-card"><span class="status-code s200">200</span><div class="status-label">OK — موفق</div></div>
                <div class="status-card"><span class="status-code s201">201</span><div class="status-label">Created — ایجاد شد</div></div>
                <div class="status-card"><span class="status-code s400">400</span><div class="status-label">Bad Request — خطای ورودی</div></div>
                <div class="status-card"><span class="status-code s401">401</span><div class="status-label">Unauthorized — توکن نامعتبر</div></div>
                <div class="status-card"><span class="status-code s403">403</span><div class="status-label">Forbidden — دسترسی مجاز نیست</div></div>
                <div class="status-card"><span class="status-code s404">404</span><div class="status-label">Not Found — یافت نشد</div></div>
                <div class="status-card"><span class="status-code s422">422</span><div class="status-label">Unprocessable — اعتبارسنجی ناموفق</div></div>
                <div class="status-card"><span class="status-code s500">500</span><div class="status-label">Server Error — خطای سرور</div></div>
            </div>
            <div class="code-wrap mt-3">
                <div class="code-tabs"><button class="code-tab active">نمونه پاسخ خطا</button></div>
                <div class="code-panel active">
{
  <span class="c-key">"ok"</span>:    <span class="c-val">false</span>,
  <span class="c-key">"error"</span>: <span class="c-str">"توکن API نامعتبر است یا منقضی شده."</span>
}</div>
            </div>
        </div>

        <!-- ── Rate limit ── -->
        <div class="d-section" id="rate-limit">
            <div class="d-section-title"><i class="bi bi-speedometer2"></i> محدودیت نرخ (Rate Limiting)</div>
            <p class="d-section-desc">در حال حاضر API محدودیت نرخ سختی ندارد، اما برای عملکرد بهتر موارد زیر را رعایت کنید.</p>
            <div class="d-alert d-alert-info">
                <i class="bi bi-info-circle-fill"></i>
                <div>
                    <strong style="color:#e6edf3;">بهترین شیوه‌ها:</strong><br>
                    — نتیجه GET /forms را کش کنید (تغییرات به‌ندرت رخ می‌دهد)<br>
                    — برای تولید PDF‌های زیاد، درخواست‌ها را Sequential (نه همزمان) ارسال کنید<br>
                    — توکن API را هرگز در فرانت‌اند معرض عموم قرار ندهید
                </div>
            </div>
        </div>

        <!-- ── Full Example ── -->
        <div class="d-section" id="example">
            <div class="d-section-title"><i class="bi bi-braces"></i> مثال کامل — از فرم تا PDF</div>
            <p class="d-section-desc">این مثال کل flow را نشان می‌دهد: دریافت فرم، ارسال، و دانلود PDF.</p>
            <div class="code-wrap">
                <div class="code-tabs">
                    <button class="code-tab active" onclick="switchTab(this,'ex')">JavaScript</button>
                    <button class="code-tab" onclick="switchTab(this,'ex')">PHP</button>
                    <div class="code-tabs-spacer"></div>
                    <button class="code-copy" onclick="copyCode(this)"><i class="bi bi-clipboard"></i> کپی</button>
                </div>
                <div class="code-panel active">
<span class="c-method">const</span> TOKEN = <span class="c-str">'YOUR_API_TOKEN'</span>;
<span class="c-method">const</span> BASE  = <span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1'</span>;
<span class="c-method">const</span> hdrs  = { <span class="c-str">'Authorization'</span>: <span class="c-str">`Bearer ${TOKEN}`</span> };

<span class="c-comment">// ── ۱. لیست فرم‌ها ──</span>
<span class="c-method">const</span> { data: forms } = <span class="c-method">await</span> fetch(`${BASE}/forms`, { headers: hdrs }).then(r => r.json());
<span class="c-method">const</span> formId = forms[<span class="c-num">0</span>].id; <span class="c-comment">// اولین فرم</span>

<span class="c-comment">// ── ۲. ساختار فرم (اختیاری — برای رندر فیلدها) ──</span>
<span class="c-method">const</span> { data: form } = <span class="c-method">await</span> fetch(`${BASE}/forms/${formId}`, { headers: hdrs }).then(r => r.json());
console.log(<span class="c-str">'فیلدها:'</span>, form.pages[<span class="c-num">0</span>].fields.map(f => f.field_key));

<span class="c-comment">// ── ۳. ارسال فرم ──</span>
<span class="c-method">const</span> submit = <span class="c-method">await</span> fetch(`${BASE}/forms/${formId}/submit`, {
  method: <span class="c-str">'POST'</span>,
  headers: { ...hdrs, <span class="c-str">'Content-Type'</span>: <span class="c-str">'application/json'</span> },
  body: JSON.stringify({
    first_name:    <span class="c-str">'علی'</span>,
    last_name:     <span class="c-str">'محمدی'</span>,
    national_code: <span class="c-str">'0012345678'</span>,
    mobile:        <span class="c-str">'09121234567'</span>
  })
}).then(r => r.json());

<span class="c-method">if</span> (!submit.ok) <span class="c-method">throw new</span> Error(submit.error);
<span class="c-method">const</span> { submission_id, pdf_url } = submit;

<span class="c-comment">// ── ۴. دانلود PDF ──</span>
<span class="c-method">const</span> pdfBlob = <span class="c-method">await</span> fetch(`${BASE}${pdf_url}`, { headers: hdrs }).then(r => {
  <span class="c-method">if</span> (!r.ok) <span class="c-method">throw new</span> Error(<span class="c-str">'خطا در دانلود PDF'</span>);
  <span class="c-method">return</span> r.blob();
});

<span class="c-comment">// ذخیره در مرورگر</span>
<span class="c-method">const</span> link = document.createElement(<span class="c-str">'a'</span>);
link.href     = URL.createObjectURL(pdfBlob);
link.download = `submission_${submission_id}.pdf`;
link.click();</div>
                <div class="code-panel">
<span class="c-comment">&lt;?php</span>
<span class="c-php-var">$TOKEN</span> = <span class="c-str">'YOUR_API_TOKEN'</span>;
<span class="c-php-var">$BASE</span>  = <span class="c-str">'<?= htmlspecialchars($baseUrl) ?>/api/v1'</span>;

<span class="c-method">function</span> apiGet(<span class="c-php-var">$url</span>, <span class="c-php-var">$token</span>): array {
    <span class="c-php-var">$ctx</span> = stream_context_create([<span class="c-str">'http'</span> => [<span class="c-str">'header'</span> => <span class="c-str">"Authorization: Bearer $token\r\n"</span>]]);
    <span class="c-method">return</span> json_decode(file_get_contents(<span class="c-php-var">$url</span>, false, <span class="c-php-var">$ctx</span>), true);
}

<span class="c-comment">// ── ۱. لیست فرم‌ها ──</span>
<span class="c-php-var">$forms</span>  = apiGet(<span class="c-str">"$BASE/forms"</span>, <span class="c-php-var">$TOKEN</span>)[<span class="c-str">'data'</span>];
<span class="c-php-var">$formId</span> = <span class="c-php-var">$forms</span>[<span class="c-num">0</span>][<span class="c-str">'id'</span>];

<span class="c-comment">// ── ۲. ارسال فرم ──</span>
<span class="c-php-var">$ch</span> = curl_init(<span class="c-str">"$BASE/forms/$formId/submit"</span>);
curl_setopt_array(<span class="c-php-var">$ch</span>, [
    CURLOPT_RETURNTRANSFER => <span class="c-val">true</span>,
    CURLOPT_POST           => <span class="c-val">true</span>,
    CURLOPT_POSTFIELDS     => json_encode([
        <span class="c-str">'first_name'</span>    => <span class="c-str">'علی'</span>,
        <span class="c-str">'last_name'</span>     => <span class="c-str">'محمدی'</span>,
        <span class="c-str">'national_code'</span> => <span class="c-str">'0012345678'</span>,
    ], JSON_UNESCAPED_UNICODE),
    CURLOPT_HTTPHEADER => [
        <span class="c-str">"Authorization: Bearer $TOKEN"</span>,
        <span class="c-str">'Content-Type: application/json'</span>
    ]
]);
<span class="c-php-var">$result</span> = json_decode(curl_exec(<span class="c-php-var">$ch</span>), <span class="c-val">true</span>);
<span class="c-php-var">$subId</span>  = <span class="c-php-var">$result</span>[<span class="c-str">'submission_id'</span>];

<span class="c-comment">// ── ۳. دانلود PDF ──</span>
<span class="c-php-var">$ch2</span> = curl_init(<span class="c-str">"$BASE/submissions/$subId/pdf"</span>);
curl_setopt_array(<span class="c-php-var">$ch2</span>, [
    CURLOPT_RETURNTRANSFER => <span class="c-val">true</span>,
    CURLOPT_HTTPHEADER     => [<span class="c-str">"Authorization: Bearer $TOKEN"</span>]
]);
<span class="c-php-var">$pdf</span> = curl_exec(<span class="c-php-var">$ch2</span>);
file_put_contents(<span class="c-str">"submission_$subId.pdf"</span>, <span class="c-php-var">$pdf</span>);
echo <span class="c-str">"✓ ذخیره شد: submission_$subId.pdf"</span>;</div>
            </div>
        </div>

    </main>
</div>

<script src="/public/assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script>
// ── Tab switcher ──
function switchTab(btn, group) {
    var wrap = btn.closest('.code-wrap');
    var tabs   = wrap.querySelectorAll('.code-tab');
    var panels = wrap.querySelectorAll('.code-panel');
    var idx = Array.from(tabs).indexOf(btn);
    tabs.forEach(function(t, i)   { t.classList.toggle('active', i === idx); });
    panels.forEach(function(p, i) { p.classList.toggle('active', i === idx); });
}

// ── Copy ──
function copyCode(btn) {
    var wrap   = btn.closest('.code-wrap');
    var active = wrap.querySelector('.code-panel.active');
    if (!active) return;
    navigator.clipboard.writeText(active.innerText.trim()).then(function() {
        btn.classList.add('copied');
        btn.innerHTML = '<i class="bi bi-check-lg"></i> کپی شد';
        setTimeout(function() {
            btn.classList.remove('copied');
            btn.innerHTML = '<i class="bi bi-clipboard"></i> کپی';
        }, 2000);
    });
}

// ── Active sidebar on scroll ──
(function() {
    var sections = document.querySelectorAll('.d-section[id], .d-hero[id]');
    var links    = document.querySelectorAll('.d-sidebar a[data-sec]');
    function onScroll() {
        var top = window.scrollY + 90;
        var cur = '';
        sections.forEach(function(s) { if (s.offsetTop <= top) cur = s.id; });
        links.forEach(function(a) { a.classList.toggle('active', a.dataset.sec === cur); });
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
})();
</script>
</body>
</html>
