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

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