king-addons / includes / admin / layouts / settings-page.php

settings-page.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.82, at includes/admin/layouts/settings-page.php

594 lines 33.8 KB

Raw Download Zip

1	<?php
2	/**
3	* Settings admin page - V3 Premium style inspired design.
4	*
5	* @package King_Addons
6	*/
7
8	if (!defined('ABSPATH')) {
9	exit;
10	}
11
12	// Theme mode is per-user
13	$theme_mode = get_user_meta(get_current_user_id(), 'king_addons_theme_mode', true);
14	$allowed_theme_modes = ['dark', 'light', 'auto'];
15	if (!in_array($theme_mode, $allowed_theme_modes, true)) {
16	$theme_mode = 'auto';
17	}
18
19	// Handle form submission
20	if (isset($_POST['king_addons_settings_submit_settings'])) {
21	if (
22	!isset($_POST['king_addons_settings_nonce_field']) \|\|
23	!wp_verify_nonce($_POST['king_addons_settings_nonce_field'], 'king_addons_settings_save_settings')
24	) {
25	wp_die('Security check failed.');
26	}
27
28	update_option('king_addons_google_map_api_key', sanitize_text_field($_POST['king_addons_google_map_api_key']));
29	update_option('king_addons_mailchimp_api_key', sanitize_text_field($_POST['king_addons_mailchimp_api_key']));
30	update_option('king_addons_recaptcha_v3_site_key', sanitize_text_field($_POST['king_addons_recaptcha_v3_site_key']));
31	update_option('king_addons_recaptcha_v3_secret_key', sanitize_text_field($_POST['king_addons_recaptcha_v3_secret_key']));
32	update_option('king_addons_recaptcha_v3_score_threshold', floatval($_POST['king_addons_recaptcha_v3_score_threshold']));
33
34	// Alternatives to reCAPTCHA, offered per form in the Form Builder panel.
35	update_option('king_addons_turnstile_site_key', sanitize_text_field($_POST['king_addons_turnstile_site_key'] ?? ''));
36	update_option('king_addons_turnstile_secret_key', sanitize_text_field($_POST['king_addons_turnstile_secret_key'] ?? ''));
37	update_option('king_addons_hcaptcha_site_key', sanitize_text_field($_POST['king_addons_hcaptcha_site_key'] ?? ''));
38	update_option('king_addons_hcaptcha_secret_key', sanitize_text_field($_POST['king_addons_hcaptcha_secret_key'] ?? ''));
39
40	// Payment providers used by the Form Builder payment action.
41	update_option('king_addons_stripe_secret_key', sanitize_text_field($_POST['king_addons_stripe_secret_key'] ?? ''));
42	update_option('king_addons_stripe_webhook_secret', sanitize_text_field($_POST['king_addons_stripe_webhook_secret'] ?? ''));
43	update_option('king_addons_paypal_client_id', sanitize_text_field($_POST['king_addons_paypal_client_id'] ?? ''));
44	update_option('king_addons_paypal_secret', sanitize_text_field($_POST['king_addons_paypal_secret'] ?? ''));
45	$king_addons_paypal_env = sanitize_key($_POST['king_addons_paypal_environment'] ?? 'sandbox');
46	update_option('king_addons_paypal_environment', 'live' === $king_addons_paypal_env ? 'live' : 'sandbox');
47
48	// Lightbox colors
49	update_option('king_addons_lightbox_bg_color', sanitize_text_field($_POST['king_addons_lightbox_bg_color']));
50	update_option('king_addons_lightbox_toolbar_color', sanitize_text_field($_POST['king_addons_lightbox_toolbar_color']));
51	update_option('king_addons_lightbox_caption_color', sanitize_text_field($_POST['king_addons_lightbox_caption_color']));
52	update_option('king_addons_lightbox_gallery_color', sanitize_text_field($_POST['king_addons_lightbox_gallery_color']));
53	update_option('king_addons_lightbox_pb_color', sanitize_text_field($_POST['king_addons_lightbox_pb_color']));
54	update_option('king_addons_lightbox_ui_color', sanitize_text_field($_POST['king_addons_lightbox_ui_color']));
55	update_option('king_addons_lightbox_ui_hover_color', sanitize_text_field($_POST['king_addons_lightbox_ui_hover_color']));
56	update_option('king_addons_lightbox_text_color', sanitize_text_field($_POST['king_addons_lightbox_text_color']));
57
58	// Lightbox numbers
59	update_option('king_addons_lightbox_icon_size', intval($_POST['king_addons_lightbox_icon_size']));
60	update_option('king_addons_lightbox_text_size', intval($_POST['king_addons_lightbox_text_size']));
61	update_option('king_addons_lightbox_arrow_size', intval($_POST['king_addons_lightbox_arrow_size']));
62
63	// Import Performance
64	$improve_import = isset($_POST['king_addons_improve_import_performance']) ? '1' : '0';
65	update_option('king_addons_improve_import_performance', $improve_import);
66
67	// Template Catalog Button
68	if (function_exists('king_addons_freemius') && king_addons_freemius()->can_use_premium_code()) {
69	$disable_template_catalog = isset($_POST['king_addons_disable_template_catalog_button']) ? '1' : '0';
70	update_option('king_addons_disable_template_catalog_button', $disable_template_catalog);
71	}
72
73	add_settings_error('king_addons_messages', 'king_addons_message', esc_html__('Settings Saved', 'king-addons'), 'updated');
74	}
75
76	// Get existing values
77	$google_map_key = get_option('king_addons_google_map_api_key', '');
78	$mailchimp_key = get_option('king_addons_mailchimp_api_key', '');
79	$recaptcha_site_key = get_option('king_addons_recaptcha_v3_site_key', '');
80	$recaptcha_secret_key = get_option('king_addons_recaptcha_v3_secret_key', '');
81	$recaptcha_score_threshold = get_option('king_addons_recaptcha_v3_score_threshold', 0.5);
82	$turnstile_site_key = get_option('king_addons_turnstile_site_key', '');
83	$turnstile_secret_key = get_option('king_addons_turnstile_secret_key', '');
84	$hcaptcha_site_key = get_option('king_addons_hcaptcha_site_key', '');
85	$hcaptcha_secret_key = get_option('king_addons_hcaptcha_secret_key', '');
86	$stripe_secret_key = get_option('king_addons_stripe_secret_key', '');
87	$stripe_webhook_secret = get_option('king_addons_stripe_webhook_secret', '');
88	$paypal_client_id = get_option('king_addons_paypal_client_id', '');
89	$paypal_secret = get_option('king_addons_paypal_secret', '');
90	$paypal_environment = get_option('king_addons_paypal_environment', 'sandbox');
91	$improve_import_performance = get_option('king_addons_improve_import_performance', '1');
92	$disable_template_catalog_button = get_option('king_addons_disable_template_catalog_button', '0');
93
94	// Enqueue the shared CSS
95	$css_url = KING_ADDONS_URL . 'includes/admin/layouts/shared/admin-v3-styles.css';
96	$css_path = KING_ADDONS_PATH . 'includes/admin/layouts/shared/admin-v3-styles.css';
97	$css_version = file_exists($css_path) ? filemtime($css_path) : KING_ADDONS_VERSION;
98	?>
99
100	<link rel="stylesheet" href="<?php echo esc_url($css_url); ?>?v=<?php echo esc_attr($css_version); ?>">
101
102	<script>
103	document.body.classList.add('ka-admin-v3');
104	(function() {
105	const mode = '<?php echo esc_js($theme_mode); ?>';
106	const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
107	const isDark = mode === 'auto' ? !!(mql && mql.matches) : mode === 'dark';
108	document.body.classList.toggle('ka-v3-dark', isDark);
109	document.documentElement.classList.toggle('ka-v3-dark', isDark);
110	})();
111	</script>
112
113	<div class="ka-admin-wrap">
114	<?php settings_errors('king_addons_messages'); ?>
115	<!-- Header -->
116	<div class="ka-admin-header">
117	<div class="ka-admin-header-left">
118	<div class="ka-admin-header-icon purple">
119	<span class="dashicons dashicons-admin-generic"></span>
120	</div>
121	<div>
122	<h1 class="ka-admin-title"><?php esc_html_e('Settings', 'king-addons'); ?></h1>
123	<p class="ka-admin-subtitle"><?php esc_html_e('Configure API keys and global options for King Addons.', 'king-addons'); ?></p>
124	</div>
125	</div>
126	<div class="ka-admin-header-actions">
127	<div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup" aria-label="<?php echo esc_attr(esc_html__('Theme', 'king-addons')); ?>" data-active="<?php echo esc_attr($theme_mode); ?>">
128	<span class="ka-v3-segmented-indicator" aria-hidden="true"></span>
129	<button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $theme_mode === 'light' ? 'true' : 'false'; ?>">
130	<span class="ka-v3-segmented-icon" aria-hidden="true">☀︎</span>
131	<?php esc_html_e('Light', 'king-addons'); ?>
132	</button>
133	<button type="button" class="ka-v3-segmented-btn" data-theme="dark" aria-pressed="<?php echo $theme_mode === 'dark' ? 'true' : 'false'; ?>">
134	<span class="ka-v3-segmented-icon" aria-hidden="true">☾</span>
135	<?php esc_html_e('Dark', 'king-addons'); ?>
136	</button>
137	<button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $theme_mode === 'auto' ? 'true' : 'false'; ?>">
138	<span class="ka-v3-segmented-icon" aria-hidden="true">◐</span>
139	<?php esc_html_e('Auto', 'king-addons'); ?>
140	</button>
141	</div>
142	<a href="https://www.youtube.com/@kingaddons/videos" target="_blank" class="ka-btn ka-btn-secondary">
143	<span class="dashicons dashicons-book"></span>
144	<?php esc_html_e('Guides', 'king-addons'); ?>
145	</a>
146	</div>
147	</div>
148
149	<!-- Tabs Navigation -->
150	<div class="ka-tabs">
151	<button type="button" class="ka-tab active" data-tab="integrations"><?php esc_html_e('Integrations', 'king-addons'); ?></button>
152	<button type="button" class="ka-tab" data-tab="lightbox"><?php esc_html_e('Lightbox', 'king-addons'); ?></button>
153	<button type="button" class="ka-tab" data-tab="performance"><?php esc_html_e('Performance', 'king-addons'); ?></button>
154	</div>
155
156	<form method="post" action="">
157	<?php wp_nonce_field('king_addons_settings_save_settings', 'king_addons_settings_nonce_field'); ?>
158
159	<!-- Integrations Tab -->
160	<div class="ka-tab-content active" data-tab="integrations">
161	<div class="ka-card">
162	<div class="ka-card-header">
163	<span class="dashicons dashicons-admin-plugins"></span>
164	<h2><?php esc_html_e('API Keys', 'king-addons'); ?></h2>
165	</div>
166	<div class="ka-card-body">
167	<div class="ka-row">
168	<div class="ka-row-label"><?php esc_html_e('Google Map API Key', 'king-addons'); ?></div>
169	<div class="ka-row-field">
170	<input type="text" name="king_addons_google_map_api_key" value="<?php echo esc_attr($google_map_key); ?>" placeholder="Abc_42..." />
171	<p class="ka-row-desc">
172	<?php esc_html_e('Enter your Google Map API key from Google Cloud Platform.', 'king-addons'); ?>
173	<a href="https://www.youtube.com/watch?v=O5cUoVpVUjU" target="_blank"><?php esc_html_e('Learn how →', 'king-addons'); ?></a>
174	</p>
175	</div>
176	</div>
177	<div class="ka-row">
178	<div class="ka-row-label"><?php esc_html_e('MailChimp API Key', 'king-addons'); ?></div>
179	<div class="ka-row-field">
180	<input type="text" name="king_addons_mailchimp_api_key" value="<?php echo esc_attr($mailchimp_key); ?>" />
181	<p class="ka-row-desc">
182	<?php esc_html_e('Insert your MailChimp API key for mailing features.', 'king-addons'); ?>
183	<a href="https://mailchimp.com/help/about-api-keys/" target="_blank"><?php esc_html_e('Learn how →', 'king-addons'); ?></a>
184	</p>
185	</div>
186	</div>
187	</div>
188	</div>
189
190	<div class="ka-card">
191	<div class="ka-card-header">
192	<span class="dashicons dashicons-shield"></span>
193	<h2><?php esc_html_e('reCAPTCHA v3', 'king-addons'); ?></h2>
194	</div>
195	<div class="ka-card-body">
196	<div class="ka-row">
197	<div class="ka-row-label"><?php esc_html_e('Site Key', 'king-addons'); ?></div>
198	<div class="ka-row-field">
199	<input type="text" name="king_addons_recaptcha_v3_site_key" value="<?php echo esc_attr($recaptcha_site_key); ?>" />
200	<p class="ka-row-desc">
201	<?php esc_html_e('Enter your reCAPTCHA Site Key for Form Builder.', 'king-addons'); ?>
202	<a href="https://www.google.com/recaptcha/about/" target="_blank"><?php esc_html_e('Get keys →', 'king-addons'); ?></a>
203	</p>
204	</div>
205	</div>
206	<div class="ka-row">
207	<div class="ka-row-label"><?php esc_html_e('Secret Key', 'king-addons'); ?></div>
208	<div class="ka-row-field">
209	<input type="password" name="king_addons_recaptcha_v3_secret_key" value="<?php echo esc_attr($recaptcha_secret_key); ?>" />
210	</div>
211	</div>
212	<div class="ka-row">
213	<div class="ka-row-label"><?php esc_html_e('Score Threshold', 'king-addons'); ?></div>
214	<div class="ka-row-field">
215	<input type="number" step="0.1" min="0" max="1" name="king_addons_recaptcha_v3_score_threshold" value="<?php echo esc_attr($recaptcha_score_threshold); ?>" style="max-width:100px" />
216	<p class="ka-row-desc"><?php esc_html_e('Score threshold 0.0 to 1.0 (default 0.5). Higher values are more strict.', 'king-addons'); ?></p>
217	</div>
218	</div>
219	</div>
220	</div>
221
222	<div class="ka-card">
223	<div class="ka-card-header">
224	<span class="dashicons dashicons-shield-alt"></span>
225	<h2><?php esc_html_e('Cloudflare Turnstile', 'king-addons'); ?></h2>
226	</div>
227	<div class="ka-card-body">
228	<div class="ka-row">
229	<div class="ka-row-label"><?php esc_html_e('Site Key', 'king-addons'); ?></div>
230	<div class="ka-row-field">
231	<input type="text" name="king_addons_turnstile_site_key" value="<?php echo esc_attr($turnstile_site_key); ?>" />
232	<p class="ka-row-desc">
233	<?php esc_html_e('Pick Turnstile per form in the Form Builder panel.', 'king-addons'); ?>
234	<a href="https://www.cloudflare.com/products/turnstile/" target="_blank"><?php esc_html_e('Get keys →', 'king-addons'); ?></a>
235	</p>
236	</div>
237	</div>
238	<div class="ka-row">
239	<div class="ka-row-label"><?php esc_html_e('Secret Key', 'king-addons'); ?></div>
240	<div class="ka-row-field">
241	<input type="password" name="king_addons_turnstile_secret_key" value="<?php echo esc_attr($turnstile_secret_key); ?>" />
242	</div>
243	</div>
244	</div>
245	</div>
246
247	<div class="ka-card">
248	<div class="ka-card-header">
249	<span class="dashicons dashicons-shield-alt"></span>
250	<h2><?php esc_html_e('hCaptcha', 'king-addons'); ?></h2>
251	</div>
252	<div class="ka-card-body">
253	<div class="ka-row">
254	<div class="ka-row-label"><?php esc_html_e('Site Key', 'king-addons'); ?></div>
255	<div class="ka-row-field">
256	<input type="text" name="king_addons_hcaptcha_site_key" value="<?php echo esc_attr($hcaptcha_site_key); ?>" />
257	<p class="ka-row-desc">
258	<?php esc_html_e('Pick hCaptcha per form in the Form Builder panel.', 'king-addons'); ?>
259	<a href="https://www.hcaptcha.com/" target="_blank"><?php esc_html_e('Get keys →', 'king-addons'); ?></a>
260	</p>
261	</div>
262	</div>
263	<div class="ka-row">
264	<div class="ka-row-label"><?php esc_html_e('Secret Key', 'king-addons'); ?></div>
265	<div class="ka-row-field">
266	<input type="password" name="king_addons_hcaptcha_secret_key" value="<?php echo esc_attr($hcaptcha_secret_key); ?>" />
267	</div>
268	</div>
269	</div>
270	</div>
271
272	<div class="ka-card">
273	<div class="ka-card-header">
274	<span class="dashicons dashicons-money-alt"></span>
275	<h2><?php esc_html_e('Stripe', 'king-addons'); ?></h2>
276	</div>
277	<div class="ka-card-body">
278	<div class="ka-row">
279	<div class="ka-row-label"><?php esc_html_e('Secret Key', 'king-addons'); ?></div>
280	<div class="ka-row-field">
281	<input type="password" name="king_addons_stripe_secret_key" value="<?php echo esc_attr($stripe_secret_key); ?>" />
282	<p class="ka-row-desc">
283	<?php esc_html_e('Used to open a Stripe Checkout session. Visitors pay on Stripe, so no card details reach this site.', 'king-addons'); ?>
284	<a href="https://dashboard.stripe.com/apikeys" target="_blank"><?php esc_html_e('Get keys →', 'king-addons'); ?></a>
285	</p>
286	</div>
287	</div>
288	<div class="ka-row">
289	<div class="ka-row-label"><?php esc_html_e('Webhook signing secret', 'king-addons'); ?></div>
290	<div class="ka-row-field">
291	<input type="password" name="king_addons_stripe_webhook_secret" value="<?php echo esc_attr($stripe_webhook_secret); ?>" />
292	<p class="ka-row-desc">
293	<?php esc_html_e('Endpoint to add in the Stripe Dashboard:', 'king-addons'); ?>
294	<code><?php echo esc_html(class_exists('King_Addons\\Form_Payment_Confirm') ? \King_Addons\Form_Payment_Confirm::stripe_webhook_url() : rest_url('king-addons/v1/stripe-webhook')); ?></code>
295	</p>
296	</div>
297	</div>
298	</div>
299	</div>
300
301	<div class="ka-card">
302	<div class="ka-card-header">
303	<span class="dashicons dashicons-money-alt"></span>
304	<h2><?php esc_html_e('PayPal', 'king-addons'); ?></h2>
305	</div>
306	<div class="ka-card-body">
307	<div class="ka-row">
308	<div class="ka-row-label"><?php esc_html_e('Client ID', 'king-addons'); ?></div>
309	<div class="ka-row-field">
310	<input type="text" name="king_addons_paypal_client_id" value="<?php echo esc_attr($paypal_client_id); ?>" />
311	</div>
312	</div>
313	<div class="ka-row">
314	<div class="ka-row-label"><?php esc_html_e('Secret', 'king-addons'); ?></div>
315	<div class="ka-row-field">
316	<input type="password" name="king_addons_paypal_secret" value="<?php echo esc_attr($paypal_secret); ?>" />
317	</div>
318	</div>
319	<div class="ka-row">
320	<div class="ka-row-label"><?php esc_html_e('Environment', 'king-addons'); ?></div>
321	<div class="ka-row-field">
322	<select name="king_addons_paypal_environment">
323	<option value="sandbox" <?php selected($paypal_environment, 'sandbox'); ?>><?php esc_html_e('Sandbox', 'king-addons'); ?></option>
324	<option value="live" <?php selected($paypal_environment, 'live'); ?>><?php esc_html_e('Live', 'king-addons'); ?></option>
325	</select>
326	</div>
327	</div>
328	</div>
329	</div>
330	</div>
331
332	<!-- Lightbox Tab -->
333	<div class="ka-tab-content" data-tab="lightbox">
334	<div class="ka-card">
335	<div class="ka-card-header">
336	<span class="dashicons dashicons-format-gallery"></span>
337	<h2><?php esc_html_e('Lightbox Colors', 'king-addons'); ?></h2>
338	</div>
339	<div class="ka-card-body">
340	<div class="ka-grid-2">
341	<div class="ka-row">
342	<div class="ka-row-label"><?php esc_html_e('Text Color', 'king-addons'); ?></div>
343	<div class="ka-row-field">
344	<div class="ka-color-wrap">
345	<input type="text" name="king_addons_lightbox_text_color" data-alpha-enabled="true" data-default-color="#efefef" value="<?php echo esc_attr(get_option('king_addons_lightbox_text_color', '#efefef')); ?>" class="color-picker" />
346	</div>
347	</div>
348	</div>
349	<div class="ka-row">
350	<div class="ka-row-label"><?php esc_html_e('Background', 'king-addons'); ?></div>
351	<div class="ka-row-field">
352	<div class="ka-color-wrap">
353	<input type="text" name="king_addons_lightbox_bg_color" data-alpha-enabled="true" data-default-color="rgba(0,0,0,0.6)" value="<?php echo esc_attr(get_option('king_addons_lightbox_bg_color', 'rgba(0,0,0,0.6)')); ?>" class="color-picker" />
354	</div>
355	</div>
356	</div>
357	<div class="ka-row">
358	<div class="ka-row-label"><?php esc_html_e('Toolbar BG', 'king-addons'); ?></div>
359	<div class="ka-row-field">
360	<div class="ka-color-wrap">
361	<input type="text" name="king_addons_lightbox_toolbar_color" data-alpha-enabled="true" data-default-color="rgba(0,0,0,0.8)" value="<?php echo esc_attr(get_option('king_addons_lightbox_toolbar_color', 'rgba(0,0,0,0.8)')); ?>" class="color-picker" />
362	</div>
363	</div>
364	</div>
365	<div class="ka-row">
366	<div class="ka-row-label"><?php esc_html_e('Caption BG', 'king-addons'); ?></div>
367	<div class="ka-row-field">
368	<div class="ka-color-wrap">
369	<input type="text" name="king_addons_lightbox_caption_color" data-alpha-enabled="true" data-default-color="rgba(0,0,0,0.8)" value="<?php echo esc_attr(get_option('king_addons_lightbox_caption_color', 'rgba(0,0,0,0.8)')); ?>" class="color-picker" />
370	</div>
371	</div>
372	</div>
373	<div class="ka-row">
374	<div class="ka-row-label"><?php esc_html_e('Gallery BG', 'king-addons'); ?></div>
375	<div class="ka-row-field">
376	<div class="ka-color-wrap">
377	<input type="text" name="king_addons_lightbox_gallery_color" data-alpha-enabled="true" data-default-color="#444444" value="<?php echo esc_attr(get_option('king_addons_lightbox_gallery_color', '#444444')); ?>" class="color-picker" />
378	</div>
379	</div>
380	</div>
381	<div class="ka-row">
382	<div class="ka-row-label"><?php esc_html_e('Progress Bar', 'king-addons'); ?></div>
383	<div class="ka-row-field">
384	<div class="ka-color-wrap">
385	<input type="text" name="king_addons_lightbox_pb_color" data-alpha-enabled="true" data-default-color="#8a8a8a" value="<?php echo esc_attr(get_option('king_addons_lightbox_pb_color', '#8a8a8a')); ?>" class="color-picker" />
386	</div>
387	</div>
388	</div>
389	<div class="ka-row">
390	<div class="ka-row-label"><?php esc_html_e('UI Color', 'king-addons'); ?></div>
391	<div class="ka-row-field">
392	<div class="ka-color-wrap">
393	<input type="text" name="king_addons_lightbox_ui_color" data-alpha-enabled="true" data-default-color="#efefef" value="<?php echo esc_attr(get_option('king_addons_lightbox_ui_color', '#efefef')); ?>" class="color-picker" />
394	</div>
395	</div>
396	</div>
397	<div class="ka-row">
398	<div class="ka-row-label"><?php esc_html_e('UI Hover', 'king-addons'); ?></div>
399	<div class="ka-row-field">
400	<div class="ka-color-wrap">
401	<input type="text" name="king_addons_lightbox_ui_hover_color" data-alpha-enabled="true" data-default-color="#ffffff" value="<?php echo esc_attr(get_option('king_addons_lightbox_ui_hover_color', '#ffffff')); ?>" class="color-picker" />
402	</div>
403	</div>
404	</div>
405	</div>
406	</div>
407	</div>
408
409	<div class="ka-card">
410	<div class="ka-card-header">
411	<span class="dashicons dashicons-editor-expand"></span>
412	<h2><?php esc_html_e('Lightbox Sizes', 'king-addons'); ?></h2>
413	</div>
414	<div class="ka-card-body">
415	<div class="ka-row">
416	<div class="ka-row-label"><?php esc_html_e('Icon Size', 'king-addons'); ?></div>
417	<div class="ka-row-field">
418	<input type="number" name="king_addons_lightbox_icon_size" value="<?php echo esc_attr(get_option('king_addons_lightbox_icon_size', '20')); ?>" style="max-width:100px" />
419	<span style="color:#86868b;margin-left:8px">px</span>
420	</div>
421	</div>
422	<div class="ka-row">
423	<div class="ka-row-label"><?php esc_html_e('Arrow Size', 'king-addons'); ?></div>
424	<div class="ka-row-field">
425	<input type="number" name="king_addons_lightbox_arrow_size" value="<?php echo esc_attr(get_option('king_addons_lightbox_arrow_size', '35')); ?>" style="max-width:100px" />
426	<span style="color:#86868b;margin-left:8px">px</span>
427	</div>
428	</div>
429	<div class="ka-row">
430	<div class="ka-row-label"><?php esc_html_e('Text Size', 'king-addons'); ?></div>
431	<div class="ka-row-field">
432	<input type="number" name="king_addons_lightbox_text_size" value="<?php echo esc_attr(get_option('king_addons_lightbox_text_size', '14')); ?>" style="max-width:100px" />
433	<span style="color:#86868b;margin-left:8px">px</span>
434	</div>
435	</div>
436	</div>
437	</div>
438	</div>
439
440	<!-- Performance Tab -->
441	<div class="ka-tab-content" data-tab="performance">
442	<div class="ka-card">
443	<div class="ka-card-header">
444	<span class="dashicons dashicons-download"></span>
445	<h2><?php esc_html_e('Import Templates', 'king-addons'); ?></h2>
446	</div>
447	<div class="ka-card-body">
448	<div class="ka-row">
449	<div class="ka-row-label"><?php esc_html_e('Performance Mode', 'king-addons'); ?></div>
450	<div class="ka-row-field">
451	<label class="ka-toggle">
452	<input type="checkbox" name="king_addons_improve_import_performance" value="1" <?php checked($improve_import_performance, '1'); ?> />
453	<span class="ka-toggle-slider"></span>
454	<span class="ka-toggle-label"><?php esc_html_e('Improve import on low-performance servers', 'king-addons'); ?></span>
455	</label>
456	<p class="ka-row-desc"><?php esc_html_e('Applies optimizations like increased PHP limits during import. Enabled by default.', 'king-addons'); ?></p>
457	</div>
458	</div>
459	<?php if (function_exists('king_addons_freemius') && king_addons_freemius()->can_use_premium_code()) : ?>
460	<div class="ka-row">
461	<div class="ka-row-label"><?php esc_html_e('Template Button', 'king-addons'); ?><span class="ka-pro-badge">PRO</span></div>
462	<div class="ka-row-field">
463	<label class="ka-toggle">
464	<input type="checkbox" name="king_addons_disable_template_catalog_button" value="1" <?php checked($disable_template_catalog_button, '1'); ?> />
465	<span class="ka-toggle-slider"></span>
466	<span class="ka-toggle-label"><?php esc_html_e('Hide "Start with a Template" button in editor', 'king-addons'); ?></span>
467	</label>
468	</div>
469	</div>
470	<?php endif; ?>
471	</div>
472	</div>
473	</div>
474
475	<div class="ka-card">
476	<div class="ka-submit">
477	<button type="submit" name="king_addons_settings_submit_settings" class="ka-btn ka-btn-primary">
478	<?php esc_html_e('Save Settings', 'king-addons'); ?>
479	</button>
480	</div>
481	</div>
482	</form>
483	</div>
484
485	<?php
486	// Enqueue color picker
487	wp_enqueue_style('wp-color-picker');
488	wp_enqueue_script('wp-color-picker');
489	?>
490	<script>
491	(function($) {
492	'use strict';
493
494	$(document).ready(function() {
495	const ajaxUrl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>';
496	const nonce = '<?php echo esc_js(wp_create_nonce('king_addons_dashboard_ui')); ?>';
497
498	// Theme segmented control (dashboard-style)
499	const $themeSegment = $('#ka-v3-theme-segment');
500	const $themeSegmentButtons = $themeSegment.find('.ka-v3-segmented-btn');
501	const themeMql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
502	let themeMode = ($themeSegment.attr('data-active') \|\| 'dark').toString();
503	let themeMqlHandler = null;
504
505	function saveUISetting(key, value) {
506	$.post(ajaxUrl, {
507	action: 'king_addons_save_dashboard_ui',
508	nonce: nonce,
509	key: key,
510	value: value
511	});
512	}
513
514	function updateSegment(mode) {
515	$themeSegment.attr('data-active', mode);
516	$themeSegmentButtons.each(function() {
517	const theme = $(this).data('theme');
518	$(this).attr('aria-pressed', theme === mode ? 'true' : 'false');
519	});
520	}
521
522	function applyThemeClass(isDark) {
523	$('body').toggleClass('ka-v3-dark', isDark);
524	document.documentElement.classList.toggle('ka-v3-dark', isDark);
525	}
526
527	function setThemeMode(mode, save) {
528	themeMode = mode;
529	updateSegment(mode);
530
531	if (themeMqlHandler && themeMql) {
532	if (themeMql.removeEventListener) {
533	themeMql.removeEventListener('change', themeMqlHandler);
534	} else if (themeMql.removeListener) {
535	themeMql.removeListener(themeMqlHandler);
536	}
537	themeMqlHandler = null;
538	}
539
540	if (mode === 'auto') {
541	applyThemeClass(!!(themeMql && themeMql.matches));
542	themeMqlHandler = function(e) {
543	if (themeMode !== 'auto') {
544	return;
545	}
546	applyThemeClass(!!e.matches);
547	};
548	if (themeMql) {
549	if (themeMql.addEventListener) {
550	themeMql.addEventListener('change', themeMqlHandler);
551	} else if (themeMql.addListener) {
552	themeMql.addListener(themeMqlHandler);
553	}
554	}
555	} else {
556	applyThemeClass(mode === 'dark');
557	}
558
559	if (save) {
560	saveUISetting('theme_mode', mode);
561	}
562	}
563
564	$themeSegment.on('click', '.ka-v3-segmented-btn', function(e) {
565	e.preventDefault();
566	const mode = ($(this).data('theme') \|\| 'dark').toString();
567	setThemeMode(mode, true);
568	});
569
570	// Ensure mode applies for Auto (listener + system state)
571	setThemeMode(themeMode, false);
572
573	// Tab navigation
574	$('.ka-tab').on('click', function() {
575	const target = $(this).data('tab');
576	$('.ka-tab').removeClass('active');
577	$(this).addClass('active');
578	$('.ka-tab-content').removeClass('active');
579	$(`.ka-tab-content[data-tab="${target}"]`).addClass('active');
580	});
581
582	// Initialize color pickers
583	if ($.fn.wpColorPicker) {
584	$('.color-picker').each(function() {
585	var $input = $(this);
586	$input.wpColorPicker({
587	defaultColor: $input.data('default-color') \|\| ''
588	});
589	});
590	}
591	});
592	})(jQuery);
593	</script>
594