PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / trunk
MxChat – AI Chatbot & Content Generation for WordPress vtrunk
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 trunk, at includes/admin-content-page.php

1,111 lines 94.1 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.6-sol');
517 // Catalog-derived (plan ccb751): this select was the seventh
518 // hand-maintained model map and had drifted (it still offered
519 // a code model for content generation). It now renders from
520 // MxChat_Model_Catalog, restricted to the providers the
521 // generator can actually dispatch to — see
522 // MxChat_Content_Generator::supported_content_providers().
523 $model_groups = MxChat_Model_Catalog::settings_dropdown_groups(
524 $content_model,
525 MxChat_Content_Generator::supported_content_providers()
526 );
527 // Round-trip guard: an install saved on an id the catalog no
528 // longer lists (e.g. grok-code-fast-1) keeps its selection
529 // rendered instead of silently snapping to the first option
530 // on the next save.
531 $mxch_cg_model_in_groups = false;
532 foreach ($model_groups as $group_models) {
533 if (array_key_exists($content_model, $group_models)) {
534 $mxch_cg_model_in_groups = true;
535 break;
536 }
537 }
538 if (!$mxch_cg_model_in_groups && $content_model !== '') {
539 $model_groups[__('Currently saved', 'mxchat')] = array(
540 /* translators: %s: model id */
541 $content_model => sprintf(__('%s — no longer offered, choose a replacement', 'mxchat'), $content_model),
542 );
543 }
544 foreach ($model_groups as $group => $group_models) {
545 if (empty($group_models)) {
546 continue;
547 }
548 echo '<optgroup label="' . esc_attr($group) . '">';
549 foreach ($group_models as $value => $label) {
550 $selected = selected($content_model, $value, false);
551 echo '<option value="' . esc_attr($value) . '" ' . $selected . '>' . esc_html($label) . '</option>';
552 }
553 echo '</optgroup>';
554 }
555 ?>
556 </select>
557 </div>
558 <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>
559 </div>
560
561 <!-- Image Model -->
562 <div class="mxch-field">
563 <label class="mxch-field-label" for="mxch-image-model"><?php esc_html_e('Image Model', 'mxchat'); ?></label>
564 <div class="mxch-field-control">
565 <?php $image_model = $options['content_image_model'] ?? 'gpt-image-1.5'; ?>
566 <select id="mxch-image-model" data-field="content_image_model" class="mxch-cg-select">
567 <optgroup label="<?php esc_attr_e('OpenAI', 'mxchat'); ?>">
568 <option value="gpt-image-2" <?php selected($image_model, 'gpt-image-2'); ?>><?php esc_html_e('GPT Image 2 (Latest)', 'mxchat'); ?></option>
569 <option value="gpt-image-1.5" <?php selected($image_model, 'gpt-image-1.5'); ?>><?php esc_html_e('GPT Image 1.5', 'mxchat'); ?></option>
570 </optgroup>
571 <optgroup label="<?php esc_attr_e('xAI', 'mxchat'); ?>">
572 <option value="grok-imagine-image-pro" <?php selected($image_model, 'grok-imagine-image-pro'); ?>><?php esc_html_e('Grok Imagine Pro', 'mxchat'); ?></option>
573 <option value="grok-imagine-image" <?php selected($image_model, 'grok-imagine-image'); ?>><?php esc_html_e('Grok Imagine', 'mxchat'); ?></option>
574 </optgroup>
575 <optgroup label="<?php esc_attr_e('Google', 'mxchat'); ?>">
576 <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>
577 <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>
578 </optgroup>
579 </select>
580 </div>
581 <p class="mxch-field-description"><?php esc_html_e('Select the AI model used for generating images within your content.', 'mxchat'); ?></p>
582 </div>
583
584 <!-- Image Quality (GPT Image only) -->
585 <div class="mxch-field">
586 <label class="mxch-field-label" for="mxch-image-quality"><?php esc_html_e('Image Quality', 'mxchat'); ?></label>
587 <div class="mxch-field-control">
588 <?php $image_quality = $options['content_image_quality'] ?? 'auto'; ?>
589 <?php $quality_supported = (strpos($image_model, 'gpt-image') === 0); ?>
590 <select id="mxch-image-quality" data-field="content_image_quality" class="mxch-cg-select"<?php echo $quality_supported ? '' : ' disabled'; ?>>
591 <option value="auto" <?php selected($image_quality, 'auto'); ?>><?php esc_html_e('Auto (default)', 'mxchat'); ?></option>
592 <option value="low" <?php selected($image_quality, 'low'); ?>><?php esc_html_e('Low (fastest, cheapest)', 'mxchat'); ?></option>
593 <option value="medium" <?php selected($image_quality, 'medium'); ?>><?php esc_html_e('Medium', 'mxchat'); ?></option>
594 <option value="high" <?php selected($image_quality, 'high'); ?>><?php esc_html_e('High (best, slowest)', 'mxchat'); ?></option>
595 </select>
596 </div>
597 <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>
598 </div>
599 <script>(function(){
600 var m = document.getElementById('mxch-image-model');
601 var q = document.getElementById('mxch-image-quality');
602 if (!m || !q || q._wired) { return; } q._wired = true;
603 function sync(){ q.disabled = (m.value || '').indexOf('gpt-image') !== 0; }
604 m.addEventListener('change', sync);
605 sync();
606 })();</script>
607
608 <!-- Enable Image Generation -->
609 <div class="mxch-field">
610 <label class="mxch-toggle">
611 <?php $enable_images = $options['content_enable_images'] ?? 'on'; ?>
612 <input type="checkbox" class="mxch-toggle-input" data-field="content_enable_images" value="on" <?php checked($enable_images, 'on'); ?>>
613 <span class="mxch-toggle-switch"></span>
614 <span class="mxch-toggle-label"><?php esc_html_e('Enable Image Generation', 'mxchat'); ?></span>
615 </label>
616 <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>
617 </div>
618
619 <!-- Images per Article -->
620 <div class="mxch-field">
621 <label class="mxch-field-label" for="mxch-image-count"><?php esc_html_e('Images per Article', 'mxchat'); ?></label>
622 <div class="mxch-field-control">
623 <?php $image_count = max(1, min(5, (int) ($options['content_image_count'] ?? 3))); ?>
624 <?php $images_on = ($options['content_enable_images'] ?? 'on') === 'on'; ?>
625 <div class="mxch-cg-slider-row">
626 <input type="range" min="1" max="5" step="1" value="<?php echo esc_attr($image_count); ?>"
627 data-field="content_image_count" id="mxch-image-count" class="mxch-cg-slider"<?php echo $images_on ? '' : ' disabled'; ?>>
628 <span id="mxch-image-count-val" class="mxch-cg-slider-value"><?php echo esc_html($image_count); ?></span>
629 </div>
630 </div>
631 <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>
632 </div>
633 <script>(function(){
634 var s = document.getElementById('mxch-image-count');
635 var v = document.getElementById('mxch-image-count-val');
636 if (!s || !v || s._wired) { return; } s._wired = true;
637 s.addEventListener('input', function(){ v.textContent = s.value; });
638 var e = document.querySelector('[data-field="content_enable_images"]');
639 if (e) {
640 var syncCount = function(){ s.disabled = !e.checked; };
641 e.addEventListener('change', syncCount);
642 syncCount();
643 }
644 })();</script>
645
646 <!-- Internal Linking (Pro) -->
647 <div class="mxch-field mxch-cg-pro-field<?php echo $pro_internal_linking ? '' : ' mxch-cg-pro-locked'; ?>">
648 <label class="mxch-toggle">
649 <?php $internal_linking_val = $options['content_internal_linking'] ?? 'off'; ?>
650 <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'; ?>>
651 <span class="mxch-toggle-switch"></span>
652 <span class="mxch-toggle-label">
653 <?php esc_html_e('Internal Linking', 'mxchat'); ?>
654 <?php if (!$pro_internal_linking): ?>
655 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
656 <?php endif; ?>
657 </span>
658 </label>
659 <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>
660 <?php if (!$pro_internal_linking): ?>
661 <?php if ($is_activated): ?>
662 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Install Add-on', 'mxchat'); ?></a>
663 <?php else: ?>
664 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Upgrade to Pro', 'mxchat'); ?></a>
665 <?php endif; ?>
666 <?php endif; ?>
667 </div>
668
669 <!-- Tool Use for AI Editing (Pro) -->
670 <div class="mxch-field mxch-cg-pro-field<?php echo $pro_tool_use ? '' : ' mxch-cg-pro-locked'; ?>">
671 <label class="mxch-toggle">
672 <?php $tool_use_val = $options['content_tool_use'] ?? 'off'; ?>
673 <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'; ?>>
674 <span class="mxch-toggle-switch"></span>
675 <span class="mxch-toggle-label">
676 <?php esc_html_e('Tool Use for AI Editing', 'mxchat'); ?>
677 <?php if (!$pro_tool_use): ?>
678 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
679 <?php endif; ?>
680 </span>
681 </label>
682 <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>
683 <?php if (!$pro_tool_use): ?>
684 <?php if ($is_activated): ?>
685 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Install Add-on', 'mxchat'); ?></a>
686 <?php else: ?>
687 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Upgrade to Pro', 'mxchat'); ?></a>
688 <?php endif; ?>
689 <?php endif; ?>
690 </div>
691
692 </div>
693 </div>
694
695 <!-- ── Editor Assistant (moved from Settings Behavior, plan-f7df40) ── -->
696 <div class="mxch-card">
697 <div class="mxch-card-header">
698 <h3 class="mxch-card-title">
699 <svg class="mxch-card-title-icon" 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="M15 4V2"/><path d="M15 16v-2"/><path d="M8 9h2"/><path d="M20 9h2"/><path d="M17.8 11.8 19 13"/><path d="M15 9h.01"/><path d="M17.8 6.2 19 5"/><path d="m3 21 9-9"/><path d="M12.2 6.2 11 5"/></svg>
700 <?php esc_html_e('Editor Assistant', 'mxchat'); ?>
701 </h3>
702 </div>
703 <?php // mxchat-autosave-section: this toggle saves through the shared
704 // settings transport (mxchat-admin.js + the ajax-handler's
705 // mxchat_editor_assistant_enabled case), NOT the data-field
706 // transport the rest of this tab uses — keep those apart. ?>
707 <div class="mxch-card-body mxchat-autosave-section">
708 <?php
709 mxchat_render_field_wrapper('mxchat_editor_assistant_enabled', __('Editor Assistant', 'mxchat'), function() use ($admin_instance) {
710 $admin_instance->mxchat_editor_assistant_toggle_callback();
711 }, __('Add magic-wand AI writing actions (rewrite, summarize, translate, continue, fix grammar) to the WordPress block editor. Opens a sidebar in the post editor. Uses the chat AI model configured in MxChat Settings. Off by default.', 'mxchat'));
712 ?>
713 </div>
714 </div>
715
716 <!-- ── SEO Settings ── -->
717 <div class="mxch-card" style="margin-top: 16px;">
718 <div class="mxch-card-header">
719 <h3 class="mxch-card-title"><?php esc_html_e('SEO', 'mxchat'); ?></h3>
720 </div>
721 <div class="mxch-card-body">
722
723 <?php if (!$pro_gsc_integration): ?>
724 <!-- Google Search Console (Pro/Add-on) -->
725 <div class="mxch-field mxch-gsc-settings-locked">
726 <div class="mxch-gsc-settings-locked-header">
727 <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>
728 <span><?php esc_html_e('Google Search Console', 'mxchat'); ?></span>
729 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
730 </div>
731 <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>
732 <button type="button" class="mxch-gsc-connect-btn" disabled>
733 <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>
734 <?php esc_html_e('Connect Google Search Console', 'mxchat'); ?>
735 </button>
736 <?php if ($is_activated): ?>
737 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Install Add-on', 'mxchat'); ?></a>
738 <?php else: ?>
739 <a href="https://mxchat.ai/" target="_blank" class="mxch-cg-pro-upgrade-link"><?php esc_html_e('Upgrade to Pro', 'mxchat'); ?></a>
740 <?php endif; ?>
741 </div>
742 <?php endif; ?>
743
744 <!-- AI Optimize Fields -->
745 <?php
746 $seo_opt_meta = $options['seo_optimize_meta_desc'] ?? 'on';
747 $seo_opt_title = $options['seo_optimize_seo_title'] ?? 'on';
748 $seo_opt_slug = $options['seo_optimize_slug'] ?? 'on';
749 $seo_opt_read = $options['seo_optimize_readability'] ?? 'on';
750 $seo_opt_links = $options['seo_optimize_internal_links'] ?? 'on';
751 $seo_opt_imgalt = $options['seo_optimize_img_alt'] ?? 'on';
752 $seo_opt_feat = $options['seo_optimize_featured_img'] ?? 'on';
753 $has_addon = $pro_internal_linking; // any addon feature unlocked means addon is present
754 ?>
755 <div class="mxch-field">
756 <label class="mxch-field-label"><?php esc_html_e('AI Optimize', 'mxchat'); ?></label>
757 <p class="mxch-field-description" style="margin-bottom: 10px;"><?php esc_html_e('Choose which checks AI Optimize will fix when run.', 'mxchat'); ?></p>
758 <div class="mxch-seo-opt-grid">
759 <label class="mxch-seo-opt-item">
760 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_meta_desc" <?php checked($seo_opt_meta, 'on'); ?>>
761 <span><?php esc_html_e('Meta Description', 'mxchat'); ?></span>
762 </label>
763 <label class="mxch-seo-opt-item">
764 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_seo_title" <?php checked($seo_opt_title, 'on'); ?>>
765 <span><?php esc_html_e('SEO Title', 'mxchat'); ?></span>
766 </label>
767 <label class="mxch-seo-opt-item">
768 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_slug" <?php checked($seo_opt_slug, 'on'); ?>>
769 <span><?php esc_html_e('URL Slug', 'mxchat'); ?></span>
770 </label>
771 <label class="mxch-seo-opt-item<?php echo $has_addon ? '' : ' mxch-seo-opt-locked'; ?>">
772 <input type="checkbox" class="mxch-seo-opt-check" data-field="seo_optimize_readability" <?php checked($seo_opt_read, 'on'); ?><?php echo $has_addon ? '' : ' disabled'; ?>>
773 <span><?php esc_html_e('Readability', 'mxchat'); ?></span>
774 <?php if (!$has_addon): ?>
775 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
776 <?php endif; ?>
777 </label>
778 <label class="mxch-seo-opt-item<?php echo $has_addon ? '' : ' mxch-seo-opt-locked'; ?>">
779 <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'; ?>>
780 <span><?php esc_html_e('Internal Links', 'mxchat'); ?></span>
781 <?php if (!$has_addon): ?>
782 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
783 <?php endif; ?>
784 </label>
785 <label class="mxch-seo-opt-item<?php echo $has_addon ? '' : ' mxch-seo-opt-locked'; ?>">
786 <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'; ?>>
787 <span><?php esc_html_e('Image ALT Text', 'mxchat'); ?></span>
788 <?php if (!$has_addon): ?>
789 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
790 <?php endif; ?>
791 </label>
792 <label class="mxch-seo-opt-item<?php echo $has_addon ? '' : ' mxch-seo-opt-locked'; ?>">
793 <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'; ?>>
794 <span><?php esc_html_e('Featured Image', 'mxchat'); ?></span>
795 <?php if (!$has_addon): ?>
796 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
797 <?php endif; ?>
798 </label>
799 </div>
800 </div>
801
802 </div>
803 </div>
804 </div>
805
806 <!-- ========================================
807 SEO
808 ======================================== -->
809 <div id="content-seo" class="mxch-section">
810 <div class="mxch-content-header">
811 <h1 class="mxch-content-title"><?php esc_html_e('SEO Analysis', 'mxchat'); ?></h1>
812 <p class="mxch-content-subtitle"><?php esc_html_e('Analyze and optimize SEO for all your content.', 'mxchat'); ?></p>
813 </div>
814
815 <div class="mxch-card">
816 <div class="mxch-card-body" style="padding:0;">
817 <!-- Filter Bar -->
818 <div class="mxch-seod-filters">
819 <div class="mxch-seod-filters-left">
820 <select id="mxch-seod-post-type" class="mxch-seod-select">
821 <option value="any"><?php esc_html_e('All Types', 'mxchat'); ?></option>
822 <option value="post"><?php esc_html_e('Posts', 'mxchat'); ?></option>
823 <option value="page"><?php esc_html_e('Pages', 'mxchat'); ?></option>
824 <?php
825 $extra_types = get_post_types(array('public' => true, '_builtin' => false), 'objects');
826 foreach ($extra_types as $pt) {
827 if (in_array($pt->name, array('attachment', 'elementor_library', 'e-landing-page'), true)) continue;
828 printf('<option value="%s">%s</option>', esc_attr($pt->name), esc_html($pt->labels->name));
829 }
830 ?>
831 </select>
832 <div class="mxch-seod-filter-pills">
833 <button type="button" class="mxch-seod-pill active" data-filter="all"><?php esc_html_e('All', 'mxchat'); ?></button>
834 <button type="button" class="mxch-seod-pill" data-filter="issues"><?php esc_html_e('Issues', 'mxchat'); ?></button>
835 <button type="button" class="mxch-seod-pill" data-filter="good"><?php esc_html_e('Good', 'mxchat'); ?></button>
836 <button type="button" class="mxch-seod-pill" data-filter="unscored"><?php esc_html_e('Not Scanned', 'mxchat'); ?></button>
837 </div>
838 </div>
839 <div class="mxch-seod-filters-right">
840 <?php if (!$has_addon): ?>
841 <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>
842 <?php endif; ?>
843 <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') . '"'; ?>>
844 <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>
845 <span><?php esc_html_e('Optimize Selected', 'mxchat'); ?></span>
846 <?php if (!$has_addon): ?>
847 <span class="mxch-cg-pro-badge"><?php echo $is_activated ? esc_html__('ADD-ON', 'mxchat') : esc_html__('PRO', 'mxchat'); ?></span>
848 <?php endif; ?>
849 </button>
850 <button type="button" class="mxch-seod-scan-btn mxch-seod-scan-stop-btn" id="mxch-seod-optimize-stop" style="display:none;">
851 <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>
852 <span><?php esc_html_e('Stop', 'mxchat'); ?></span>
853 </button>
854 <div class="mxch-seod-search-wrap">
855 <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>
856 <input type="text" id="mxch-seod-search" class="mxch-seod-search" placeholder="<?php esc_attr_e('Search posts...', 'mxchat'); ?>">
857 </div>
858 </div>
859 </div>
860
861 <!-- Posts Table -->
862 <div class="mxch-seod-table-wrap">
863 <div id="mxch-seod-table" class="mxch-seod-table">
864 <!-- Rendered by JS -->
865 </div>
866 <div id="mxch-seod-loading" class="mxch-seod-loading">
867 <div class="mxch-cg-history-spinner"></div>
868 <p><?php esc_html_e('Loading posts...', 'mxchat'); ?></p>
869 </div>
870 <div id="mxch-seod-empty" class="mxch-seod-empty" style="display:none;">
871 <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>
872 <p><?php esc_html_e('No posts found matching your filters.', 'mxchat'); ?></p>
873 </div>
874 </div>
875
876 <!-- Footer: Scan + Pagination -->
877 <div class="mxch-seod-footer" id="mxch-seod-footer" style="display:none;">
878 <div class="mxch-seod-footer-left">
879 <button type="button" class="mxch-seod-scan-btn" id="mxch-seod-scan-all">
880 <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>
881 <span><?php esc_html_e('Scan Unscored', 'mxchat'); ?></span>
882 </button>
883 <span class="mxch-seod-scan-status" id="mxch-seod-scan-status"></span>
884 </div>
885 <div class="mxch-seod-pagination" id="mxch-seod-pagination">
886 <!-- Rendered by JS -->
887 </div>
888 </div>
889 </div>
890 </div>
891 </div>
892
893 <!-- ========================================
894 CALENDAR
895 ======================================== -->
896 <div id="content-calendar" class="mxch-section">
897 <?php if ($pro_content_calendar) : ?>
898 <!-- Add-on is active container for calendar JS to populate -->
899 <div class="mxcal-container" id="mxcal-container"></div>
900 <?php else : ?>
901 <!-- Add-on not installed show blurred demo calendar -->
902 <style>
903 .mxcal-demo-wrap { position: relative; }
904 .mxcal-demo-blur { filter: blur(3px); pointer-events: none; user-select: none; opacity: 0.7; }
905 .mxcal-demo-overlay {
906 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
907 z-index: 10; text-align: center; background: rgba(255,255,255,0.95);
908 border-radius: 16px; padding: 40px 48px; box-shadow: 0 8px 40px rgba(120,115,245,0.15);
909 border: 1px solid rgba(120,115,245,0.12); max-width: 460px; width: 90%;
910 }
911 .mxcal-demo-overlay h2 {
912 font-size: 22px; font-weight: 700; margin: 0 0 8px; color: #1A202C;
913 }
914 .mxcal-demo-overlay p { font-size: 14px; color: #718096; line-height: 1.6; margin: 0 0 20px; }
915 .mxcal-demo-overlay .mxcal-demo-badge {
916 display: inline-block; background: linear-gradient(135deg, #fa73e6, #7873f5);
917 color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px;
918 border-radius: 20px; margin-bottom: 16px; letter-spacing: 0.5px;
919 }
920 .mxcal-demo-overlay a.mxcal-demo-btn {
921 display: inline-block; background: linear-gradient(135deg, #fa73e6, #7873f5);
922 color: #fff; font-size: 14px; font-weight: 600; padding: 12px 28px;
923 border-radius: 10px; text-decoration: none; transition: all 0.2s;
924 box-shadow: 0 4px 14px rgba(120,115,245,0.25);
925 }
926 .mxcal-demo-overlay a.mxcal-demo-btn:hover {
927 box-shadow: 0 6px 20px rgba(120,115,245,0.35); transform: translateY(-1px);
928 }
929 .mxcal-demo-grid {
930 display: grid; grid-template-columns: repeat(7, 1fr);
931 border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; background: #fff;
932 }
933 .mxcal-demo-hdr {
934 background: #F7FAFC; padding: 10px 6px; text-align: center;
935 font-size: 11px; font-weight: 600; color: #A0AEC0; text-transform: uppercase;
936 border-bottom: 1px solid #E2E8F0;
937 }
938 .mxcal-demo-day {
939 min-height: 90px; padding: 8px; border-right: 1px solid #F0F0F5;
940 border-bottom: 1px solid #F0F0F5; display: flex; flex-direction: column; gap: 4px;
941 }
942 .mxcal-demo-day:nth-child(7n) { border-right: none; }
943 .mxcal-demo-num { font-size: 12px; font-weight: 600; color: #A0AEC0; }
944 .mxcal-demo-kw { font-size: 10px; font-weight: 600; color: #2D3748; line-height: 1.2; }
945 .mxcal-demo-stats { display: flex; gap: 4px; margin-top: auto; }
946 .mxcal-demo-vol { font-size: 9px; background: #EDF2F7; padding: 1px 5px; border-radius: 3px; color: #718096; }
947 .mxcal-demo-kd { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 700; }
948 .mxcal-demo-easy { background: rgba(16,185,129,0.1); color: #059669; }
949 .mxcal-demo-med { background: rgba(245,158,11,0.1); color: #d97706; }
950 .mxcal-demo-hard { background: rgba(239,68,68,0.1); color: #dc2626; }
951 .mxcal-demo-planned { border-left: 3px solid #CBD5E0; }
952 .mxcal-demo-done { border-left: 3px solid #10b981; }
953 .mxcal-demo-empty { background: #FAFAFA; }
954 .mxcal-demo-header {
955 display: flex; justify-content: space-between; align-items: center;
956 margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
957 }
958 .mxcal-demo-header h3 { font-size: 18px; font-weight: 700; color: #1A202C; margin: 0; }
959 .mxcal-demo-month {
960 display: flex; align-items: center; gap: 16px; justify-content: center; margin-bottom: 14px;
961 }
962 .mxcal-demo-month span { font-size: 16px; font-weight: 700; color: #2D3748; }
963 .mxcal-demo-month-btn {
964 background: none; border: 1px solid #E2E8F0; border-radius: 6px;
965 padding: 4px 12px; font-size: 12px; color: #718096;
966 }
967 </style>
968 <div class="mxcal-demo-wrap">
969 <div class="mxcal-demo-blur">
970 <div class="mxcal-demo-header">
971 <h3>Content Calendar</h3>
972 <div style="display:flex;gap:8px;">
973 <span style="background:#EDF2F7;padding:4px 12px;border-radius:20px;font-size:12px;color:#4A5568;">mxchat.ai</span>
974 <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>
975 </div>
976 </div>
977 <div class="mxcal-demo-month">
978 <button class="mxcal-demo-month-btn">&larr;</button>
979 <span><?php echo esc_html(wp_date('F Y')); ?></span>
980 <button class="mxcal-demo-month-btn">&rarr;</button>
981 </div>
982 <div class="mxcal-demo-grid">
983 <?php
984 $days = array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
985 foreach ($days as $d) echo '<div class="mxcal-demo-hdr">' . $d . '</div>';
986
987 $demo_posts = array(
988 array('kw' => 'wordpress chatbot plugin', 'vol' => '2,400', 'kd' => 'KD 28', 'cls' => 'easy', 'st' => 'done'),
989 array('kw' => 'ai customer support', 'vol' => '1,900', 'kd' => 'KD 35', 'cls' => 'med', 'st' => 'done'),
990 array('kw' => 'chatbot for ecommerce', 'vol' => '1,600', 'kd' => 'KD 22', 'cls' => 'easy', 'st' => 'done'),
991 array('kw' => 'gpt wordpress integration', 'vol' => '1,100', 'kd' => 'KD 41', 'cls' => 'med', 'st' => 'planned'),
992 array('kw' => 'live chat vs chatbot', 'vol' => '3,200', 'kd' => 'KD 18', 'cls' => 'easy', 'st' => 'planned'),
993 array('kw' => 'ai lead generation', 'vol' => '2,800', 'kd' => 'KD 52', 'cls' => 'med', 'st' => 'planned'),
994 array('kw' => 'reduce support tickets ai', 'vol' => '880', 'kd' => 'KD 15', 'cls' => 'easy', 'st' => 'planned'),
995 array('kw' => 'best chatbot plugins 2026', 'vol' => '4,100', 'kd' => 'KD 62', 'cls' => 'hard', 'st' => 'planned'),
996 array('kw' => 'woocommerce chatbot', 'vol' => '1,400', 'kd' => 'KD 30', 'cls' => 'med', 'st' => 'planned'),
997 array('kw' => 'automate faq wordpress', 'vol' => '720', 'kd' => 'KD 12', 'cls' => 'easy', 'st' => 'planned'),
998 array('kw' => 'claude vs chatgpt wordpress', 'vol' => '2,100', 'kd' => 'KD 38', 'cls' => 'med', 'st' => 'planned'),
999 array('kw' => 'ai content generation', 'vol' => '5,400', 'kd' => 'KD 68', 'cls' => 'hard', 'st' => 'planned'),
1000 );
1001
1002 $first_day = (int) wp_date('w', strtotime('first day of this month'));
1003 $days_in_month = (int) wp_date('t');
1004 $post_idx = 0;
1005
1006 for ($i = 0; $i < $first_day; $i++) echo '<div class="mxcal-demo-day mxcal-demo-empty"></div>';
1007
1008 for ($d = 1; $d <= $days_in_month; $d++) {
1009 if ($post_idx < count($demo_posts)) {
1010 $p = $demo_posts[$post_idx];
1011 $st_cls = $p['st'] === 'done' ? 'mxcal-demo-done' : 'mxcal-demo-planned';
1012 echo '<div class="mxcal-demo-day ' . $st_cls . '">';
1013 echo '<span class="mxcal-demo-num">' . $d . '</span>';
1014 echo '<span class="mxcal-demo-kw">' . esc_html($p['kw']) . '</span>';
1015 echo '<div class="mxcal-demo-stats">';
1016 echo '<span class="mxcal-demo-vol">' . $p['vol'] . '</span>';
1017 echo '<span class="mxcal-demo-kd mxcal-demo-' . $p['cls'] . '">' . $p['kd'] . '</span>';
1018 echo '</div></div>';
1019 $post_idx++;
1020 } else {
1021 echo '<div class="mxcal-demo-day mxcal-demo-empty"><span class="mxcal-demo-num">' . $d . '</span></div>';
1022 }
1023 }
1024
1025 $total = $first_day + $days_in_month;
1026 $remaining = $total % 7 === 0 ? 0 : 7 - ($total % 7);
1027 for ($i = 0; $i < $remaining; $i++) echo '<div class="mxcal-demo-day mxcal-demo-empty"></div>';
1028 ?>
1029 </div>
1030 </div>
1031 <div class="mxcal-demo-overlay">
1032 <span class="mxcal-demo-badge">PRO ADD-ON</span>
1033 <h2>AI Content Calendar</h2>
1034 <p>Import SEO data and let AI generate a 30-day blog plan with targeted keywords, difficulty scores, and automated post scheduling.</p>
1035 <a href="https://mxchat.ai/advanced-content-editor/" target="_blank" class="mxcal-demo-btn">Get Advanced Content Editor</a>
1036 </div>
1037 </div>
1038 <?php endif; ?>
1039 </div>
1040
1041 <!-- ========================================
1042 TEMPLATES
1043 ======================================== -->
1044 <div id="content-templates" class="mxch-section">
1045 <?php if ($pro_template_generator) : ?>
1046 <div id="mxtpl-container"></div>
1047 <?php else : ?>
1048 <style>
1049 .mxtpl-demo-wrap { position: relative; }
1050 .mxtpl-demo-blur { filter: blur(3px); pointer-events: none; user-select: none; opacity: 0.7; padding: 24px; }
1051 .mxtpl-demo-overlay {
1052 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
1053 z-index: 10; text-align: center; background: rgba(255,255,255,0.95);
1054 border-radius: 16px; padding: 40px 48px; box-shadow: 0 8px 40px rgba(120,115,245,0.15);
1055 border: 1px solid rgba(120,115,245,0.12); max-width: 460px; width: 90%;
1056 }
1057 .mxtpl-demo-overlay h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: #1A202C; }
1058 .mxtpl-demo-overlay p { font-size: 14px; color: #718096; line-height: 1.6; margin: 0 0 20px; }
1059 .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; }
1060 .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); }
1061 .mxtpl-demo-section { margin-bottom: 20px; }
1062 .mxtpl-demo-label { font-size: 14px; font-weight: 700; color: #2D3748; margin-bottom: 8px; }
1063 .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; }
1064 .mxtpl-demo-pills { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
1065 .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; }
1066 .mxtpl-demo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
1067 .mxtpl-demo-field { display: flex; flex-direction: column; gap: 4px; }
1068 .mxtpl-demo-field label { font-size: 12px; font-weight: 600; color: #718096; }
1069 .mxtpl-demo-field select, .mxtpl-demo-field input { padding: 8px 10px; border: 2px solid #E2E8F0; border-radius: 6px; font-size: 13px; background: #F7FAFC; }
1070 </style>
1071 <div class="mxtpl-demo-wrap">
1072 <div class="mxtpl-demo-blur">
1073 <div class="mxtpl-demo-section">
1074 <div class="mxtpl-demo-label">1. Upload Data</div>
1075 <button style="padding:8px 18px;border:1px solid #E2E8F0;border-radius:8px;background:#F7FAFC;color:#718096;font-size:13px;cursor:default;">Upload CSV</button>
1076 <span style="font-size:12px;color:#10b981;margin-left:8px;">24 rows loaded</span>
1077 </div>
1078 <div class="mxtpl-demo-section">
1079 <div class="mxtpl-demo-label">2. Content Source</div>
1080 <div class="mxtpl-demo-pills">
1081 <span class="mxtpl-demo-pill">{city}</span>
1082 <span class="mxtpl-demo-pill">{state}</span>
1083 <span class="mxtpl-demo-pill">{service}</span>
1084 <span class="mxtpl-demo-pill">{phone}</span>
1085 </div>
1086 <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>
1087 </div>
1088 <div class="mxtpl-demo-section">
1089 <div class="mxtpl-demo-label">3. Settings</div>
1090 <div class="mxtpl-demo-grid">
1091 <div class="mxtpl-demo-field"><label>Content Type</label><select><option>Page</option></select></div>
1092 <div class="mxtpl-demo-field"><label>Status</label><select><option>Draft</option></select></div>
1093 <div class="mxtpl-demo-field"><label>Slug Template</label><input type="text" value="{service}-in-{city}" readonly /></div>
1094 </div>
1095 </div>
1096 </div>
1097 <div class="mxtpl-demo-overlay">
1098 <span class="mxtpl-demo-badge">PRO ADD-ON</span>
1099 <h2>Spintax & Template Generator</h2>
1100 <p>Generate bulk pages from CSV data with spintax variations. Create hundreds of unique, AI-written city pages, service pages, and landing pages.</p>
1101 <a href="https://mxchat.ai/advanced-content-editor/" target="_blank" class="mxtpl-demo-btn">Get Advanced Content Editor</a>
1102 </div>
1103 </div>
1104 <?php endif; ?>
1105 </div>
1106
1107 </main>
1108 </div>
1109 <?php
1110 }
1111