<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">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<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">
						
						<form class="role_form" id="role_form" method="post" action="<?php echo base_url();?>role/updateRole">
						<input type="hidden" name="id" value="<?php echo $role_data[0]['id'];?>">	
						<div class="card-body">
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
											<input type="text" class="form-control" name="role_name" id="role_name" value="<?php echo $role_data[0]['role_name'];?>">
											<label class="col-md-6 col-form-label">Role Name</label>
										
									</div>
									<!-- Error message below input -->
									<div class="row">
										<div class="offset-md-6 col-md-6">
											<small class="text-danger" id="error_role_name"></small>
										</div>
									</div>
								</div>
								
								
								<div class="col-md-12">
									<button class="btn btn-primary">Save Role</button>
									<a class="btn btn-danger" href="<?php echo site_url();?>role">Cancel</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div><!-- /.container-fluid -->
	</section>
	<!-- /.content -->
</div>
 <script>
$(document).ready(function () {
	// Initialize the validation
	$('#role_form').validate({
		rules: {
			role_name: {
				required: true,
			},
		},
		messages: {
			role_name: {
				required: "Please enter Role Name",
				
			},
			
		},
		submitHandler: function (form) {
			form.submit(); // Submit the form
		},
	});
});
</script>