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

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