<!--mantenedor_staff_editar_view.php-->
<?php $this->load->view("mantenedores/shared_head_view") ?>
<div id="password-alert" class="alert alert-danger">
	<ul style="list-style-type: circle;padding: 8px;">
		<li>La contraseña debe tener al menos 8 caracteres.</li>
		<li>La contraseña debe tener al menos una letra mayúscula.</li>
		<li>La contraseña debe tener al menos un número.</li>
		<li>La contraseña debe tener al menos un carácter especial.</li>
	</ul>
</div>
<?php echo form_open('', $form_open, $hidden) ?>
<div class="col-md-6">
	<table border="0" class="table table-hover">
		<tbody>
			<tr>
				<td><b>Contraseña</b></td>
				<td><?php echo form_input($password, '') ?></td>
			</tr>

			<tr>
				<td><b>Confirme Contraseña</b></td>
				<td><?php echo form_input($password_confirm, '') ?></td>
			</tr>
		</tbody>
	</table>
	<?php echo form_button($button) ?>
</div>

<?php echo form_close(); ?>
<div class="col-md-12">
	<a class="link_list" href="<?php echo base_url(); ?>dashboard/usuarios/list">Volver a Listado &raquo;</a>
</div>

<?php $this->load->view("mantenedores/shared_foot_view") ?>

<script>
	$('#password').keyup(function() {
		validateFieldsPassword($('#password').val(), 'password');
	});
	$('#password_confirm').keyup(function() {
		validateFieldsPassword($('#password_confirm').val(), 'password_confirm');
	});

	$("#form_staff").submit(function(e) {
		e.preventDefault();
		let password = validateFieldsPassword($('#password').val(), 'password');
		let password_confirm = validateFieldsPassword($('#password_confirm').val(), 'password_confirm');
		if (password == 1 && password_confirm == 1) {
			document.getElementById("form_staff").submit();
		} else {
			alert('Contraseñas inválidas corrija e intente nuevamente');
		}
	});
</script>
<script>
	function validateFieldsPassword(texto, id, msg = 'Campo Obligatorio') {
		const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_@]).{8,}$/;
		let messages = [];

		if ($("#" + id)) {
			if (texto !== '') {
				if (id == 'password' || id == 'password_confirm') {
					if (id == 'password' && !passwordPattern.test(texto)) {
						$("#" + id).css('border-color', 'red');
						if (texto.length < 8) messages.push('<li>La contraseña debe tener al menos 8 caracteres.</li>');
						if (!/[A-Z]/.test(texto)) messages.push(
							'<li>La contraseña debe tener al menos una letra mayúscula.</li>');
						if (!/[a-z]/.test(texto)) messages.push(
							'<li>La contraseña debe tener al menos una letra minúscula.</li>');
						if (!/\d/.test(texto)) messages.push('<li>La contraseña debe tener al menos un número.</li>');
						if (!/[\W_]/.test(texto)) messages.push(
							'<li>La contraseña debe tener al menos un carácter especial.</li>');
						$("#invalid_" + id).html(`Contraseña inválida`);
						showPasswordAlert(messages);
						return 0;
					} else {
						if (id == 'password_confirm') {
							if ($('#password').val() !== texto) {
								$("#" + id).css('border-color', 'red');
								$("#invalid_" + id).text('Las contraseñas no coinciden');
								return 0;
							} else {
								$("#" + id).css('border-color', '');
								$("#invalid_" + id).text('');
								return 1;
							}
						} else {
							if (id == 'password') {
								if ($('#password_confirm').val() !== texto) {
									$("#" + id).css('border-color', '');
									$("#invalid_" + id).text('');
									$("#password_confirm").css('border-color', 'red');
									$("#invalid_password_confirm").text('Las contraseñas no coinciden');
									hidePasswordAlert();
									return 0;
								} else {
									$("#" + id).css('border-color', '');
									$("#invalid_" + id).text('');
									$("#password_confirm").css('border-color', '');
									$("#invalid_password_confirm").text('');
									hidePasswordAlert();
									return 1;
								}
							}
						}
					}
				} else {
					$("#" + id).css('border-color', '');
					$("#invalid_" + id).text('');
					hidePasswordAlert();
					return 1;
				}
			} else {
				$("#" + id).css('border-color', 'red');
				$("#invalid_" + id).text(msg);
				// hidePasswordAlert();
				return 0;
			}
		}
	}

	function showPasswordAlert(messages) {
		$("#password-alert").html(`<ul style="list-style-type: circle;padding: 8px;">${messages.join('')}</ul>`).show();
	}

	function hidePasswordAlert() {
		$("#password-alert").hide();
	}
</script>