<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Documentation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f4f6f9; min-height:100vh; display:flex; flex-direction:column; }

        /* HEADER */
        header { background:#000; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 1.75rem; position:fixed; top:0;left:0;right:0; z-index:200; border-bottom:1px solid #1a1a1a; }
        .brand { display:flex; align-items:center; gap:.65rem; }
        .brand-logo { height:36px; width:auto; max-width:140px; object-fit:contain; }
        .header-right { display:flex; align-items:center; gap:1rem; }
        .user-pill { display:flex; align-items:center; gap:.6rem; background:#111; border:1px solid #2a2a2a; border-radius:30px; padding:.3rem .75rem .3rem .4rem; }
        .user-avatar { width:28px; height:28px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.75rem; color:#000; }
        .user-pill .uname { font-size:.82rem; color:#ccc; font-weight:500; }
        .btn-logout { background:transparent; border:1px solid #2a2a2a; color:#888; padding:.35rem .9rem; border-radius:7px; cursor:pointer; font-size:.8rem; font-weight:600; transition:.18s; }
        .btn-logout:hover { border-color:#555; color:#fff; }

        /* LAYOUT */
        .layout { display:flex; flex:1; margin-top:58px; }

        /* SIDEBAR */
        aside { width:240px; background:#000; position:fixed; top:58px; left:0; bottom:0; overflow-y:auto; padding:1.25rem 0 2rem; border-right:1px solid #1a1a1a; scrollbar-width:thin; scrollbar-color:#222 #000; }
        .company-badge { margin:.25rem .9rem .75rem; background:linear-gradient(135deg,#1a7a4a,#25d366); border-radius:14px; padding:.65rem 1rem; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
        .company-badge::before { content:''; position:absolute; right:-30px; top:-30px; width:110px; height:110px; background:rgba(255,255,255,.1); border-radius:50%; }
        .cb-inner { position:relative; z-index:1; }
        .cb-wa-status { display:inline-flex; align-items:center; gap:.35rem; font-size:.68rem; font-weight:800; padding:.32rem .75rem; border-radius:20px; background:rgba(0,0,0,.18); }
        .wa-dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
        .wa-dot.connected { background:#25d366; animation:pulse 1.8s infinite; }
        .wa-dot.disconnected { background:#ef4444; }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
        .nav-section-label { padding:1.1rem 1.3rem .4rem; font-size:.6rem; font-weight:800; letter-spacing:1.8px; color:#555; text-transform:uppercase; }
        .nav-item { display:flex; align-items:center; gap:.75rem; padding:.72rem 1.3rem; color:#f0f0f0; text-decoration:none; font-size:.87rem; font-weight:600; border-left:3px solid transparent; transition:.15s; white-space:nowrap; }
        .nav-item i { width:16px; text-align:center; font-size:.85rem; flex-shrink:0; color:#ccc; }
        .nav-item:hover { background:#25d366; color:#000; border-left-color:#1db954; }
        .nav-item:hover i { color:#000; }
        .nav-item.active { background:#25d366; color:#000; border-left-color:#1db954; font-weight:700; }
        .nav-item.active i { color:#000; }
        .nav-item.soon { opacity:.45; cursor:not-allowed; }
        .nav-item.soon:hover { background:transparent; color:#f0f0f0; border-left-color:transparent; }
        .nav-item.soon:hover i { color:#ccc; }
        .nav-sep { height:1px; background:#2e2e2e; margin:.6rem 0; }
        .nav-badge { font-size:.6rem; background:#1c1c1c; color:#555; border-radius:20px; padding:.12rem .5rem; font-weight:700; margin-left:auto; border:1px solid #2e2e2e; }

        /* MAIN */
        main { margin-left:240px; flex:1; padding:2rem; animation:fadeIn .2s ease both; }
        @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

        /* BACK */
        .back-link { display:inline-flex; align-items:center; gap:.5rem; font-size:.83rem; font-weight:600; color:#6b7280; text-decoration:none; margin-bottom:1.5rem; transition:.15s; }
        .back-link:hover { color:#25d366; }

        /* PAGE HEADER */
        .page-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.75rem; }
        .page-header-icon { width:52px; height:52px; background:linear-gradient(135deg,#1e1b4b,#4f46e5); border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .page-header-icon i { font-size:1.4rem; color:#fff; }
        .page-header h1 { font-size:1.35rem; font-weight:800; color:#111; }
        .page-header p  { font-size:.83rem; color:#9ca3af; margin-top:.2rem; }

        /* TOKEN CARD */
        .token-card { background:linear-gradient(135deg,#064e3b,#065f46,#047857); border-radius:16px; padding:1.5rem 1.75rem; margin-bottom:1.75rem; position:relative; overflow:hidden; }
        .token-card::before { content:''; position:absolute; right:-50px; top:-50px; width:220px; height:220px; background:rgba(37,211,102,.12); border-radius:50%; }
        .token-card::after  { content:''; position:absolute; left:-30px; bottom:-40px; width:160px; height:160px; background:rgba(37,211,102,.08); border-radius:50%; }
        .token-card-inner { position:relative; z-index:1; }
        .token-label { font-size:.68rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#6ee7b7; margin-bottom:.6rem; display:flex; align-items:center; gap:.4rem; }
        .token-value-row { display:flex; align-items:center; gap:.75rem; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:.75rem 1.1rem; margin-bottom:.85rem; }
        .token-value { font-family:monospace; font-size:1.1rem; font-weight:800; color:#fff; letter-spacing:2px; flex:1; }
        .token-masked { font-family:monospace; font-size:1.1rem; font-weight:800; color:#6ee7b7; letter-spacing:2px; flex:1; }
        .btn-show-token { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:8px; padding:.35rem .8rem; font-size:.75rem; font-weight:700; cursor:pointer; transition:.15s; white-space:nowrap; }
        .btn-show-token:hover { background:rgba(255,255,255,.25); }
        .btn-copy-token { background:#25d366; border:none; color:#000; border-radius:8px; padding:.35rem .8rem; font-size:.75rem; font-weight:800; cursor:pointer; transition:.15s; white-space:nowrap; display:flex; align-items:center; gap:.35rem; }
        .btn-copy-token:hover { background:#1db954; }
        .token-meta { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
        .token-meta-item { font-size:.75rem; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:.35rem; }
        .token-meta-item i { color:#6ee7b7; font-size:.7rem; }
        .token-meta-item strong { color:rgba(255,255,255,.8); }

        /* BASE URL */
        .base-url-card { background:#fff; border-radius:14px; border-left:4px solid #25d366; border-top:1.5px solid #e5e7eb; border-right:1.5px solid #e5e7eb; border-bottom:1.5px solid #e5e7eb; padding:1rem 1.4rem; margin-bottom:1.75rem; display:flex; align-items:center; gap:1rem; box-shadow:0 1px 3px rgba(0,0,0,.05); }
        .base-url-card i { color:#25d366; font-size:1rem; }
        .base-url-label { font-size:.68rem; font-weight:800; color:#9ca3af; text-transform:uppercase; letter-spacing:.8px; }
        .base-url-value { font-family:monospace; font-size:.92rem; font-weight:700; color:#111; }
        .base-url-right { margin-left:auto; }

        /* SECTION */
        .doc-section { margin-bottom:2rem; }
        .doc-section-title { font-size:.72rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:.6rem; padding:.6rem .9rem; border-radius:9px; }
        .doc-section-title i { font-size:.8rem; }
        .section-auth     { background:#eef2ff; color:#4f46e5; border-left:3px solid #4f46e5; }
        .section-msg      { background:#f0fdf4; color:#16a34a; border-left:3px solid #25d366; }
        .section-contacts { background:#eff6ff; color:#2563eb; border-left:3px solid #3b82f6; }
        .section-campaigns{ background:#fff7ed; color:#c2410c; border-left:3px solid #f97316; }
        .section-webhooks { background:#f0fdf4; color:#16a34a; border-left:3px solid #25d366; }

        /* ENDPOINT CARD */
        .endpoint { background:#fff; border-radius:14px; border:1.5px solid #f1f5f9; margin-bottom:.75rem; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05); transition:.15s; }
        .endpoint:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); }
        .endpoint-header { display:flex; align-items:center; gap:.85rem; padding:.85rem 1.25rem; cursor:pointer; transition:.15s; user-select:none; }
        .endpoint.get-ep    { border-left:4px solid #25d366; }
        .endpoint.post-ep   { border-left:4px solid #3b82f6; }
        .endpoint.put-ep    { border-left:4px solid #f59e0b; }
        .endpoint.delete-ep { border-left:4px solid #ef4444; }
        .endpoint-header:hover { background:#fafbff; }
        .method { font-size:.7rem; font-weight:800; padding:.28rem .75rem; border-radius:6px; letter-spacing:.5px; flex-shrink:0; min-width:58px; text-align:center; }
        .method.get    { background:#dcfce7; color:#15803d; }
        .method.post   { background:#dbeafe; color:#1d4ed8; }
        .method.put    { background:#fef3c7; color:#92400e; }
        .method.delete { background:#fee2e2; color:#b91c1c; }
        .endpoint-path { font-family:monospace; font-size:.88rem; font-weight:700; color:#111; flex:1; }
        .endpoint-desc { font-size:.75rem; color:#9ca3af; white-space:nowrap; }
        .chevron { color:#c4c4c4; font-size:.75rem; transition:.2s; flex-shrink:0; }
        .endpoint.open .chevron { transform:rotate(180deg); }
        .endpoint-body { border-top:1px solid #f1f5f9; padding:1.25rem; display:none; background:#fafbff; }
        .endpoint.open .endpoint-body { display:block; }

        /* CODE BLOCK */
        .code-tabs { display:flex; gap:.4rem; margin-bottom:.65rem; }
        .code-tab { font-size:.72rem; font-weight:700; padding:.25rem .7rem; border-radius:6px; cursor:pointer; border:1.5px solid #e5e7eb; color:#6b7280; background:#fff; transition:.15s; }
        .code-tab.active { background:#111; color:#fff; border-color:#111; }
        .code-block { background:#0f172a; border-radius:10px; padding:1rem 1.2rem; position:relative; }
        .code-block pre { font-family:monospace; font-size:.82rem; color:#e2e8f0; white-space:pre-wrap; word-break:break-all; line-height:1.7; }
        .code-block .key    { color:#93c5fd; }
        .code-block .str    { color:#86efac; }
        .code-block .num    { color:#fda4af; }
        .code-block .method-color { color:#c084fc; }
        .code-block .url-color    { color:#67e8f9; }
        .btn-copy-code { position:absolute; top:.65rem; right:.75rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#94a3b8; border-radius:7px; padding:.28rem .65rem; font-size:.7rem; font-weight:700; cursor:pointer; transition:.15s; }
        .btn-copy-code:hover { background:rgba(255,255,255,.15); color:#fff; }

        /* PARAMS TABLE */
        .params-table { width:100%; border-collapse:collapse; font-size:.82rem; margin-bottom:1rem; }
        .params-table th { text-align:left; padding:.5rem .75rem; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:#6b7280; background:#f8fafc; border-bottom:1px solid #e5e7eb; }
        .params-table td { padding:.6rem .75rem; border-bottom:1px solid #f1f5f9; color:#374151; vertical-align:top; }
        .params-table tr:last-child td { border-bottom:none; }
        .param-name { font-family:monospace; font-weight:700; color:#111; }
        .param-required { font-size:.65rem; font-weight:800; background:#fee2e2; color:#b91c1c; border-radius:4px; padding:.1rem .4rem; }
        .param-optional { font-size:.65rem; font-weight:800; background:#f1f5f9; color:#6b7280; border-radius:4px; padding:.1rem .4rem; }
        .param-type { font-family:monospace; font-size:.75rem; color:#4f46e5; }

        /* AUTH NOTE */
        .auth-note { background:#eff6ff; border:1.5px solid #bfdbfe; border-radius:10px; padding:.85rem 1.1rem; display:flex; gap:.75rem; margin-bottom:1rem; }
        .auth-note i { color:#2563eb; font-size:.9rem; flex-shrink:0; margin-top:1px; }
        .auth-note p { font-size:.8rem; color:#1d4ed8; line-height:1.55; }
        .auth-note code { background:#dbeafe; padding:.1rem .35rem; border-radius:4px; font-family:monospace; font-size:.78rem; }

        /* TOAST */
        .toast { position:fixed; bottom:1.5rem; right:1.5rem; background:#0f0f0f; color:#fff; padding:.75rem 1.2rem; border-radius:12px; font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:.6rem; z-index:900; box-shadow:0 8px 24px rgba(0,0,0,.3); animation:toastIn .25s ease; }
        .toast i { color:#25d366; }
        @keyframes toastIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    </style>
</head>
<body>

@php
    $appLogo    = \App\Models\Setting::get('app_logo', '');
    $appName    = \App\Models\Setting::get('project_name', 'On Cloud API');
    $hasLogo    = $appLogo && file_exists(public_path('uploads/' . $appLogo));
    $initials   = strtoupper(substr($user->name ?? 'U', 0, 1));
    $waConnected = !empty($user->access_token) && !empty($user->phone_number_id) && !empty($user->waba_id);
    $apiToken   = $user->api_token ?? 'NO_TOKEN';
@endphp

<!-- HEADER -->
<header>
    <div class="brand">
        @if($hasLogo)
            <img src="{{ asset('uploads/' . $appLogo) }}" class="brand-logo" alt="{{ $appName }}">
        @else
            <svg viewBox="0 0 48 48" fill="none" width="32" height="32">
                <circle cx="24" cy="24" r="24" fill="#25D366"/>
                <path d="M24 10C16.268 10 10 16.268 10 24c0 2.637.718 5.107 1.97 7.23L10 38l7-1.93A13.93 13.93 0 0024 38c7.732 0 14-6.268 14-14S31.732 10 24 10z" fill="white"/>
            </svg>
        @endif
    </div>
    <div class="header-right">
        <div class="user-pill">
            <div class="user-avatar">{{ $initials }}</div>
            <span class="uname">{{ $user->name }}</span>
        </div>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="btn-logout"><i class="fas fa-sign-out-alt"></i> Logout</button>
        </form>
    </div>
</header>

<div class="layout">
    @include('user.partials.sidebar')

    <!-- MAIN -->
    <main>
        <a href="{{ route('user.dashboard') }}" class="back-link">
            <i class="fas fa-arrow-left"></i> Back to Dashboard
        </a>

        <div class="page-header">
            <div class="page-header-icon"><i class="fas fa-code"></i></div>
            <div>
                <h1>API Documentation</h1>
                <p>Use your API token to integrate WhatsApp messaging into your applications</p>
            </div>
        </div>

        <!-- TOKEN CARD -->
        <div class="token-card">
            <div class="token-card-inner">
                <div class="token-label"><i class="fas fa-key"></i> Your API Token</div>
                <div class="token-value-row">
                    <span class="token-masked" id="tokenDisplay">{{ str_repeat('●', strlen($apiToken)) }}</span>
                    <span class="token-value" id="tokenReal" style="display:none;">{{ $apiToken }}</span>
                    <button class="btn-show-token" onclick="toggleToken()">
                        <i class="fas fa-eye" id="eyeIcon"></i> Show
                    </button>
                    <button class="btn-copy-token" onclick="copyToken()">
                        <i class="fas fa-copy"></i> Copy
                    </button>
                </div>
                <div class="token-meta">
                    <div class="token-meta-item"><i class="fas fa-user"></i> <strong>Owner:</strong> {{ $user->name }}</div>
                    <div class="token-meta-item"><i class="fas fa-envelope"></i> <strong>Email:</strong> {{ $user->email }}</div>
                    <div class="token-meta-item"><i class="fas fa-shield-alt"></i> <strong>Type:</strong> Bearer Token</div>
                    <div class="token-meta-item"><i class="fas fa-infinity"></i> <strong>Expires:</strong> Never</div>
                </div>
            </div>
        </div>

        <!-- BASE URL -->
        <div class="base-url-card">
            <i class="fas fa-globe"></i>
            <div>
                <div class="base-url-label">Base URL</div>
                <div class="base-url-value" id="baseUrl">{{ $baseUrl }}</div>
            </div>
            <div class="base-url-right">
                <button class="btn-copy-token" onclick="copyEl('baseUrl')" style="background:#4f46e5;">
                    <i class="fas fa-copy"></i> Copy
                </button>
            </div>
        </div>

        <!-- AUTH -->
        <div class="doc-section">
            <div class="doc-section-title section-auth"><i class="fas fa-lock"></i> Authentication</div>
            <div class="auth-note">
                <i class="fas fa-info-circle"></i>
                <p>All API requests are authenticated via a <strong>query parameter</strong>. Append <code>?token=YOUR_TOKEN</code> to every request URL.<br>
                No headers required — the token identifies your account on every call.</p>
            </div>
            <div class="code-block">
                <button class="btn-copy-code" onclick="copyCode(this)">Copy</button>
                <pre><span class="method-color">curl</span> <span class="url-color">{{ $baseUrl }}/contacts?token={{ $apiToken }}</span> \
  -H <span class="str">"Accept: application/json"</span></pre>
            </div>
        </div>

        <!-- MESSAGING ENDPOINTS -->
        <div class="doc-section">
            <div class="doc-section-title section-msg"><i class="fas fa-paper-plane"></i> Messaging</div>

            <!-- Send Text Message -->
            <div class="endpoint post-ep" id="ep1">
                <div class="endpoint-header" onclick="toggleEndpoint('ep1')">
                    <span class="method post">POST</span>
                    <span class="endpoint-path">/messages/send-text</span>
                    <span class="endpoint-desc">Send a text message</span>
                    <i class="fas fa-chevron-down chevron"></i>
                </div>
                <div class="endpoint-body">
                    <div class="auth-note" style="background:#f0fdf4;border-color:#86efac;">
                        <i class="fas fa-check-circle" style="color:#16a34a;"></i>
                        <p style="color:#15803d;">Requires <code>?token=</code> query param. WhatsApp must be configured (access_token + phone_number_id in setup).</p>
                    </div>
                    <p style="font-size:.83rem;color:#374151;margin-bottom:.9rem;">Send a WhatsApp text message to any phone number.</p>
                    <table class="params-table">
                        <thead><tr><th>Parameter</th><th>Type</th><th>Required</th><th>Description</th></tr></thead>
                        <tbody>
                            <tr><td><span class="param-name">to</span></td><td><span class="param-type">string</span></td><td><span class="param-required">Required</span></td><td>Recipient phone number with country code (e.g. 923001234567)</td></tr>
                            <tr><td><span class="param-name">message</span></td><td><span class="param-type">string</span></td><td><span class="param-required">Required</span></td><td>Text message content</td></tr>
                        </tbody>
                    </table>
                    <div class="code-block">
                        <button class="btn-copy-code" onclick="copyCode(this)">Copy</button>
                        <pre><span class="method-color">curl</span> -X POST <span class="url-color">{{ $baseUrl }}/messages/send-text?token={{ $apiToken }}</span> \
  -H <span class="str">"Content-Type: application/json"</span> \
  -d <span class="str">'{
    "to": "923001234567",
    "message": "Hello from the API!"
  }'</span></pre>
                    </div>
                </div>
            </div>

            <!-- Send Template -->
            <div class="endpoint post-ep" id="ep2">
                <div class="endpoint-header" onclick="toggleEndpoint('ep2')">
                    <span class="method post">POST</span>
                    <span class="endpoint-path">/messages/send-template</span>
                    <span class="endpoint-desc">Send a template message</span>
                    <i class="fas fa-chevron-down chevron"></i>
                </div>
                <div class="endpoint-body">
                    <p style="font-size:.83rem;color:#374151;margin-bottom:.9rem;">Send a pre-approved WhatsApp template message.</p>
                    <table class="params-table">
                        <thead><tr><th>Parameter</th><th>Type</th><th>Required</th><th>Description</th></tr></thead>
                        <tbody>
                            <tr><td><span class="param-name">to</span></td><td><span class="param-type">string</span></td><td><span class="param-required">Required</span></td><td>Recipient phone number with country code</td></tr>
                            <tr><td><span class="param-name">template</span></td><td><span class="param-type">string</span></td><td><span class="param-required">Required</span></td><td>Approved template name</td></tr>
                            <tr><td><span class="param-name">language</span></td><td><span class="param-type">string</span></td><td><span class="param-optional">Optional</span></td><td>Language code. Default: <code>en_US</code></td></tr>
                        </tbody>
                    </table>
                    <div class="code-block">
                        <button class="btn-copy-code" onclick="copyCode(this)">Copy</button>
                        <pre><span class="method-color">curl</span> -X POST <span class="url-color">{{ $baseUrl }}/messages/send-template?token={{ $apiToken }}</span> \
  -H <span class="str">"Content-Type: application/json"</span> \
  -d <span class="str">'{
    "to": "923001234567",
    "template": "hello_world",
    "language": "en_US"
  }'</span></pre>
                    </div>
                </div>
            </div>
        </div>

        <!-- CONTACTS ENDPOINTS -->
        <div class="doc-section">
            <div class="doc-section-title section-contacts"><i class="fas fa-address-book"></i> Contacts</div>

            <div class="endpoint get-ep" id="ep3">
                <div class="endpoint-header" onclick="toggleEndpoint('ep3')">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/contacts</span>
                    <span class="endpoint-desc">List all contacts</span>
                    <i class="fas fa-chevron-down chevron"></i>
                </div>
                <div class="endpoint-body">
                    <p style="font-size:.83rem;color:#374151;margin-bottom:.9rem;">Returns all contacts for your account.</p>
                    <div class="code-block">
                        <button class="btn-copy-code" onclick="copyCode(this)">Copy</button>
                        <pre><span class="method-color">curl</span> <span class="url-color">{{ $baseUrl }}/contacts?token={{ $apiToken }}</span></pre>
                    </div>
                </div>
            </div>

            <div class="endpoint post-ep" id="ep4">
                <div class="endpoint-header" onclick="toggleEndpoint('ep4')">
                    <span class="method post">POST</span>
                    <span class="endpoint-path">/contacts</span>
                    <span class="endpoint-desc">Create a contact</span>
                    <i class="fas fa-chevron-down chevron"></i>
                </div>
                <div class="endpoint-body">
                    <table class="params-table">
                        <thead><tr><th>Parameter</th><th>Type</th><th>Required</th><th>Description</th></tr></thead>
                        <tbody>
                            <tr><td><span class="param-name">name</span></td><td><span class="param-type">string</span></td><td><span class="param-required">Required</span></td><td>Contact full name</td></tr>
                            <tr><td><span class="param-name">phone</span></td><td><span class="param-type">string</span></td><td><span class="param-required">Required</span></td><td>Phone number with country code</td></tr>
                        </tbody>
                    </table>
                    <div class="code-block">
                        <button class="btn-copy-code" onclick="copyCode(this)">Copy</button>
                        <pre><span class="method-color">curl</span> -X POST <span class="url-color">{{ $baseUrl }}/contacts?token={{ $apiToken }}</span> \
  -H <span class="str">"Content-Type: application/json"</span> \
  -d <span class="str">'{
    "name": "John Doe",
    "phone": "923001234567"
  }'</span></pre>
                    </div>
                </div>
            </div>
        </div>

        <!-- CAMPAIGNS ENDPOINTS -->
        <div class="doc-section">
            <div class="doc-section-title section-campaigns"><i class="fas fa-bullhorn"></i> Campaigns</div>

            <div class="endpoint get-ep" id="ep5">
                <div class="endpoint-header" onclick="toggleEndpoint('ep5')">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/campaigns</span>
                    <span class="endpoint-desc">List all campaigns</span>
                    <i class="fas fa-chevron-down chevron"></i>
                </div>
                <div class="endpoint-body">
                    <div class="code-block">
                        <button class="btn-copy-code" onclick="copyCode(this)">Copy</button>
                        <pre><span class="method-color">curl</span> <span class="url-color">{{ $baseUrl }}/campaigns?token={{ $apiToken }}</span></pre>
                    </div>
                </div>
            </div>

            <div class="endpoint post-ep" id="ep6">
                <div class="endpoint-header" onclick="toggleEndpoint('ep6')">
                    <span class="method post">POST</span>
                    <span class="endpoint-path">/campaigns</span>
                    <span class="endpoint-desc">Create & send a campaign</span>
                    <i class="fas fa-chevron-down chevron"></i>
                </div>
                <div class="endpoint-body">
                    <table class="params-table">
                        <thead><tr><th>Parameter</th><th>Type</th><th>Required</th><th>Description</th></tr></thead>
                        <tbody>
                            <tr><td><span class="param-name">name</span></td><td><span class="param-type">string</span></td><td><span class="param-required">Required</span></td><td>Campaign name</td></tr>
                            <tr><td><span class="param-name">template</span></td><td><span class="param-type">string</span></td><td><span class="param-required">Required</span></td><td>Approved WhatsApp template name</td></tr>
                            <tr><td><span class="param-name">contacts</span></td><td><span class="param-type">array</span></td><td><span class="param-required">Required</span></td><td>Array of phone numbers</td></tr>
                        </tbody>
                    </table>
                    <div class="code-block">
                        <button class="btn-copy-code" onclick="copyCode(this)">Copy</button>
                        <pre><span class="method-color">curl</span> -X POST <span class="url-color">{{ $baseUrl }}/campaigns?token={{ $apiToken }}</span> \
  -H <span class="str">"Content-Type: application/json"</span> \
  -d <span class="str">'{
    "name": "Promo Campaign",
    "template": "promo_oct",
    "contacts": ["923001234567", "923009876543"]
  }'</span></pre>
                    </div>
                </div>
            </div>
        </div>

        <!-- WEBHOOK ENDPOINT -->
        <div class="doc-section">
            <div class="doc-section-title section-webhooks"><i class="fas fa-bolt"></i> Webhooks</div>
            <div class="endpoint get-ep" id="ep7">
                <div class="endpoint-header" onclick="toggleEndpoint('ep7')">
                    <span class="method get">GET</span>
                    <span class="endpoint-path">/webhook/whatsapp?token=YOUR_TOKEN</span>
                    <span class="endpoint-desc">Webhook verification</span>
                    <i class="fas fa-chevron-down chevron"></i>
                </div>
                <div class="endpoint-body">
                    <p style="font-size:.83rem;color:#374151;margin-bottom:.9rem;">Meta calls this endpoint to verify your webhook URL. Your unique webhook URL is shown in WhatsApp Setup.</p>
                    <div class="code-block">
                        <button class="btn-copy-code" onclick="copyCode(this)">Copy</button>
                        <pre><span class="key">Webhook URL:</span> <span class="url-color">{{ url('/webhook/whatsapp') }}?token={{ $user->api_token }}</span>
<span class="key">Verify Token:</span> <span class="str">{{ $user->api_token }}</span></pre>
                    </div>
                </div>
            </div>
        </div>

    </main>
</div>

<script>
const realToken = '{{ $apiToken }}';
let tokenVisible = false;

function toggleToken() {
    tokenVisible = !tokenVisible;
    document.getElementById('tokenDisplay').style.display = tokenVisible ? 'none' : 'inline';
    document.getElementById('tokenReal').style.display   = tokenVisible ? 'inline' : 'none';
    const icon = document.getElementById('eyeIcon');
    icon.className = tokenVisible ? 'fas fa-eye-slash' : 'fas fa-eye';
    icon.nextSibling.textContent = tokenVisible ? ' Hide' : ' Show';
}

function copyToken() {
    navigator.clipboard.writeText(realToken).then(() => showToast('API token copied!'));
}

function copyEl(id) {
    const text = document.getElementById(id).textContent.trim();
    navigator.clipboard.writeText(text).then(() => showToast('Copied!'));
}

function copyCode(btn) {
    const pre = btn.closest('.code-block').querySelector('pre');
    navigator.clipboard.writeText(pre.innerText).then(() => {
        btn.textContent = 'Copied!';
        setTimeout(() => btn.textContent = 'Copy', 2000);
    });
}

function toggleEndpoint(id) {
    document.getElementById(id).classList.toggle('open');
}

function showToast(msg) {
    const t = document.createElement('div');
    t.className = 'toast';
    t.innerHTML = '<i class="fas fa-check-circle"></i> ' + msg;
    document.body.appendChild(t);
    setTimeout(() => t.remove(), 3000);
}

// Code tabs (simple toggle)
document.querySelectorAll('.code-tabs').forEach(tabs => {
    tabs.querySelectorAll('.code-tab').forEach((tab, i) => {
        tab.addEventListener('click', () => {
            tabs.querySelectorAll('.code-tab').forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
        });
    });
});
</script>

</body>
</html>
