<!--mantenedor_usuarios_crear_view.php-->
<?php $this->load->view("mantenedores/shared_head_view") ?>

<?php echo form_open('', $form_open, ($hidden ?? null)) ?>
<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>
<table border="0" class="table table-hover">
	<tbody>
		<tr>
			<td><b>Rut</b></td>
			<td><?php echo form_input($rut) ?></td>
		</tr>

		<tr>
			<td><b>Username</b></td>
			<td><?php echo form_input($username) ?></td>
		</tr>

		<tr>
			<td><b>Contraseña</b></td>
			<td><?php echo form_password($password) ?></td>
		</tr>
		<tr>
			<td><b>Confirmar Contraseña</b></td>
			<td><?php echo form_password($password_confirm) ?></td>
		</tr>
	</tbody>
</table>
<input type="hidden" name="data[perfiles_id]" value="100" />
<?php echo form_button($button) ?>
<?php echo form_close() ?>

<p></p>
<a href="<?php echo base_url() ?>dashboard/usuarios/list">&laquo; Volver</a>

<?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_usuarios").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_usuarios").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>