<?php
$query = get_option('pms_encrypt_key');
$skey = !empty($query) ? esc_html($query) : '';
?>
<div class="container-fluid clear">
	<div class="row">
		<div class="col-md-12">
			<div class="mt-3">
				<div class="card text-dark bg-light p-0">
					<div class="card-header">
						<?php echo __('Password Encryption Key', 'passwords-manager'); ?>:
					</div>
					<div class="card-body">
						<form method="post" id="setting_form">
							<div class="form-group col-md-12 mb-0">
								<label for="setting_key">
									<?php echo __('Password Encryption Key', 'passwords-manager'); ?>
									<span class="export_error">*</span>
								</label>
							</div>
							<div class="form-group d-flex align-items-center">
								<?php if (!empty($skey)) : ?>
									<div class="rlt">
										<input type="password" name="setting_key" id="setting_key"
											class="form-control"
											value="<?php echo esc_attr($skey); ?>"
											readonly
											data-toggle="tooltip"
											data-placement="bottom"
											title="<?php echo esc_attr(__('Do not try to change it again else all your older passwords will stop working.', 'passwords-manager')); ?>" />
										<span toggle="#setting_key" class="fa fa-fw fa-eye field-icon toggle-password"></span>
									</div>
								<?php else : ?>
									<div class="rlt">
										<input type="password" name="setting_key" id="setting_key"
											class="form-control stng_error"
											required
											aria-describedby="key_warning" />
										<span toggle="#setting_key" class="fa fa-fw fa-eye field-icon toggle-password"></span>
									</div>
									<button type="button" class="btn btn-primary" id="generate">
										<?php echo __('Generate Key', 'passwords-manager'); ?>
									</button>
							</div>
							<div class="col-lg-12 mt-2">
								<span class="wrngTooltip">
									<?php echo __('Do not try to change it again else all your older passwords will stop working.', 'passwords-manager'); ?>
								</span>
								<h6 class="text-danger" id="error_show" style="display: none;" aria-live="polite">
									<?php echo __('Please enter valid encryption key first.', 'passwords-manager'); ?>
								</h6>
								<input type="hidden" name="btn_action" id="btn_action" value="Save" />
								<input type="submit" name="saction" id="saction" class="btn btn-info" value="<?php echo __('Save', 'passwords-manager'); ?>" />
							</div>
						<?php endif; ?>
					</div>
					<?php if (!empty($skey)) : ?>
						<div id="key_warning">
							<div class="alert-dismissible fade show mt-2 pe-0">
								<p class="text-danger ml-1 mb-1">
									<strong><?php echo __('Note', 'passwords-manager'); ?>: </strong>
									<?php echo __('You can enter encryption key only once. So, make sure to use a secure key.', 'passwords-manager'); ?>
								</p>
							</div>
						</div>
					<?php else : ?>
						<div id="key_warning" style="display: none;">
							<div class="alert-dismissible fade show mt-2 pe-0">
								<p class="text-danger ml-1 mb-1">
									<strong><?php echo __('Note', 'passwords-manager'); ?>: </strong>
									<?php echo __('You can enter encryption key only once. So, make sure to use a secure key.', 'passwords-manager'); ?>
								</p>
							</div>
						</div>
					<?php endif; ?>
					<input type="hidden" name="user_id" id="user_id" value="<?php echo get_current_user_id(); ?>" />
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
</div>

<script>
	document.addEventListener("DOMContentLoaded", function() {
		const generateButton = document.querySelector("#generate");
		const keyField = document.querySelector("#setting_key");

		if (generateButton) {
			generateButton.addEventListener("click", function() {
				const randomKey = Array.from({
						length: 25
					}, () =>
					Math.random().toString(36).charAt(2)
				).join('');
				keyField.value = randomKey;
			});
		}
	});
</script>