<?php
// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

// Check if user has required capabilities
if (!current_user_can('manage_options')) {
    wp_die(esc_html__('You do not have sufficient permissions to access this page.', 'text-to-speech-tts'));
}

// Check if API key is set
$has_api_key = !empty(get_option('mementor_tts_api_key'));

// Check if user has a paid plan via SaaS
$is_pro_active = ttswp_has_paid_plan();
?>

<?php 
// Include header branding
require_once MEMENTOR_TTS_PLUGIN_DIR . 'admin/partials/header-branding.php';
?>
<div class="wrap">
<div class="mementor-tts-header-layout">
    <h1>
        <img src="<?php echo esc_url($white_label_logo); ?>" alt="<?php echo esc_attr($white_label_name); ?>" class="mementor-tts-header-logo">
        <?php echo esc_html($white_label_name . ' - ' . __('Shortcodes', 'text-to-speech-tts')); ?>
    </h1>
</div>
    <?php include(MEMENTOR_TTS_PLUGIN_DIR . 'admin/partials/navigation.php'); ?>
    <div class="mementor-tts-wrap">
        <div class="mementor-tts-main full-width">
            <div class="mementor-tts-section-header">
                <h2><?php esc_html_e('Shortcodes', 'text-to-speech-tts'); ?></h2>
                <p class="description"><?php esc_html_e('Use these shortcodes to add text-to-speech functionality to your content.', 'text-to-speech-tts'); ?></p>
            </div>
            <div>
            <!-- Basic Shortcode -->
            <div class="mementor-tts-shortcode-card">
                <div class="mementor-tts-shortcode-header">
                    <h3><?php esc_html_e('Basic Usage', 'text-to-speech-tts'); ?></h3>
                </div>
                <div class="mementor-tts-shortcode-content">
                    <div class="mementor-tts-shortcode-code">
                        <code>[mementor-tts]Your text here[/mementor-tts]</code>
                        <button class="mementor-tts-copy-button" data-clipboard="[mementor-tts]Your text here[/mementor-tts]">
                            <span class="dashicons dashicons-clipboard"></span>
                        </button>
                    </div>
                    <p class="mementor-tts-shortcode-description"><?php esc_html_e('This shortcode converts the enclosed text into speech using the default settings. After adding it to your content, click the play button to generate the audio. You only need to do this once per shortcode. After that, the audio is ready to play anytime.', 'text-to-speech-tts'); ?></p>
                </div>
            </div>

            <!-- Advanced Shortcode -->
             <!-- Shortcode Parameters -->
            <div class="mementor-tts-shortcode-card">
                <div class="mementor-tts-shortcode-header">
                    <h3><?php esc_html_e('Available Parameters', 'text-to-speech-tts'); ?></h3>
                </div>
                <div class="mementor-tts-shortcode-content">
                    <div class="mementor-tts-parameters-table">
                        <div class="mementor-tts-parameter-row header">
                            <div class="mementor-tts-parameter-name"><?php esc_html_e('Parameter', 'text-to-speech-tts'); ?></div>
                            <div class="mementor-tts-parameter-description"><?php esc_html_e('Description', 'text-to-speech-tts'); ?></div>
                            <div class="mementor-tts-parameter-example"><?php esc_html_e('Example', 'text-to-speech-tts'); ?></div>
                        </div>
                        <div class="mementor-tts-parameter-row">
                            <div class="mementor-tts-parameter-name">label</div>
                            <div class="mementor-tts-parameter-description"><?php esc_html_e('Whether to show the label above a player.', 'text-to-speech-tts'); ?></div>
                            <div class="mementor-tts-parameter-example"><code>label="yes"</code> or <code>label="no"</code></div>
                        </div>
                        <div class="mementor-tts-parameter-row">
                            <div class="mementor-tts-parameter-name">time_display</div>
                            <div class="mementor-tts-parameter-description">
                                <?php esc_html_e('Whether to show the time display in the player.', 'text-to-speech-tts'); ?>
                                <?php if (!$is_pro) : ?>
                                <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="mementor-tts-parameter-example"><code>time_display="yes"</code> or <code>time_display="no"</code></div>
                        </div>
                        <div class="mementor-tts-parameter-row">
                            <div class="mementor-tts-parameter-name">speed_control</div>
                            <div class="mementor-tts-parameter-description">
                                <?php esc_html_e('Whether to show the speed control in the player.', 'text-to-speech-tts'); ?>
                                <?php if (!$is_pro) : ?>
                                <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="mementor-tts-parameter-example"><code>speed_control="yes"</code> or <code>speed_control="no"</code></div>
                        </div>
                        <div class="mementor-tts-parameter-row">
                            <div class="mementor-tts-parameter-name">volume_control</div>
                            <div class="mementor-tts-parameter-description">
                                <?php esc_html_e('Whether to show the volume control in the player.', 'text-to-speech-tts'); ?>
                                <?php if (!$is_pro) : ?>
                                <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="mementor-tts-parameter-example"><code>volume_control="yes"</code> or <code>volume_control="no"</code></div>
                        </div>
                        <div class="mementor-tts-parameter-row">
                            <div class="mementor-tts-parameter-name">download</div>
                            <div class="mementor-tts-parameter-description">
                                <?php esc_html_e('Whether to show the download icon in the player.', 'text-to-speech-tts'); ?>
                                <?php if (!$is_pro) : ?>
                                <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="mementor-tts-parameter-example"><code>download="yes"</code> or <code>download="no"</code></div>
                        </div>
                        <div class="mementor-tts-parameter-row">
                            <div class="mementor-tts-parameter-name">autoplay</div>
                            <div class="mementor-tts-parameter-description">
                                <?php esc_html_e('Whether to automatically play the audio when the page loads.', 'text-to-speech-tts'); ?>
                                <?php if (!$is_pro) : ?>
                                <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="mementor-tts-parameter-example"><code>autoplay="yes"</code> or <code>autoplay="no"</code></div>
                        </div>
                        <div class="mementor-tts-parameter-row">
                            <div class="mementor-tts-parameter-name">loop</div>
                            <div class="mementor-tts-parameter-description">
                                <?php esc_html_e('Whether to loop the audio playback.', 'text-to-speech-tts'); ?>
                                <?php if (!$is_pro) : ?>
                                <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="mementor-tts-parameter-example"><code>loop="yes"</code> or <code>loop="no"</code></div>
                        </div>
                        <div class="mementor-tts-parameter-row">
                            <div class="mementor-tts-parameter-name">information</div>
                            <div class="mementor-tts-parameter-description">
                                <?php esc_html_e('Whether to show the information icon in the player.', 'text-to-speech-tts'); ?>
                                <?php if (!$is_pro) : ?>
                                <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="mementor-tts-parameter-example"><code>information="yes"</code> or <code>information="no"</code></div>
                        </div>
                        <div class="mementor-tts-parameter-row">
                            <div class="mementor-tts-parameter-name">voice_id</div>
                            <div class="mementor-tts-parameter-description">
                                <?php esc_html_e('Specify a custom voice ID to use for the audio. You can find voice ID\'s in the Audio & Voices page.', 'text-to-speech-tts'); ?>
                                <?php if (!$is_pro) : ?>
                                <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="mementor-tts-parameter-example"><code>voice_id="custom_voice_id"</code></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- Shortcode Generator Section -->
    <div class="mementor-tts-section mementor-tts-shortcode-generator">
        <div class="mementor-tts-section-header">
            <h2>
                <?php esc_html_e('Shortcode Generator', 'text-to-speech-tts'); ?>
            </h2>
        </div>
        <div class="mementor-tts-section-content">
            <?php if (!$is_pro) : ?>
            <div class="mementor-tts-demo-notice">
                <p><span class="dashicons dashicons-info"></span> <?php esc_html_e('Basic shortcodes functions work in the free version, but advanced parameters (marked with PRO) require the premium version.', 'text-to-speech-tts'); ?></p>
            </div>
            <?php endif; ?>
            
            <div class="mementor-tts-generator-form">
                <?php wp_nonce_field('mementor_tts_shortcode_generator', 'mementor_tts_shortcode_nonce'); ?>
                
                <div class="mementor-tts-generator-main">
                    <!-- Text Input Section -->
                    <div class="mementor-tts-text-section">
                        <label for="shortcode_text"><?php esc_html_e('Text:', 'text-to-speech-tts'); ?></label>
                        <textarea id="shortcode_text" placeholder="<?php echo esc_attr__('Enter the text you want to convert to speech', 'text-to-speech-tts'); ?>"></textarea>
                    </div>
                    
                    <!-- Player Options Section -->
                    <div class="mementor-tts-generator-options">
                        <h4><?php esc_html_e('Player Options:', 'text-to-speech-tts'); ?></h4>
                        
                        <div class="mementor-tts-generator-grid">
                            <!-- Show Label Toggle -->
                            <div class="mementor-tts-generator-option">
                                <div class="mementor-tts-toggle">
                                    <label for="shortcode_show_label"><?php esc_html_e('Show Label', 'text-to-speech-tts'); ?></label>
                                    <label class="mementor-tts-switch">
                                        <input type="checkbox" id="shortcode_show_label" checked>
                                        <span class="mementor-tts-slider"></span>
                                    </label>
                                </div>
                            </div>

                            <!-- Time Display Toggle -->
                            <div class="mementor-tts-generator-option">
                                <div class="mementor-tts-toggle">
                                    <label for="shortcode_time_display">
                                        <?php esc_html_e('Time Display', 'text-to-speech-tts'); ?>
                                        <?php if (!$is_pro) : ?>
                                        <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                        <?php endif; ?>
                                    </label>
                                    <label class="mementor-tts-switch">
                                        <input type="checkbox" id="shortcode_time_display" checked <?php echo (!$is_pro) ? 'disabled' : ''; ?>>
                                        <span class="mementor-tts-slider"></span>
                                    </label>
                                </div>
                            </div>

                            <!-- Speed Control Toggle -->
                            <div class="mementor-tts-generator-option">
                                <div class="mementor-tts-toggle">
                                    <label for="shortcode_speed">
                                        <?php esc_html_e('Speed Control', 'text-to-speech-tts'); ?>
                                        <?php if (!$is_pro) : ?>
                                        <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                        <?php endif; ?>
                                    </label>
                                    <label class="mementor-tts-switch">
                                        <input type="checkbox" id="shortcode_speed" checked <?php echo (!$is_pro) ? 'disabled' : ''; ?>>
                                        <span class="mementor-tts-slider"></span>
                                    </label>
                                </div>
                            </div>

                            <!-- Volume Control Toggle -->
                            <div class="mementor-tts-generator-option">
                                <div class="mementor-tts-toggle">
                                    <label for="shortcode_volume">
                                        <?php esc_html_e('Volume Control', 'text-to-speech-tts'); ?>
                                        <?php if (!$is_pro) : ?>
                                        <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                        <?php endif; ?>
                                    </label>
                                    <label class="mementor-tts-switch">
                                        <input type="checkbox" id="shortcode_volume" checked <?php echo (!$is_pro) ? 'disabled' : ''; ?>>
                                        <span class="mementor-tts-slider"></span>
                                    </label>
                                </div>
                            </div>

                            <!-- Download Icon Toggle -->
                            <div class="mementor-tts-generator-option">
                                <div class="mementor-tts-toggle">
                                    <label for="shortcode_download">
                                        <?php esc_html_e('Download Icon', 'text-to-speech-tts'); ?>
                                        <?php if (!$is_pro) : ?>
                                        <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                        <?php endif; ?>
                                    </label>
                                    <label class="mementor-tts-switch">
                                        <input type="checkbox" id="shortcode_download" <?php echo (!$is_pro) ? 'disabled' : ''; ?>>
                                        <span class="mementor-tts-slider"></span>
                                    </label>
                                </div>
                            </div>

                            <!-- Autoplay Toggle -->
                            <div class="mementor-tts-generator-option">
                                <div class="mementor-tts-toggle">
                                    <label for="shortcode_autoplay">
                                        <?php esc_html_e('Autoplay', 'text-to-speech-tts'); ?>
                                        <?php if (!$is_pro) : ?>
                                        <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                        <?php endif; ?>
                                    </label>
                                    <label class="mementor-tts-switch">
                                        <input type="checkbox" id="shortcode_autoplay" <?php echo (!$is_pro) ? 'disabled' : ''; ?>>
                                        <span class="mementor-tts-slider"></span>
                                    </label>
                                </div>
                            </div>

                            <!-- Loop Toggle -->
                            <div class="mementor-tts-generator-option">
                                <div class="mementor-tts-toggle">
                                    <label for="shortcode_loop">
                                        <?php esc_html_e('Loop', 'text-to-speech-tts'); ?>
                                        <?php if (!$is_pro) : ?>
                                        <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                        <?php endif; ?>
                                    </label>
                                    <label class="mementor-tts-switch">
                                        <input type="checkbox" id="shortcode_loop" <?php echo (!$is_pro) ? 'disabled' : ''; ?>>
                                        <span class="mementor-tts-slider"></span>
                                    </label>
                                </div>
                            </div>

                            <!-- Information Icon Toggle -->
                            <div class="mementor-tts-generator-option">
                                <div class="mementor-tts-toggle">
                                    <label for="shortcode_information">
                                        <?php esc_html_e('Information Icon', 'text-to-speech-tts'); ?>
                                        <?php if (!$is_pro) : ?>
                                        <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                        <?php endif; ?>
                                    </label>
                                    <label class="mementor-tts-switch">
                                        <input type="checkbox" id="shortcode_information" checked <?php echo (!$is_pro) ? 'disabled' : ''; ?>>
                                        <span class="mementor-tts-slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Voice ID Section -->
                        <div class="mementor-tts-voice-section">
                            <label for="shortcode_voice_id">
                                <?php esc_html_e('Custom Voice ID', 'text-to-speech-tts'); ?>
                                <?php if (!$is_pro) : ?>
                                <span class="mementor-tts-pro-label"><?php esc_html_e('PRO', 'text-to-speech-tts'); ?></span>
                                <?php endif; ?>
                            </label>
                            <input type="text" id="shortcode_voice_id" placeholder="<?php echo esc_attr__('Enter voice ID (optional)', 'text-to-speech-tts'); ?>" class="regular-text" <?php echo (!$is_pro) ? 'disabled' : ''; ?>>
                            <p class="description"><?php esc_html_e('Leave empty to use your default voice choice. You\'ll find voice ID\'s in the Voices page.', 'text-to-speech-tts'); ?></p>
                        </div>
                    </div>
                </div>

                <!-- Generated Shortcode Output -->
                <div class="mementor-tts-generator-output">
                    <h4><?php esc_html_e('Generated Shortcode:', 'text-to-speech-tts'); ?></h4>
                    <div class="mementor-tts-shortcode-code">
                        <code></code>
                        <button class="mementor-tts-copy-button">
                            <span class="dashicons dashicons-clipboard"></span>
                        </button>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>