<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsApp Setup</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%; }
        .company-badge::after  { content:''; position:absolute; left:-20px; bottom:-30px; width:90px; height:90px; background:rgba(255,255,255,.07); border-radius:50%; }
        .cb-inner { position:relative; z-index:1; display:flex; justify-content:center; align-items:center; }
        .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 LINK */
        .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:2rem; }
        .page-header-icon { width:52px; height:52px; background:linear-gradient(135deg,#075e54,#25d366); 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; }

        /* WEBHOOK VERIFIED BANNER */
        .webhook-banner { background:#f0fdf4; border:1.5px solid #86efac; border-radius:14px; padding:1rem 1.4rem; display:flex; align-items:center; gap:.85rem; margin-bottom:2rem; }
        .webhook-banner i { font-size:1.3rem; color:#16a34a; flex-shrink:0; }
        .webhook-banner h4 { font-size:.9rem; font-weight:800; color:#15803d; }
        .webhook-banner p  { font-size:.78rem; color:#16a34a; margin-top:2px; }

        /* STEPS */
        .steps { display:flex; flex-direction:column; gap:1.5rem; }
        .step-card { background:#fff; border-radius:16px; box-shadow:0 1px 4px rgba(0,0,0,.06); border:1.5px solid #f1f5f9; overflow:hidden; }
        .step-header { display:flex; align-items:center; gap:1rem; padding:1.25rem 1.5rem; border-bottom:1px solid #f8fafc; }
        .step-num { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#075e54,#25d366); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800; color:#fff; flex-shrink:0; }
        .step-header h3 { font-size:1rem; font-weight:800; color:#111; }
        .step-header p  { font-size:.78rem; color:#9ca3af; margin-top:2px; }
        .step-body { padding:1.5rem; }

        /* INSTRUCTION LIST */
        .instruction-list { list-style:none; display:flex; flex-direction:column; gap:.85rem; margin-bottom:1.4rem; }
        .instruction-list li { display:flex; align-items:flex-start; gap:.85rem; }
        .inst-num { width:24px; height:24px; border-radius:50%; background:#f0fdf4; border:1.5px solid #86efac; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; color:#16a34a; flex-shrink:0; margin-top:1px; }
        .instruction-list li p { font-size:.86rem; color:#374151; line-height:1.6; }
        .instruction-list li p a { color:#25d366; font-weight:600; text-decoration:none; }
        .instruction-list li p a:hover { text-decoration:underline; }

        /* COPY FIELD */
        .copy-field { display:flex; align-items:center; gap:.5rem; background:#f8fafc; border:1.5px solid #e5e7eb; border-radius:11px; padding:.65rem 1rem; margin-bottom:1rem; }
        .copy-field-label { font-size:.7rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.6px; min-width:110px; }
        .copy-field-val { flex:1; font-size:.85rem; font-weight:600; color:#111; font-family:monospace; word-break:break-all; }
        .btn-copy { background:#111; color:#fff; border:none; border-radius:8px; padding:.35rem .8rem; font-size:.75rem; font-weight:700; cursor:pointer; transition:.15s; white-space:nowrap; display:flex; align-items:center; gap:.35rem; flex-shrink:0; }
        .btn-copy:hover { background:#25d366; color:#000; }

        /* FORM FIELDS */
        .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
        @media(max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
        .form-group { display:flex; flex-direction:column; gap:.4rem; }
        .form-group.full { grid-column:1/-1; }
        .form-label { font-size:.78rem; font-weight:700; color:#374151; }
        .form-label span { color:#ef4444; margin-left:2px; }
        .form-input { padding:.7rem 1rem; border:1.5px solid #e5e7eb; border-radius:10px; font-size:.88rem; color:#111; font-family:monospace; outline:none; transition:.18s; background:#fff; }
        .form-input:focus { border-color:#25d366; box-shadow:0 0 0 3px rgba(37,211,102,.1); }
        .form-input::placeholder { color:#c4c4c4; font-family:inherit; }
        .form-hint { font-size:.72rem; color:#9ca3af; margin-top:2px; }

        /* API TOKEN BANNER */
        .api-token-banner { background:linear-gradient(135deg,#0f0f1a,#1e1b4b); border-radius:14px; padding:1.1rem 1.4rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:1.25rem; }
        .api-token-banner i { font-size:1.3rem; color:#818cf8; flex-shrink:0; }
        .atb-label { font-size:.68rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#818cf8; margin-bottom:.3rem; }
        .atb-val-row { display:flex; align-items:center; gap:.65rem; }
        .atb-val { font-family:monospace; font-size:.95rem; font-weight:800; color:#fff; letter-spacing:2px; }
        .btn-copy-atb { background:rgba(99,102,241,.35); border:1px solid rgba(99,102,241,.4); color:#c7d2fe; border-radius:7px; padding:.28rem .7rem; font-size:.72rem; font-weight:700; cursor:pointer; transition:.15s; white-space:nowrap; }
        .btn-copy-atb:hover { background:#4f46e5; color:#fff; }
        .atb-note { font-size:.72rem; color:#6b7280; margin-top:.25rem; }

        /* SAVE BUTTON */
        .save-row { display:flex; justify-content:flex-end; margin-top:1.5rem; }
        .btn-save { background:linear-gradient(135deg,#075e54,#25d366); color:#fff; border:none; padding:.8rem 2rem; border-radius:11px; font-size:.92rem; font-weight:800; cursor:pointer; display:flex; align-items:center; gap:.55rem; transition:.18s; }
        .btn-save:hover { opacity:.9; transform:translateY(-1px); }

        /* CONNECTION STATUS BUBBLE */
        .conn-bubble { display:flex; align-items:center; gap:1.25rem; border-radius:16px; padding:1.1rem 1.5rem; margin-bottom:1.75rem; border:1.5px solid; }
        .conn-bubble.connected    { background:#f0fdf4; border-color:#86efac; }
        .conn-bubble.disconnected { background:#fef2f2; border-color:#fca5a5; }
        .conn-bubble-icon { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.2rem; }
        .conn-bubble.connected    .conn-bubble-icon { background:#dcfce7; color:#16a34a; }
        .conn-bubble.disconnected .conn-bubble-icon { background:#fee2e2; color:#dc2626; }
        .conn-bubble-body { flex:1; }
        .conn-bubble-title { font-size:.95rem; font-weight:800; display:flex; align-items:center; gap:.6rem; }
        .conn-bubble.connected    .conn-bubble-title { color:#15803d; }
        .conn-bubble.disconnected .conn-bubble-title { color:#b91c1c; }
        .conn-bubble-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block; }
        .conn-bubble.connected    .conn-bubble-dot { background:#22c55e; animation:pulse 1.8s infinite; }
        .conn-bubble.disconnected .conn-bubble-dot { background:#ef4444; }
        .conn-bubble-sub { font-size:.78rem; margin-top:.3rem; }
        .conn-bubble.connected    .conn-bubble-sub { color:#16a34a; }
        .conn-bubble.disconnected .conn-bubble-sub { color:#dc2626; }
        .conn-bubble-meta { display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:.55rem; }
        .conn-meta-item { font-size:.73rem; display:flex; align-items:center; gap:.35rem; }
        .conn-bubble.connected    .conn-meta-item { color:#15803d; }
        .conn-bubble.disconnected .conn-meta-item { color:#9ca3af; }
        .conn-meta-item i { font-size:.65rem; }
        .conn-meta-item .val { font-family:monospace; font-weight:700; }

        /* 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);
?>

<!-- HEADER -->
<header>
    <div class="brand">
        <?php if($hasLogo): ?>
            <img src="<?php echo e(asset('uploads/' . $appLogo)); ?>" class="brand-logo" alt="<?php echo e($appName); ?>">
        <?php 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>
        <?php endif; ?>
    </div>
    <div class="header-right">
        <div class="user-pill">
            <div class="user-avatar"><?php echo e($initials); ?></div>
            <span class="uname"><?php echo e($user->name); ?></span>
        </div>
        <form method="POST" action="<?php echo e(route('logout')); ?>">
            <?php echo csrf_field(); ?>
            <button type="submit" class="btn-logout"><i class="fas fa-sign-out-alt"></i> Logout</button>
        </form>
    </div>
</header>

<div class="layout">
    <?php echo $__env->make('user.partials.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

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

        <!-- PAGE HEADER -->
        <div class="page-header">
            <div class="page-header-icon"><i class="fab fa-whatsapp"></i></div>
            <div>
                <h1>💬 WhatsApp Business API Setup</h1>
                <p>Connect your WhatsApp Business number in 3 simple steps</p>
            </div>
        </div>

        <!-- CONNECTION STATUS BUBBLE -->
        <div class="conn-bubble <?php echo e($waConnected ? 'connected' : 'disconnected'); ?>">
            <div class="conn-bubble-icon">
                <i class="fab fa-whatsapp"></i>
            </div>
            <div class="conn-bubble-body">
                <div class="conn-bubble-title">
                    <span class="conn-bubble-dot"></span>
                    <?php echo e($waConnected ? 'WhatsApp Connected' : 'WhatsApp Not Connected'); ?>

                </div>
                <div class="conn-bubble-sub">
                    <?php echo e($waConnected ? 'Your WhatsApp Business API is active and ready to send messages.' : 'Complete the steps below to connect your WhatsApp Business number.'); ?>

                </div>
                <?php if($waConnected): ?>
                <div class="conn-bubble-meta">
                    <div class="conn-meta-item">
                        <i class="fas fa-phone"></i>
                        <span>Phone Number ID:</span>
                        <span class="val"><?php echo e(substr($user->phone_number_id, 0, 6) . str_repeat('•', max(0, strlen($user->phone_number_id) - 6))); ?></span>
                    </div>
                    <div class="conn-meta-item">
                        <i class="fas fa-building"></i>
                        <span>WABA ID:</span>
                        <span class="val"><?php echo e(substr($user->waba_id, 0, 6) . str_repeat('•', max(0, strlen($user->waba_id) - 6))); ?></span>
                    </div>
                    <div class="conn-meta-item">
                        <i class="fas fa-key"></i>
                        <span>Access Token:</span>
                        <span class="val"><?php echo e(substr($user->access_token, 0, 6)); ?>••••••••</span>
                    </div>
                </div>
                <?php else: ?>
                <div class="conn-bubble-meta">
                    <div class="conn-meta-item">
                        <i class="fas <?php echo e(empty($user->access_token)    ? 'fa-times-circle' : 'fa-check-circle'); ?>" style="color:<?php echo e(empty($user->access_token)    ? '#ef4444' : '#22c55e'); ?>;"></i>
                        <span>Access Token: <?php echo e(empty($user->access_token)    ? 'Not set' : 'Set'); ?></span>
                    </div>
                    <div class="conn-meta-item">
                        <i class="fas <?php echo e(empty($user->phone_number_id) ? 'fa-times-circle' : 'fa-check-circle'); ?>" style="color:<?php echo e(empty($user->phone_number_id) ? '#ef4444' : '#22c55e'); ?>;"></i>
                        <span>Phone Number ID: <?php echo e(empty($user->phone_number_id) ? 'Not set' : 'Set'); ?></span>
                    </div>
                    <div class="conn-meta-item">
                        <i class="fas <?php echo e(empty($user->waba_id)         ? 'fa-times-circle' : 'fa-check-circle'); ?>" style="color:<?php echo e(empty($user->waba_id)         ? '#ef4444' : '#22c55e'); ?>;"></i>
                        <span>WABA ID: <?php echo e(empty($user->waba_id)         ? 'Not set' : 'Set'); ?></span>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>

<?php if($webhookVerified): ?>
        <div class="webhook-banner">
            <i class="fas fa-check-circle"></i>
            <div>
                <h4>Congratulations. Webhook is successfully verified.</h4>
                <p>Your WhatsApp webhook is live and receiving messages.</p>
            </div>
        </div>
        <?php endif; ?>

        <form method="POST" action="<?php echo e(route('user.whatsapp-setup.save')); ?>">
        <?php echo csrf_field(); ?>
        <div class="steps">

            <!-- STEP 1 -->
            <div class="step-card">
                <div class="step-header">
                    <div class="step-num">1</div>
                    <div>
                        <h3>Create Developer Account &amp; Facebook App</h3>
                        <p>Set up your Meta developer environment and configure the webhook</p>
                    </div>
                </div>
                <div class="step-body">
                    <ul class="instruction-list">
                        <li>
                            <div class="inst-num">1</div>
                            <p>Create a Developer account and a new Facebook app as described <a href="https://developers.facebook.com/docs/whatsapp/cloud-api/get-started" target="_blank">here <i class="fas fa-external-link-alt" style="font-size:.7rem;"></i></a></p>
                        </li>
                        <li>
                            <div class="inst-num">2</div>
                            <p>Once you have your Facebook app created, in the dashboard of the app, locate the <strong>WhatsApp</strong> product → <strong>Setup</strong>.</p>
                        </li>
                        <li>
                            <div class="inst-num">3</div>
                            <p>Then go to <strong>WhatsApp → Configuration</strong> and enter the following info:</p>
                        </li>
                    </ul>

                    <div class="copy-field">
                        <span class="copy-field-label">Callback URL</span>
                        <span class="copy-field-val" id="webhookUrl"><?php echo e($webhookUrl); ?></span>
                        <button type="button" class="btn-copy" onclick="copyText('webhookUrl', this)">
                            <i class="fas fa-copy"></i> Copy
                        </button>
                    </div>
                    <div class="copy-field" style="background:#f0fdf4;border-color:#86efac;">
                        <span class="copy-field-label" style="color:#16a34a;">Verify Token</span>
                        <span class="copy-field-val" id="verifyToken" style="color:#15803d;"><?php echo e($user->api_token); ?></span>
                        <button type="button" class="btn-copy" onclick="copyText('verifyToken', this)">
                            <i class="fas fa-copy"></i> Copy
                        </button>
                    </div>
                    <p style="font-size:.75rem;color:#9ca3af;margin-top:.4rem;"><i class="fas fa-info-circle" style="color:#25d366;"></i> This is the same token as your API token — one token for everything.</p>

                    <ul class="instruction-list" style="margin-top:1rem;margin-bottom:0;">
                        <li>
                            <div class="inst-num">4</div>
                            <p>Click on <strong>Webhook Fields → Manage</strong> and select <strong>Messages</strong>.</p>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- STEP 2 -->
            <div class="step-card">
                <div class="step-header">
                    <div class="step-num">2</div>
                    <div>
                        <h3>Get Your Permanent Access Token</h3>
                        <p>Generate a long-lived token from your Facebook app</p>
                    </div>
                </div>
                <div class="step-body">
                    <ul class="instruction-list">
                        <li>
                            <div class="inst-num">1</div>
                            <p>The process of creating a permanent access token is explained in detail in the <a href="https://developers.facebook.com/docs/whatsapp/business-management-api/get-started" target="_blank">Facebook Docs <i class="fas fa-external-link-alt" style="font-size:.7rem;"></i></a></p>
                        </li>
                        <li>
                            <div class="inst-num">2</div>
                            <p>Once you have the permanent access token, enter it below:</p>
                        </li>
                    </ul>
                    <div class="form-group">
                        <label class="form-label">Permanent Access Token <span>*</span></label>
                        <input type="text" name="access_token" class="form-input" placeholder="EAAxxxxxxxxxxxxxxxxxxxxxx" value="<?php echo e(old('access_token', $user->access_token)); ?>">
                        <span class="form-hint">Starts with EAA — keep this secret, never share it publicly.</span>
                    </div>
                </div>
            </div>

            <!-- STEP 3 -->
            <div class="step-card">
                <div class="step-header">
                    <div class="step-num">3</div>
                    <div>
                        <h3>Get Your Account ID &amp; Phone Number ID</h3>
                        <p>Find these in your Facebook app under WhatsApp → API Setup</p>
                    </div>
                </div>
                <div class="step-body">
                    <ul class="instruction-list">
                        <li>
                            <div class="inst-num">1</div>
                            <p>In the Facebook app, go to <strong>WhatsApp → API Setup</strong>. You will find your <strong>Phone Number ID</strong> and your <strong>WhatsApp Business Account ID</strong>.</p>
                        </li>
                        <li>
                            <div class="inst-num">2</div>
                            <p>Copy them and enter below:</p>
                        </li>
                    </ul>
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">Phone Number ID <span>*</span></label>
                            <input type="text" name="phone_number_id" class="form-input" placeholder="1234567890123456" value="<?php echo e(old('phone_number_id', $user->phone_number_id)); ?>">
                            <span class="form-hint">Found in WhatsApp → API Setup</span>
                        </div>
                        <div class="form-group">
                            <label class="form-label">WhatsApp Business Account ID <span>*</span></label>
                            <input type="text" name="waba_id" class="form-input" placeholder="9876543210987654" value="<?php echo e(old('waba_id', $user->waba_id)); ?>">
                            <span class="form-hint">Your WABA ID from Meta Business Manager</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="save-row">
            <button type="submit" class="btn-save">
                <i class="fas fa-save"></i> Save & Connect WhatsApp
            </button>
        </div>
        </form>
    </main>
</div>

<?php if(session('success')): ?>
<div class="toast" id="toast">
    <i class="fas fa-check-circle"></i> <?php echo e(session('success')); ?>

    <span style="margin-left:.75rem;cursor:pointer;color:#888;" onclick="this.parentElement.remove()">✕</span>
</div>
<script>setTimeout(()=>{ const t=document.getElementById('toast'); if(t)t.remove(); }, 5000);</script>
<?php endif; ?>

<?php if($errors->any()): ?>
<div class="toast" id="toast" style="background:#7f1d1d;">
    <i class="fas fa-exclamation-circle" style="color:#fca5a5;"></i>
    <?php echo e($errors->first()); ?>

    <span style="margin-left:.75rem;cursor:pointer;color:#888;" onclick="this.parentElement.remove()">✕</span>
</div>
<?php endif; ?>

<script>
function copySetupToken() {
    const token = document.getElementById('setupApiToken').textContent.trim();
    navigator.clipboard.writeText(token).then(() => {
        const btn = event.target.closest('button');
        btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
        btn.style.background = '#25d366'; btn.style.color = '#000';
        setTimeout(() => { btn.innerHTML = '<i class="fas fa-copy"></i> Copy'; btn.style.background=''; btn.style.color=''; }, 2000);
    });
}
function copyText(id, btn) {
    const text = document.getElementById(id).textContent.trim();
    navigator.clipboard.writeText(text).then(() => {
        btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
        btn.style.background = '#25d366';
        btn.style.color = '#000';
        setTimeout(() => {
            btn.innerHTML = '<i class="fas fa-copy"></i> Copy';
            btn.style.background = '';
            btn.style.color = '';
        }, 2000);
    });
}
</script>

</body>
</html>
<?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/WhatsApp/whatsappcloudapi/resources/views/user/whatsapp-setup.blade.php ENDPATH**/ ?>