<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/js/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<div class="content-wrapper">
            <!-- Main content -->
	<section class="content pt-3">
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<div class="card card-outline card-primary">
						<div class="card-header">
							<div class="d-flex align-items-center">
								<div>
									<h3 class="card-title">Add New Authority</h3>
								</div>
								<div class="col text-end">
									<button style="float:right" class="btn btn-outline-primary" onclick="history.back()">
									  <i class="fas fa-arrow-left me-1"></i> Back
									</button>
								</div>
							</div>
						</div>
						<form class="authority_form" id="authority_form" method="post" action="<?php echo base_url();?>authority/saveAuthority">
	
						<div class="card-body">
							<div class="row">
								<div class="col-md-8">
									<div class="form-group row">
										<label class="col-md-6 col-form-label">Authority Name</label>
										<div class="col-md-6">
											<input type="text" class="form-control" name="authority_name" id="authority_name">
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-6 col-form-label">Alias Name</label>
										<div class="col-md-6">
											<input type="text" class="form-control" name="alias_name" id="alias_name">
										</div>
									</div>
									<!-- Error message below input -->
									<div class="row">
										<div class="offset-md-6 col-md-6">
											<small class="text-danger" id="error_authority_name"></small>
										</div>
									</div>
								</div>
								
								
								<div class="col-md-12">
									<button class="btn btn-primary">Save Authority</button>
									<a class="btn btn-danger" href="<?php echo site_url();?>authority">Cancel</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div><!-- /.container-fluid -->
	</section>
	<!-- /.content -->
</div>
 <script>
 
$(document).ready(function () {
	$.validator.addMethod("noSpecialChars", function (value, element) {
        return this.optional(element) || /^[A-Za-z0-9 ]+$/.test(value);
    }, "Special characters are not allowed.");
	// Initialize the validation
	$('#authority_form').validate({
		onfocusout: function (element) {
            $(element).val($.trim($(element).val())); // remove extra spaces
            this.element(element);
        },	
		rules: {
			authority_name: {
				required: true,
				noSpecialChars: true // apply rule here
			},
			alias_name: {
				required: true,
			},
		},
		messages: {
			authority_name: {
				required: "Please enter Authority Name",
				noSpecialChars: "Only letters, numbers, and spaces are allowed."
				
			},
			alias_name: {
				required: "Please enter Alias Name",
				
			},
			
		},
		submitHandler: function (form) {
			form.submit(); // Submit the form
		},
	});
});
</script>