<?php
/**
 * Widget Settings admin view
 *
 * Shortcode-only widget placement. Per-section AJAX save (no page reload).
 *
 * @link       https://github.com/sitestaffr/sitestaffr-plugin
 * @since      0.11.96
 *
 * @package    SiteStaffr
 * @subpackage SiteStaffr/admin/views
 */

// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
	die;
}

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound

// Get current settings
$settings = get_option( 'sitestaffr_widget_settings', array() );

$legacy_fixed_radius  = isset( $settings['fixed_border_radius'] ) ? intval( $settings['fixed_border_radius'] ) : null;
$legacy_button_radius = isset( $settings['button_border_radius'] ) ? intval( $settings['button_border_radius'] ) : null;

$fixed_radius_top = isset( $settings['fixed_border_radius_top'] )
	? intval( $settings['fixed_border_radius_top'] )
	: ( null !== $legacy_fixed_radius ? $legacy_fixed_radius : 20 );
$fixed_radius_right = isset( $settings['fixed_border_radius_right'] )
	? intval( $settings['fixed_border_radius_right'] )
	: ( null !== $legacy_fixed_radius ? $legacy_fixed_radius : 20 );
$fixed_radius_bottom = isset( $settings['fixed_border_radius_bottom'] )
	? intval( $settings['fixed_border_radius_bottom'] )
	: ( null !== $legacy_fixed_radius ? $legacy_fixed_radius : 20 );
$fixed_radius_left = isset( $settings['fixed_border_radius_left'] )
	? intval( $settings['fixed_border_radius_left'] )
	: ( null !== $legacy_fixed_radius ? $legacy_fixed_radius : 0 );
$fixed_radius_locked = isset( $settings['fixed_border_radius_locked'] ) ? (bool) $settings['fixed_border_radius_locked'] : false;

$button_radius_top = isset( $settings['button_border_radius_top'] )
	? intval( $settings['button_border_radius_top'] )
	: ( null !== $legacy_button_radius ? $legacy_button_radius : 80 );
$button_radius_right = isset( $settings['button_border_radius_right'] )
	? intval( $settings['button_border_radius_right'] )
	: ( null !== $legacy_button_radius ? $legacy_button_radius : 80 );
$button_radius_bottom = isset( $settings['button_border_radius_bottom'] )
	? intval( $settings['button_border_radius_bottom'] )
	: ( null !== $legacy_button_radius ? $legacy_button_radius : 80 );
$button_radius_left = isset( $settings['button_border_radius_left'] )
	? intval( $settings['button_border_radius_left'] )
	: ( null !== $legacy_button_radius ? $legacy_button_radius : 80 );
$button_radius_locked = isset( $settings['button_border_radius_locked'] ) ? (bool) $settings['button_border_radius_locked'] : false;
?>

