PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.2.9
MxChat – AI Chatbot & Content Generation for WordPress v3.2.9
3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 2.0.3 2.0.4 2.0.5 2.0.6 All 152 releases
mxchat-basic / includes / admin-content-page.php

admin-content-page.php in MxChat – AI Chatbot & Content Generation for WordPress 3.2.9, at includes/admin-content-page.php

1,092 lines 92.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * MxChat Content Generator Page
4 *
5 * Admin page template with sidebar navigation for content generation.
6 *
7 * @package MxChat
8 * @since 3.1.0
9 */
10
11 if (!defined('ABSPATH')) {
12 exit;
13 }
14
15 function mxchat_render_content_page($admin_instance) {
16 $is_activated = $admin_instance->is_activated();
17 $options = get_option('mxchat_options', array());
18 $plugin_url = plugin_dir_url(dirname(__FILE__));
19
20 // Pro feature checks — add-on plugins hook into this filter to unlock
21 $pro_internal_linking = apply_filters('mxchat_content_pro_feature', false, 'internal_linking');
22 $pro_tool_use = apply_filters('mxchat_content_pro_feature', false, 'tool_use');
23 $pro_image_management = apply_filters('mxchat_content_pro_feature', false, 'image_management');
24 $pro_meta_management = apply_filters('mxchat_content_pro_feature', false, 'meta_management');
25 $pro_gsc_integration = apply_filters('mxchat_content_pro_feature', false, 'gsc_integration');
26 $pro_content_calendar = apply_filters('mxchat_content_pro_feature', false, 'content_calendar');
27 $pro_template_generator = apply_filters('mxchat_content_pro_feature', false, 'template_generator');
28 ?>
29 <div class="mxch-admin-wrapper">
30 <!-- Mobile Header -->
31 <header class="mxch-mobile-header">
32 <a href="#" class="mxch-mobile-logo">
33 <div class="mxch-mobile-logo-icon">
34 <img src="<?php echo esc_url($plugin_url . 'images/icon-128x128.png'); ?>" alt="MxChat">
35 </div>
36 <span class="mxch-mobile-logo-text">MxChat</span>
37 </a>
38 <button type="button" class="mxch-mobile-menu-btn" aria-label="<?php esc_attr_e('Open menu', 'mxchat'); ?>">
39 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
40 </button>
41 </header>
42
43 <!-- Mobile Menu Overlay -->
44 <div class="mxch-mobile-overlay"></div>
45
46 <!-- Mobile Menu Modal -->
47 <div class="mxch-mobile-menu">
48 <div class="mxch-mobile-menu-header">
49 <span class="mxch-mobile-menu-title"><?php esc_html_e('Content', 'mxchat'); ?></span>
50 <button type="button" class="mxch-mobile-menu-close" aria-label="<?php esc_attr_e('Close menu', 'mxchat'); ?>">
51 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
52 </button>
53 </div>
54 <nav class="mxch-mobile-menu-nav">
55 <div class="mxch-mobile-nav-section">
56 <div class="mxch-mobile-nav-section-title"><?php esc_html_e('Content', 'mxchat'); ?></div>
57 <button class="mxch-mobile-nav-link active" data-target="content-generate">
58 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
59 <span><?php esc_html_e('Generate', 'mxchat'); ?></span>
60 </button>
61 <button class="mxch-mobile-nav-link" data-target="content-history">
62 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
63 <span><?php esc_html_e('History', 'mxchat'); ?></span>
64 </button>
65 <button class="mxch-mobile-nav-link" data-target="content-settings">
66 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
67 <span><?php esc_html_e('Settings', 'mxchat'); ?></span>
68 </button>
69 <button class="mxch-mobile-nav-link" data-target="content-seo">
70 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
71 <span><?php esc_html_e('SEO', 'mxchat'); ?></span>
72 </button>
73 <button class="mxch-mobile-nav-link" data-target="content-calendar">
74 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
75 <span><?php esc_html_e('Calendar', 'mxchat'); ?></span>
76 </button>
77 <button class="mxch-mobile-nav-link" data-target="content-templates">
78 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
79 <span><?php esc_html_e('Templates', 'mxchat'); ?></span>
80 </button>
81 </div>
82 </nav>
83 </div>
84
85 <!-- Sidebar Navigation -->
86 <aside class="mxch-sidebar">
87 <div class="mxch-sidebar-header">
88 <a href="#" class="mxch-sidebar-logo">
89 <div class="mxch-sidebar-logo-icon">
90 <img src="<?php echo esc_url($plugin_url . 'images/icon-128x128.png'); ?>" alt="MxChat">
91 </div>
92 <span class="mxch-sidebar-logo-text">MxChat</span>
93 <span class="mxch-sidebar-version">v<?php echo esc_html(MXCHAT_VERSION ?? '3.1.0'); ?></span>
94 </a>
95 </div>
96
97 <nav class="mxch-sidebar-nav">
98 <div class="mxch-nav-section">
99 <div class="mxch-nav-section-title"><?php esc_html_e('Content', 'mxchat'); ?></div>
100
101 <div class="mxch-nav-item" data-section="content-generate">
102 <button class="mxch-nav-link active" data-target="content-generate">
103 <span class="mxch-nav-link-icon">
104 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
105 </span>
106 <span class="mxch-nav-link-text"><?php esc_html_e('Generate', 'mxchat'); ?></span>
107 </button>
108 </div>
109
110 <div class="mxch-nav-item" data-section="content-history">
111 <button class="mxch-nav-link" data-target="content-history">
112 <span class="mxch-nav-link-icon">
113 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
114 </span>
115 <span class="mxch-nav-link-text"><?php esc_html_e('History', 'mxchat'); ?></span>
116 </button>
117 </div>
118
119 <div class="mxch-nav-item" data-section="content-settings">
120 <button class="mxch-nav-link" data-target="content-settings">
121 <span class="mxch-nav-link-icon">
122 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
123 </span>
124 <span class="mxch-nav-link-text"><?php esc_html_e('Settings', 'mxchat'); ?></span>
125 </button>
126 </div>
127
128 <div class="mxch-nav-item" data-section="content-seo">
129 <button class="mxch-nav-link" data-target="content-seo">
130 <span class="mxch-nav-link-icon">
131 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
132 </span>
133 <span class="mxch-nav-link-text"><?php esc_html_e('SEO', 'mxchat'); ?></span>
134 </button>
135 </div>
136
137 <div class="mxch-nav-item" data-section="content-calendar">
138 <button class="mxch-nav-link" data-target="content-calendar">
139 <span class="mxch-nav-link-icon">
140 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
141 </span>
142 <span class="mxch-nav-link-text"><?php esc_html_e('Calendar', 'mxchat'); ?></span>
143 </button>
144 </div>
145
146 <div class="mxch-nav-item" data-section="content-templates">
147 <button class="mxch-nav-link" data-target="content-templates">
148 <span class="mxch-nav-link-icon">
149 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
150 </span>
151 <span class="mxch-nav-link-text"><?php esc_html_e('Templates', 'mxchat'); ?></span>
152 </button>
153 </div>
154 </div>
155 </nav>
156 </aside>
157
158 <!-- Main Content Area -->
159 <main class="mxch-content">
160
161 <!-- ========================================
162 GENERATE
163 ======================================== -->
164 <div id="content-generate" class="mxch-section active">
165
166 <!-- Toolbar -->
167 <div class="mxch-cg-toolbar mxch-cg-toolbar-minimal">
168 <div class="mxch-cg-toolbar-left">
169 <button type="button" id="mxch-cg-new-btn" class="mxch-cg-generate-btn">
170 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
171 <span><?php esc_html_e('Generate', 'mxchat'); ?></span>
172 </button>
173 <h2 id="mxch-cg-preview-title" class="mxch-cg-toolbar-title"><?php esc_html_e('Content Generator', 'mxchat'); ?></h2>
174 <div id="mxch-cg-status-dropdown" class="mxch-cg-status-dropdown" style="display:none;">
175 <button type="button" id="mxch-cg-status-badge" class="mxch-cg-status-badge" title="<?php esc_attr_e('Change status', 'mxchat'); ?>">
176 <span class="mxch-cg-status-badge-text"></span>
177 <svg class="mxch-cg-status-chevron" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
178 </button>
179 <div class="mxch-cg-status-menu" style="display:none;">
180 <button type="button" class="mxch-cg-status-option" data-status="draft">
181 <span class="mxch-cg-status-dot mxch-cg-dot-draft"></span>
182 <?php esc_html_e('Draft', 'mxchat'); ?>
183 </button>
184 <button type="button" class="mxch-cg-status-option" data-status="publish">
185 <span class="mxch-cg-status-dot mxch-cg-dot-publish"></span>
186 <?php esc_html_e('Published', 'mxchat'); ?>
187 </button>
188 <button type="button" class="mxch-cg-status-option" data-status="future">
189 <span class="mxch-cg-status-dot mxch-cg-dot-future"></span>
190 <?php esc_html_e('Scheduled', 'mxchat'); ?>
191 </button>
192 <div class="mxch-cg-status-schedule-row" style="display:none;">
193 <input type="datetime-local" id="mxch-cg-status-schedule-input" class="mxch-cg-input mxch-cg-status-schedule-input">
194 <button type="button" id="mxch-cg-status-schedule-confirm" class="mxch-cg-status-schedule-confirm">
195 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
196 </button>
197 </div>
198 </div>
199 </div>
200 </div>
201 <div class="mxch-cg-toolbar-right" style="display:none;">
202 <div class="mxch-cg-viewport-toggle">
203 <button type="button" class="mxch-cg-viewport-btn active" data-viewport="desktop" title="<?php esc_attr_e('Desktop', 'mxchat'); ?>">
204 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
205 </button>
206 <button type="button" class="mxch-cg-viewport-btn" data-viewport="mobile" title="<?php esc_attr_e('Mobile', 'mxchat'); ?>">
207 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
208 </button>
209 </div>
210 <a id="mxch-cg-view-post" href="#" target="_blank" class="mxch-cg-action-btn">
211 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
212 <?php esc_html_e('View', 'mxchat'); ?>
213 </a>
214 <button type="button" id="mxch-cg-chat-toggle" class="mxch-cg-action-btn" title="<?php esc_attr_e('Edit with AI', 'mxchat'); ?>">
215 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
216 <?php esc_html_e('AI Edit', 'mxchat'); ?>
217 </button>
218 </div>
219 </div>
220
221 <!-- Full-Width Preview -->
222 <div class="mxch-cg-preview-wrap">
223 <div id="mxch-cg-preview-container" class="mxch-cg-preview-container">
224 <!-- Inline Generation Form -->
225 <div id="mxch-cg-inline-form" class="mxch-cg-inline-form">
226 <div class="mxch-cg-inline-form-inner">
227 <div class="mxch-cg-inline-form-header">
228 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
229 <div>
230 <h3><?php esc_html_e('Generate Content', 'mxchat'); ?></h3>
231 <p><?php esc_html_e('Describe what you want and let AI create it for you.', 'mxchat'); ?></p>
232 </div>
233 </div>
234 <div class="mxch-cg-form">
235 <textarea id="mxch-cg-prompt" class="mxch-cg-prompt" rows="3" placeholder="<?php esc_attr_e('Describe the content you want to generate...', 'mxchat'); ?>"></textarea>
236 <button type="button" id="mxch-cg-edit-prompt-btn" class="mxch-cg-edit-prompt-btn">
237 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
238 <?php esc_html_e('Edit Default Prompt', 'mxchat'); ?>
239 </button>
240 <div class="mxch-cg-options">
241 <div class="mxch-cg-option">
242 <label class="mxch-cg-option-label" for="mxch-cg-type"><?php esc_html_e('Type', 'mxchat'); ?></label>
243 <select id="mxch-cg-type" class="mxch-cg-select">
244 <option value="post"><?php esc_html_e('Blog Post', 'mxchat'); ?></option>
245 <option value="page"><?php esc_html_e('Landing Page', 'mxchat'); ?></option>
246 </select>
247 </div>
248 <div class="mxch-cg-option">
249 <label class="mxch-cg-option-label" for="mxch-cg-status"><?php esc_html_e('Status', 'mxchat'); ?></label>
250 <select id="mxch-cg-status" class="mxch-cg-select">
251 <option value="draft"><?php esc_html_e('Draft', 'mxchat'); ?></option>
252 <option value="future"><?php esc_html_e('Scheduled', 'mxchat'); ?></option>
253 <option value="publish"><?php esc_html_e('Publish', 'mxchat'); ?></option>
254 </select>
255 </div>
256 <div class="mxch-cg-option mxch-cg-schedule-wrap" style="display:none;">
257 <label class="mxch-cg-option-label" for="mxch-cg-schedule"><?php esc_html_e('Schedule', 'mxchat'); ?></label>
258 <input type="datetime-local" id="mxch-cg-schedule" class="mxch-cg-input">
259 </div>
260 </div>
261 <div class="mxch-cg-options">
262 <div class="mxch-cg-option">
263 <label class="mxch-cg-option-label" for="mxch-cg-layout"><?php esc_html_e('Layout', 'mxchat'); ?></label>
264 <select id="mxch-cg-layout" class="mxch-cg-select">
265 <option value="default"><?php esc_html_e('Theme Default', 'mxchat'); ?></option>
266 <option value="fullwidth" selected><?php esc_html_e('Fullwidth (No Padding)', 'mxchat'); ?></option>
267 </select>
268 </div>
269 <div class="mxch-cg-option">
270 <label class="mxch-cg-option-label" for="mxch-cg-title-display"><?php esc_html_e('Post Title', 'mxchat'); ?></label>
271 <select id="mxch-cg-title-display" class="mxch-cg-select">
272 <option value="show"><?php esc_html_e('Show', 'mxchat'); ?></option>
273 <option value="hide" selected><?php esc_html_e('Hide (title in content)', 'mxchat'); ?></option>
274 </select>
275 </div>
276 <div class="mxch-cg-option">
277 <label class="mxch-cg-option-label" for="mxch-cg-template-mode"><?php esc_html_e('Template Mode', 'mxchat'); ?></label>
278 <select id="mxch-cg-template-mode" class="mxch-cg-select">
279 <option value="off" selected><?php esc_html_e('Off', 'mxchat'); ?></option>
280 <option value="on"><?php esc_html_e('On (Spintax)', 'mxchat'); ?></option>
281 </select>
282 </div>
283 </div>
284 <button type="button" id="mxch-cg-generate-btn" class="mxch-cg-generate-btn mxch-cg-generate-btn-full">
285 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
286 <span><?php esc_html_e('Generate Content', 'mxchat'); ?></span>
287 </button>
288 </div>
289 <!-- Progress (shown during generation) -->
290 <div id="mxch-cg-progress" class="mxch-cg-progress" style="display:none;">
291 <div class="mxch-cg-progress-bar">
292 <div class="mxch-cg-progress-fill" style="width:0%"></div>
293 </div>
294 <p class="mxch-cg-progress-text"><?php esc_html_e('Starting...', 'mxchat'); ?></p>
295 </div>
296 </div>
297 </div>
298 <!-- Edit Default Prompt Modal -->
299 <div id="mxch-cg-prompt-modal" class="mxch-cg-prompt-modal" style="display:none;">
300 <div class="mxch-cg-prompt-modal-overlay"></div>
301 <div class="mxch-cg-prompt-modal-content">
302 <div class="mxch-cg-prompt-modal-header">
303 <h3><?php esc_html_e('Edit Default System Prompt', 'mxchat'); ?></h3>
304 <button type="button" id="mxch-cg-prompt-modal-close" class="mxch-cg-prompt-modal-close">&times;</button>
305 </div>
306 <div class="mxch-cg-prompt-modal-body">
307 <p class="mxch-cg-prompt-modal-desc"><?php esc_html_e('This is the system prompt sent to the AI when generating content. Edit it to customize how your content is generated.', 'mxchat'); ?></p>
308 <textarea id="mxch-cg-system-prompt-editor" class="mxch-cg-system-prompt-editor" rows="20"></textarea>
309 </div>
310 <div class="mxch-cg-prompt-modal-footer">
311 <button type="button" id="mxch-cg-prompt-reset" class="button"><?php esc_html_e('Reset to Default', 'mxchat'); ?></button>
312 <div class="mxch-cg-prompt-modal-footer-right">
313 <button type="button" id="mxch-cg-prompt-cancel" class="button"><?php esc_html_e('Cancel', 'mxchat'); ?></button>
314 <button type="button" id="mxch-cg-prompt-save" class="button button-primary"><?php esc_html_e('Save Changes', 'mxchat'); ?></button>
315 </div>
316 </div>
317 </div>
318 </div>
319 <!-- Loading indicator (shown during async generation) -->
320 <div id="mxch-cg-loading-indicator" class="mxch-cg-loading-indicator" style="display:none;">
321 <div class="mxch-cg-loading-spinner">
322 <div class="mxch-cg-loading-spinner-ring"></div>
323 <div class="mxch-cg-loading-spinner-ring"></div>
324 <div class="mxch-cg-loading-spinner-ring"></div>
325 <svg class="mxch-cg-loading-spinner-icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
326 </div>
327 <p id="mxch-cg-loading-phrase" class="mxch-cg-loading-phrase"></p>
328 <div class="mxch-cg-loading-progress-mini">
329 <div class="mxch-cg-loading-progress-mini-bar">
330 <div id="mxch-cg-loading-progress-fill" class="mxch-cg-loading-progress-mini-fill" style="width:0%"></div>
331 </div>
332 <p id="mxch-cg-loading-progress-text" class="mxch-cg-loading-progress-mini-text"><?php esc_html_e('Starting...', 'mxchat'); ?></p>
333 </div>
334 </div>
335 <iframe id="mxch-cg-preview-iframe" class="mxch-cg-preview-iframe" style="display:none;" sandbox="allow-same-origin allow-scripts"></iframe>
336 </div>
337 </div>
338
339 <!-- Mini Chat Panel (slides up from bottom, hidden by default) -->
340 <div id="mxch-cg-chat" class="mxch-cg-chat-panel mxch-cg-chat-panel--with-images" style="display:none;">
341
342 <!-- Left Column: Images + Meta (Tabbed) -->
343 <div class="mxch-cg-images-col<?php echo $pro_image_management ? '' : ' mxch-cg-pro-locked'; ?>">
344 <!-- Tab Navigation -->
345 <div class="mxch-cg-left-tabs">
346 <button type="button" class="mxch-cg-left-tab active" data-tab="images">
347 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
348 <?php esc_html_e('Images', 'mxchat'); ?>
349 <?php if (!$pro_image_management): ?>
350 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
351 <?php endif; ?>
352 </button>
353 <button type="button" class="mxch-cg-left-tab" data-tab="meta">
354 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg>
355 <?php esc_html_e('Meta', 'mxchat'); ?>
356 <?php if (!$pro_meta_management): ?>
357 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
358 <?php endif; ?>
359 </button>
360 <button type="button" class="mxch-cg-left-tab" data-tab="seo">
361 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
362 <?php esc_html_e('SEO', 'mxchat'); ?>
363 </button>
364 </div>
365
366 <!-- Images Panel (default visible) -->
367 <div class="mxch-cg-left-panel active" id="mxch-cg-panel-images">
368 <div class="mxch-cg-images-grid" id="mxch-cg-images-grid">
369 <div class="mxch-cg-images-empty" id="mxch-cg-images-empty">
370 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
371 <span><?php esc_html_e('Images will appear here after generation', 'mxchat'); ?></span>
372 </div>
373 </div>
374 </div>
375
376 <!-- Meta Panel (hidden by default) -->
377 <div class="mxch-cg-left-panel" id="mxch-cg-panel-meta" style="position:relative;">
378 <div class="mxch-cg-meta-form<?php echo $pro_meta_management ? '' : ' mxch-cg-meta-locked'; ?>">
379 <div class="mxch-cg-meta-field">
380 <label for="mxch-cg-meta-title"><?php esc_html_e('Title', 'mxchat'); ?></label>
381 <input type="text" id="mxch-cg-meta-title" class="mxch-cg-meta-input" placeholder="<?php esc_attr_e('Post title...', 'mxchat'); ?>"<?php echo $pro_meta_management ? '' : ' disabled readonly'; ?>>
382 </div>
383 <div class="mxch-cg-meta-field">
384 <label for="mxch-cg-meta-description"><?php esc_html_e('Meta Description', 'mxchat'); ?></label>
385 <textarea id="mxch-cg-meta-description" class="mxch-cg-meta-input" rows="3" placeholder="<?php esc_attr_e('Meta description...', 'mxchat'); ?>"<?php echo $pro_meta_management ? '' : ' disabled readonly'; ?>></textarea>
386 <span class="mxch-cg-meta-charcount">0 / 160</span>
387 </div>
388 <div class="mxch-cg-meta-field">
389 <label for="mxch-cg-meta-keyword"><?php esc_html_e('Focus Keyword', 'mxchat'); ?></label>
390 <input type="text" id="mxch-cg-meta-keyword" class="mxch-cg-meta-input" placeholder="<?php esc_attr_e('Primary keyword...', 'mxchat'); ?>"<?php echo $pro_meta_management ? '' : ' disabled readonly'; ?>>
391 </div>
392 <div class="mxch-cg-meta-field">
393 <label for="mxch-cg-meta-excerpt"><?php esc_html_e('Excerpt', 'mxchat'); ?></label>
394 <textarea id="mxch-cg-meta-excerpt" class="mxch-cg-meta-input" rows="3" placeholder="<?php esc_attr_e('Post excerpt...', 'mxchat'); ?>"<?php echo $pro_meta_management ? '' : ' disabled readonly'; ?>></textarea>
395 </div>
396 </div>
397 <?php if (!$pro_meta_management): ?>
398 <div class="mxch-cg-meta-lock-overlay">
399 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
400 <span><?php echo $is_activated ? esc_html__('Install Add-on', 'mxchat') : esc_html__('Upgrade to Pro', 'mxchat'); ?></span>
401 </div>
402 <?php endif; ?>
403 </div>
404
405 <!-- SEO Panel -->
406 <div class="mxch-cg-left-panel" id="mxch-cg-panel-seo">
407 <div class="mxch-seo-panel">
408 <!-- Score Header -->
409 <div class="mxch-seo-score-header">
410 <div class="mxch-seo-score-ring">
411 <svg viewBox="0 0 60 60">
412 <circle class="mxch-seo-ring-bg" cx="30" cy="30" r="26" />
413 <circle class="mxch-seo-ring-fill" id="mxch-seo-ring" cx="30" cy="30" r="26" stroke-dasharray="163.36" stroke-dashoffset="163.36" />
414 </svg>
415 <span class="mxch-seo-score-num" id="mxch-seo-score">&mdash;</span>
416 </div>
417 <div class="mxch-seo-score-info">
418 <span class="mxch-seo-score-label" id="mxch-seo-score-label"><?php esc_html_e('SEO Score', 'mxchat'); ?></span>
419 <span class="mxch-seo-score-summary" id="mxch-seo-score-summary"><?php esc_html_e('Generate content to analyze', 'mxchat'); ?></span>
420 </div>
421 <button type="button" class="mxch-seo-analyze-btn" id="mxch-seo-analyze" title="<?php esc_attr_e('Analyze', 'mxchat'); ?>">
422 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
423 </button>
424 </div>
425 <!-- Checklist -->
426 <div class="mxch-seo-checklist" id="mxch-seo-checklist">
427 <div class="mxch-seo-empty" id="mxch-seo-empty">
428 <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
429 <span><?php esc_html_e('SEO analysis will appear here after content is generated', 'mxchat'); ?></span>
430 </div>
431 </div>
432 <!-- AI Optimize -->
433 <div class="mxch-seo-actions" id="mxch-seo-actions" style="display:none;">
434 <button type="button" class="mxch-seo-fix-btn" id="mxch-seo-ai-optimize" title="<?php esc_attr_e('AI optimizes all failing SEO checks', 'mxchat'); ?>">
435 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.287 1.288L3 12l5.8 1.9a2 2 0 0 1 1.288 1.287L12 21l1.9-5.8a2 2 0 0 1 1.287-1.288L21 12l-5.8-1.9a2 2 0 0 1-1.288-1.287Z"/></svg>
436 <?php esc_html_e('Optimize All', 'mxchat'); ?>
437 </button>
438 </div>
439 </div>
440 </div>
441 </div>
442
443 <!-- Chat Column -->
444 <div class="mxch-cg-chat-col">
445 <div class="mxch-cg-chat-panel-header">
446 <span class="mxch-cg-chat-panel-title"><?php esc_html_e('Edit with AI', 'mxchat'); ?></span>
447 <button type="button" id="mxch-cg-chat-close" class="mxch-cg-chat-panel-close" title="<?php esc_attr_e('Close', 'mxchat'); ?>">
448 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
449 </button>
450 </div>
451 <div id="mxch-cg-chat-messages" class="mxch-cg-chat-messages"></div>
452 <div class="mxch-cg-chat-input-wrap">
453 <textarea id="mxch-cg-chat-input" class="mxch-cg-chat-input" rows="2" placeholder="<?php esc_attr_e('e.g. Change the hero heading to...', 'mxchat'); ?>"></textarea>
454 <button type="button" id="mxch-cg-chat-send" class="mxch-cg-chat-send" disabled>
455 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
456 </button>
457 </div>
458 </div>
459 </div>
460 </div>
461
462 <!-- ========================================
463 HISTORY
464 ======================================== -->
465 <div id="content-history" class="mxch-section">
466 <div class="mxch-content-header">
467 <h1 class="mxch-content-title"><?php esc_html_e('Content History', 'mxchat'); ?></h1>
468 <p class="mxch-content-subtitle"><?php esc_html_e('Browse and edit your AI-generated content.', 'mxchat'); ?></p>
469 </div>
470
471 <div class="mxch-card">
472 <div class="mxch-card-body">
473 <!-- Loading state -->
474 <div id="mxch-cg-history-loading" class="mxch-cg-history-loading">
475 <div class="mxch-cg-history-spinner"></div>
476 <p><?php esc_html_e('Loading history...', 'mxchat'); ?></p>
477 </div>
478
479 <!-- Empty state -->
480 <div id="mxch-cg-history-empty" class="mxch-cg-history-empty" style="display:none;">
481 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
482 <p><?php esc_html_e('No AI-generated content yet. Use the Generate tab to create your first post.', 'mxchat'); ?></p>
483 </div>
484
485 <!-- History list (rendered by JS) -->
486 <div id="mxch-cg-history-list" class="mxch-cg-history-list" style="display:none;"></div>
487
488 <!-- Pagination (rendered by JS) -->
489 <div id="mxch-cg-history-pagination" class="mxch-cg-history-pagination" style="display:none;"></div>
490 </div>
491 </div>
492 </div>
493
494 <!-- ========================================
495 SETTINGS
496 ======================================== -->
497 <div id="content-settings" class="mxch-section">
498 <div class="mxch-content-header">
499 <h1 class="mxch-content-title"><?php esc_html_e('Settings', 'mxchat'); ?></h1>
500 <p class="mxch-content-subtitle"><?php esc_html_e('Configure content generation and SEO optimization.', 'mxchat'); ?></p>
501 </div>
502
503 <!-- ── Content Settings ── -->
504 <div class="mxch-card">
505 <div class="mxch-card-header">
506 <h3 class="mxch-card-title"><?php esc_html_e('Content', 'mxchat'); ?></h3>
507 </div>
508 <div class="mxch-card-body">
509
510 <!-- Content Model -->
511 <div class="mxch-field">
512 <label class="mxch-field-label" for="mxch-content-model"><?php esc_html_e('Content Model', 'mxchat'); ?></label>
513 <div class="mxch-field-control">
514 <select id="mxch-content-model" data-field="content_model" class="mxch-cg-select">
515 <?php
516 $content_model = $options['content_model'] ?? ($options['model'] ?? 'gpt-5.1-chat-latest');
517 $models = array(
518 'OpenAI' => array(
519 'gpt-5.5' => 'GPT-5.5',
520 'gpt-5.4' => 'GPT-5.4',
521 'gpt-5.2' => 'GPT-5.2',
522 'gpt-5.1-chat-latest' => 'GPT-5.1',
523 'gpt-5' => 'GPT-5',
524 ),
525 'Anthropic' => array(
526 'claude-fable-5' => 'Claude Fable 5',
527 'claude-opus-4-8' => 'Claude Opus 4.8',
528 'claude-opus-4-7' => 'Claude Opus 4.7',
529 'claude-opus-4-6' => 'Claude Opus 4.6',
530 'claude-sonnet-4-6' => 'Claude Sonnet 4.6',
531 'claude-haiku-4-5-20251001' => 'Claude Haiku 4.5',
532 ),
533 'Google' => array(
534 'gemini-3.5-flash' => 'Gemini 3.5 Flash',
535 'gemini-3.1-pro-preview' => 'Gemini 3.1 Pro',
536 'gemini-3-flash-preview' => 'Gemini 3 Flash',
537 'gemini-3.1-flash-lite' => 'Gemini 3.1 Flash-Lite',
538 'gemini-3.1-flash-lite-preview' => 'Gemini 3.1 Flash-Lite (Preview)',
539 'gemini-2.5-pro' => 'Gemini 2.5 Pro',
540 'gemini-2.5-flash' => 'Gemini 2.5 Flash',
541 'gemini-2.5-flash-lite' => 'Gemini 2.5 Flash-Lite',
542 ),
543 'xAI' => array(
544 'grok-4-0709' => 'Grok 4',
545 'grok-4-1-fast-non-reasoning' => 'Grok 4.1 Fast',
546 'grok-code-fast-1' => 'Grok Code Fast',
547 ),
548 );
549 foreach ($models as $group => $group_models) {
550 echo '<optgroup label="' . esc_attr($group) . '">';
551 foreach ($group_models as $value => $label) {
552 $selected = selected($content_model, $value, false);
553 echo '<option value="' . esc_attr($value) . '" ' . $selected . '>' . esc_html($label) . '</option>';
554 }
555 echo '</optgroup>';
556 }
557 ?>
558 </select>
559 </div>
560 <p class="mxch-field-description"><?php esc_html_e('Select the AI model used for generating content. Uses the API key configured in your main MxChat settings.', 'mxchat'); ?></p>
561 </div>
562
563 <!-- Image Model -->
564 <div class="mxch-field">
565 <label class="mxch-field-label" for="mxch-image-model"><?php esc_html_e('Image Model', 'mxchat'); ?></label>
566 <div class="mxch-field-control">
567 <?php $image_model = $options['content_image_model'] ?? 'gpt-image-1.5'; ?>
568 <select id="mxch-image-model" data-field="content_image_model" class="mxch-cg-select">
569 <optgroup label="<?php esc_attr_e('OpenAI', 'mxchat'); ?>">
570 <option value="gpt-image-2" <?php selected($image_model, 'gpt-image-2'); ?>><?php esc_html_e('GPT Image 2 (Latest)', 'mxchat'); ?></option>
571 <option value="gpt-image-1.5" <?php selected($image_model, 'gpt-image-1.5'); ?>><?php esc_html_e('GPT Image 1.5', 'mxchat'); ?></option>
572 </optgroup>
573 <optgroup label="<?php esc_attr_e('xAI', 'mxchat'); ?>">
574 <option value="grok-imagine-image-pro" <?php selected($image_model, 'grok-imagine-image-pro'); ?>><?php esc_html_e('Grok Imagine Pro', 'mxchat'); ?></option>
575 <option value="grok-imagine-image" <?php selected($image_model, 'grok-imagine-image'); ?>><?php esc_html_e('Grok Imagine', 'mxchat'); ?></option>
576 </optgroup>
577 <optgroup label="<?php esc_attr_e('Google', 'mxchat'); ?>">
578 <option value="gemini-2.5-flash-image" <?php selected($image_model, 'gemini-2.5-flash-image'); ?>><?php esc_html_e('Nano Banana (Gemini 2.5 Flash)', 'mxchat'); ?></option>
579 <option value="gemini-3-pro-image-preview" <?php selected($image_model, 'gemini-3-pro-image-preview'); ?>><?php esc_html_e('Nano Banana Pro (Gemini 3 Pro)', 'mxchat'); ?></option>
580 </optgroup>
581 </select>
582 </div>
583 <p class="mxch-field-description"><?php esc_html_e('Select the AI model used for generating images within your content.', 'mxchat'); ?></p>
584 </div>
585
586 <!-- Image Quality (GPT Image only) -->
587 <div class="mxch-field">
588 <label class="mxch-field-label" for="mxch-image-quality"><?php esc_html_e('Image Quality', 'mxchat'); ?></label>
589 <div class="mxch-field-control">
590 <?php $image_quality = $options['content_image_quality'] ?? 'auto'; ?>
591 <?php $quality_supported = (strpos($image_model, 'gpt-image') === 0); ?>
592 <select id="mxch-image-quality" data-field="content_image_quality" class="mxch-cg-select"<?php echo $quality_supported ? '' : ' disabled'; ?>>
593 <option value="auto" <?php selected($image_quality, 'auto'); ?>><?php esc_html_e('Auto (default)', 'mxchat'); ?></option>
594 <option value="low" <?php selected($image_quality, 'low'); ?>><?php esc_html_e('Low (fastest, cheapest)', 'mxchat'); ?></option>
595 <option value="medium" <?php selected($image_quality, 'medium'); ?>><?php esc_html_e('Medium', 'mxchat'); ?></option>
596 <option value="high" <?php selected($image_quality, 'high'); ?>><?php esc_html_e('High (best, slowest)', 'mxchat'); ?></option>
597 </select>
598 </div>
599 <p class="mxch-field-description"><?php esc_html_e('Quality control for OpenAI GPT Image models only. Grok Imagine and Gemini image models ignore this setting (their APIs do not expose an equivalent parameter).', 'mxchat'); ?></p>
600 </div>
601 <script>(function(){
602 var m = document.getElementById('mxch-image-model');
603 var q = document.getElementById('mxch-image-quality');
604 if (!m || !q || q._wired) { return; } q._wired = true;
605 function sync(){ q.disabled = (m.value || '').indexOf('gpt-image') !== 0; }
606 m.addEventListener('change', sync);
607 sync();
608 })();</script>
609
610 <!-- Enable Image Generation -->
611 <div class="mxch-field">
612 <label class="mxch-toggle">
613 <?php $enable_images = $options['content_enable_images'] ?? 'on'; ?>
614 <input type="checkbox" class="mxch-toggle-input" data-field="content_enable_images" value="on" <?php checked($enable_images, 'on'); ?>>
615 <span class="mxch-toggle-switch"></span>
616 <span class="mxch-toggle-label"><?php esc_html_e('Enable Image Generation', 'mxchat'); ?></span>
617 </label>
618 <p class="mxch-field-description"><?php esc_html_e('When enabled, AI will generate and place images throughout your content. When disabled, pages are generated with text-only layouts.', 'mxchat'); ?></p>
619 </div>
620
621 <!-- Images per Article -->
622 <div class="mxch-field">
623 <label class="mxch-field-label" for="mxch-image-count"><?php esc_html_e('Images per Article', 'mxchat'); ?></label>
624 <div class="mxch-field-control">
625 <?php $image_count = max(1, min(5, (int) ($options['content_image_count'] ?? 3))); ?>
626 <?php $images_on = ($options['content_enable_images'] ?? 'on') === 'on'; ?>
627 <div class="mxch-cg-slider-row">
628 <input type="range" min="1" max="5" step="1" value="<?php echo esc_attr($image_count); ?>"
629 data-field="content_image_count" id="mxch-image-count" class="mxch-cg-slider"<?php echo $images_on ? '' : ' disabled'; ?>>
630 <span id="mxch-image-count-val" class="mxch-cg-slider-value"><?php echo esc_html($image_count); ?></span>
631 </div>
632 </div>
633 <p class="mxch-field-description"><?php esc_html_e('How many images to generate and place in each article (1–5). Default 3. The AI may generate fewer if the article has few sections suited to imagery.', 'mxchat'); ?></p>
634 </div>
635 <script>(function(){
636 var s = document.getElementById('mxch-image-count');
637 var v = document.getElementById('mxch-image-count-val');
638 if (!s || !v || s._wired) { return; } s._wired = true;
639 s.addEventListener('input', function(){ v.textContent = s.value; });
640 var e = document.querySelector('[data-field="content_enable_images"]');
641 if (e) {
642 var syncCount = function(){ s.disabled = !e.checked; };
643 e.addEventListener('change', syncCount);
644 syncCount();
645 }
646 })();</script>
647
648 <!-- Internal Linking (Pro) -->
649 <div class="mxch-field mxch-cg-pro-field<?php echo $pro_internal_linking ? '' : ' mxch-cg-pro-locked'; ?>">
650 <label class="mxch-toggle">
651 <?php $internal_linking_val = $options['content_internal_linking'] ?? 'off'; ?>
652 <input type="checkbox" class="mxch-toggle-input" data-field="content_internal_linking" value="on" <?php checked($internal_linking_val, 'on'); ?><?php echo $pro_internal_linking ? '' : ' disabled'; ?>>
653 <span class="mxch-toggle-switch"></span>
654 <span class="mxch-toggle-label">
655 <?php esc_html_e('Internal Linking', 'mxchat'); ?>
656 <?php if (!$pro_internal_linking): ?>
657 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
658 <?php endif; ?>
659 </span>
660 </label>
661 <p class="mxch-field-description"><?php esc_html_e('Automatically find and link to existing blog posts on your site within generated content.', 'mxchat'); ?></p>
662 <?php if (!$pro_internal_linking): ?>
663 <?php if ($is_activated): ?>
664 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Install Add-on', 'mxchat'); ?></a>
665 <?php else: ?>
666 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Upgrade to Pro', 'mxchat'); ?></a>
667 <?php endif; ?>
668 <?php endif; ?>
669 </div>
670
671 <!-- Tool Use for AI Editing (Pro) -->
672 <div class="mxch-field mxch-cg-pro-field<?php echo $pro_tool_use ? '' : ' mxch-cg-pro-locked'; ?>">
673 <label class="mxch-toggle">
674 <?php $tool_use_val = $options['content_tool_use'] ?? 'off'; ?>
675 <input type="checkbox" class="mxch-toggle-input" data-field="content_tool_use" value="on" <?php checked($tool_use_val, 'on'); ?><?php echo $pro_tool_use ? '' : ' disabled'; ?>>
676 <span class="mxch-toggle-switch"></span>
677 <span class="mxch-toggle-label">
678 <?php esc_html_e('Tool Use for AI Editing', 'mxchat'); ?>
679 <?php if (!$pro_tool_use): ?>
680 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
681 <?php endif; ?>
682 </span>
683 </label>
684 <p class="mxch-field-description"><?php esc_html_e('Enable precise editing with tool calling — the AI makes targeted changes instead of rewriting the entire page, improving accuracy and token efficiency. Supports Claude, OpenAI, Gemini, and xAI models.', 'mxchat'); ?></p>
685 <?php if (!$pro_tool_use): ?>
686 <?php if ($is_activated): ?>
687 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Install Add-on', 'mxchat'); ?></a>
688 <?php else: ?>
689 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Upgrade to Pro', 'mxchat'); ?></a>
690 <?php endif; ?>
691 <?php endif; ?>
692 </div>
693
694 </div>
695 </div>
696
697 <!-- ── SEO Settings ── -->
698 <div class="mxch-card" style="margin-top: 16px;">
699 <div class="mxch-card-header">
700 <h3 class="mxch-card-title"><?php esc_html_e('SEO', 'mxchat'); ?></h3>
701 </div>
702 <div class="mxch-card-body">
703
704 <?php if (!$pro_gsc_integration): ?>
705 <!-- Google Search Console (Pro/Add-on) -->
706 <div class="mxch-field mxch-gsc-settings-locked">
707 <div class="mxch-gsc-settings-locked-header">
708 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
709 <span><?php esc_html_e('Google Search Console', 'mxchat'); ?></span>
710 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
711 </div>
712 <p class="mxch-field-description"><?php esc_html_e('Connect Google Search Console to see real search performance data — clicks, impressions, CTR, and keyword rankings — directly in your SEO dashboard. Chat with your GSC data using the AI Admin Assistant add-on.', 'mxchat'); ?></p>
713 <button type="button" class="mxch-gsc-connect-btn" disabled>
714 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
715 <?php esc_html_e('Connect Google Search Console', 'mxchat'); ?>
716 </button>
717 <?php if ($is_activated): ?>
718 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Install Add-on', 'mxchat'); ?></a>
719 <?php else: ?>
720 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Upgrade to Pro', 'mxchat'); ?></a>
721 <?php endif; ?>
722 </div>
723 <?php endif; ?>
724
725 <!-- AI Optimize Fields -->
726 <?php
727 $seo_opt_meta = $options['seo_optimize_meta_desc'] ?? 'on';
728 $seo_opt_title = $options['seo_optimize_seo_title'] ?? 'on';
729 $seo_opt_slug = $options['seo_optimize_slug'] ?? 'on';
730 $seo_opt_read = $options['seo_optimize_readability'] ?? 'on';
731 $seo_opt_links = $options['seo_optimize_internal_links'] ?? 'on';
732 $seo_opt_imgalt = $options['seo_optimize_img_alt'] ?? 'on';
733 $seo_opt_feat = $options['seo_optimize_featured_img'] ?? 'on';
734 $has_addon = $pro_internal_linking; // any addon feature unlocked means addon is present
735 ?>
736 <div class="mxch-field">
737 <label class="mxch-field-label"><?php esc_html_e('AI Optimize', 'mxchat'); ?></label>
738 <p class="mxch-field-description" style="margin-bottom: 10px;"><?php esc_html_e('Choose which checks AI Optimize will fix when run.', 'mxchat'); ?></p>
739 <div class="mxch-seo-opt-grid">
740 <label class="mxch-seo-opt-item">
741 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_meta_desc" <?php checked($seo_opt_meta, 'on'); ?>>
742 <span><?php esc_html_e('Meta Description', 'mxchat'); ?></span>
743 </label>
744 <label class="mxch-seo-opt-item">
745 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_seo_title" <?php checked($seo_opt_title, 'on'); ?>>
746 <span><?php esc_html_e('SEO Title', 'mxchat'); ?></span>
747 </label>
748 <label class="mxch-seo-opt-item">
749 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_slug" <?php checked($seo_opt_slug, 'on'); ?>>
750 <span><?php esc_html_e('URL Slug', 'mxchat'); ?></span>
751 </label>
752 <label class="mxch-seo-opt-item<?php echo $has_addon ? '' : ' mxch-seo-opt-locked'; ?>">
753 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_readability" <?php checked($seo_opt_read, 'on'); ?><?php echo $has_addon ? '' : ' disabled'; ?>>
754 <span><?php esc_html_e('Readability', 'mxchat'); ?></span>
755 <?php if (!$has_addon): ?>
756 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
757 <?php endif; ?>
758 </label>
759 <label class="mxch-seo-opt-item<?php echo $has_addon ? '' : ' mxch-seo-opt-locked'; ?>">
760 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_internal_links" <?php checked($seo_opt_links, 'on'); ?><?php echo $has_addon ? '' : ' disabled'; ?>>
761 <span><?php esc_html_e('Internal Links', 'mxchat'); ?></span>
762 <?php if (!$has_addon): ?>
763 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
764 <?php endif; ?>
765 </label>
766 <label class="mxch-seo-opt-item<?php echo $has_addon ? '' : ' mxch-seo-opt-locked'; ?>">
767 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_img_alt" <?php checked($seo_opt_imgalt, 'on'); ?><?php echo $has_addon ? '' : ' disabled'; ?>>
768 <span><?php esc_html_e('Image ALT Text', 'mxchat'); ?></span>
769 <?php if (!$has_addon): ?>
770 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
771 <?php endif; ?>
772 </label>
773 <label class="mxch-seo-opt-item<?php echo $has_addon ? '' : ' mxch-seo-opt-locked'; ?>">
774 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_featured_img" <?php checked($seo_opt_feat, 'on'); ?><?php echo $has_addon ? '' : ' disabled'; ?>>
775 <span><?php esc_html_e('Featured Image', 'mxchat'); ?></span>
776 <?php if (!$has_addon): ?>
777 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
778 <?php endif; ?>
779 </label>
780 </div>
781 </div>
782
783 </div>
784 </div>
785 </div>
786
787 <!-- ========================================
788 SEO
789 ======================================== -->
790 <div id="content-seo" class="mxch-section">
791 <div class="mxch-content-header">
792 <h1 class="mxch-content-title"><?php esc_html_e('SEO Analysis', 'mxchat'); ?></h1>
793 <p class="mxch-content-subtitle"><?php esc_html_e('Analyze and optimize SEO for all your content.', 'mxchat'); ?></p>
794 </div>
795
796 <div class="mxch-card">
797 <div class="mxch-card-body" style="padding:0;">
798 <!-- Filter Bar -->
799 <div class="mxch-seod-filters">
800 <div class="mxch-seod-filters-left">
801 <select id="mxch-seod-post-type" class="mxch-seod-select">
802 <option value="any"><?php esc_html_e('All Types', 'mxchat'); ?></option>
803 <option value="post"><?php esc_html_e('Posts', 'mxchat'); ?></option>
804 <option value="page"><?php esc_html_e('Pages', 'mxchat'); ?></option>
805 <?php
806 $extra_types = get_post_types(array('public' => true, '_builtin' => false), 'objects');
807 foreach ($extra_types as $pt) {
808 if (in_array($pt->name, array('attachment', 'elementor_library', 'e-landing-page'), true)) continue;
809 printf('<option value="%s">%s</option>', esc_attr($pt->name), esc_html($pt->labels->name));
810 }
811 ?>
812 </select>
813 <div class="mxch-seod-filter-pills">
814 <button type="button" class="mxch-seod-pill active" data-filter="all"><?php esc_html_e('All', 'mxchat'); ?></button>
815 <button type="button" class="mxch-seod-pill" data-filter="issues"><?php esc_html_e('Issues', 'mxchat'); ?></button>
816 <button type="button" class="mxch-seod-pill" data-filter="good"><?php esc_html_e('Good', 'mxchat'); ?></button>
817 <button type="button" class="mxch-seod-pill" data-filter="unscored"><?php esc_html_e('Not Scanned', 'mxchat'); ?></button>
818 </div>
819 </div>
820 <div class="mxch-seod-filters-right">
821 <?php if (!$has_addon): ?>
822 <span class="mxch-seod-bulk-note" id="mxch-seod-bulk-note" style="display:none;"><?php echo $is_activated ? esc_html__('Bulk optimize requires the Advanced Content Editor add-on', 'mxchat') : esc_html__('Bulk optimize requires MxChat Pro', 'mxchat'); ?></span>
823 <?php endif; ?>
824 <button type="button" class="mxch-seod-scan-btn mxch-seod-optimize-selected-btn<?php echo $has_addon ? '' : ' mxch-seod-bulk-locked'; ?>" id="mxch-seod-optimize-selected" style="display:none;"<?php echo $has_addon ? '' : ' disabled title="' . esc_attr__('Pro required for bulk optimization', 'mxchat') . '"'; ?>>
825 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.287 1.288L3 12l5.8 1.9a2 2 0 0 1 1.288 1.287L12 21l1.9-5.8a2 2 0 0 1 1.287-1.288L21 12l-5.8-1.9a2 2 0 0 1-1.288-1.287Z"/></svg>
826 <span><?php esc_html_e('Optimize Selected', 'mxchat'); ?></span>
827 <?php if (!$has_addon): ?>
828 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
829 <?php endif; ?>
830 </button>
831 <button type="button" class="mxch-seod-scan-btn mxch-seod-scan-stop-btn" id="mxch-seod-optimize-stop" style="display:none;">
832 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
833 <span><?php esc_html_e('Stop', 'mxchat'); ?></span>
834 </button>
835 <div class="mxch-seod-search-wrap">
836 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
837 <input type="text" id="mxch-seod-search" class="mxch-seod-search" placeholder="<?php esc_attr_e('Search posts...', 'mxchat'); ?>">
838 </div>
839 </div>
840 </div>
841
842 <!-- Posts Table -->
843 <div class="mxch-seod-table-wrap">
844 <div id="mxch-seod-table" class="mxch-seod-table">
845 <!-- Rendered by JS -->
846 </div>
847 <div id="mxch-seod-loading" class="mxch-seod-loading">
848 <div class="mxch-cg-history-spinner"></div>
849 <p><?php esc_html_e('Loading posts...', 'mxchat'); ?></p>
850 </div>
851 <div id="mxch-seod-empty" class="mxch-seod-empty" style="display:none;">
852 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
853 <p><?php esc_html_e('No posts found matching your filters.', 'mxchat'); ?></p>
854 </div>
855 </div>
856
857 <!-- Footer: Scan + Pagination -->
858 <div class="mxch-seod-footer" id="mxch-seod-footer" style="display:none;">
859 <div class="mxch-seod-footer-left">
860 <button type="button" class="mxch-seod-scan-btn" id="mxch-seod-scan-all">
861 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
862 <span><?php esc_html_e('Scan Unscored', 'mxchat'); ?></span>
863 </button>
864 <span class="mxch-seod-scan-status" id="mxch-seod-scan-status"></span>
865 </div>
866 <div class="mxch-seod-pagination" id="mxch-seod-pagination">
867 <!-- Rendered by JS -->
868 </div>
869 </div>
870 </div>
871 </div>
872 </div>
873
874 <!-- ========================================
875 CALENDAR
876 ======================================== -->
877 <div id="content-calendar" class="mxch-section">
878 <?php if ($pro_content_calendar) : ?>
879 <!-- Add-on is active container for calendar JS to populate -->
880 <div class="mxcal-container" id="mxcal-container"></div>
881 <?php else : ?>
882 <!-- Add-on not installed show blurred demo calendar -->
883 <style>
884 .mxcal-demo-wrap { position: relative; }
885 .mxcal-demo-blur { filter: blur(3px); pointer-events: none; user-select: none; opacity: 0.7; }
886 .mxcal-demo-overlay {
887 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
888 z-index: 10; text-align: center; background: rgba(255,255,255,0.95);
889 border-radius: 16px; padding: 40px 48px; box-shadow: 0 8px 40px rgba(120,115,245,0.15);
890 border: 1px solid rgba(120,115,245,0.12); max-width: 460px; width: 90%;
891 }
892 .mxcal-demo-overlay h2 {
893 font-size: 22px; font-weight: 700; margin: 0 0 8px; color: #1A202C;
894 }
895 .mxcal-demo-overlay p { font-size: 14px; color: #718096; line-height: 1.6; margin: 0 0 20px; }
896 .mxcal-demo-overlay .mxcal-demo-badge {
897 display: inline-block; background: linear-gradient(135deg, #fa73e6, #7873f5);
898 color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px;
899 border-radius: 20px; margin-bottom: 16px; letter-spacing: 0.5px;
900 }
901 .mxcal-demo-overlay a.mxcal-demo-btn {
902 display: inline-block; background: linear-gradient(135deg, #fa73e6, #7873f5);
903 color: #fff; font-size: 14px; font-weight: 600; padding: 12px 28px;
904 border-radius: 10px; text-decoration: none; transition: all 0.2s;
905 box-shadow: 0 4px 14px rgba(120,115,245,0.25);
906 }
907 .mxcal-demo-overlay a.mxcal-demo-btn:hover {
908 box-shadow: 0 6px 20px rgba(120,115,245,0.35); transform: translateY(-1px);
909 }
910 .mxcal-demo-grid {
911 display: grid; grid-template-columns: repeat(7, 1fr);
912 border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; background: #fff;
913 }
914 .mxcal-demo-hdr {
915 background: #F7FAFC; padding: 10px 6px; text-align: center;
916 font-size: 11px; font-weight: 600; color: #A0AEC0; text-transform: uppercase;
917 border-bottom: 1px solid #E2E8F0;
918 }
919 .mxcal-demo-day {
920 min-height: 90px; padding: 8px; border-right: 1px solid #F0F0F5;
921 border-bottom: 1px solid #F0F0F5; display: flex; flex-direction: column; gap: 4px;
922 }
923 .mxcal-demo-day:nth-child(7n) { border-right: none; }
924 .mxcal-demo-num { font-size: 12px; font-weight: 600; color: #A0AEC0; }
925 .mxcal-demo-kw { font-size: 10px; font-weight: 600; color: #2D3748; line-height: 1.2; }
926 .mxcal-demo-stats { display: flex; gap: 4px; margin-top: auto; }
927 .mxcal-demo-vol { font-size: 9px; background: #EDF2F7; padding: 1px 5px; border-radius: 3px; color: #718096; }
928 .mxcal-demo-kd { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 700; }
929 .mxcal-demo-easy { background: rgba(16,185,129,0.1); color: #059669; }
930 .mxcal-demo-med { background: rgba(245,158,11,0.1); color: #d97706; }
931 .mxcal-demo-hard { background: rgba(239,68,68,0.1); color: #dc2626; }
932 .mxcal-demo-planned { border-left: 3px solid #CBD5E0; }
933 .mxcal-demo-done { border-left: 3px solid #10b981; }
934 .mxcal-demo-empty { background: #FAFAFA; }
935 .mxcal-demo-header {
936 display: flex; justify-content: space-between; align-items: center;
937 margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
938 }
939 .mxcal-demo-header h3 { font-size: 18px; font-weight: 700; color: #1A202C; margin: 0; }
940 .mxcal-demo-month {
941 display: flex; align-items: center; gap: 16px; justify-content: center; margin-bottom: 14px;
942 }
943 .mxcal-demo-month span { font-size: 16px; font-weight: 700; color: #2D3748; }
944 .mxcal-demo-month-btn {
945 background: none; border: 1px solid #E2E8F0; border-radius: 6px;
946 padding: 4px 12px; font-size: 12px; color: #718096;
947 }
948 </style>
949 <div class="mxcal-demo-wrap">
950 <div class="mxcal-demo-blur">
951 <div class="mxcal-demo-header">
952 <h3>Content Calendar</h3>
953 <div style="display:flex;gap:8px;">
954 <span style="background:#EDF2F7;padding:4px 12px;border-radius:20px;font-size:12px;color:#4A5568;">mxchat.ai</span>
955 <span style="background:linear-gradient(135deg,#fa73e6,#7873f5);padding:4px 12px;border-radius:20px;font-size:11px;color:#fff;font-weight:600;">AI Chatbot Plugin</span>
956 </div>
957 </div>
958 <div class="mxcal-demo-month">
959 <button class="mxcal-demo-month-btn">&larr;</button>
960 <span><?php echo esc_html(wp_date('F Y')); ?></span>
961 <button class="mxcal-demo-month-btn">&rarr;</button>
962 </div>
963 <div class="mxcal-demo-grid">
964 <?php
965 $days = array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
966 foreach ($days as $d) echo '<div class="mxcal-demo-hdr">' . $d . '</div>';
967
968 $demo_posts = array(
969 array('kw' => 'wordpress chatbot plugin', 'vol' => '2,400', 'kd' => 'KD 28', 'cls' => 'easy', 'st' => 'done'),
970 array('kw' => 'ai customer support', 'vol' => '1,900', 'kd' => 'KD 35', 'cls' => 'med', 'st' => 'done'),
971 array('kw' => 'chatbot for ecommerce', 'vol' => '1,600', 'kd' => 'KD 22', 'cls' => 'easy', 'st' => 'done'),
972 array('kw' => 'gpt wordpress integration', 'vol' => '1,100', 'kd' => 'KD 41', 'cls' => 'med', 'st' => 'planned'),
973 array('kw' => 'live chat vs chatbot', 'vol' => '3,200', 'kd' => 'KD 18', 'cls' => 'easy', 'st' => 'planned'),
974 array('kw' => 'ai lead generation', 'vol' => '2,800', 'kd' => 'KD 52', 'cls' => 'med', 'st' => 'planned'),
975 array('kw' => 'reduce support tickets ai', 'vol' => '880', 'kd' => 'KD 15', 'cls' => 'easy', 'st' => 'planned'),
976 array('kw' => 'best chatbot plugins 2026', 'vol' => '4,100', 'kd' => 'KD 62', 'cls' => 'hard', 'st' => 'planned'),
977 array('kw' => 'woocommerce chatbot', 'vol' => '1,400', 'kd' => 'KD 30', 'cls' => 'med', 'st' => 'planned'),
978 array('kw' => 'automate faq wordpress', 'vol' => '720', 'kd' => 'KD 12', 'cls' => 'easy', 'st' => 'planned'),
979 array('kw' => 'claude vs chatgpt wordpress', 'vol' => '2,100', 'kd' => 'KD 38', 'cls' => 'med', 'st' => 'planned'),
980 array('kw' => 'ai content generation', 'vol' => '5,400', 'kd' => 'KD 68', 'cls' => 'hard', 'st' => 'planned'),
981 );
982
983 $first_day = (int) wp_date('w', strtotime('first day of this month'));
984 $days_in_month = (int) wp_date('t');
985 $post_idx = 0;
986
987 for ($i = 0; $i < $first_day; $i++) echo '<div class="mxcal-demo-day mxcal-demo-empty"></div>';
988
989 for ($d = 1; $d <= $days_in_month; $d++) {
990 if ($post_idx < count($demo_posts)) {
991 $p = $demo_posts[$post_idx];
992 $st_cls = $p['st'] === 'done' ? 'mxcal-demo-done' : 'mxcal-demo-planned';
993 echo '<div class="mxcal-demo-day ' . $st_cls . '">';
994 echo '<span class="mxcal-demo-num">' . $d . '</span>';
995 echo '<span class="mxcal-demo-kw">' . esc_html($p['kw']) . '</span>';
996 echo '<div class="mxcal-demo-stats">';
997 echo '<span class="mxcal-demo-vol">' . $p['vol'] . '</span>';
998 echo '<span class="mxcal-demo-kd mxcal-demo-' . $p['cls'] . '">' . $p['kd'] . '</span>';
999 echo '</div></div>';
1000 $post_idx++;
1001 } else {
1002 echo '<div class="mxcal-demo-day mxcal-demo-empty"><span class="mxcal-demo-num">' . $d . '</span></div>';
1003 }
1004 }
1005
1006 $total = $first_day + $days_in_month;
1007 $remaining = $total % 7 === 0 ? 0 : 7 - ($total % 7);
1008 for ($i = 0; $i < $remaining; $i++) echo '<div class="mxcal-demo-day mxcal-demo-empty"></div>';
1009 ?>
1010 </div>
1011 </div>
1012 <div class="mxcal-demo-overlay">
1013 <span class="mxcal-demo-badge">PRO ADD-ON</span>
1014 <h2>AI Content Calendar</h2>
1015 <p>Import SEO data and let AI generate a 30-day blog plan with targeted keywords, difficulty scores, and automated post scheduling.</p>
1016 <a href="https://mxchat.ai/advanced-content-editor/" target="_blank" class="mxcal-demo-btn">Get Advanced Content Editor</a>
1017 </div>
1018 </div>
1019 <?php endif; ?>
1020 </div>
1021
1022 <!-- ========================================
1023 TEMPLATES
1024 ======================================== -->
1025 <div id="content-templates" class="mxch-section">
1026 <?php if ($pro_template_generator) : ?>
1027 <div id="mxtpl-container"></div>
1028 <?php else : ?>
1029 <style>
1030 .mxtpl-demo-wrap { position: relative; }
1031 .mxtpl-demo-blur { filter: blur(3px); pointer-events: none; user-select: none; opacity: 0.7; padding: 24px; }
1032 .mxtpl-demo-overlay {
1033 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
1034 z-index: 10; text-align: center; background: rgba(255,255,255,0.95);
1035 border-radius: 16px; padding: 40px 48px; box-shadow: 0 8px 40px rgba(120,115,245,0.15);
1036 border: 1px solid rgba(120,115,245,0.12); max-width: 460px; width: 90%;
1037 }
1038 .mxtpl-demo-overlay h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: #1A202C; }
1039 .mxtpl-demo-overlay p { font-size: 14px; color: #718096; line-height: 1.6; margin: 0 0 20px; }
1040 .mxtpl-demo-badge { display: inline-block; background: linear-gradient(135deg, #fa73e6, #7873f5); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; letter-spacing: 0.5px; }
1041 .mxtpl-demo-btn { display: inline-block; background: linear-gradient(135deg, #fa73e6, #7873f5); color: #fff; font-size: 14px; font-weight: 600; padding: 12px 28px; border-radius: 10px; text-decoration: none; box-shadow: 0 4px 14px rgba(120,115,245,0.25); }
1042 .mxtpl-demo-section { margin-bottom: 20px; }
1043 .mxtpl-demo-label { font-size: 14px; font-weight: 700; color: #2D3748; margin-bottom: 8px; }
1044 .mxtpl-demo-textarea { width: 100%; padding: 12px; border: 2px solid #E2E8F0; border-radius: 8px; font-size: 13px; color: #4A5568; background: #F7FAFC; resize: none; font-family: inherit; }
1045 .mxtpl-demo-pills { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
1046 .mxtpl-demo-pill { background: rgba(120,115,245,0.08); color: #7873f5; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; font-family: monospace; }
1047 .mxtpl-demo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
1048 .mxtpl-demo-field { display: flex; flex-direction: column; gap: 4px; }
1049 .mxtpl-demo-field label { font-size: 12px; font-weight: 600; color: #718096; }
1050 .mxtpl-demo-field select, .mxtpl-demo-field input { padding: 8px 10px; border: 2px solid #E2E8F0; border-radius: 6px; font-size: 13px; background: #F7FAFC; }
1051 </style>
1052 <div class="mxtpl-demo-wrap">
1053 <div class="mxtpl-demo-blur">
1054 <div class="mxtpl-demo-section">
1055 <div class="mxtpl-demo-label">1. Upload Data</div>
1056 <button style="padding:8px 18px;border:1px solid #E2E8F0;border-radius:8px;background:#F7FAFC;color:#718096;font-size:13px;cursor:default;">Upload CSV</button>
1057 <span style="font-size:12px;color:#10b981;margin-left:8px;">24 rows loaded</span>
1058 </div>
1059 <div class="mxtpl-demo-section">
1060 <div class="mxtpl-demo-label">2. Content Source</div>
1061 <div class="mxtpl-demo-pills">
1062 <span class="mxtpl-demo-pill">{city}</span>
1063 <span class="mxtpl-demo-pill">{state}</span>
1064 <span class="mxtpl-demo-pill">{service}</span>
1065 <span class="mxtpl-demo-pill">{phone}</span>
1066 </div>
1067 <textarea class="mxtpl-demo-textarea" rows="3" readonly>Write a {comprehensive|detailed|in-depth} service page about {service} in {city}, {state}. Highlight our expertise and include a call to action with {phone}.</textarea>
1068 </div>
1069 <div class="mxtpl-demo-section">
1070 <div class="mxtpl-demo-label">3. Settings</div>
1071 <div class="mxtpl-demo-grid">
1072 <div class="mxtpl-demo-field"><label>Content Type</label><select><option>Page</option></select></div>
1073 <div class="mxtpl-demo-field"><label>Status</label><select><option>Draft</option></select></div>
1074 <div class="mxtpl-demo-field"><label>Slug Template</label><input type="text" value="{service}-in-{city}" readonly /></div>
1075 </div>
1076 </div>
1077 </div>
1078 <div class="mxtpl-demo-overlay">
1079 <span class="mxtpl-demo-badge">PRO ADD-ON</span>
1080 <h2>Spintax & Template Generator</h2>
1081 <p>Generate bulk pages from CSV data with spintax variations. Create hundreds of unique, AI-written city pages, service pages, and landing pages.</p>
1082 <a href="https://mxchat.ai/advanced-content-editor/" target="_blank" class="mxtpl-demo-btn">Get Advanced Content Editor</a>
1083 </div>
1084 </div>
1085 <?php endif; ?>
1086 </div>
1087
1088 </main>
1089 </div>
1090 <?php
1091 }
1092