<div class="page-content p-2">
	<!--<div id="add-loading">-->
		<!--<div class="loadingPage text-center"><span class="box"><img src="{$livepath}/Assets/Img/Facebook.svg"><span>Loading Page</span></span></div>-->
	<!--</div>-->
	<div class="rows">
		<nav aria-label="breadcrumb" class="float-right">
			<ol class="breadcrumb mb-0">
				<li class="breadcrumb-item"><a href="{$livepath}/Modules/Dashboard/show" class="clearStorage"><i class="fa fa-home mr-1"></i>Dashboard</a></li>
				<li class="breadcrumb-item font-weight-bold active" aria-current="page">{$pageName}</li>
			</ol>
		</nav>
		<h2 class="h5 font-weight-bold px-2 pt-2 pb-3">{$pageName}</h2>

		<!--Grid-->
		<div class="cPanel col-md-12 Grid1 rounded">
			<div class="portlet">
				<!--<div class="portlet-heading bg-darkgray font-weight-bold py-2 px-3 text-white">Table {$pageName}</div>-->
				<div class="portlet-body pt-4 px-1">
					<div class="col-lg-6 col-md-6">
						<div class="d-flex">
							<div class="order-0 mr-3">
								{if !empty($user.udafImage)}
								<div class="imgCont"><img src="{$livepath}/Assets/Img/{$user.udafImage}"></div>
								{else}
								<span class="accountDefault rounded-circle float-left mr-4"><i class="fa fa-image"></i></span>
								{/if}
							</div>

							<div class="order-1">
								<!--<h5 class="mT10">Company Info :</h5>-->
								<h4 class="getName">{$user.udafName}</h4>
								<p class="mb-0">
									<i class="fa fa-user mr-2"></i>
									<span class="getEmail">{$user.udafEmail}</span>
								</p>
								{if $usertype == '3'}
								<p class="mb-0">
									<i class="fa fa-briefcase mr-2"></i>
									<span class="getCompany">{$user.udafCompany}</span>
								</p>
								{/if}
								<p class="mb-0">
									<i class="fa fa-map-marker mr-2"></i>
									<span class="getAddress">{$user.udafAddress}</span>
								</p>
								<p class="mb-0">
									<i class="fa fa-phone mr-2"></i>
									<span class="getPhone">{$user.udafPhone}</span>
								</p>
								<div class="mt-4">
									<span class="btn btn-sm btn-outline-primary font-sm rounded font-weight-bold options mr-2" rel="findProductForm"><i class="fa fa-pencil"></i> Edit Profile</span>
									<span class="btn btn-sm btn-outline-danger font-sm rounded font-weight-bold options" rel="changePassForm"><i class="fa fa-lock"></i> Change Password</span>
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-4 col-md-4 formFloat over-hidden rounded-left" id="findProductForm">
						<div class="head-form bg-primary text-white">
							<span class="closeFormFloat fa fa-close"></span>
							<i class="fa fa-pencil mR5"></i> Edit Profile
						</div>
						<div class="body-form" id="form-profile">
							<form name="fChangeProfile" id="fChangeProfile" class="">
								<div class="form-group listForm">
									<label class="formLabel control-label">Fullname :</label>
									<input type="text" name="txtName" id="txtName" value="{$user.udafName}" class="inputBox form-control">
								</div>
								<div class="form-group listForm">
									<label class="formLabel control-label">Email :</label>
									<input type="email" name="txtEmail" id="txtEmail" value="{$user.udafEmail}" class="inputBox form-control">
								</div>
								{if $usertype == '3'}
								<div class="form-group listForm">
									<label class="formLabel control-label">Company Name :</label>
									<input type="text" name="txtCompany" id="txtCompany" value="{$user.udafCompany}" class="inputBox form-control">
								</div>
								{/if}
								<div class="form-group listForm">
									<label class="formLabel control-label">Phone :</label>
									<input type="text" name="txtPhone" id="txtPhone" value="{$user.udafPhone}" class="inputBox form-control">
								</div>
								<div class="form-group listForm">
									<label class="formLabel control-label">Address :</label>
									<textarea name="txtAddress" id="txtAddress" rows="4" class="inputBox form-control">{$user.udafAddress}</textarea>
								</div>
								<div class="form-group listForm badgeWraps">
									<!--<span class="label label-warning">Note :</span>
                                    <p class="d-inline ml-3 text-muted">Image size is limited to not greater than 1MB .</p>
                                    <input type="file" name="fImage" id="inputImagefImage" class="dropify" data-allowed-file-extensions="jpg png" data-max-file-size="1M" data-default-file="{$livepath}/Assets/img/default-avatar.png">
                                    -->
									<div class="custom-file">
										<input type="file" name="fImage" id="inputImagefImage" class="inputImage custom-file-input" accept="image/*">
										<label class="custom-file-label" for="inputImagefImage">Choose file</label>
									</div>
									<div id="imagePreviewfImage" class="imgContBig" style="margin-top: 10px; max-width: 604px;"></div>
								</div>
								<div class="form-group mt-4">
									<span class="btn btn-sm btn-outline-success rounded font-sm font-weight-bold submitForm save mr-1" id="save" onclick="doUpdate()"><i class="fa fa-check"></i> Update</span>
									<span class="btn btn-sm btn-outline-danger rounded font-sm font-weight-bold cancelForm cancel"><i class="fa fa-ban"></i> Cancel</span>
								</div>
							</form>
						</div>
					</div>

					<div class="col-lg-4 col-md-4 formFloat over-hidden rounded-left" id="changePassForm">
						<div class="head-form bg-danger text-white">
							<span class="closeFormFloat fa fa-close"></span>
							<i class="fa fa-lock mR5"></i> Change Password
						</div>
						<div class="body-form">
							<form name="fChangePassword" id="fChangePassword">
								<div class="form-group listForm">
									<label class="formLabel control-label">Current Password :</label>
									<input type="password" name="oldpassword" id="oldpassword" class="inputBox form-control" placeholder="Enter you current password">
								</div>
								<div class="form-group listForm">
									<label class="formLabel control-label">New Password :</label>
									<input type="password" name="newpassword" id="newpassword" class="inputBox form-control" placeholder="Enter you new password">
								</div>
								<div class="form-group listForm">
									<label class="formLabel control-label">Confirm New Password :</label>
									<input type="password" name="cnpassword" id="cnpassword" class="inputBox form-control" placeholder="Confirm you new password">
								</div>
								<div class="form-group mt-4">
									<span class="btn btn-sm btn-outline-success font-sm rounded font-weight-bold submitForm save" id="save" onclick="doChangePassword()"><i class="fa fa-check"></i> Update</span>
									<span class="btn btn-sm btn-outline-danger font-sm rounded font-weight-bold cancelForm cancel"><i class="fa fa-ban"></i> Cancel</span>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--<script type="text/javascript">var menuAccess = '{$menu}', livepath = '{$livepath}', id = '{$userid}', ajaxFile = "{$path}", ajaxParam = "{$param}", device = "{$device}", pathupload = "{if isset($pathupload)}{$pathupload}{/if}", addFilterTable = '{if isset($addFilter)}{$addFilter}{/if}{$slFilter}', addFilterTableDetail = '{if isset($addFilterDetail)}{$addFilterDetail}{/if}{$slFilterDetail}';</script>
