<script type="text/javascript">
$(function() {
	$(document).ready(function() {
		$('.upload_open').html(	((typeof window.orientation !== 'undefined') ? 'Upload / Camera' : 'Upload')	);
		$('input[type="file"]').hide();
		
		$('.upload_open').off('click').on('click',function() {
			$(this).siblings('.upload_delete').val('NO');
			$(this).siblings('input[type="file"]').click();
			
			return false;
		});
		
		$('.upload_clear').off('click').on('click', function() {
			var id = $(this).siblings('input[type="file"]').attr('id');
			var def = $(this).siblings('.upload_default').val();
			
			$(this).siblings('input[type="file"]').val('');
			$(this).siblings('.upload_clear').hide();
			$(this).siblings('.upload_delete').val('YES');
			$(this).siblings('.upload_preview').attr('src',def);		
		});
		
		$('input[type="file"].upload_file').off('change').on('change', function() {
			PreviewImage(this, $(this).siblings('.upload_preview'), $(this).siblings('.upload_clear'));
		});
		
		$('.flashData').off('click').on('click',function() { $(this).remove(); });
	});
	
	function PreviewImage(input, $prev, $clear) {
		if (input.files && input.files[0]) {
			$prev.attr('src', '');
			var reader = new FileReader();			
			reader.onload = function (e) {
				$prev.attr('src', e.target.result);
			}			
			reader.readAsDataURL(input.files[0]);
			$clear.show();
		}	
	}

	$('#saveUserButton').off('click').on('click',function() {
		$('.form-group').removeClass('has-error');
		$('#addUserErrWrap').slideUp();

		var msg = null, err = false;

		if( $.trim( $('#username').val() ) == "") {
			$('#username').parents('.form-group').addClass('has-error');
			msg = 'Sila masukkan nama pengguna';
			err = true;
		}

		if( ( $('#email').val() ).indexOf('@') < 0 ) {
			$('#email').parents('.form-group').addClass('has-error');
			msg = 'Sila masukkan emel yang sahih';
			err = true;
		}

		if( $.trim( $('#email').val() ) == "") {
			$('#email').parents('.form-group').addClass('has-error');
			msg = (msg) ? msg+', ' : msg;
			msg += 'Sila masukkan emel pengguna';
			err = true;
		}

		if(err) {
			$('#addUserErrWrap').slideDown();
			$('#addUserErr').html(msg);
		}

		return !err;
	});
});
</script>
<style>
.paginate_button.active a { background-color:#0073b7 !important; }
.flashData { border: 1px solid #900; color: #900; padding: 0.5% 1%; margin: 5px auto; cursor: pointer; }
.flashData.success { border: 1px solid #090; color: #090; }
</style>
<div class="content-wrapper">
	<section class="content-header">
		<h1>Profil Saya</h1>
		<ol class="breadcrumb">
			<li><a href="<?php echo base_url(); ?>users"><i class="fa fa-dashboard"></i>Pengguna</a></li>
			<li class="active"><a href="<?php echo base_url(); ?>users/profile">Profil Saya</a></li>
		</ol>
	</section>
	
	<section class="content">
		<div class="box box-danger">
			<form id="addUserForm" action="<?php echo base_url(); ?>users/saveuser" method="POST" role="form" enctype="multipart/form-data">
				<input type="hidden" name="ID" id="ID" value="<?php echo ($user) ? $user['ID'] : 0; ?>" />
				<input type="hidden" name="from" id="from" value="users/profile" />
			
				<div class="box-header" >
					<div class="pull-right">
						<a href="<?php echo base_url().(($admin) ? "users" : NULL); ?>" class="btn btn-danger btn-sm"><i class="fa fa-times"></i>&nbsp;Kembali</a>
						<button type="submit" class="btn bg-olive btn-sm pull-center" id="saveUserButton">
							<span class="glyphicon glyphicon-check"></span> <?php echo $this->lang->line('Save'); ?>
						</button>
					</div>
				</div>
				
				<div class="box-body">
					<?php
					if($flashdata) {
						$s = (count($flashdata) == 1 && strpos(strtoupper($flashdata[0]), "BERJAYA") !== FALSE) ? TRUE : FALSE;
						echo "<div class=\"flashData ".(($s) ? "success" : NULL)."\">\n";
						if($s) {
							echo "<div class=\"flashItem\">".$flashdata[0]."</div>\n";
						} else {
							foreach($flashdata as $flash) {
								echo "<div class=\"flashItem\">".$flash."</div>\n";
							}
						}
						echo "</div>\n";
					}
					?>
					<?php					
					$path = base_url().'dist/img/profile/';
					$vpath = STR_REPLACE("\\","/",FCPATH).'dist/img/profile/';
					$pic = ($user && $user['imageFile']) ? $user['imageFile'] : 'default.png';
					$profile = $path . (($pic) ? ((file_exists($vpath.$pic)) ? ((getimagesize($vpath.$pic)) ? $pic : 'default.png') : 'default.png') : 'default.png');
					$default = $path . 'default.png';
					?>
					<div class="row">
						<!-- PROFILE PICTURE -->
						<div class="col-md-2">					
							<img id="imageFilePreview" class="img-fluid img-responsive upload_preview" src="<?php echo $profile; ?>" />
							<br />
							<input type="hidden" class="upload_default" value="<?php echo $default; ?>" />
							<input type="file" id="imageFile" name="imageFile" class="upload_file" accept="image/*;capture=camera" style="display:none;">
							<input type="hidden" id="imageFileDelete" name="imageFileDelete" class="upload_delete" value="NO" />
							<button type="button" class="btn btn-primary upload_open">Upload</button>
							<button type="button" class="btn btn-primary upload_clear" <?php echo ($user && $user['imageFile']) ? "" : " style=\"display:none;\" "; ?>>Clear</button>
							<div class="upload_msg">Saiz optima gambar dengan nisbah 1:1 (lebar : panjang) dan format jpg/png</div> 
						</div>
						
						<!-- INFO -->
						<div class="col-md-10">						
							<div class="row">
								<!-- ERROR WRAPPER -->
								<div class="col-md-12" style="color: red; display:none;" id="addUserErrWrap">
									<div class="form-group has-error">
										<label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i>&nbsp;&nbsp;<span id="addUserErr"></span></label>
									</div>
								</div>
								
								<div class="col-md-12">
									<!-- NAME -->
									<div class="form-group">
										<label for="username" class="col-sm-2 control-label">Nama</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="username" name="username" placeholder="Nama Pengguna" value="<?php echo ($user) ? $user['username'] : NULL; ?>">
										</div>
									</div>
									<div>&nbsp;</div>
									
									<!-- EMAIL -->
									<div class="form-group">
										<label for="email" class="col-sm-2 control-label">Emel</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="email" name="email" placeholder="Emel" value="<?php echo ($user) ? $user['email'] : NULL; ?>">
										</div>
									</div>
									<div>&nbsp;</div>
									
									<!-- PASSWORD -->
									<div class="form-group">
										<label for="password" class="col-sm-2 control-label">Kata Laluan</label>
										<div class="col-sm-10">
											<input type="password" class="form-control" id="password" name="password" placeholder="Kata Laluan" value="">
											<span id="passprompt" style="font-size: 12px; color: #AAA; font-style: italic;">Abaikan jika tidak mahu menukar kata laluan</span>
										</div>
									</div>
									<div>&nbsp;</div>
								</div>
							</div>
						</div>
					</div>
				</div>				
			</form>
		</div>
	</section>
</div>
	
	
	
	
	
	