<style>
	.wpb-sdk_deactivation-frm-hidden {
		overflow: hidden;
	}

	.wpb-sdk_deactivation-frm-popup-overlay .wpb-sdk_deactivation-frm-internal-message {
		margin: 3px 0 3px 22px;
		display: none;
	}

	.wpb-sdk_deactivation-frm-reason-input {
		margin: 3px 0 3px 22px;
		display: none;
	}

	.wpb-sdk_deactivation-frm-pro-message {
		margin: 3px 0 3px 22px;
		display: none;
		color: #ed1515;
		font-size: 14px;
		font-weight: 600;
	}

	.wpb-sdk_deactivation-frm-reason-input input[type="text"] {
		width: 100%;
		display: block;
	}

	.wpb-sdk_deactivation-frm-popup-overlay {
		background: rgba(0, 0, 0, .8);
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 10000;
		overflow: auto;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
	}

	.wpb-sdk_deactivation-frm-popup-overlay.wpb-sdk_deactivation-frm-active {
		opacity: 1;
		visibility: visible;
	}

	.wpb-sdk_deactivation-frm-serveypanel {
		width: 600px;
		background: #fff;
		margin: 65px auto 0;
	}

	.wpb-sdk_deactivation-frm-popup-header {
		background: #f1f1f1;
		padding: 20px;
		border-bottom: 1px solid #ccc;
	}

	.wpb-sdk_deactivation-frm-popup-header h2 {
		margin: 0;
	}

	.wpb-sdk_deactivation-frm-popup-body {
		padding: 10px 20px;
	}

	.wpb-sdk_deactivation-frm-popup-footer {
		background: #f9f3f3;
		padding: 10px 20px;
		border-top: 1px solid #ccc;
	}

	.wpb-sdk_deactivation-frm-popup-footer:after {
		content: "";
		display: table;
		clear: both;
	}

	.action-btns {
		float: right;
	}

	.wpb-sdk_deactivation-frm-anonymous {
		display: none;
	}

	.attention,
	.error-message {
		color: red;
		font-weight: 600;
		display: none;
	}

	.wpb-sdk_deactivation-frm-spinner {
		display: none;
	}

	.wpb-sdk_deactivation-frm-spinner img {
		margin-top: 3px;
	}
