<?php
/**
 * Free widget settings.
 *
 * @package DreamFast_CF
 *
 * @var array<string, mixed> $settings
 * @var string               $active_tab
 * @var string               $page_title
 * @var string               $page_intro
 */

namespace DreamFast\CommerceFloat;

defined( 'ABSPATH' ) || exit;

$dreamfast_cf_upgrade_url = Features::get_upgrade_url();
?>
<div class="wrap df-sf-admin">
	<h1><?php echo esc_html( $page_title ); ?></h1>
	<p class="description"><?php echo esc_html( $page_intro ); ?></p>

	<?php if ( 'cart' === $active_tab ) : ?>
		<div class="df-sf-compat-card">
			<strong><?php esc_html_e( 'WooCommerce product templates', 'dreamfast-commerce-float' ); ?>:</strong>
			<?php if ( Settings::has_woocommerce_blocks_support() ) : ?>
				<span class="df-sf-status df-sf-status--ok"><?php esc_html_e( 'Blocks detected', 'dreamfast-commerce-float' ); ?></span>
			<?php else : ?>
				<span class="df-sf-status"><?php esc_html_e( 'Classic form mode', 'dreamfast-commerce-float' ); ?></span>
			<?php endif; ?>
			<p><?php esc_html_e( 'The sticky bar follows the standard WooCommerce Add to Cart form and supports filtered selectors for custom themes.', 'dreamfast-commerce-float' ); ?></p>
		</div>
	<?php endif; ?>

	<div class="df-sf-pro-banner">
		<strong><?php esc_html_e( 'Free', 'dreamfast-commerce-float' ); ?></strong>
		<span><?php esc_html_e( 'Upgrade for floating coupons, phone, email, Waze, display rules, out-of-stock actions, and analytics.', 'dreamfast-commerce-float' ); ?></span>
		<a class="button button-primary" href="<?php echo esc_url( $dreamfast_cf_upgrade_url ); ?>" target="_blank" rel="noopener noreferrer">
			<?php esc_html_e( 'View Pro', 'dreamfast-commerce-float' ); ?>
		</a>
	</div>

	<form method="post" action="options.php" class="df-sf-form">
		<?php settings_fields( 'dreamfast_cf_settings_group' ); ?>

		<?php if ( 'cart' === $active_tab ) : ?>
			<table class="form-table" role="presentation">
				<tr>
					<th scope="row"><?php esc_html_e( 'Enable Sticky Cart', 'dreamfast-commerce-float' ); ?></th>
					<td>
						<label>
							<input type="hidden" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[cart_enabled]" value="0" />
							<input type="checkbox" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[cart_enabled]" value="1" <?php checked( ! empty( $settings['cart_enabled'] ) ); ?> />
							<?php esc_html_e( 'Show the sticky purchase bar on product pages', 'dreamfast-commerce-float' ); ?>
						</label>
					</td>
				</tr>
				<tr>
					<th scope="row"><?php esc_html_e( 'Bar Position', 'dreamfast-commerce-float' ); ?></th>
					<td>
						<select name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[cart_position]">
							<option value="auto" <?php selected( $settings['cart_position'], 'auto' ); ?>><?php esc_html_e( 'Auto: mobile bottom, desktop top', 'dreamfast-commerce-float' ); ?></option>
							<option value="bottom" <?php selected( $settings['cart_position'], 'bottom' ); ?>><?php esc_html_e( 'Bottom on all devices', 'dreamfast-commerce-float' ); ?></option>
							<option value="top" <?php selected( $settings['cart_position'], 'top' ); ?>><?php esc_html_e( 'Top on all devices', 'dreamfast-commerce-float' ); ?></option>
						</select>
					</td>
				</tr>
				<tr>
					<th scope="row"><label for="df-sf-cart-style"><?php esc_html_e( 'Bar Style', 'dreamfast-commerce-float' ); ?></label></th>
					<td>
						<select id="df-sf-cart-style" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[cart_style]">
							<?php foreach ( Settings::get_cart_style_options() as $dreamfast_cf_style_id => $dreamfast_cf_style_label ) : ?>
								<option value="<?php echo esc_attr( $dreamfast_cf_style_id ); ?>" <?php selected( $settings['cart_style'], $dreamfast_cf_style_id ); ?>><?php echo esc_html( $dreamfast_cf_style_label ); ?></option>
							<?php endforeach; ?>
						</select>
					</td>
				</tr>
				<tr>
					<th scope="row"><?php esc_html_e( 'Color Preset', 'dreamfast-commerce-float' ); ?></th>
					<td>
						<div class="df-sf-preset-grid" role="radiogroup" aria-label="<?php esc_attr_e( 'Cart bar color preset', 'dreamfast-commerce-float' ); ?>">
							<?php foreach ( Settings::get_cart_preset_options() as $dreamfast_cf_preset_id => $dreamfast_cf_preset ) : ?>
								<label class="df-sf-preset-card">
									<input type="radio" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[cart_preset]" value="<?php echo esc_attr( $dreamfast_cf_preset_id ); ?>" <?php checked( $settings['cart_preset'], $dreamfast_cf_preset_id ); ?> />
									<span class="df-sf-preset-card__visual" style="<?php echo esc_attr( '--df-preset-bg:' . $dreamfast_cf_preset['bg'] . ';--df-preset-text:' . $dreamfast_cf_preset['text'] . ';--df-preset-btn:' . $dreamfast_cf_preset['btn'] . ';--df-preset-btn-text:' . $dreamfast_cf_preset['btnText'] . ';' ); ?>">
										<span class="df-sf-preset-card__bar"><span></span><i></i></span>
										<span class="df-sf-preset-card__dots"><b></b><b></b><b></b></span>
									</span>
									<span class="df-sf-preset-card__label"><?php echo esc_html( $dreamfast_cf_preset['label'] ); ?></span>
								</label>
							<?php endforeach; ?>
						</div>
					</td>
				</tr>
				<tr>
					<th scope="row"><label for="df-sf-cart-icon"><?php esc_html_e( 'Button Icon', 'dreamfast-commerce-float' ); ?></label></th>
					<td>
						<select id="df-sf-cart-icon" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[cart_button_icon]">
							<?php foreach ( Settings::get_cart_button_icon_options() as $dreamfast_cf_icon_id => $dreamfast_cf_icon_label ) : ?>
								<option value="<?php echo esc_attr( $dreamfast_cf_icon_id ); ?>" <?php selected( $settings['cart_button_icon'], $dreamfast_cf_icon_id ); ?>><?php echo esc_html( $dreamfast_cf_icon_label ); ?></option>
							<?php endforeach; ?>
						</select>
					</td>
				</tr>
				<tr>
					<th scope="row"><label for="df-sf-cart-icon-pos"><?php esc_html_e( 'Icon Position', 'dreamfast-commerce-float' ); ?></label></th>
					<td>
						<select id="df-sf-cart-icon-pos" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[cart_button_icon_pos]">
							<option value="before" <?php selected( $settings['cart_button_icon_pos'], 'before' ); ?>><?php esc_html_e( 'Before the text', 'dreamfast-commerce-float' ); ?></option>
							<option value="after" <?php selected( $settings['cart_button_icon_pos'], 'after' ); ?>><?php esc_html_e( 'After the text', 'dreamfast-commerce-float' ); ?></option>
						</select>
					</td>
				</tr>
				<tr>
					<th scope="row"><?php esc_html_e( 'Entrance Animation', 'dreamfast-commerce-float' ); ?></th>
					<td>
						<select name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[cart_animation]">
							<option value="slide" <?php selected( $settings['cart_animation'], 'slide' ); ?>><?php esc_html_e( 'Slide', 'dreamfast-commerce-float' ); ?></option>
							<option value="fade" <?php selected( $settings['cart_animation'], 'fade' ); ?>><?php esc_html_e( 'Fade', 'dreamfast-commerce-float' ); ?></option>
						</select>
					</td>
				</tr>
			</table>

			<div class="df-sf-preview-card" data-preview="cart">
				<h2><?php esc_html_e( 'Preview before saving', 'dreamfast-commerce-float' ); ?></h2>
				<div class="df-sf-preview-toolbar">
					<span><?php esc_html_e( 'Preview direction', 'dreamfast-commerce-float' ); ?></span>
					<select name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[preview_direction]" class="df-sf-preview-direction">
						<option value="auto" <?php selected( $settings['preview_direction'], 'auto' ); ?>><?php esc_html_e( 'Auto', 'dreamfast-commerce-float' ); ?></option>
						<option value="rtl" <?php selected( $settings['preview_direction'], 'rtl' ); ?>>RTL</option>
						<option value="ltr" <?php selected( $settings['preview_direction'], 'ltr' ); ?>>LTR</option>
					</select>
				</div>
				<div class="df-sf-admin-preview-canvas" dir="<?php echo esc_attr( 'auto' === $settings['preview_direction'] ? ( is_rtl() ? 'rtl' : 'ltr' ) : $settings['preview_direction'] ); ?>">
					<div class="df-sf-preview-cart">
						<div class="df-sf-preview-cart__product">
							<div class="df-sf-preview-cart__thumb"></div>
							<div>
								<strong><?php esc_html_e( 'Aurora Wireless Headphones', 'dreamfast-commerce-float' ); ?></strong>
								<span>$199.00</span>
							</div>
						</div>
						<button type="button" class="df-sf-preview-cart__button">
							<span class="df-sf-preview-cart__icon"><?php echo Settings::get_cart_button_icon_html(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Trusted local SVG map. ?></span>
							<span><?php esc_html_e( 'Add to Cart', 'dreamfast-commerce-float' ); ?></span>
						</button>
					</div>
				</div>
			</div>
		<?php else : ?>
			<table class="form-table" role="presentation">
				<tr>
					<th scope="row"><?php esc_html_e( 'Enable Contact Widget', 'dreamfast-commerce-float' ); ?></th>
					<td>
						<label>
							<input type="hidden" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[contact_enabled]" value="0" />
							<input type="checkbox" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[contact_enabled]" value="1" <?php checked( ! empty( $settings['contact_enabled'] ) ); ?> />
							<?php esc_html_e( 'Show the floating contact button', 'dreamfast-commerce-float' ); ?>
						</label>
					</td>
				</tr>
				<tr>
					<th scope="row"><?php esc_html_e( 'Help Tooltip', 'dreamfast-commerce-float' ); ?></th>
					<td>
						<label>
							<input type="hidden" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[contact_tooltip_enabled]" value="0" />
							<input type="checkbox" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[contact_tooltip_enabled]" value="1" <?php checked( ! empty( $settings['contact_tooltip_enabled'] ) ); ?> />
							<?php esc_html_e( 'Show a short tooltip next to the button', 'dreamfast-commerce-float' ); ?>
						</label>
						<p>
							<label for="df-sf-contact-tooltip-text" class="screen-reader-text"><?php esc_html_e( 'Tooltip text', 'dreamfast-commerce-float' ); ?></label>
							<input type="text" id="df-sf-contact-tooltip-text" class="regular-text" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[contact_tooltip_text]" value="<?php echo esc_attr( (string) $settings['contact_tooltip_text'] ); ?>" maxlength="60" />
						</p>
					</td>
				</tr>
				<tr>
					<th scope="row"><label for="df-sf-whatsapp"><?php esc_html_e( 'WhatsApp Number', 'dreamfast-commerce-float' ); ?></label></th>
					<td>
						<input type="text" id="df-sf-whatsapp" class="regular-text" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[whatsapp_number]" value="<?php echo esc_attr( (string) $settings['whatsapp_number'] ); ?>" placeholder="+972501234567" />
						<p class="description"><?php esc_html_e( 'Use the international format with country code.', 'dreamfast-commerce-float' ); ?></p>
					</td>
				</tr>
				<tr>
					<th scope="row"><label for="df-sf-wa-msg"><?php esc_html_e( 'Preset Message', 'dreamfast-commerce-float' ); ?></label></th>
					<td>
						<textarea id="df-sf-wa-msg" class="large-text" rows="3" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[whatsapp_message]"><?php echo esc_textarea( (string) $settings['whatsapp_message'] ); ?></textarea>
					</td>
				</tr>
				<tr>
					<th scope="row"><?php esc_html_e( 'Position', 'dreamfast-commerce-float' ); ?></th>
					<td>
						<select name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[contact_position]">
							<option value="bottom-right" <?php selected( $settings['contact_position'], 'bottom-right' ); ?>><?php esc_html_e( 'Bottom right', 'dreamfast-commerce-float' ); ?></option>
							<option value="bottom-left" <?php selected( $settings['contact_position'], 'bottom-left' ); ?>><?php esc_html_e( 'Bottom left', 'dreamfast-commerce-float' ); ?></option>
						</select>
					</td>
				</tr>
				<tr>
					<th scope="row"><label for="df-sf-contact-style"><?php esc_html_e( 'Widget Style', 'dreamfast-commerce-float' ); ?></label></th>
					<td>
						<select id="df-sf-contact-style" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[contact_style]">
							<?php foreach ( Settings::get_contact_style_options() as $dreamfast_cf_style_id => $dreamfast_cf_style_label ) : ?>
								<option value="<?php echo esc_attr( $dreamfast_cf_style_id ); ?>" <?php selected( $settings['contact_style'], $dreamfast_cf_style_id ); ?>><?php echo esc_html( $dreamfast_cf_style_label ); ?></option>
							<?php endforeach; ?>
						</select>
					</td>
				</tr>
				<tr>
					<th scope="row"><?php esc_html_e( 'Color Preset', 'dreamfast-commerce-float' ); ?></th>
					<td>
						<div class="df-sf-preset-grid df-sf-preset-grid--contact" role="radiogroup" aria-label="<?php esc_attr_e( 'Contact widget color preset', 'dreamfast-commerce-float' ); ?>">
							<?php foreach ( Settings::get_contact_preset_options() as $dreamfast_cf_preset_id => $dreamfast_cf_preset ) : ?>
								<label class="df-sf-preset-card df-sf-preset-card--contact">
									<input type="radio" name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[contact_preset]" value="<?php echo esc_attr( $dreamfast_cf_preset_id ); ?>" <?php checked( $settings['contact_preset'], $dreamfast_cf_preset_id ); ?> />
									<span class="df-sf-preset-card__visual" style="<?php echo esc_attr( '--df-preset-bg:' . $dreamfast_cf_preset['bg'] . ';--df-preset-text:' . $dreamfast_cf_preset['icon'] . ';--df-preset-btn:' . $dreamfast_cf_preset['bg'] . ';--df-preset-btn-text:' . $dreamfast_cf_preset['icon'] . ';' ); ?>">
										<span class="df-sf-preset-card__contact-dot"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg></span>
										<span class="df-sf-preset-card__dots"><b></b><b></b><b></b></span>
									</span>
									<span class="df-sf-preset-card__label"><?php echo esc_html( $dreamfast_cf_preset['label'] ); ?></span>
								</label>
							<?php endforeach; ?>
						</div>
					</td>
				</tr>
				<tr>
					<th scope="row"><?php esc_html_e( 'Entrance Animation', 'dreamfast-commerce-float' ); ?></th>
					<td>
						<select name="<?php echo esc_attr( Settings::OPTION_KEY ); ?>[contact_animation]">
							<option value="scale" <?php selected( $settings['contact_animation'], 'scale' ); ?>><?php esc_html_e( 'Scale', 'dreamfast-commerce-float' ); ?></option>
							<option value="fade" <?php selected( $settings['contact_animation'], 'fade' ); ?>><?php esc_html_e( 'Fade', 'dreamfast-commerce-float' ); ?></option>
						</select>
					</td>
				</tr>
			</table>

			<div class="df-sf-preview-card" data-preview="contact">
				<h2><?php esc_html_e( 'Preview before saving', 'dreamfast-commerce-float' ); ?></h2>
				<div class="df-sf-admin-preview-canvas df-sf-admin-preview-canvas--contact">
					<div class="df-sf-preview-contact">
						<span class="df-sf-preview-contact__tooltip"><?php echo esc_html( (string) $settings['contact_tooltip_text'] ); ?></span>
						<button type="button" class="df-sf-preview-contact__fab" aria-label="<?php esc_attr_e( 'Contact preview', 'dreamfast-commerce-float' ); ?>">
							<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"><path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.435 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
						</button>
					</div>
				</div>
			</div>
		<?php endif; ?>

		<div class="df-sf-savebar">
			<div class="df-sf-savebar__text">
				<strong><?php esc_html_e( 'Save your changes', 'dreamfast-commerce-float' ); ?></strong>
				<span><?php esc_html_e( 'Changes apply after this page is saved.', 'dreamfast-commerce-float' ); ?></span>
			</div>
			<button type="submit" class="button button-primary df-sf-save-button">
				<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path fill="currentColor" d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4ZM12 19c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3Zm3-10H5V5h10v4Z"/></svg>
				<span><?php esc_html_e( 'Save Settings', 'dreamfast-commerce-float' ); ?></span>
			</button>
		</div>
	</form>
</div>
