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

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