-->
<script type="text/javascript">var menuAccess = localStorage.getItem('menuAccess'), livepath = '{$livepath}', id = '{$userid}', ajaxFile = "{$path}", ajaxParam = "{$param}", device = "{$device}", pathupload = "{if isset($pathupload)}{$pathupload}{/if}", addFilterTable = '{if isset($addFilter)}{$addFilter}{/if}{$slFilter}', addFilterTableDetail = '{if isset($addFilterDetail)}{$addFilterDetail}{/if}{$slFilterDetail}';</script>
<script type="text/javascript" src="{$livepath}/Assets/plugins_admin/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="{$livepath}/Assets/plugins_admin/form.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		tableResize('tableBranch');

		//$('.dropify').dropify();

		$('.submitForm').bind('click', function(){
			var me = $(this).attr('id');
			//customAlert();
		});

		//Handle change for Option Show/Hide Content
		var optShow  = $('.formFloat'),
			options = $('.options'),
			noOptions = options.not($('.disabled')),
			getData = $('.getData'),
			close = $('.closeFormFloat, .cancel'),
			findList = $('.findList');

		//Function for All Options Content
		noOptions.bind('click', function(){
			var status = this.checked,
				me = $(this),
				rel = me.attr('rel');

			$('body').css('overflow-y','hidden');
			options.removeClass('disabled');
			me.addClass('disabled');
			optShow.not($('div#' + rel)).removeClass('active');
			optShow.not($('div#' + rel)).find('.form-control').val('');
			$('.formFloat#' + rel).addClass('active').find('.body-form').scrollTop(0);
			$('.setting-panel').removeClass('active');
			if(rel == 'findProductForm') {
				//alert("jalan");
				do_select(id);
			}
		});

		//Function for Close All Options Content
		close.bind('click', function(){
			$('body').css('overflow-y','auto');
			options.removeClass('disabled');
			optShow.removeClass('active');
			optShow.find('.form-control').val('');
		});
	});
	
	function do_select(id, type){
		waiting();
		$.ajax({
			url: ajaxFile + '/select',
			type: 'POST',
			data: {
				id: id
			},
			dataType: 'JSON',
			success: function (obj) {
				$.each(obj.data, function (key, val) {
					$.each(val, function (keyV, valV) {
						if ($("#inputImage" + keyV).is(":file")) {
							if(valV != "") {
								$("#imagePreview" + keyV).html("<img src='"+pathupload+valV+"' />");
							}
						}else {
							$("#" + keyV).val(valV);
						}
					})
				})
			}
		});
	}
	
	function doUpdate() {
		waiting();
		var formdata = new FormData($("#fChangeProfile")[0]);
		if (formdata) {
			$.ajax({
				url: ajaxFile + "/update",
				type: "POST",
				dataType: "JSON",
				data: formdata,
				cache: false,
				processData: false,
				contentType: false,
				success: completeHandler = function (obj) {
					if (obj.status != 'ok') {
						removeWaiting();
					   Lobibox.notify('error', {
						   title		: obj.error,
							//width       : 300,
							delay       : 3500,
							showClass   : 'bounceIn',
							hideClass   : 'bounceOut'
						});
					} else {
						$("#inputImagefImage").val("");
						if(typeof obj.post['fImage'] != 'undefined') {
							$(".imgCont img, .user-auth-img").attr("src", livepath+"/Assets/img/"+obj.post['fImage']);
						}
						$.each(obj.post, function(k, v) {
							var className =k.replace("txt", "get");
							$("."+className).html(v);
						})
						removeWaiting();
						Lobibox.notify('success', {
							title		: 'Update Successfully',
							//width       : 300,
							delay       : 3500,
							showClass   : 'bounceIn',
							hideClass   : 'bounceOut'
						});
					}
				}
			});
		}
	}
	
	function doChangePassword() {
		waiting();
		var formdata = new FormData($("#fChangePassword")[0]);
		if (formdata) {
			$.ajax({
				url: ajaxFile + "/changepassword",
				type: "POST",
				dataType: "JSON",
				data: formdata,
				cache: false,
				processData: false,
				contentType: false,
				success: completeHandler = function (obj) {
					if (obj.status != 'ok') {
						removeWaiting();
						var error = obj.error;
						var arrError = error.split("\n");
					   for(i=0;i<arrError.length - 1;i++){
						   Lobibox.notify('error', {
							   title		: arrError[i],
								width       : 300,
								delay       : 3500,
								showClass   : 'bounceIn',
								hideClass   : 'bounceOut'
							});
						}
					} else {
						removeWaiting();
						Lobibox.notify('success', {
							title		: 'Change Password Successfully',
							//width       : 300,
							delay       : 3500,
							showClass   : 'bounceIn',
							hideClass   : 'bounceOut'
						});
					}
				}
			});
		}
	}
	
	function updateTable() {
		//console.log('Update table');
		$('.tables').each(function () {
			var wUl = 0;
			var me = $('#' + $(this).attr('id'));
			var rows = $('.tblHead', me);
			var col = $('li', me).length;
			for (var i = 0; i < col; i++) {
				wUl = wUl + $('li:eq(' + i + ')', rows).outerWidth() + 1;
			}
			if (wUl < $('.tableContainer', me).width()) {
				wUl = $('.tableContainer', me).width();
			}
			$('.tblHead,.tblContent', me).width(wUl);
		});
	}
	
	function tableResize(){
	}
	
	function waiting() {
		$("#add-loading").html('<div class="loadingPage text-center"><span class="box"><img src="'+livepath+'/Assets/img/Facebook.svg"><span>Loading Page</span></span></div>');
	}
	
	function removeWaiting() {
		setTimeout(function() {
		  $("#add-loading").empty();
		}, 1000);
	}
</script>
{if isset($addJs)}<script>{$addJs}</script>{/if}