<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
 <script src="<?php echo base_url()?>/public/validation/js/jquery.validate.js"></script>
<!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h3>
            Profile settings
          </h3>
          <!--<ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Dashboard</li>
          </ol>-->
        </section>

        <!-- Main content -->
        <section class="content"> 
			<div class="row">
				<!-- general form elements -->
				<div class="col-md-12">
					  <div class="box box-primary">
						<div class="box-header with-border">
						 <?php if($this->session->flashdata('error_msg')){?>
								<span style="color:red; font-weight:bold"><?php echo $this->session->flashdata('error_msg');?></span>
							<?php }?>
							<?php if($this->session->flashdata('success_msg')){?>
								<span style="color:green; font-weight:bold"><?php  echo $this->session->flashdata('success_msg'); ?></span>
							<?php }?>
						</div>
						<!-- /.box-header -->
						<!-- form start -->
						<form role="form" id="signupForm" class="mtbresize" method="post" action="<?php echo base_url('admin/settings/changeuserprofile');?>" enctype="multipart/form-data">
						  <div class="box-body">
							<div class="form-group">
							  <label for="name">Name<sup class="superr">*</sup></label>
							  <input type="text" class="form-control" id="name" name="name" placeholder="name" value="<?php echo $user['name'];?>" required="required">
							  <?php echo form_error('name'); ?>
							</div>
							<div class="form-group">
							  <label for="email">Email</label>
							  <input type="email" class="form-control" id="email" name="email" value="<?php echo $user['email'];?>" placeholder="email" disabled>
							  <?php echo form_error('email'); ?>
							</div>
							<div class="form-group">
							  <label for="phoneno">Phone<sup class="superr">*</sup></label>
							  <input type="text" class="form-control" id="phoneno" name="phoneno" value="<?php echo $user['phoneno'];?>" placeholder="phoneno" required="required">
							  <?php echo form_error('phoneno'); ?>
							</div>
							<div class="form-group">
							  <label for="imgInp">Profile Image(.jpg,.png,.gif)</label>
							  <input id="imgInp" type="file" name="imgInp">
							  <?php if(empty($user['profile_image'])){?>
							  <img src="<?php echo base_url()?>public/admin_assets/images/profilepics/Dummy.jpg" style="width:80px;margin-top: 20px;" id="blah">
							  <?php }else{?>
							  <img src="<?php echo base_url()?>public/admin_assets/images/profilepics/<?php echo $user['profile_image'];?>" style="width:80px;margin-top: 20px;" id="blah">
							  <?php }?>
							</div>
						  </div>
						  <!-- /.box-body -->
						  <div class="box-footer">
						  	<inpu type="hidden" name="user_id" value="<?php echo $user['admin_id'];?>">
							<button type="submit" class="btn btn-sm btn-primary">Submit</button>
						  </div>
						</form>
					  </div>
				</div>
          <!-- /.box -->
          </div><!-- /.row -->	
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->
<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});
$( "#signupForm" ).validate( {
					rules: {
						phoneno: {required:true,number: true, minlength:10,maxlength:15},
					},
					messages: {						
						phoneno:{required:"Phone No field is required"}
					
					},
					errorElement: "em",
					
					highlight: function ( element, errorClass, validClass ) {
						$( element ).parents( ".form-control" ).addClass( "has-error" ).removeClass( "has-success" );
					},
					unhighlight: function (element, errorClass, validClass) {
						$( element ).parents( ".form-control" ).addClass( "has-success" ).removeClass( "has-error" );
					}
				} );
</script>