<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="<?php echo base_url();?>assets/js/jquery.validate.min.js"></script>
<div class="main-panel">
    <div class="content-wrapper">
		<div class="col-md-12 grid-margin stretch-card">
			<div class="card">
				<div class="card-body">
				<h4 class="card-title">Add New User</h4>
					<form id="user_form" name="user_form" class="valid" method="post" action="<?php echo base_url();?>user/saveUser" >
					  <div class="form-group row">
						<label for="exampleInputUsername2" class="col-sm-3 col-form-label">First Name</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="first_name" name="first_name" placeholder="Enter First name">
						</div>
					  </div>
					  <div class="form-group row">
						<label for="exampleInputEmail2" class="col-sm-3 col-form-label">Last Name</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Enter Last Name">
						</div>
					  </div>
					  
					  <div class="form-group row">
						<label for="exampleInputPassword2" class="col-sm-3 col-form-label">Email ID</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="email_id" name="email_id" placeholder="Enter Email ID">
						</div>
					  </div>
					  <div class="form-group row">
						<label for="exampleInputConfirmPassword2" class="col-sm-3 col-form-label">Passwword</label>
						<div class="col-sm-9">
							<input type="password" class="form-control" id="password" name="password" placeholder="Enter Password">
						</div>
					  </div>
					  
					  <button type="submit" class="btn btn-primary mr-2">Submit</button>
					  <a href="<?php echo base_url();?>user/users" class="btn btn-light">Cancel</a>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
		var $j = jQuery.noConflict();
        $j(document).ready(function () {
            // Initialize the validation
            $j('#user_form').validate({
				errorClass: 'error-label', 
                rules: {
                    first_name: {
                        required: true,
						normalizer: function (value) {
                            return $.trim(value); // Trim leading and trailing whitespace
                        },
                    },
                    last_name: {
                        required: true,
						normalizer: function (value) {
                            return $.trim(value); // Trim leading and trailing whitespace
                        },
                    },
					email_id: {
                        required: true,
						email:true,
                    },
					password: {
						required:true
					}
                },
                messages: {
					first_name: {
                        required: "Please enter First Name.",
                    },
					last_name: {
                        required: "Please enter Last Name.",
                    },
                    email_id: {
                        required: "Please enter your email address.",
                        email: "Please enter a valid email address.",
                    },
                    password: {
                        required: "Please provide a password.",
                        minlength: "Your password must be at least 3 characters long.",
                    },
                },
                submitHandler: function (form) {
                    form.submit(); // Submit the form
                },
            });
        });
    </script>
