<?php
/**
 * Comprehensive Help & Support Documentation
 *
 * @link       https://mediahubster.in
 * @since      1.0.4
 *
 * @package    Subs_Sys
 * @subpackage Subs_Sys/admin/partials
 */

// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<style>
.subscription-help-container {
    max-width: 1200px;
    margin: 20px 0;
}

.help-section {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.help-section h2 {
    color: #1a8917;
    border-bottom: 2px solid #1a8917;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.help-section h3 {
    color: #333;
    margin-top: 25px;
    margin-bottom: 15px;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.help-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
}

.help-card h4 {
    color: #1a8917;
    margin-top: 0;
}

.shortcode-box {
    background: #f1f3f4;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 10px;
    font-family: monospace;
    margin: 10px 0;
    position: relative;
}

.copy-button {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #1a8917;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
}

.status-indicator {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 5px;
}

.status-active { background: #d4edda; color: #155724; }
.status-cancelled { background: #f8d7da; color: #721c24; }
.status-expired { background: #fff3cd; color: #856404; }

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.feature-list li:before {
    content: "✅";
    margin-right: 10px;
}

.toc {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 30px;
}

.toc ul {
    margin: 10px 0;
    padding-left: 20px;
}

.toc a {
    text-decoration: none;
    color: #0073aa;
}

.toc a:hover {
    text-decoration: underline;
}
</style>

<div class="subscription-help-container">
        
        <!-- Quick Note -->
        <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; padding: 15px; margin-bottom: 20px;">
            <h3 style="margin-top: 0; color: #856404;">📝 Documentation Structure</h3>
            <p style="margin-bottom: 0;">This comprehensive guide covers all advanced features and subscription management. For basic shortcodes and troubleshooting, check the <strong>"Original Documentation"</strong> tab above.</p>
        </div>

        <!-- Table of Contents -->
        <div class="toc">
            <h3>📋 Table of Contents</h3>
            <ul>
                <li><a href="#integration-steps"><strong>⚡ Step-by-Step Integration Guide</strong></a></li>
                <li><a href="#getting-started">Getting Started</a></li>
                <li><a href="#subscription-management">Subscription Management & Renewal Flow</a></li>
                <li><a href="#content-subscriptions">Content Subscriptions</a></li>
                <li><a href="#interest-subscribe-modal"><strong>🔔 Subscribe Button & Modal (Category/Tag Subscriptions)</strong></a></li>
                <li><a href="#email-notifications">Email Notifications</a></li>
                <li><a href="#shortcodes">Available Shortcodes</a></li>
                <li><a href="#payment-integration">Payment Integration (Stripe)</a></li>
                <li><a href="#user-features">User Features</a></li>
                <li><a href="#admin-features">Admin Features</a></li>
                <li><a href="#troubleshooting">Troubleshooting</a></li>
            </ul>
        </div>

        <!-- Step-by-Step Integration Guide -->
        <div class="help-section" id="integration-steps" style="border-left: 4px solid #1a8917;">
            <h2>⚡ Step-by-Step Integration Guide</h2>
            <p>Follow these steps in order to fully integrate the Subscription System plugin on your WordPress site.</p>

            <!-- Step 1 -->
            <div style="background:#f0faf0;border:1px solid #b2dfb2;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#1a8917;">Step 1 — Install &amp; Activate the Plugin</h3>
                <ol>
                    <li>Upload the <strong>subscription_system</strong> plugin folder to <code>/wp-content/plugins/</code>, or install it via <strong>Plugins → Add New</strong>.</li>
                    <li>Go to <strong>Plugins → Installed Plugins</strong> and click <strong>Activate</strong> next to "Subscription System".</li>
                    <li>After activation a new <strong>Subscriptions</strong> menu will appear in the WordPress admin sidebar.</li>
                </ol>
            </div>

            <!-- Step 2 -->
            <div style="background:#f0faf0;border:1px solid #b2dfb2;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#1a8917;">Step 2 — Configure Stripe Payment Settings</h3>
                <ol>
                    <li>Go to <strong>Subscriptions → Payment Settings</strong>.</li>
                    <li>Tick <strong>Enable Stripe</strong>.</li>
                    <li>Leave <strong>Test Mode</strong> enabled while you are testing; disable it when you go live.</li>
                    <li>Enter your <strong>Publishable Key</strong> and <strong>Secret Key</strong> from your <a href="https://dashboard.stripe.com/apikeys" target="_blank" rel="noopener">Stripe Dashboard → Developers → API keys</a>.
                        <ul>
                            <li>Test keys start with <code>pk_test_</code> / <code>sk_test_</code></li>
                            <li>Live keys start with <code>pk_live_</code> / <code>sk_live_</code></li>
                        </ul>
                    </li>
                    <li>Leave the <strong>Webhook Secret</strong> field empty for now — you will fill it in Step 3.</li>
                    <li>Click <strong>Save Settings</strong>.</li>
                    <li>Click <strong>Test Connection</strong> to confirm the API key works before proceeding.</li>
                </ol>
                <p style="margin-bottom:0;"><a href="<?php echo esc_url( admin_url('admin.php?page=subscription-payment-settings') ); ?>" class="button button-primary">Go to Payment Settings →</a></p>
            </div>

            <!-- Step 3 -->
            <div style="background:#f0faf0;border:1px solid #b2dfb2;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#1a8917;">Step 3 — Set Up the Stripe Webhook</h3>
                <p>Webhooks are how Stripe notifies your site about payments, renewals, and cancellations. This step is <strong>required</strong> for automatic subscription management.</p>
                <ol>
                    <li>Open your <a href="https://dashboard.stripe.com/webhooks" target="_blank" rel="noopener">Stripe Dashboard → Developers → Webhooks</a> and click <strong>Add endpoint</strong>.</li>
                    <li>Set the <strong>Endpoint URL</strong> to:
                        <div class="shortcode-box" style="margin:8px 0;"><?php echo esc_url( site_url('/wp-json/subscription-system/v1/webhook') ); ?><button class="copy-button" onclick="copyToClipboard('<?php echo esc_js( site_url('/wp-json/subscription-system/v1/webhook') ); ?>')">Copy</button></div>
                    </li>
                    <li>Under <strong>Select events to listen to</strong>, add these four events:
                        <ul>
                            <li><code>customer.subscription.created</code></li>
                            <li><code>customer.subscription.updated</code></li>
                            <li><code>customer.subscription.deleted</code></li>
                            <li><code>invoice.payment_succeeded</code></li>
                            <li><code>invoice.payment_failed</code></li>
                        </ul>
                    </li>
                    <li>Click <strong>Add endpoint</strong>. Stripe will display a <strong>Signing secret</strong> — copy it.</li>
                    <li>Back in WordPress go to <strong>Subscriptions → Payment Settings</strong>, paste the signing secret into the <strong>Webhook Secret</strong> field, and click <strong>Save Settings</strong>.</li>
                </ol>
            </div>

            <!-- Step 4 -->
            <div style="background:#f0faf0;border:1px solid #b2dfb2;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#1a8917;">Step 4 — Create the Required Pages</h3>
                <p>Go to <strong>Pages → Add New</strong> and create one page for each of the following. Add only the shortcode shown — no other content is needed.</p>
                <table style="width:100%;border-collapse:collapse;">
                    <thead>
                        <tr style="background:#e8f5e9;">
                            <th style="padding:8px 10px;border:1px solid #c8e6c9;text-align:left;">Page Name</th>
                            <th style="padding:8px 10px;border:1px solid #c8e6c9;text-align:left;">Shortcode to add</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td style="padding:8px 10px;border:1px solid #c8e6c9;">Login</td><td style="padding:8px 10px;border:1px solid #c8e6c9;font-family:monospace;">[subscriptionsystem_login]</td></tr>
                        <tr><td style="padding:8px 10px;border:1px solid #c8e6c9;">Register</td><td style="padding:8px 10px;border:1px solid #c8e6c9;font-family:monospace;">[subscriptionsystem_register]</td></tr>
                        <tr><td style="padding:8px 10px;border:1px solid #c8e6c9;">My Account</td><td style="padding:8px 10px;border:1px solid #c8e6c9;font-family:monospace;">[subscriptionsystem_account]</td></tr>
                        <tr><td style="padding:8px 10px;border:1px solid #c8e6c9;">Pricing / Plans</td><td style="padding:8px 10px;border:1px solid #c8e6c9;font-family:monospace;">[subscriptionsystem_plans layout="1"]</td></tr>
                        <tr><td style="padding:8px 10px;border:1px solid #c8e6c9;">Subscription Success</td><td style="padding:8px 10px;border:1px solid #c8e6c9;font-family:monospace;">[subscriptionsystem_success]</td></tr>
                        <tr><td style="padding:8px 10px;border:1px solid #c8e6c9;">Subscription Cancelled</td><td style="padding:8px 10px;border:1px solid #c8e6c9;font-family:monospace;">[checkout_failed]</td></tr>
                        <tr><td style="padding:8px 10px;border:1px solid #c8e6c9;">Forgot Password</td><td style="padding:8px 10px;border:1px solid #c8e6c9;font-family:monospace;">[subscriptionsystem_forgot_password]</td></tr>
                        <tr><td style="padding:8px 10px;border:1px solid #c8e6c9;">Edit Profile</td><td style="padding:8px 10px;border:1px solid #c8e6c9;font-family:monospace;">[edit_profile]</td></tr>
                        <tr><td style="padding:8px 10px;border:1px solid #c8e6c9;">Content Subscription Success <em>(optional)</em></td><td style="padding:8px 10px;border:1px solid #c8e6c9;font-family:monospace;">[content_subscription_success]</td></tr>
                    </tbody>
                </table>
            </div>

            <!-- Step 5 -->
            <div style="background:#f0faf0;border:1px solid #b2dfb2;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#1a8917;">Step 5 — Assign Pages in Plugin Settings</h3>
                <ol>
                    <li>Go to <strong>Subscriptions → Settings → Pages</strong>.</li>
                    <li>Use each dropdown to select the page you created in Step 4 for the matching function.</li>
                    <li>Click <strong>Save Changes</strong>.</li>
                </ol>
                <p style="margin-bottom:0;">These assignments allow the plugin to generate correct redirect URLs in emails, checkout flows, and admin links.</p>
                <p style="margin:10px 0 0;"><a href="<?php echo esc_url( admin_url('admin.php?page=subscription-settings&tab=pages') ); ?>" class="button">Go to Pages Settings →</a></p>
            </div>

            <!-- Step 6 -->
            <div style="background:#f0faf0;border:1px solid #b2dfb2;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#1a8917;">Step 6 — Configure Email &amp; SMTP</h3>
                <ol>
                    <li>Go to <strong>Subscriptions → Settings → Communication</strong>.</li>
                    <li>Tick <strong>Enable Email Notifications</strong>.</li>
                    <li>Set a <strong>From Email Address</strong> and <strong>From Name</strong>.</li>
                    <li>Enable <strong>SMTP</strong> for reliable delivery and fill in your SMTP host, port, username and password.
                        <ul>
                            <li><strong>SendGrid:</strong> Host <code>smtp.sendgrid.net</code>, Port <code>587</code>, Username <code>apikey</code>, Password = your API key</li>
                            <li><strong>Gmail:</strong> Host <code>smtp.gmail.com</code>, Port <code>587</code>, Password = app-specific password</li>
                        </ul>
                    </li>
                    <li>Use the built-in <strong>Send Test Email</strong> button to confirm delivery before going live.</li>
                    <li>Click <strong>Save Changes</strong>.</li>
                </ol>
                <p style="margin-bottom:0;"><a href="<?php echo esc_url( admin_url('admin.php?page=subscription-settings&tab=communication') ); ?>" class="button">Go to Communication Settings →</a></p>
            </div>

            <!-- Step 7 -->
            <div style="background:#f0faf0;border:1px solid #b2dfb2;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#1a8917;">Step 7 — Create Plan Categories</h3>
                <ol>
                    <li>Go to <strong>Subscriptions → Plan Categories</strong>.</li>
                    <li>Click <strong>Add New Category</strong> and give it a name (e.g. "Monthly Plans", "Annual Plans").</li>
                    <li>Save the category — you will need it when creating plans in the next step.</li>
                </ol>
                <p style="margin-bottom:0;"><a href="<?php echo esc_url( admin_url('admin.php?page=subscription-plan-categories') ); ?>" class="button">Go to Plan Categories →</a></p>
            </div>

            <!-- Step 8 -->
            <div style="background:#f0faf0;border:1px solid #b2dfb2;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#1a8917;">Step 8 — Create Subscription Plans</h3>
                <ol>
                    <li>Go to <strong>Subscriptions → Plans → Add New Plan</strong>.</li>
                    <li>Fill in the plan name, description, price, billing period (monthly / annual), and select a category from Step 7.</li>
                    <li>Save the plan, then click <strong>Sync with Stripe</strong> to create the corresponding Stripe product and price automatically.</li>
                    <li>Repeat for each plan you want to offer.</li>
                    <li>The plans will now appear on your Pricing page via the <code>[subscriptionsystem_plans]</code> shortcode.</li>
                </ol>
                <p style="margin-bottom:0;"><a href="<?php echo esc_url( admin_url('admin.php?page=subscription-plans') ); ?>" class="button">Go to Plans →</a></p>
            </div>

            <!-- Step 9 (optional) -->
            <div style="background:#f0faf0;border:1px solid #b2dfb2;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#1a8917;">Step 9 — Set Up Content Subscription Plans <em>(Optional)</em></h3>
                <p>Content plans let users subscribe to email notifications for specific WordPress categories, tags, or post types.</p>
                <ol>
                    <li>Go to <strong>Subscriptions → Content Plans → Add New</strong>.</li>
                    <li>Choose the subscription type: <strong>Category</strong>, <strong>Tag</strong>, <strong>Post Type</strong>, or <strong>Specific Post</strong>.</li>
                    <li>Select the target content and set a price (or make it free).</li>
                    <li>Save the plan — the pop-up will automatically appear for visitors browsing matching content.</li>
                </ol>
                <p style="margin-bottom:0;"><a href="<?php echo esc_url( admin_url('admin.php?page=subscription-content-plans') ); ?>" class="button">Go to Content Plans →</a></p>
            </div>

            <!-- Step 9b -->
            <div style="background:#f0f4ff;border:1px solid #c7d2fe;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#4338ca;">Step 9b — Set Up the Subscribe Button & Modal <em>(Interest Subscriptions)</em></h3>
                <p>This is the newer, more flexible category/tag subscription system. Users choose their own interests from a popup modal. Three trigger methods are available: auto-open, floating button, and shortcode.</p>
                <ol>
                    <li>Ensure you have at least one active plan in <strong>Subscriptions → Plans</strong> (free or paid).</li>
                    <li>Go to <strong>Subscriptions → Settings → Subscribe Button & Modal</strong>.</li>
                    <li>Under <strong>Trigger Options</strong>: enable the <strong>Floating Button</strong> and/or <strong>Auto-Open Modal</strong>.</li>
                    <li>Under <strong>Display Settings</strong>: choose where the triggers appear (all posts, single posts, specific pages, etc.).</li>
                    <li>Enable <strong>Auto-Select Current Post's Categories/Tags</strong> for context-aware pre-selection.</li>
                    <li>Enable <strong>Hide Name & Email Fields for Logged-In Users</strong> for a seamless experience.</li>
                    <li>Click <strong>Save Settings</strong>.</li>
                    <li>Optionally, place <code>[subscriptionsystem_subscribe]</code> in any post or page for an inline button.</li>
                </ol>
                <p>For full configuration details, see the <a href="#interest-subscribe-modal">Subscribe Button & Modal</a> section below.</p>
                <p style="margin-bottom:0;"><a href="<?php echo esc_url( admin_url('admin.php?page=subscription-settings&tab=subscribe_modal') ); ?>" class="button button-primary">Open Subscribe Modal Settings →</a></p>
            </div>

            <!-- Step 10 -->
            <div style="background:#f0faf0;border:1px solid #b2dfb2;border-radius:6px;padding:15px 20px;margin-bottom:15px;">
                <h3 style="margin-top:0;color:#1a8917;">Step 10 — Test the Full Integration</h3>
                <ol>
                    <li>Ensure <strong>Stripe Test Mode</strong> is still active in Payment Settings.</li>
                    <li>Visit your front-end <strong>Pricing / Plans</strong> page and click a plan to start a checkout.</li>
                    <li>Complete payment using Stripe's test card numbers:
                        <ul>
                            <li><strong>4242 4242 4242 4242</strong> — successful payment</li>
                            <li><strong>4000 0000 0000 0002</strong> — declined payment</li>
                            <li><strong>4000 0025 0000 3155</strong> — requires 3D Secure</li>
                        </ul>
                        Use any future expiry date, any 3-digit CVC, and any postcode.
                    </li>
                    <li>Check that you are redirected to the <strong>Subscription Success</strong> page and receive a confirmation email.</li>
                    <li>In the <a href="https://dashboard.stripe.com/test/webhooks" target="_blank" rel="noopener">Stripe Dashboard → Webhooks</a>, verify the webhook events were delivered with a <strong>200</strong> status.</li>
                    <li>Check <strong>Subscriptions → Dashboard</strong> to confirm the new subscription appears there.</li>
                    <li>When everything works, go to <strong>Payment Settings</strong>, disable Test Mode, enter your <strong>live</strong> API keys and live webhook secret, and save.</li>
                </ol>
                <div style="background:#fff3cd;border:1px solid #ffeaa7;border-radius:4px;padding:10px;margin-top:10px;">
                    <strong>⚠️ Before going live:</strong> Make sure your site uses HTTPS — Stripe requires a secure connection for live payments.
                </div>
            </div>

        </div>

        <!-- Getting Started -->
        <div class="help-section" id="getting-started">
            <h2>🚀 Getting Started</h2>
            <p>Welcome to the Subscription System! This comprehensive plugin provides complete subscription management for WordPress sites with content subscriptions, payment processing, and automated email notifications.</p>
            
            <h3>Quick Setup Checklist</h3>
            <ul class="feature-list">
                <li>Configure Stripe payment settings</li>
                <li>Set up email notifications (SMTP recommended)</li>
                <li>Create subscription plans</li>
                <li>Configure content subscription plans</li>
                <li>Test the subscription flow</li>
            </ul>
        </div>

        <!-- Subscription Management -->
        <div class="help-section" id="subscription-management">
            <h2>🔄 Subscription Management & Renewal Flow</h2>
            
            <h3>How Automatic Renewals Work</h3>
            <p>The subscription system uses <strong>Stripe webhooks</strong> for automatic subscription management. Here's how it works:</p>
            
            <div class="help-grid">
                <div class="help-card">
                    <h4>🎯 Initial Subscription</h4>
                    <ul>
                        <li>User subscribes via Stripe checkout</li>
                        <li>Stripe creates recurring subscription</li>
                        <li>Webhook confirms subscription</li>
                        <li>Local database updated with start/end dates</li>
                    </ul>
                </div>
                
                <div class="help-card">
                    <h4>🔄 Monthly Renewals</h4>
                    <ul>
                        <li>Stripe automatically charges customer</li>
                        <li><code>invoice.payment_succeeded</code> webhook fired</li>
                        <li>System updates subscription end date</li>
                        <li>Status remains "active"</li>
                    </ul>
                </div>
                
                <div class="help-card">
                    <h4>❌ Failed Payments</h4>
                    <ul>
                        <li>Stripe attempts payment retry</li>
                        <li><code>invoice.payment_failed</code> webhook fired</li>
                        <li>Status changes to "past_due"</li>
                        <li>Customer notified via email</li>
                    </ul>
                </div>
                
                <div class="help-card">
                    <h4>🛑 Cancellations</h4>
                    <ul>
                        <li>User cancels via account page</li>
                        <li>Stripe subscription cancelled</li>
                        <li><code>customer.subscription.deleted</code> webhook</li>
                        <li>Status changes to "cancelled"</li>
                    </ul>
                </div>
            </div>

            <h3>Subscription Statuses</h3>
            <p><span class="status-indicator status-active">Active</span> Subscription is current and user has access</p>
            <p><span class="status-indicator status-cancelled">Cancelled</span> Subscription ended, no further charges</p>
            <p><span class="status-indicator status-expired">Past Due</span> Payment failed, retry in progress</p>

            <h3>What Happens Each Month</h3>
            <ol>
                <li><strong>Stripe Billing Cycle:</strong> Stripe automatically attempts to charge the customer</li>
                <li><strong>Payment Success:</strong> Subscription end date extended by billing period</li>
                <li><strong>Payment Failure:</strong> Status changes to "past_due", retry attempts begin</li>
                <li><strong>Final Failure:</strong> After all retries fail, subscription cancelled</li>
            </ol>
        </div>

        <!-- Content Subscriptions -->
        <div class="help-section" id="content-subscriptions">
            <h2>📝 Content Subscriptions</h2>
            
            <h3>Content Subscription Types</h3>
            <div class="help-grid">
                <div class="help-card">
                    <h4>📂 Category Subscriptions</h4>
                    <p>Users subscribe to specific categories. They receive email notifications when new posts are published in those categories.</p>
                </div>
                
                <div class="help-card">
                    <h4>🏷️ Tag Subscriptions</h4>
                    <p>Users subscribe to specific tags. They receive notifications when posts with those tags are published.</p>
                </div>
                
                <div class="help-card">
                    <h4>📄 Post Type Subscriptions</h4>
                    <p>Users subscribe to specific post types (posts, pages, custom post types). They get notified for all new content of that type.</p>
                </div>
                
                <div class="help-card">
                    <h4>📌 Specific Post Subscriptions</h4>
                    <p>Users subscribe to individual posts. Useful for series or ongoing content updates.</p>
                </div>
            </div>

            <h3>Pop-up Subscription System</h3>
            <ul class="feature-list">
                <li><strong>Smart Display:</strong> Shows on relevant pages (category, tag, post pages)</li>
                <li><strong>Remind Me Later:</strong> Users can set reminders (1 hour, tomorrow, 3 days, next week, never)</li>
                <li><strong>Subscription Status:</strong> Shows "Subscribed" for existing subscribers</li>
                <li><strong>Multiple Plans:</strong> Handles multiple plans for same content type</li>
                <li><strong>Beautiful Design:</strong> Modern, responsive interface matching your theme</li>
            </ul>

            <h3>Content Notification Flow</h3>
            <ol>
                <li><strong>Content Published:</strong> Admin publishes new post/page</li>
                <li><strong>Plan Detection:</strong> System finds matching content subscription plans</li>
                <li><strong>Subscriber Lookup:</strong> Identifies active subscribers to those plans</li>
                <li><strong>Email Generation:</strong> Creates beautiful Medium-style email notifications</li>
                <li><strong>Email Delivery:</strong> Sends via configured SMTP (immediate or scheduled)</li>
            </ol>
        </div>

        <!-- Subscribe Button & Modal -->
        <div class="help-section" id="interest-subscribe-modal" style="border-left: 4px solid #667eea;">
            <h2>🔔 Subscribe Button & Modal (Category / Tag Subscriptions)</h2>
            <p>This feature lets visitors subscribe to <strong>specific WordPress categories and tags</strong> — instead of the whole site. When new content matching their interests is published, they receive a targeted email notification.</p>
            <p>The subscription modal can be triggered in three ways and is configurable from <strong>Subscriptions → Settings → Subscribe Button & Modal</strong>.</p>

            <!-- What It Is -->
            <h3>What Is This Feature?</h3>
            <div class="help-grid">
                <div class="help-card">
                    <h4>🎯 Interest-Based Subscriptions</h4>
                    <p>Instead of subscribing to everything, users pick the <strong>categories</strong> and <strong>tags</strong> they care about — for example: Category "Sports" + Tag "Hockey". They only receive emails when content matching those interests is published.</p>
                </div>
                <div class="help-card">
                    <h4>📋 Subscription Plans</h4>
                    <p>Plans are pulled from <strong>Subscriptions → Plans</strong>. Free plans activate immediately with configurable category/tag limits. Paid plans redirect the user to checkout. Multiple plans can be offered (e.g. "Basic – 2 categories" and "Pro – unlimited").</p>
                </div>
                <div class="help-card">
                    <h4>🧠 Context-Aware Modal</h4>
                    <p>When a visitor reads a post in the "Sports" category tagged "Hockey", the modal <strong>automatically pre-selects</strong> those categories and tags — reducing friction and increasing conversions.</p>
                </div>
                <div class="help-card">
                    <h4>👤 Logged-In User Experience</h4>
                    <p>Logged-in users are recognized automatically. The modal skips the name/email fields entirely and greets them by name. They proceed directly to choosing their interests and plan.</p>
                </div>
            </div>

            <!-- How It Works -->
            <h3>How It Works — End-to-End Flow</h3>
            <ol>
                <li>A visitor reads a post or page where the modal trigger is active (floating button, auto-open, or shortcode button).</li>
                <li>The subscription modal opens showing all available categories, tags, and plans.</li>
                <li>If context-awareness is enabled and the user is on a post, the post's categories/tags are pre-checked.</li>
                <li>The visitor selects their interests, chooses a plan, and clicks <strong>Subscribe</strong>.</li>
                <li>For <strong>free plans</strong>: the subscription is activated immediately. For <strong>paid plans</strong>: the user is redirected to checkout.</li>
                <li>When new content is published, the system matches it against all active subscriptions and sends targeted email notifications.</li>
            </ol>

            <!-- Configuration Steps -->
            <h3>⚙️ Configuration — Step by Step</h3>

            <!-- Step A -->
            <div style="background:#f0f4ff;border:1px solid #c7d2fe;border-radius:6px;padding:15px 20px;margin-bottom:12px;">
                <h4 style="margin-top:0;color:#4338ca;">Step A — Create Subscription Plans</h4>
                <p>The modal reads plans from <strong>Subscriptions → Plans</strong>. At minimum you need one active plan.</p>
                <ol>
                    <li>Go to <strong>Subscriptions → Plans → Add New Plan</strong>.</li>
                    <li>Set the plan name (e.g. <em>"Free Newsletter"</em> or <em>"Pro Access"</em>).</li>
                    <li>Set the price to <strong>$0</strong> for a free plan, or a positive amount for paid.</li>
                    <li>In the <strong>Features</strong> or <strong>Description</strong> field you can optionally add a JSON object to control per-plan limits:
                        <div class="shortcode-box" style="font-size:13px;">{"max_categories": 2, "max_tags": 3}</div>
                        <em>A value of <code>0</code> means unlimited. Omit the field for unlimited by default on paid plans.</em>
                    </li>
                    <li>Set Status to <strong>Active</strong> and save. The plan now appears in the modal automatically.</li>
                </ol>
                <p style="margin-bottom:0;"><a href="<?php echo esc_url( admin_url('admin.php?page=subscription-plans') ); ?>" class="button">Go to Plans →</a></p>
            </div>

            <!-- Step B -->
            <div style="background:#f0f4ff;border:1px solid #c7d2fe;border-radius:6px;padding:15px 20px;margin-bottom:12px;">
                <h4 style="margin-top:0;color:#4338ca;">Step B — Open Subscribe Button & Modal Settings</h4>
                <p>Go to <strong>Subscriptions → Settings → Subscribe Button & Modal</strong>.</p>
                <p style="margin-bottom:0;"><a href="<?php echo esc_url( admin_url('admin.php?page=subscription-settings&tab=subscribe_modal') ); ?>" class="button button-primary">Open Settings Tab →</a></p>
            </div>

            <!-- Step C -->
            <div style="background:#f0f4ff;border:1px solid #c7d2fe;border-radius:6px;padding:15px 20px;margin-bottom:12px;">
                <h4 style="margin-top:0;color:#4338ca;">Step C — Choose Your Trigger Method</h4>
                <p>Under <strong>Trigger Options</strong>, pick one or more ways to present the modal:</p>
                <table style="width:100%;border-collapse:collapse;margin-top:8px;">
                    <thead>
                        <tr style="background:#e0e7ff;">
                            <th style="padding:8px 10px;border:1px solid #c7d2fe;text-align:left;">Method</th>
                            <th style="padding:8px 10px;border:1px solid #c7d2fe;text-align:left;">What It Does</th>
                            <th style="padding:8px 10px;border:1px solid #c7d2fe;text-align:left;">Settings</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="padding:8px 10px;border:1px solid #c7d2fe;"><strong>Auto-Open on Page Load</strong></td>
                            <td style="padding:8px 10px;border:1px solid #c7d2fe;">The modal opens automatically after the page loads, with a configurable delay.</td>
                            <td style="padding:8px 10px;border:1px solid #c7d2fe;">Enable checkbox + set delay in seconds (0 = immediate, 3 = recommended).</td>
                        </tr>
                        <tr>
                            <td style="padding:8px 10px;border:1px solid #c7d2fe;"><strong>Floating Button</strong></td>
                            <td style="padding:8px 10px;border:1px solid #c7d2fe;">A fixed button stays visible at the corner/bottom of every qualifying page. Clicking it opens the modal.</td>
                            <td style="padding:8px 10px;border:1px solid #c7d2fe;">Enable checkbox, set button text and position (Bottom Right, Left, or Center).</td>
                        </tr>
                        <tr>
                            <td style="padding:8px 10px;border:1px solid #c7d2fe;"><strong>Shortcode Button</strong></td>
                            <td style="padding:8px 10px;border:1px solid #c7d2fe;">Place a button anywhere in a post or page. Clicking it opens the modal.</td>
                            <td style="padding:8px 10px;border:1px solid #c7d2fe;">Add <code>[subscriptionsystem_subscribe]</code> to any page or post — no admin setting needed.</td>
                        </tr>
                    </tbody>
                </table>
                <p style="margin-top:10px;"><strong>Note:</strong> You can enable all three simultaneously — they use the same modal and share the same subscription logic.</p>
            </div>

            <!-- Step D -->
            <div style="background:#f0f4ff;border:1px solid #c7d2fe;border-radius:6px;padding:15px 20px;margin-bottom:12px;">
                <h4 style="margin-top:0;color:#4338ca;">Step D — Configure Display Settings (Where Triggers Appear)</h4>
                <p>Under <strong>Display Settings</strong>, choose on which pages the floating button and auto-open modal are active. Options:</p>
                <ul>
                    <li><strong>Show on All Posts</strong> — any singular post of any post type (excluding pages).</li>
                    <li><strong>Show on All Pages</strong> — all WordPress pages.</li>
                    <li><strong>Show on Single Posts Only</strong> — only the standard blog post single view.</li>
                    <li><strong>Show on Single Pages Only</strong> — only single-page views.</li>
                    <li><strong>Show on Custom Post Types</strong> — tick one or more CPTs from the list (e.g. "Product", "Event").</li>
                    <li><strong>Show on Specific Pages</strong> — hand-pick individual pages from a scrollable checklist.</li>
                </ul>
                <p><strong>Tip:</strong> The shortcode <code>[subscriptionsystem_subscribe]</code> always renders wherever it is placed regardless of these display settings — they only control the floating button and auto-open behavior.</p>
            </div>

            <!-- Step E -->
            <div style="background:#f0f4ff;border:1px solid #c7d2fe;border-radius:6px;padding:15px 20px;margin-bottom:12px;">
                <h4 style="margin-top:0;color:#4338ca;">Step E — Enable Context-Aware Pre-Selection</h4>
                <p>Under <strong>Context-Aware Modal</strong>:</p>
                <ul>
                    <li>Tick <strong>Auto-Select Current Post's Categories</strong> — when a visitor is on a post, its categories are pre-checked in the modal.</li>
                    <li>Tick <strong>Auto-Select Current Post's Tags</strong> — same for tags.</li>
                </ul>
                <p><em>Example: A visitor reads a post in "Sports" tagged "Hockey". Both checkboxes are pre-ticked when the modal opens, with a <strong>current</strong> label — they can confirm or adjust before subscribing.</em></p>
                <p>This works for both the shortcode button and the floating button / auto-open modal.</p>
            </div>

            <!-- Step F -->
            <div style="background:#f0f4ff;border:1px solid #c7d2fe;border-radius:6px;padding:15px 20px;margin-bottom:12px;">
                <h4 style="margin-top:0;color:#4338ca;">Step F — Logged-In User Experience</h4>
                <p>Under <strong>Logged-In User Experience</strong>:</p>
                <ul>
                    <li>Tick <strong>Hide Name & Email Fields for Logged-In Users</strong> — when a logged-in user opens the modal, their name and email are passed silently in hidden fields. The modal opens directly on the category/tag/plan step with a personalized greeting (e.g. <em>"Hi John! Choose what you'd like to follow below."</em>).</li>
                </ul>
                <p>This setting is enabled by default. Disable it only if you want logged-in users to confirm their details each time.</p>
            </div>

            <!-- Step G -->
            <div style="background:#f0f4ff;border:1px solid #c7d2fe;border-radius:6px;padding:15px 20px;margin-bottom:12px;">
                <h4 style="margin-top:0;color:#4338ca;">Step G — Save Settings & Verify</h4>
                <ol>
                    <li>Click <strong>Save Settings</strong> on the Subscribe Button & Modal settings tab.</li>
                    <li>Visit any post or page that matches your Display Settings in a new browser tab.</li>
                    <li>Confirm the floating button appears and/or the modal auto-opens after the configured delay.</li>
                    <li>Open the modal and verify the categories/tags are pre-selected if context-awareness is on.</li>
                    <li>Submit a test subscription (use a real or test email) and confirm the row appears in <strong>Subscriptions → Interest Subscribers</strong>.</li>
                </ol>
                <p style="margin-bottom:0;"><a href="<?php echo esc_url( admin_url('admin.php?page=subscription-interest-subscribers') ); ?>" class="button">View Interest Subscribers →</a></p>
            </div>

            <!-- Shortcode Reference -->
            <h3>Shortcode Reference</h3>
            <h4>[subscriptionsystem_subscribe]</h4>
            <div class="shortcode-box">
                [subscriptionsystem_subscribe]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_subscribe]')">Copy</button>
            </div>
            <p>Renders an inline subscribe button that opens the interest-subscription modal when clicked. Place it anywhere in a post, page, or widget.</p>

            <h4>Optional attributes</h4>
            <div class="shortcode-box">
                [subscriptionsystem_subscribe button_text="Join Now" button_class="my-custom-class"]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_subscribe button_text=&quot;Join Now&quot; button_class=&quot;my-custom-class&quot;]')">Copy</button>
            </div>
            <table style="width:100%;border-collapse:collapse;margin-top:8px;">
                <thead>
                    <tr style="background:#e0e7ff;">
                        <th style="padding:8px 10px;border:1px solid #c7d2fe;text-align:left;">Attribute</th>
                        <th style="padding:8px 10px;border:1px solid #c7d2fe;text-align:left;">Default</th>
                        <th style="padding:8px 10px;border:1px solid #c7d2fe;text-align:left;">Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;font-family:monospace;">button_text</td>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Subscribe</td>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">The visible label of the button.</td>
                    </tr>
                    <tr>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;font-family:monospace;">button_class</td>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;"><em>(empty)</em></td>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Extra CSS class(es) added to the button element for custom styling.</td>
                    </tr>
                </tbody>
            </table>

            <!-- Notification Flow -->
            <h3>Email Notification Flow (When New Content Is Published)</h3>
            <ol>
                <li>Admin publishes a new post.</li>
                <li>The system reads the post's categories and tags.</li>
                <li>It queries the <strong>interest subscribers</strong> table for active subscriptions that overlap with those categories or tags.</li>
                <li>A matching email is sent to each qualifying subscriber — subject line includes the site name and post title; body includes an excerpt and a "Read more" link.</li>
                <li>Unmatched subscribers receive no email for that post.</li>
            </ol>
            <p><strong>From name / From email:</strong> Controlled by <strong>Subscriptions → Settings → Communication</strong> (same as all other notification emails).</p>

            <!-- Troubleshooting -->
            <h3>Troubleshooting</h3>
            <table style="width:100%;border-collapse:collapse;">
                <thead>
                    <tr style="background:#e0e7ff;">
                        <th style="padding:8px 10px;border:1px solid #c7d2fe;text-align:left;">Problem</th>
                        <th style="padding:8px 10px;border:1px solid #c7d2fe;text-align:left;">Likely Cause &amp; Fix</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Modal does not appear</td>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Check that the current page type matches the <strong>Display Settings</strong>. Also verify that at least one active plan exists in <strong>Subscriptions → Plans</strong>.</td>
                    </tr>
                    <tr>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">No plans shown in modal</td>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Go to <strong>Subscriptions → Plans</strong> and ensure at least one plan has <strong>Status = Active</strong>.</td>
                    </tr>
                    <tr>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Floating button overlaps content</td>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Change the <strong>Floating Button Position</strong> to Bottom Left or Bottom Center, or add custom CSS to reposition it.</td>
                    </tr>
                    <tr>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Categories/tags not pre-selected</td>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Context-aware pre-selection only works on <strong>single post</strong> views. Archive, home, and page views do not have post-level taxonomy data.</td>
                    </tr>
                    <tr>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Logged-in user still sees name/email fields</td>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Make sure <strong>"Hide Name & Email Fields for Logged-In Users"</strong> is ticked in the Subscribe Button & Modal settings.</td>
                    </tr>
                    <tr>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Subscribers not receiving emails</td>
                        <td style="padding:8px 10px;border:1px solid #c7d2fe;">Verify <strong>Email Notifications</strong> are enabled in <strong>Communication Settings</strong> and your SMTP is configured correctly. Check the <strong>Email Logs</strong> page for bounce or error details.</td>
                    </tr>
                </tbody>
            </table>

        </div>

        <!-- Email Notifications -->
        <div class="help-section" id="email-notifications">
            <h2>📧 Email Notifications</h2>
            
            <h3>Email Features</h3>
            <ul class="feature-list">
                <li><strong>Medium.com Style Design:</strong> Beautiful, professional email templates</li>
                <li><strong>SMTP Integration:</strong> Reliable delivery via SendGrid, Gmail, Mailgun</li>
                <li><strong>Responsive Design:</strong> Works on all devices and email clients</li>
                <li><strong>Dark Mode Support:</strong> Automatically adapts to user preferences</li>
                <li><strong>Unsubscribe Links:</strong> Compliant unsubscribe functionality</li>
            </ul>

            <h3>SMTP Configuration</h3>
            <p>For reliable email delivery, configure SMTP settings:</p>
            <div class="help-grid">
                <div class="help-card">
                    <h4>📮 SendGrid (Recommended)</h4>
                    <ul>
                        <li>Host: smtp.sendgrid.net</li>
                        <li>Port: 587 (TLS)</li>
                        <li>Username: apikey</li>
                        <li>Password: Your SendGrid API key</li>
                    </ul>
                </div>
                
                <div class="help-card">
                    <h4>📮 Gmail</h4>
                    <ul>
                        <li>Host: smtp.gmail.com</li>
                        <li>Port: 587 (TLS)</li>
                        <li>Username: your-email@gmail.com</li>
                        <li>Password: App-specific password</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Shortcodes -->
        <div class="help-section" id="shortcodes">
            <h2>📋 Available Shortcodes</h2>
            
            <h3>Account & User Management</h3>
            
            <h4>[subscriptionsystem_account]</h4>
            <div class="shortcode-box">
                [subscriptionsystem_account]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_account]')">Copy</button>
            </div>
            <p>Displays the complete user account dashboard with active subscriptions, content subscriptions, billing history, and account management.</p>

            <h4>[subscriptionsystem_login]</h4>
            <div class="shortcode-box">
                [subscriptionsystem_login]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_login]')">Copy</button>
            </div>
            <p>Displays the login form for existing users.</p>

            <h4>[subscriptionsystem_register]</h4>
            <div class="shortcode-box">
                [subscriptionsystem_register]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_register]')">Copy</button>
            </div>
            <p>Displays the user registration form.</p>

            <h4>[subscriptionsystem_forgot_password]</h4>
            <div class="shortcode-box">
                [subscriptionsystem_forgot_password]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_forgot_password]')">Copy</button>
            </div>
            <p>Displays the password reset form.</p>

            <h3>Subscription Plans & Pricing</h3>

            <h4>[subscriptionsystem_plans]</h4>
            <div class="shortcode-box">
                [subscriptionsystem_plans layout="1"]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_plans layout=&quot;1&quot;]')">Copy</button>
            </div>
            <p>Displays subscription plans with pricing. Available layouts: 1, 2, 3</p>

            <h4>[subscriptionsystem_plan]</h4>
            <div class="shortcode-box">
                [subscriptionsystem_plan id="1"]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_plan id=&quot;1&quot;]')">Copy</button>
            </div>
            <p>Displays a specific subscription plan by ID.</p>

            <h3>Success & Status Pages</h3>

            <h4>[subscriptionsystem_success]</h4>
            <div class="shortcode-box">
                [subscriptionsystem_success]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_success]')">Copy</button>
            </div>
            <p>Displays the subscription success page after successful payment.</p>

            <h4>[content_subscription_success]</h4>
            <div class="shortcode-box">
                [content_subscription_success]
                <button class="copy-button" onclick="copyToClipboard('[content_subscription_success]')">Copy</button>
            </div>
            <p>Displays the content subscription success page with plan details and next steps.</p>

            <h3>Interest / Category-Tag Subscriptions</h3>

            <h4>[subscriptionsystem_subscribe]</h4>
            <div class="shortcode-box">
                [subscriptionsystem_subscribe]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_subscribe]')">Copy</button>
            </div>
            <p>Renders an inline button that opens the interest-subscription popup modal. When clicked, users can pick which categories and tags they want to follow, choose a plan, and subscribe — all without leaving the page.</p>

            <div class="shortcode-box">
                [subscriptionsystem_subscribe button_text="Follow This Topic" button_class="my-btn"]
                <button class="copy-button" onclick="copyToClipboard('[subscriptionsystem_subscribe button_text=&quot;Follow This Topic&quot; button_class=&quot;my-btn&quot;]')">Copy</button>
            </div>
            <p><strong>Attributes:</strong> <code>button_text</code> (default: "Subscribe") — label shown on the button. <code>button_class</code> (default: empty) — additional CSS classes on the button element.</p>
            <p>For floating button and auto-open trigger configuration, see <a href="#interest-subscribe-modal">Subscribe Button & Modal Settings</a>.</p>
        </div>

        <!-- Payment Integration -->
        <div class="help-section" id="payment-integration">
            <h2>💳 Payment Integration (Stripe)</h2>
            
            <h3>Stripe Setup</h3>
            <ol>
                <li>Create Stripe account at stripe.com</li>
                <li>Get API keys from Stripe dashboard</li>
                <li>Configure webhook endpoint: <code>yoursite.com/wp-json/subscription-system/v1/stripe-webhook</code></li>
                <li>Add webhook events: customer.subscription.updated, customer.subscription.deleted, invoice.payment_succeeded, invoice.payment_failed</li>
            </ol>

            <h3>Payment Flow</h3>
            <ol>
                <li><strong>User Selection:</strong> User chooses subscription plan</li>
                <li><strong>Stripe Checkout:</strong> Secure payment form via Stripe</li>
                <li><strong>Payment Processing:</strong> Stripe handles payment securely</li>
                <li><strong>Webhook Confirmation:</strong> Stripe confirms successful payment</li>
                <li><strong>Access Granted:</strong> User gains immediate access to subscribed content</li>
            </ol>
        </div>

        <!-- User Features -->
        <div class="help-section" id="user-features">
            <h2>👤 User Features</h2>
            
            <h3>Account Dashboard</h3>
            <ul class="feature-list">
                <li><strong>Active Subscriptions:</strong> View all current subscriptions</li>
                <li><strong>Content Subscriptions:</strong> Manage content plan subscriptions</li>
                <li><strong>Billing History:</strong> View payment history and receipts</li>
                <li><strong>Account Settings:</strong> Update profile information</li>
                <li><strong>Subscription Management:</strong> Pause, resume, or cancel subscriptions</li>
            </ul>

            <h3>Content Subscription Features</h3>
            <ul class="feature-list">
                <li><strong>Smart Pop-ups:</strong> Contextual subscription offers</li>
                <li><strong>Remind Me Later:</strong> Flexible reminder options</li>
                <li><strong>Email Notifications:</strong> Beautiful email alerts for new content</li>
                <li><strong>Easy Unsubscribe:</strong> One-click unsubscribe from emails</li>
            </ul>
        </div>

        <!-- Admin Features -->
        <div class="help-section" id="admin-features">
            <h2>🛠️ Admin Features</h2>
            
            <h3>Dashboard & Analytics</h3>
            <ul class="feature-list">
                <li><strong>Subscription Dashboard:</strong> Overview of all subscriptions and revenue</li>
                <li><strong>Content Subscribers:</strong> Manage content subscription subscribers</li>
                <li><strong>Revenue Tracking:</strong> Monitor subscription income</li>
                <li><strong>User Management:</strong> View and manage subscriber accounts</li>
            </ul>

            <h3>Content Management</h3>
            <ul class="feature-list">
                <li><strong>Plan Categories:</strong> Organize subscription plans</li>
                <li><strong>Content Plans:</strong> Create category/tag/post type subscriptions</li>
                <li><strong>Email Templates:</strong> Customize notification emails</li>
                <li><strong>Bulk Actions:</strong> Manage multiple subscribers at once</li>
            </ul>

            <h3>Settings & Configuration</h3>
            <ul class="feature-list">
                <li><strong>Payment Settings:</strong> Configure Stripe integration</li>
                <li><strong>Email Settings:</strong> SMTP configuration and templates</li>
                <li><strong>Page Settings:</strong> Assign pages for different functions</li>
                <li><strong>Communication Settings:</strong> Control email notifications</li>
                <li><strong>Subscribe Button & Modal:</strong> Configure triggers (floating button, auto-open, shortcode), display rules, context-awareness, and logged-in UX for the interest-based subscription modal</li>
            </ul>
        </div>

        <!-- Troubleshooting -->
        <div class="help-section" id="troubleshooting">
            <h2>🔧 Troubleshooting</h2>
            
            <h3>Common Issues</h3>
            
            <h4>Emails Not Sending</h4>
            <ul>
                <li>Check SMTP configuration in Communication Settings</li>
                <li>Test SMTP connection using the built-in test tool</li>
                <li>Verify email notifications are enabled</li>
                <li>Check debug log for error messages</li>
            </ul>

            <h4>Subscription Not Working</h4>
            <ul>
                <li>Verify Stripe API keys are correct</li>
                <li>Check webhook endpoint is configured</li>
                <li>Ensure subscription plans are active</li>
                <li>Test payment flow in Stripe test mode</li>
            </ul>

            <h4>Pop-up Not Showing</h4>
            <ul>
                <li>Check if content plans exist for the page type</li>
                <li>Verify plans are active and properly configured</li>
                <li>Clear browser cache and check for JavaScript errors</li>
                <li>Ensure user is not already subscribed</li>
            </ul>

            <h3>Debug Information</h3>
            <p>Enable WordPress debugging by adding these lines to wp-config.php:</p>
            <div class="shortcode-box">
                define('WP_DEBUG', true);<br>
                define('WP_DEBUG_LOG', true);
            </div>
            <p>Check debug logs at: <code>/wp-content/debug.log</code></p>
        </div>

    </div>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        // Show temporary success message
        const button = event.target;
        const originalText = button.textContent;
        button.textContent = 'Copied!';
        button.style.background = '#28a745';
        
        setTimeout(function() {
            button.textContent = originalText;
            button.style.background = '#1a8917';
        }, 2000);
    });
}

// Smooth scrolling for table of contents links
document.querySelectorAll('.toc a').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});
</script>