<?php

/**
 * Provide a admin area view for the plugin support
 *
 * This file is used to markup the admin-facing support page of the plugin.
 *
 * @link       https://pinnerpress.com
 * @since      0.1.0
 *
 * @package    PinnerPress
 * @subpackage PinnerPress/admin/partials
 */

// If this file is called directly, abort.
if (!defined('WPINC')) {
    die;
}

// Check if user has premium access
$is_premium = function_exists('pinnerpress_is_premium') ? pinnerpress_is_premium() : false;
?>

<div class="wrap pinnerpress-admin">
    <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
    
    <div class="pinnerpress-admin-header">
        <div class="pinnerpress-logo">
            <img src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/pinnerpress-logo.png'); ?>" alt="<?php echo esc_attr__('PinnerPress Logo', 'pinnerpress'); ?>">
        </div>
        <div class="pinnerpress-header-content">
            <h2><?php esc_html_e('PinnerPress Support', 'pinnerpress'); ?></h2>
            <p><?php esc_html_e('Get help with PinnerPress and maximize your Pinterest marketing success.', 'pinnerpress'); ?></p>
        </div>
    </div>
    
    <div class="pinnerpress-admin-content">
        <?php if (!$is_premium): ?>
            <?php 
            // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Function returns properly escaped HTML
            echo pinnerpress_get_upgrade_notification(); 
            ?>
        <?php endif; ?>
        <div class="pinnerpress-card">
            <h3><?php esc_html_e('Quick Start Guide', 'pinnerpress'); ?></h3>
            <ol>
                <li><?php 
                /* translators: %s: Link to plugin settings */
                printf(esc_html__('Configure your %s to set up your Pinterest account details', 'pinnerpress'), '<a href="' . esc_url(admin_url('admin.php?page=pinnerpress-settings&tab=general')) . '">' . esc_html__('General Settings', 'pinnerpress') . '</a>'); ?></li>
                <li><?php 
                /* translators: %s: Link to pin button settings */
                printf(esc_html__('Customize your %s appearance and behavior', 'pinnerpress'), '<a href="' . esc_url(admin_url('admin.php?page=pinnerpress-settings&tab=settings')) . '">' . esc_html__('Pin It buttons', 'pinnerpress') . '</a>'); ?></li>
                <li><?php 
                /* translators: %s: Link to follow box settings */
                printf(esc_html__('Set up your %s to grow your Pinterest following', 'pinnerpress'), '<a href="' . esc_url(admin_url('admin.php?page=pinnerpress-settings&tab=follow_box')) . '">' . esc_html__('Follow Box', 'pinnerpress') . '</a>'); ?></li>
                <li><?php 
                /* translators: %s: Link to analytics */
                printf(esc_html__('Monitor your performance with %s', 'pinnerpress'), '<a href="' . esc_url(admin_url('admin.php?page=pinnerpress')) . '">' . esc_html__('Dashboard', 'pinnerpress') . '</a>'); ?></li>
            </ol>
        </div>
        
        <div class="pinnerpress-card">
            <h3><?php esc_html_e('Feature Overview', 'pinnerpress'); ?></h3>
            <div class="pinnerpress-feature-grid">
                <div class="pinnerpress-feature-item">
                    <h4><?php esc_html_e('Pin It Buttons', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Automatically add customizable Pin It buttons to your images. Choose from different positions, sizes, and styles to match your site design.', 'pinnerpress'); ?></p>
                </div>
                <div class="pinnerpress-feature-item">
                    <h4><?php esc_html_e('Follow Box', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Display a Pinterest follow popup to grow your audience. Customize the appearance and control when it appears to maximize conversions.', 'pinnerpress'); ?></p>
                </div>
                <div class="pinnerpress-feature-item">
                    <h4><?php esc_html_e('Image Banners', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Add eye-catching overlay banners to your images that encourage pinning. Fully customizable text, colors, and opacity.', 'pinnerpress'); ?></p>
                </div>
                <div class="pinnerpress-feature-item">
                    <h4><?php esc_html_e('Block Editor Integration', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Set custom Pinterest titles and descriptions directly in the WordPress block editor for optimized pin content.', 'pinnerpress'); ?></p>
                </div>
                <div class="pinnerpress-feature-item">
                    <h4><?php esc_html_e('Analytics Tracking', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Monitor pin button clicks, follow box interactions, and other engagement metrics to optimize your Pinterest strategy.', 'pinnerpress'); ?></p>
                </div>
                <div class="pinnerpress-feature-item">
                    <h4><?php esc_html_e('Follow Button Block', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Add Pinterest follow buttons anywhere on your site using the dedicated Gutenberg block or widget.', 'pinnerpress'); ?></p>
                </div>
            </div>
        </div>
        
        <div class="pinnerpress-card">
            <h3><?php esc_html_e('Troubleshooting', 'pinnerpress'); ?></h3>
            <div class="pinnerpress-faq">
                <div class="pinnerpress-faq-item">
                    <h4><?php esc_html_e('Pin buttons are not appearing on my images', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Check that Pin It buttons are enabled in your settings and that your theme uses standard WordPress image markup. The plugin targets images with the wp-image class in block editor content.', 'pinnerpress'); ?></p>
                </div>
                <div class="pinnerpress-faq-item">
                    <h4><?php esc_html_e('Follow box is not showing up', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Ensure the Follow Box is enabled in settings and check your display conditions. The follow box respects user cookies and won\'t show again if dismissed.', 'pinnerpress'); ?></p>
                </div>
                <div class="pinnerpress-faq-item">
                    <h4><?php esc_html_e('Analytics data is not being recorded', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Verify that analytics is enabled in your General settings. If the analytics table is missing, visit the Analytics page to initialize the system.', 'pinnerpress'); ?></p>
                </div>
            </div>
        </div>
        
        <div class="pinnerpress-card">
            <h3><?php esc_html_e('Get Additional Help', 'pinnerpress'); ?></h3>
            <div class="pinnerpress-support-links">
                <div class="pinnerpress-support-item">
                    <h4><?php esc_html_e('Documentation', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Comprehensive guides and tutorials for all PinnerPress features.', 'pinnerpress'); ?></p>
                    <a href="https://pinnerpress.com/" target="_blank" class="button button-secondary"><?php esc_html_e('View Documentation', 'pinnerpress'); ?></a>
                </div>
                <div class="pinnerpress-support-item">
                    <h4><?php esc_html_e('Contact Support', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Get personalized help from our support team for technical issues.', 'pinnerpress'); ?></p>
                    <a href="https://pinnerpress.com/contact.html" target="_blank" class="button button-secondary"><?php esc_html_e('Contact Support', 'pinnerpress'); ?></a>
                </div>

                <div class="pinnerpress-support-item">
                    <h4><?php esc_html_e('Portal', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Manage your account.', 'pinnerpress'); ?></p>
                    <a href="https://pinnerpress.com/portal/users/" target="_blank" class="button button-secondary"><?php esc_html_e('Contact Support', 'pinnerpress'); ?></a>
                </div>

                
            </div>
        </div>
        
        <div class="pinnerpress-card">
            <h3><?php esc_html_e('System Information', 'pinnerpress'); ?></h3>
            <div class="pinnerpress-system-info">
                <table class="widefat">
                    <tbody>
                        <tr>
                            <td><strong><?php esc_html_e('Plugin Version:', 'pinnerpress'); ?></strong></td>
                            <td><?php echo esc_html(defined('PINNERPRESS_VERSION') ? PINNERPRESS_VERSION : 'Unknown'); ?></td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('WordPress Version:', 'pinnerpress'); ?></strong></td>
                            <td><?php echo esc_html(get_bloginfo('version')); ?></td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('PHP Version:', 'pinnerpress'); ?></strong></td>
                            <td><?php echo esc_html(PHP_VERSION); ?></td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('Analytics Enabled:', 'pinnerpress'); ?></strong></td>
                            <td><?php echo get_option('pinnerpress_analytics_enabled', '1') === '1' ? esc_html__('Yes', 'pinnerpress') : esc_html__('No', 'pinnerpress'); ?></td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('Pin Buttons Enabled:', 'pinnerpress'); ?></strong></td>
                            <td><?php echo get_option('pinnerpress_pin_button_status', 'on') === 'on' ? esc_html__('Yes', 'pinnerpress') : esc_html__('No', 'pinnerpress'); ?></td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('Follow Box Enabled:', 'pinnerpress'); ?></strong></td>
                            <td><?php echo get_option('pinnerpress_follow_box_status', 'off') === 'on' ? esc_html__('Yes', 'pinnerpress') : esc_html__('No', 'pinnerpress'); ?></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
.pinnerpress-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.pinnerpress-feature-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 20px;
}

.pinnerpress-feature-item h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #E60023;
}

.pinnerpress-faq-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.pinnerpress-faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pinnerpress-faq-item h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #E60023;
}

.pinnerpress-support-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.pinnerpress-support-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
}

.pinnerpress-support-item h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #E60023;
}

.pinnerpress-support-item p {
    margin-bottom: 15px;
}

.pinnerpress-system-info table {
    margin-top: 15px;
}

.pinnerpress-system-info td {
    padding: 8px 12px;
}

.pinnerpress-analytics-limitation {
    border-left: 4px solid #E60023;
    padding: 12px;
    background-color: #fef4f4;
    margin: 20px 0;
}

.pinnerpress-analytics-limitation h4 {
    margin-top: 0;
    color: #E60023;
}

.pinnerpress-analytics-limitation p {
    margin-bottom: 10px;
}
</style> 