<div class="wrap sitestaffr-widget-settings-wrap">
	<?php
	$sitestaffr_page_title = __( 'Widget & Button', 'sitestaffr' );
	include SITESTAFFR_PLUGIN_DIR . 'admin/partials/sitestaffr-header.php';
	?>

	<?php wp_nonce_field( 'sitestaffr_save_widget_settings', 'sitestaffr_widget_nonce' ); ?>

	<!-- ================================================================
	     Fixed Widget
	     ================================================================ -->
	<div class="pe-ws-section" data-section="fixed">
		<div class="pe-ws-section-header">
			<div class="pe-ws-section-title">
				<h3><?php esc_html_e( 'Fixed Widget', 'sitestaffr' ); ?></h3>
				<span class="sitestaffr-tooltip-trigger" tabindex="0" role="button" aria-label="<?php esc_attr_e( 'Help', 'sitestaffr' ); ?>" data-tooltip="<?php esc_attr_e( 'A floating button fixed to the bottom-right corner of every page. Visitors click it to start a voice conversation. Use the shortcode for manual placement on specific pages.', 'sitestaffr' ); ?>"><span class="dashicons dashicons-info" aria-hidden="true"></span></span>
			</div>
			<span class="pe-ws-shortcode-label"><?php esc_html_e( 'Shortcode:', 'sitestaffr' ); ?></span>
			<code class="pe-ws-shortcode-click" data-shortcode="[sitestaffr_widget]" title="<?php esc_attr_e( 'Click to copy shortcode', 'sitestaffr' ); ?>">[sitestaffr_widget]</code>
		</div>
		<?php
		$auto_display = ! isset( $settings['fixed_auto_display'] ) || $settings['fixed_auto_display'];
		?>
		<div class="pe-ws-auto-display-row">
			<label class="pe-ws-toggle-label">
				<input type="checkbox"
					id="fixed_auto_display"
					name="sitestaffr_widget_settings[fixed_auto_display]"
					value="1"
					<?php checked( $auto_display ); ?> />
				<span class="pe-ws-toggle-switch"></span>
				<span class="pe-ws-toggle-text"><?php esc_html_e( 'Show on all pages', 'sitestaffr' ); ?></span>
			</label>
			<span class="pe-ws-toggle-description"><?php esc_html_e( 'Automatically display the floating widget on every page of your site. Turn off to use shortcode placement only.', 'sitestaffr' ); ?></span>
		</div>

		<?php $fixed_mode = isset( $settings['mode'] ) ? sanitize_key( $settings['mode'] ) : 'both'; ?>
		<?php
		$fixed_border_style = isset( $settings['fixed_border_style'] ) ? sanitize_key( $settings['fixed_border_style'] ) : 'none';
		?>
		<div class="pe-ws-section-body pe-ws-two-col">
			<div class="pe-ws-preview-col">
				<div id="sitestaffr-fixed-widget-preview"></div>
			</div>
			<div class="pe-ws-fields-col">

				<div class="pe-ws-tabs" role="tablist" aria-label="<?php esc_attr_e( 'Fixed widget settings tabs', 'sitestaffr' ); ?>">
					<button type="button" role="tab" class="pe-ws-tab is-active" aria-selected="true" aria-controls="fixed-tab-appearance" id="fixed-tab-btn-appearance"><?php esc_html_e( 'Appearance', 'sitestaffr' ); ?></button>
					<button type="button" role="tab" class="pe-ws-tab" aria-selected="false" aria-controls="fixed-tab-behavior" id="fixed-tab-btn-behavior" tabindex="-1"><?php esc_html_e( 'Behavior', 'sitestaffr' ); ?></button>
				</div>

				<div id="fixed-tab-appearance" role="tabpanel" class="pe-ws-tabpanel" aria-labelledby="fixed-tab-btn-appearance">

				<!-- Icon -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Icon', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_icon"><?php esc_html_e( 'Type', 'sitestaffr' ); ?></label>
							<select id="fixed_icon" name="sitestaffr_widget_settings[fixed_icon]">
								<option value="sitestaffr" <?php selected( isset( $settings['fixed_icon'] ) ? $settings['fixed_icon'] : 'sitestaffr', 'sitestaffr' ); ?>><?php esc_html_e( 'SiteStaffr', 'sitestaffr' ); ?></option>
								<option value="phone" <?php selected( isset( $settings['fixed_icon'] ) ? $settings['fixed_icon'] : 'sitestaffr', 'phone' ); ?>><?php esc_html_e( 'Phone', 'sitestaffr' ); ?></option>
								<option value="microphone" <?php selected( isset( $settings['fixed_icon'] ) ? $settings['fixed_icon'] : 'sitestaffr', 'microphone' ); ?>><?php esc_html_e( 'Microphone', 'sitestaffr' ); ?></option>
								<option value="chat" <?php selected( isset( $settings['fixed_icon'] ) ? $settings['fixed_icon'] : 'sitestaffr', 'chat' ); ?>><?php esc_html_e( 'Chat', 'sitestaffr' ); ?></option>
								<option value="headset" <?php selected( isset( $settings['fixed_icon'] ) ? $settings['fixed_icon'] : 'sitestaffr', 'headset' ); ?>><?php esc_html_e( 'Headset', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_icon_size"><?php esc_html_e( 'Size', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="fixed_icon_size" name="sitestaffr_widget_settings[fixed_icon_size]" value="<?php echo esc_attr( isset( $settings['fixed_icon_size'] ) ? intval( $settings['fixed_icon_size'] ) : '24' ); ?>" min="12" max="80" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_icon_color"><?php esc_html_e( 'Color', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_icon_color" name="sitestaffr_widget_settings[fixed_icon_color]" value="<?php echo esc_attr( isset( $settings['fixed_icon_color'] ) ? $settings['fixed_icon_color'] : '#ffffff' ); ?>" class="sitestaffr-color-field" data-default-color="#ffffff" />
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_hover_icon_color"><?php esc_html_e( 'Hover Color', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_hover_icon_color" name="sitestaffr_widget_settings[fixed_hover_icon_color]" value="<?php echo esc_attr( isset( $settings['fixed_hover_icon_color'] ) ? $settings['fixed_hover_icon_color'] : '' ); ?>" class="sitestaffr-color-field" data-default-color="" />
						</div>
					</div>
				</div>

				<!-- Colors -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Colors', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_background_color"><?php esc_html_e( 'Background', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_background_color" name="sitestaffr_widget_settings[fixed_background_color]" value="<?php echo esc_attr( isset( $settings['fixed_background_color'] ) ? $settings['fixed_background_color'] : '#10b981' ); ?>" class="sitestaffr-color-field" data-default-color="#10b981" />
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_hover_background_color"><?php esc_html_e( 'Hover', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_hover_background_color" name="sitestaffr_widget_settings[fixed_hover_background_color]" value="<?php echo esc_attr( isset( $settings['fixed_hover_background_color'] ) ? $settings['fixed_hover_background_color'] : '#0ea572' ); ?>" class="sitestaffr-color-field" data-default-color="#0ea572" />
						</div>
					</div>
				</div>

				<!-- Size -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Size', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_size"><?php esc_html_e( 'Widget Size', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="fixed_size" name="sitestaffr_widget_settings[fixed_size]" value="<?php echo esc_attr( isset( $settings['fixed_size'] ) ? intval( $settings['fixed_size'] ) : '60' ); ?>" min="1" max="200" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
				</div>

				<!-- Border Radius -->
				<div class="pe-ws-group">
					<div class="pe-ws-radius-heading">
						<span class="pe-ws-radius-heading-label"><?php esc_html_e( 'Border Radius', 'sitestaffr' ); ?></span>
						<label class="pe-ws-radius-lock-toggle<?php echo $fixed_radius_locked ? ' is-locked' : ''; ?>" data-radius-lock-toggle="fixed" title="<?php esc_attr_e( 'Toggle corner lock', 'sitestaffr' ); ?>">
							<input type="checkbox" id="fixed_border_radius_locked" name="sitestaffr_widget_settings[fixed_border_radius_locked]" value="1" <?php checked( $fixed_radius_locked ); ?> />
							<span class="dashicons <?php echo esc_attr( $fixed_radius_locked ? 'dashicons-lock' : 'dashicons-unlock' ); ?>" data-radius-lock-icon="fixed" aria-hidden="true"></span>
							<span class="screen-reader-text"><?php esc_html_e( 'Lock all border radius corners', 'sitestaffr' ); ?></span>
						</label>
					</div>
					<div class="pe-ws-field-row pe-ws-radius-group" data-radius-group="fixed">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_border_radius_top"><?php esc_html_e( 'Top', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="fixed_border_radius_top" class="pe-ws-radius-input" data-radius-role="master" name="sitestaffr_widget_settings[fixed_border_radius_top]" value="<?php echo esc_attr( $fixed_radius_top ); ?>" min="0" max="200" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_border_radius_right"><?php esc_html_e( 'Right', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="fixed_border_radius_right" class="pe-ws-radius-input" data-radius-role="slave" name="sitestaffr_widget_settings[fixed_border_radius_right]" value="<?php echo esc_attr( $fixed_radius_right ); ?>" min="0" max="200" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_border_radius_bottom"><?php esc_html_e( 'Bottom', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="fixed_border_radius_bottom" class="pe-ws-radius-input" data-radius-role="slave" name="sitestaffr_widget_settings[fixed_border_radius_bottom]" value="<?php echo esc_attr( $fixed_radius_bottom ); ?>" min="0" max="200" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_border_radius_left"><?php esc_html_e( 'Left', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="fixed_border_radius_left" class="pe-ws-radius-input" data-radius-role="slave" name="sitestaffr_widget_settings[fixed_border_radius_left]" value="<?php echo esc_attr( $fixed_radius_left ); ?>" min="0" max="200" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
				</div>

				<!-- Border -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Border', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="fixed_border_style"><?php esc_html_e( 'Style', 'sitestaffr' ); ?></label>
							<select id="fixed_border_style" name="sitestaffr_widget_settings[fixed_border_style]">
								<option value="none" <?php selected( $fixed_border_style, 'none' ); ?>><?php esc_html_e( 'None', 'sitestaffr' ); ?></option>
								<option value="solid" <?php selected( $fixed_border_style, 'solid' ); ?>><?php esc_html_e( 'Solid', 'sitestaffr' ); ?></option>
								<option value="dashed" <?php selected( $fixed_border_style, 'dashed' ); ?>><?php esc_html_e( 'Dashed', 'sitestaffr' ); ?></option>
								<option value="dotted" <?php selected( $fixed_border_style, 'dotted' ); ?>><?php esc_html_e( 'Dotted', 'sitestaffr' ); ?></option>
								<option value="double" <?php selected( $fixed_border_style, 'double' ); ?>><?php esc_html_e( 'Double', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="pe-ws-field pe-ws-field--compact pe-ws-border-dependent" data-border-section="fixed">
							<label for="fixed_border_width"><?php esc_html_e( 'Width', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="fixed_border_width" name="sitestaffr_widget_settings[fixed_border_width]" value="<?php echo esc_attr( isset( $settings['fixed_border_width'] ) ? intval( $settings['fixed_border_width'] ) : '0' ); ?>" min="0" max="10" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact pe-ws-border-dependent" data-border-section="fixed">
							<label for="fixed_border_color"><?php esc_html_e( 'Color', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_border_color" name="sitestaffr_widget_settings[fixed_border_color]" value="<?php echo esc_attr( isset( $settings['fixed_border_color'] ) ? $settings['fixed_border_color'] : '#cccccc' ); ?>" class="sitestaffr-color-field" data-default-color="#cccccc" />
						</div>
					</div>
				</div>

				</div><!-- /fixed-tab-appearance -->

				<div id="fixed-tab-behavior" role="tabpanel" class="pe-ws-tabpanel" aria-labelledby="fixed-tab-btn-behavior" hidden>

				<!-- Mode -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Mode', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field">
						<label for="fixed_mode"><?php esc_html_e( 'Widget Mode', 'sitestaffr' ); ?></label>
						<select id="fixed_mode" name="sitestaffr_widget_settings[mode]">
							<option value="both" <?php selected( $fixed_mode, 'both' ); ?>><?php esc_html_e( 'Voice & Text (visitor chooses)', 'sitestaffr' ); ?></option>
							<option value="voice" <?php selected( $fixed_mode, 'voice' ); ?>><?php esc_html_e( 'Voice Only', 'sitestaffr' ); ?></option>
							<option value="text" <?php selected( $fixed_mode, 'text' ); ?>><?php esc_html_e( 'Text Chat Only', 'sitestaffr' ); ?></option>
						</select>
						<p class="description"><?php esc_html_e( 'Choose which conversation modes visitors can use. Override per page with the shortcode mode attribute.', 'sitestaffr' ); ?></p>
					</div>
				</div>

				<!-- Tooltip -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Tooltip', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field">
						<label for="fixed_tooltip_text"><?php esc_html_e( 'Tooltip Text', 'sitestaffr' ); ?></label>
						<input type="text" id="fixed_tooltip_text" name="sitestaffr_widget_settings[fixed_tooltip_text]" value="<?php echo esc_attr( isset( $settings['fixed_tooltip_text'] ) ? $settings['fixed_tooltip_text'] : '' ); ?>" class="regular-text" placeholder="<?php esc_attr_e( 'Talk to AI Assistant', 'sitestaffr' ); ?>" />
					</div>
					<div class="pe-ws-field" style="margin-top: 8px;">
						<label style="display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;">
							<input type="checkbox" id="fixed_tooltip_always_show" name="sitestaffr_widget_settings[fixed_tooltip_always_show]" value="1" <?php checked( ! empty( $settings['fixed_tooltip_always_show'] ) ); ?> />
							<?php esc_html_e( 'Always show tooltip', 'sitestaffr' ); ?>
						</label>
					</div>
					<?php $tooltip_position = isset( $settings['fixed_tooltip_position'] ) ? sanitize_key( $settings['fixed_tooltip_position'] ) : 'top'; ?>
					<div class="pe-ws-field" style="margin-top: 8px;">
						<label for="fixed_tooltip_position"><?php esc_html_e( 'Position', 'sitestaffr' ); ?></label>
						<select id="fixed_tooltip_position" name="sitestaffr_widget_settings[fixed_tooltip_position]">
							<option value="top" <?php selected( $tooltip_position, 'top' ); ?>><?php esc_html_e( 'Above widget', 'sitestaffr' ); ?></option>
							<option value="bottom" <?php selected( $tooltip_position, 'bottom' ); ?>><?php esc_html_e( 'Below widget', 'sitestaffr' ); ?></option>
						</select>
					</div>
				</div>

				</div><!-- /fixed-tab-behavior -->

			</div>
		</div>
		<div class="pe-ws-section-footer">
			<button type="button" class="button button-primary pe-ws-save-btn" data-section="fixed"><?php esc_html_e( 'Save Widget Settings', 'sitestaffr' ); ?></button>
			<span class="pe-ws-save-status"></span>
		</div>
	</div>

	<!-- ================================================================
	     Button Widget
	     ================================================================ -->
	<div class="pe-ws-section" data-section="button">
		<div class="pe-ws-section-header">
			<div class="pe-ws-section-title">
				<h3><?php esc_html_e( 'Button Widget', 'sitestaffr' ); ?></h3>
				<span class="sitestaffr-tooltip-trigger" tabindex="0" role="button" aria-label="<?php esc_attr_e( 'Help', 'sitestaffr' ); ?>" data-tooltip="<?php esc_attr_e( 'An inline button you can place anywhere in your content using the shortcode. Fully customizable text, colors, icons, and styling. Ideal for embedding within pages or posts.', 'sitestaffr' ); ?>"><span class="dashicons dashicons-info" aria-hidden="true"></span></span>
			</div>
			<span class="pe-ws-shortcode-label"><?php esc_html_e( 'Shortcode:', 'sitestaffr' ); ?></span>
			<code class="pe-ws-shortcode-click" data-shortcode="[sitestaffr_button]" title="<?php esc_attr_e( 'Click to copy shortcode', 'sitestaffr' ); ?>">[sitestaffr_button]</code>
		</div>
		<div class="pe-ws-section-body pe-ws-two-col">
			<div class="pe-ws-preview-col pe-ws-preview-col--sticky">
				<div id="sitestaffr-button-widget-preview"></div>
			</div>

			<?php $button_border_style = isset( $settings['button_border_style'] ) ? sanitize_key( $settings['button_border_style'] ) : 'solid'; ?>
			<?php $button_mode = isset( $settings['button_mode'] ) ? sanitize_key( $settings['button_mode'] ) : 'both'; ?>
			<div class="pe-ws-fields-col">

				<div class="pe-ws-tabs" role="tablist" aria-label="<?php esc_attr_e( 'Button widget settings tabs', 'sitestaffr' ); ?>">
					<button type="button" role="tab" class="pe-ws-tab is-active" aria-selected="true" aria-controls="button-tab-appearance" id="button-tab-btn-appearance"><?php esc_html_e( 'Appearance', 'sitestaffr' ); ?></button>
					<button type="button" role="tab" class="pe-ws-tab" aria-selected="false" aria-controls="button-tab-behavior" id="button-tab-btn-behavior" tabindex="-1"><?php esc_html_e( 'Behavior', 'sitestaffr' ); ?></button>
				</div>

				<div id="button-tab-appearance" role="tabpanel" class="pe-ws-tabpanel" aria-labelledby="button-tab-btn-appearance">

				<!-- Text & Label -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Text & Label', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field">
						<label for="button_text"><?php esc_html_e( 'Button Text', 'sitestaffr' ); ?></label>
						<input type="text" id="button_text" name="sitestaffr_widget_settings[button_text]" value="<?php echo esc_attr( isset( $settings['button_text'] ) ? $settings['button_text'] : 'Contact Us' ); ?>" />
					</div>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_font_size"><?php esc_html_e( 'Size', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
							<input type="number" id="button_font_size" name="sitestaffr_widget_settings[button_font_size]" value="<?php echo esc_attr( isset( $settings['button_font_size'] ) ? intval( $settings['button_font_size'] ) : '16' ); ?>" min="1" max="100" />
							<span class="pe-ws-px-suffix">px</span>
						</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_font_weight"><?php esc_html_e( 'Weight', 'sitestaffr' ); ?></label>
							<select id="button_font_weight" name="sitestaffr_widget_settings[button_font_weight]">
								<option value="400" <?php selected( isset( $settings['button_font_weight'] ) ? $settings['button_font_weight'] : '600', '400' ); ?>><?php esc_html_e( 'Normal', 'sitestaffr' ); ?></option>
								<option value="600" <?php selected( isset( $settings['button_font_weight'] ) ? $settings['button_font_weight'] : '600', '600' ); ?>><?php esc_html_e( 'Semi-Bold', 'sitestaffr' ); ?></option>
								<option value="700" <?php selected( isset( $settings['button_font_weight'] ) ? $settings['button_font_weight'] : '600', '700' ); ?>><?php esc_html_e( 'Bold', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_text_transform"><?php esc_html_e( 'Transform', 'sitestaffr' ); ?></label>
							<select id="button_text_transform" name="sitestaffr_widget_settings[button_text_transform]">
								<option value="none" <?php selected( isset( $settings['button_text_transform'] ) ? $settings['button_text_transform'] : 'none', 'none' ); ?>><?php esc_html_e( 'None', 'sitestaffr' ); ?></option>
								<option value="uppercase" <?php selected( isset( $settings['button_text_transform'] ) ? $settings['button_text_transform'] : 'none', 'uppercase' ); ?>><?php esc_html_e( 'UPPERCASE', 'sitestaffr' ); ?></option>
								<option value="capitalize" <?php selected( isset( $settings['button_text_transform'] ) ? $settings['button_text_transform'] : 'none', 'capitalize' ); ?>><?php esc_html_e( 'Capitalize', 'sitestaffr' ); ?></option>
							</select>
						</div>
					</div>
				</div>

				<!-- Colors -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Colors', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_text_color"><?php esc_html_e( 'Text', 'sitestaffr' ); ?></label>
							<input type="text" id="button_text_color" name="sitestaffr_widget_settings[button_text_color]" value="<?php echo esc_attr( isset( $settings['button_text_color'] ) ? $settings['button_text_color'] : '#ffffff' ); ?>" class="sitestaffr-color-field" data-default-color="#ffffff" />
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_background_color"><?php esc_html_e( 'Background', 'sitestaffr' ); ?></label>
							<input type="text" id="button_background_color" name="sitestaffr_widget_settings[button_background_color]" value="<?php echo esc_attr( isset( $settings['button_background_color'] ) ? $settings['button_background_color'] : '#1FB6CC' ); ?>" class="sitestaffr-color-field" data-default-color="#1FB6CC" />
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_hover_background"><?php esc_html_e( 'Hover', 'sitestaffr' ); ?></label>
							<input type="text" id="button_hover_background" name="sitestaffr_widget_settings[button_hover_background]" value="<?php echo esc_attr( isset( $settings['button_hover_background'] ) ? $settings['button_hover_background'] : '#17A2B8' ); ?>" class="sitestaffr-color-field" data-default-color="#17A2B8" />
						</div>
					</div>
				</div>

				<!-- Icon -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Icon', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_icon"><?php esc_html_e( 'Type', 'sitestaffr' ); ?></label>
							<select id="button_icon" name="sitestaffr_widget_settings[button_icon]">
								<option value="sitestaffr" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'sitestaffr' ); ?>><?php esc_html_e( 'SiteStaffr', 'sitestaffr' ); ?></option>
								<option value="microphone" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'microphone' ); ?>><?php esc_html_e( 'Microphone', 'sitestaffr' ); ?></option>
								<option value="phone" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'phone' ); ?>><?php esc_html_e( 'Phone', 'sitestaffr' ); ?></option>
								<option value="chat" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'chat' ); ?>><?php esc_html_e( 'Chat', 'sitestaffr' ); ?></option>
								<option value="headset" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'headset' ); ?>><?php esc_html_e( 'Headset', 'sitestaffr' ); ?></option>
								<option value="none" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'none' ); ?>><?php esc_html_e( 'None', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_icon_position"><?php esc_html_e( 'Position', 'sitestaffr' ); ?></label>
							<select id="button_icon_position" name="sitestaffr_widget_settings[button_icon_position]">
								<option value="left" <?php selected( isset( $settings['button_icon_position'] ) ? $settings['button_icon_position'] : 'left', 'left' ); ?>><?php esc_html_e( 'Left', 'sitestaffr' ); ?></option>
								<option value="right" <?php selected( isset( $settings['button_icon_position'] ) ? $settings['button_icon_position'] : 'left', 'right' ); ?>><?php esc_html_e( 'Right', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_icon_size"><?php esc_html_e( 'Size', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
							<input type="number" id="button_icon_size" name="sitestaffr_widget_settings[button_icon_size]" value="<?php echo esc_attr( isset( $settings['button_icon_size'] ) ? intval( $settings['button_icon_size'] ) : '18' ); ?>" min="1" max="100" />
							<span class="pe-ws-px-suffix">px</span>
						</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_icon_color"><?php esc_html_e( 'Color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_icon_color" name="sitestaffr_widget_settings[button_icon_color]" value="<?php echo esc_attr( isset( $settings['button_icon_color'] ) ? $settings['button_icon_color'] : '#ffffff' ); ?>" class="sitestaffr-color-field" data-default-color="#ffffff" />
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_hover_icon_color"><?php esc_html_e( 'Hover Color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_hover_icon_color" name="sitestaffr_widget_settings[button_hover_icon_color]" value="<?php echo esc_attr( isset( $settings['button_hover_icon_color'] ) ? $settings['button_hover_icon_color'] : '' ); ?>" class="sitestaffr-color-field" data-default-color="" />
						</div>
					</div>
				</div>

				<!-- Gradient -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Gradient', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label>
								<input type="checkbox" id="button_gradient" name="sitestaffr_widget_settings[button_gradient]" value="1" <?php checked( isset( $settings['button_gradient'] ) ? $settings['button_gradient'] : true, true ); ?> />
								<?php esc_html_e( 'Enable', 'sitestaffr' ); ?>
							</label>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_gradient_end"><?php esc_html_e( 'End Color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_gradient_end" name="sitestaffr_widget_settings[button_gradient_end]" value="<?php echo esc_attr( isset( $settings['button_gradient_end'] ) ? $settings['button_gradient_end'] : '#10b981' ); ?>" class="sitestaffr-color-field" data-default-color="#10b981" />
						</div>
					</div>
				</div>

				<!-- Border -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Border', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_border_style"><?php esc_html_e( 'Style', 'sitestaffr' ); ?></label>
							<select id="button_border_style" name="sitestaffr_widget_settings[button_border_style]">
								<option value="none" <?php selected( $button_border_style, 'none' ); ?>><?php esc_html_e( 'None', 'sitestaffr' ); ?></option>
								<option value="solid" <?php selected( $button_border_style, 'solid' ); ?>><?php esc_html_e( 'Solid', 'sitestaffr' ); ?></option>
								<option value="dashed" <?php selected( $button_border_style, 'dashed' ); ?>><?php esc_html_e( 'Dashed', 'sitestaffr' ); ?></option>
								<option value="dotted" <?php selected( $button_border_style, 'dotted' ); ?>><?php esc_html_e( 'Dotted', 'sitestaffr' ); ?></option>
								<option value="double" <?php selected( $button_border_style, 'double' ); ?>><?php esc_html_e( 'Double', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="pe-ws-field pe-ws-field--compact pe-ws-border-dependent" data-border-section="button">
							<label for="button_border_width"><?php esc_html_e( 'Width', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="button_border_width" name="sitestaffr_widget_settings[button_border_width]" value="<?php echo esc_attr( isset( $settings['button_border_width'] ) ? intval( $settings['button_border_width'] ) : '0' ); ?>" min="0" max="10" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact pe-ws-border-dependent" data-border-section="button">
							<label for="button_border_color"><?php esc_html_e( 'Color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_border_color" name="sitestaffr_widget_settings[button_border_color]" value="<?php echo esc_attr( isset( $settings['button_border_color'] ) ? $settings['button_border_color'] : '#1FB6CC' ); ?>" class="sitestaffr-color-field" data-default-color="#1FB6CC" />
						</div>
					</div>
				</div>

				<!-- Border Radius -->
				<div class="pe-ws-group">
					<div class="pe-ws-radius-heading">
						<span class="pe-ws-radius-heading-label"><?php esc_html_e( 'Border Radius', 'sitestaffr' ); ?></span>
						<label class="pe-ws-radius-lock-toggle<?php echo $button_radius_locked ? ' is-locked' : ''; ?>" data-radius-lock-toggle="button" title="<?php esc_attr_e( 'Toggle corner lock', 'sitestaffr' ); ?>">
							<input type="checkbox" id="button_border_radius_locked" name="sitestaffr_widget_settings[button_border_radius_locked]" value="1" <?php checked( $button_radius_locked ); ?> />
							<span class="dashicons <?php echo esc_attr( $button_radius_locked ? 'dashicons-lock' : 'dashicons-unlock' ); ?>" data-radius-lock-icon="button" aria-hidden="true"></span>
							<span class="screen-reader-text"><?php esc_html_e( 'Lock all border radius corners', 'sitestaffr' ); ?></span>
						</label>
					</div>
					<div class="pe-ws-field-row pe-ws-radius-group" data-radius-group="button">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_border_radius_top"><?php esc_html_e( 'Top', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="button_border_radius_top" class="pe-ws-radius-input" data-radius-role="master" name="sitestaffr_widget_settings[button_border_radius_top]" value="<?php echo esc_attr( $button_radius_top ); ?>" min="0" max="200" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_border_radius_right"><?php esc_html_e( 'Right', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="button_border_radius_right" class="pe-ws-radius-input" data-radius-role="slave" name="sitestaffr_widget_settings[button_border_radius_right]" value="<?php echo esc_attr( $button_radius_right ); ?>" min="0" max="200" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_border_radius_bottom"><?php esc_html_e( 'Bottom', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="button_border_radius_bottom" class="pe-ws-radius-input" data-radius-role="slave" name="sitestaffr_widget_settings[button_border_radius_bottom]" value="<?php echo esc_attr( $button_radius_bottom ); ?>" min="0" max="200" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_border_radius_left"><?php esc_html_e( 'Left', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="button_border_radius_left" class="pe-ws-radius-input" data-radius-role="slave" name="sitestaffr_widget_settings[button_border_radius_left]" value="<?php echo esc_attr( $button_radius_left ); ?>" min="0" max="200" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
				</div>

				<!-- Shadow -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Shadow', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label>
								<input type="checkbox" id="button_box_shadow" name="sitestaffr_widget_settings[button_box_shadow]" value="1" <?php checked( isset( $settings['button_box_shadow'] ) ? $settings['button_box_shadow'] : true, true ); ?> />
								<?php esc_html_e( 'Enable', 'sitestaffr' ); ?>
							</label>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_shadow_color"><?php esc_html_e( 'Color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_shadow_color" name="sitestaffr_widget_settings[button_shadow_color]" value="<?php echo esc_attr( isset( $settings['button_shadow_color'] ) ? $settings['button_shadow_color'] : 'rgba(0,0,0,0.2)' ); ?>" class="sitestaffr-color-field" data-default-color="rgba(0,0,0,0.2)" />
						</div>
					</div>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_shadow_blur"><?php esc_html_e( 'Blur', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="button_shadow_blur" name="sitestaffr_widget_settings[button_shadow_blur]" value="<?php echo esc_attr( isset( $settings['button_shadow_blur'] ) ? intval( $settings['button_shadow_blur'] ) : '10' ); ?>" min="0" max="100" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_shadow_offset"><?php esc_html_e( 'Offset', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="button_shadow_offset" name="sitestaffr_widget_settings[button_shadow_offset]" value="<?php echo esc_attr( isset( $settings['button_shadow_offset'] ) ? intval( $settings['button_shadow_offset'] ) : '4' ); ?>" min="0" max="50" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
				</div>

				<!-- Padding -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Padding', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field-row">
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_padding_x"><?php esc_html_e( 'Horizontal', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="button_padding_x" name="sitestaffr_widget_settings[button_padding_x]" value="<?php echo esc_attr( isset( $settings['button_padding_x'] ) ? intval( $settings['button_padding_x'] ) : '24' ); ?>" min="0" max="200" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="pe-ws-field pe-ws-field--compact">
							<label for="button_padding_y"><?php esc_html_e( 'Vertical', 'sitestaffr' ); ?></label>
							<div class="pe-ws-input-px">
								<input type="number" id="button_padding_y" name="sitestaffr_widget_settings[button_padding_y]" value="<?php echo esc_attr( isset( $settings['button_padding_y'] ) ? intval( $settings['button_padding_y'] ) : '12' ); ?>" min="0" max="100" />
								<span class="pe-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
				</div>

				</div><!-- /button-tab-appearance -->

				<div id="button-tab-behavior" role="tabpanel" class="pe-ws-tabpanel" aria-labelledby="button-tab-btn-behavior" hidden>

				<!-- Mode -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Mode', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field">
						<label for="button_mode"><?php esc_html_e( 'Button Mode', 'sitestaffr' ); ?></label>
						<select id="button_mode" name="sitestaffr_widget_settings[button_mode]">
							<option value="both" <?php selected( $button_mode, 'both' ); ?>><?php esc_html_e( 'Voice & Text (visitor chooses)', 'sitestaffr' ); ?></option>
							<option value="voice" <?php selected( $button_mode, 'voice' ); ?>><?php esc_html_e( 'Voice Only', 'sitestaffr' ); ?></option>
							<option value="text" <?php selected( $button_mode, 'text' ); ?>><?php esc_html_e( 'Text Chat Only', 'sitestaffr' ); ?></option>
						</select>
						<p class="description"><?php esc_html_e( 'Choose which conversation modes visitors can use. Override per instance with the shortcode mode attribute.', 'sitestaffr' ); ?></p>
					</div>
				</div>

				<!-- Hover Animation -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Hover Animation', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field">
						<label for="button_hover_animation"><?php esc_html_e( 'Animation', 'sitestaffr' ); ?></label>
						<select id="button_hover_animation" name="sitestaffr_widget_settings[button_hover_animation]">
							<option value="none" <?php selected( isset( $settings['button_hover_animation'] ) ? $settings['button_hover_animation'] : 'none', 'none' ); ?>><?php esc_html_e( 'None', 'sitestaffr' ); ?></option>
							<option value="scale" <?php selected( isset( $settings['button_hover_animation'] ) ? $settings['button_hover_animation'] : 'none', 'scale' ); ?>><?php esc_html_e( 'Scale', 'sitestaffr' ); ?></option>
							<option value="glow" <?php selected( isset( $settings['button_hover_animation'] ) ? $settings['button_hover_animation'] : 'none', 'glow' ); ?>><?php esc_html_e( 'Glow', 'sitestaffr' ); ?></option>
							<option value="pulse" <?php selected( isset( $settings['button_hover_animation'] ) ? $settings['button_hover_animation'] : 'none', 'pulse' ); ?>><?php esc_html_e( 'Pulse', 'sitestaffr' ); ?></option>
						</select>
					</div>
				</div>

				<!-- Display -->
				<div class="pe-ws-group">
					<h4><?php esc_html_e( 'Display', 'sitestaffr' ); ?></h4>
					<div class="pe-ws-field">
						<label>
							<input type="checkbox" id="button_full_width" name="sitestaffr_widget_settings[button_full_width]" value="1" <?php checked( isset( $settings['button_full_width'] ) ? $settings['button_full_width'] : false, true ); ?> />
							<?php esc_html_e( 'Full Width', 'sitestaffr' ); ?>
						</label>
					</div>
				</div>

				</div><!-- /button-tab-behavior -->

			</div>
		</div>
		<div class="pe-ws-section-footer">
			<button type="button" class="button button-primary pe-ws-save-btn" data-section="button"><?php esc_html_e( 'Save Button Settings', 'sitestaffr' ); ?></button>
			<span class="pe-ws-save-status"></span>
		</div>
	</div>
</div>
<?php // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