</style>
<div class="<?php echo $product_slug; ?>-deactivate-wrapper">
	<div class="wpb-sdk_deactivation-frm-popup-overlay">
		<div class="wpb-sdk_deactivation-frm-serveypanel">
			<form action="#" method="post" class="wpb-sdk_deactivation-frm-deactivate-form">
				<div class="wpb-sdk_deactivation-frm-popup-header">
					<h2><?php sprintf( 
						// translators: Product name
						__( 'Quick feedback about %s', 'loginpress' ), esc_html( $product_name ) ); ?></h2>
				</div>
				<div class="wpb-sdk_deactivation-frm-popup-body">
					<h3><?php _e( 'If you have a moment, please let us know why you are deactivating:', 'loginpress' ); ?></h3>
					<ul id="wpb-sdk_deactivation-frm-reason-list">
						<li class="wpb-sdk_deactivation-frm-reason" data-input-type="" data-input-placeholder="">
							<label>
								<span class="wpb-sdk_deactivation-frm-radio"><input type="radio" name="wpb-sdk_deactivation-frm-selected-reason" value="1"></span>
								<span class="wpb-sdk_deactivation-frm-reason-text"><?php _e( 'I only needed the plugin for a short period', 'loginpress' ); ?></span>
							</label>
							<div class="wpb-sdk_deactivation-frm-internal-message"></div>
						</li>
						<li class="wpb-sdk_deactivation-frm-reason has-input" data-input-type="textfield">
							<label>
								<span class="wpb-sdk_deactivation-frm-radio"><input type="radio" name="wpb-sdk_deactivation-frm-selected-reason" value="2"></span>
								<span class="wpb-sdk_deactivation-frm-reason-text"><?php _e( 'I found a better plugin', 'loginpress' ); ?></span>
							</label>
							<div class="wpb-sdk_deactivation-frm-internal-message"></div>
							<div class="wpb-sdk_deactivation-frm-reason-input">
								<span class="message error-message"><?php _e( 'Kindly tell us the name of plugin', 'loginpress' ); ?></span>
								<input type="text" name="better_plugin" placeholder="<?php _e( "What's the plugin's name?", 'loginpress' ); ?>">
							</div>
						</li>
						<li class="wpb-sdk_deactivation-frm-reason" data-input-type="" data-input-placeholder="">
							<label>
								<span class="wpb-sdk_deactivation-frm-radio"><input type="radio" name="wpb-sdk_deactivation-frm-selected-reason" value="3"></span>
								<span class="wpb-sdk_deactivation-frm-reason-text"><?php _e( 'The plugin broke my site', 'loginpress' ); ?></span>
							</label>
							<div class="wpb-sdk_deactivation-frm-internal-message"></div>
						</li>
						<li class="wpb-sdk_deactivation-frm-reason" data-input-type="" data-input-placeholder="">
							<label>
								<span class="wpb-sdk_deactivation-frm-radio"><input type="radio" name="wpb-sdk_deactivation-frm-selected-reason" value="4"></span>
								<span class="wpb-sdk_deactivation-frm-reason-text"><?php _e( 'The plugin suddenly stopped working', 'loginpress' ); ?></span>
							</label>
							<div class="wpb-sdk_deactivation-frm-internal-message"></div>
						</li>
						<li class="wpb-sdk_deactivation-frm-reason" data-input-type="" data-input-placeholder="">
							<label>
								<span class="wpb-sdk_deactivation-frm-radio"><input type="radio" name="wpb-sdk_deactivation-frm-selected-reason" value="5"></span>
								<span class="wpb-sdk_deactivation-frm-reason-text"><?php _e( 'I no longer need the plugin', 'loginpress' ); ?></span>
							</label>
							<div class="wpb-sdk_deactivation-frm-internal-message"></div>
						</li>
						<li class="wpb-sdk_deactivation-frm-reason" data-input-type="" data-input-placeholder="">
							<label>
								<span class="wpb-sdk_deactivation-frm-radio"><input type="radio" name="wpb-sdk_deactivation-frm-selected-reason" value="6"></span>
								<span class="wpb-sdk_deactivation-frm-reason-text"><?php _e( "It's a temporary deactivation. I'm just debugging an issue.", 'loginpress' ); ?></span>
							</label>
							<div class="wpb-sdk_deactivation-frm-internal-message"></div>
						</li>
						<li class="wpb-sdk_deactivation-frm-reason has-input" data-input-type="textfield">
							<label>
								<span class="wpb-sdk_deactivation-frm-radio"><input type="radio" name="wpb-sdk_deactivation-frm-selected-reason" value="7"></span>
								<span class="wpb-sdk_deactivation-frm-reason-text"><?php _e( 'Other', 'loginpress' ); ?></span>
							</label>
							<div class="wpb-sdk_deactivation-frm-internal-message"></div>
							<div class="wpb-sdk_deactivation-frm-reason-input">
								<span class="message error-message"><?php _e( 'Kindly tell us the reason so we can improve.', 'loginpress' ); ?></span>
								<input type="text" name="other_reason" placeholder="<?php _e( "Would you like to share what's other reason?", 'loginpress' ); ?>">
							</div>
						</li>
					</ul>
				</div>
				<div class="wpb-sdk_deactivation-frm-popup-footer">
					<label class="wpb-sdk_deactivation-frm-anonymous">
						<input type="checkbox" />
						<?php _e( 'Anonymous feedback', 'loginpress' ); ?>
					</label>
					<input type="button" class="button button-secondary button-skip wpb-sdk_deactivation-frm-popup-skip-feedback" value="Skip &amp; Deactivate">
					<div class="action-btns">
						<span class="wpb-sdk_deactivation-frm-spinner"><img src="<?php echo admin_url( '/images/spinner.gif' ); ?>" alt=""></span>
						<input type="submit" class="button button-secondary button-deactivate wpb-sdk_deactivation-frm-popup-allow-deactivate" value="Submit &amp; Deactivate" disabled="disabled">
						<a href="#" class="button button-primary wpb-sdk_deactivation-frm-popup-button-close">
							<?php _e( 'Cancel', 'loginpress' ); ?>
						</a>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<script>
	document.addEventListener("DOMContentLoaded", function(event) {
		(function($) {
			$(function() {

				var pluginSlug = "<?php echo $product_slug; ?>";
				var pluginName = "<?php echo $product_name; ?>";
				var loggerDeactiveNonce;

				// Define the reason details mapping
				var reasonDetailsMap = {
					'1': 'I only needed the plugin for a short period',
					'3': 'The plugin broke my site',
					'4': 'The plugin suddenly stopped working',
					'5': 'I no longer need the plugin',
					'6': 'It\'s a temporary deactivation. I\'m just debugging an issue.'
				};

				$(document).on('click', 'tr[data-slug="' + pluginSlug + '"] .deactivate', function(e) {
					e.preventDefault();
					loggerDeactiveNonce = $(this).find('a').attr('href').split("wpnonce=")[1];
					$('.<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-overlay').addClass('wpb-sdk_deactivation-frm-active');
					$('body').addClass('wpb-sdk_deactivation-frm-hidden');
				});

				$(document).on('click', '.<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-button-close', function() {
					close_popup();
				});

				$(document).on('click', ".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-serveypanel,tr[data-slug='" + pluginSlug + "'] .deactivate", function(e) {
					e.stopPropagation();
				});

				$(document).on('click', function() {
					close_popup();
				});

				$('.<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-reason label').on('click', function() {
					if ($(this).find('input[type="radio"]').is(':checked')) {
						$(this).closest('li').siblings().find('.wpb-sdk_deactivation-frm-reason-input').hide();
						$(this).closest('li').siblings().find('.wpb-sdk_deactivation-frm-internal-message').hide();
						$(this).closest('li').find('.wpb-sdk_deactivation-frm-reason-input').show();
						$(this).closest('li').find('.wpb-sdk_deactivation-frm-internal-message').show();
					}
					$('.<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-pro-message').hide();
				});

				$('.<?php echo $product_slug; ?>-deactivate-wrapper input[type="radio"][name="wpb-sdk_deactivation-frm-selected-reason"]').on('click', function(event) {
					$(".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-allow-deactivate").removeAttr('disabled');
					$(".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-skip-feedback").removeAttr('disabled');
				});

				$(document).on('submit', '.<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-deactivate-form', function(event) {
					event.preventDefault();
					var reason = $(this).find('input[type="radio"][name="wpb-sdk_deactivation-frm-selected-reason"]:checked').val();
					var reasonDetails = '';

					if (reason == '2') {
						reasonDetails = $(this).find("input[type='text'][name='better_plugin']").val();
					} else if (reason == '7') {
						reasonDetails = $(this).find("input[type='text'][name='other_reason']").val();
					} else if (reasonDetailsMap[reason]) {
						reasonDetails = reasonDetailsMap[reason];  // Use mapped detail for other reasons
					}

					if ((reason == '2' || reason == '7') && reasonDetails == '') {
						$('.message.error-message').show();
						return;
					}

					let returnURL = $("tr[data-slug='" + pluginSlug + "'] .deactivate a").attr('href');

					send_log(
						'wpb_sdk_' + pluginSlug + '_deactivation',
						reason,
						reasonDetails,
						loggerDeactiveNonce,
						returnURL
					);
				});

				$('.<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-skip-feedback').on('click', function(e) {
					send_log(
						'wpb_sdk_' + pluginSlug + '_deactivation',
						9,
						'',
						loggerDeactiveNonce,
						$("tr[data-slug='" + pluginSlug + "'] .deactivate a").attr('href')
					);
				});

				function close_popup() {
					$('.<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-overlay').removeClass('wpb-sdk_deactivation-frm-active');
					$('.<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-deactivate-form').trigger("reset");
					$(".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-allow-deactivate").attr('disabled', 'disabled');
					$(".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-reason-input").hide();
					$('body').removeClass('wpb-sdk_deactivation-frm-hidden');
					$('.message.error-message').hide();
				}

				function send_log(_action, _reason, _reasonDetails, _nonce, returnURL) {
					$.ajax({
						url: ajaxurl,
						type: 'POST',
						data: {
							action: _action,
							reason: _reason,
							reason_detail: _reasonDetails,
							nonce: _nonce
						},
						beforeSend: function() {
							$(".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-spinner").show();
							$(".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-allow-deactivate").attr("disabled", "disabled");
							$(".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-skip-feedback").attr("disabled", "disabled");
						}
					}).done(function(res) {
						$(".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-spinner").hide();
						$(".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-allow-deactivate").removeAttr("disabled");
						$(".<?php echo $product_slug; ?>-deactivate-wrapper .wpb-sdk_deactivation-frm-popup-skip-feedback").removeAttr("disabled");
						window.location.href = returnURL;
					});
				}
			});
		})(jQuery);
	});
</script>



