<?php include '../header.php'; ?>
<?php include '../sidemenu.php'; ?>
<?php
$id = "";
if(isset($_GET['id'])){
	if(!empty($_GET['id'])){
		$id = $_GET['id'];
	}
}
?>	
<div class="content-wrapper">
	<section class="content-header">
		<div class="container-fluid">
			<div class="row mb-2">
				<h1>
					<?php if($id==""){ ?>
					Create User Account
					<?php }else{ ?>
					Edit User Account
					<?php } ?>
				</h1>
			</div>
		</div>
	</section>
	<section class="content">
		<div class="container-fluid">
			<div class="card card-outline card-primary">
				<div class="card-header">
					<h3 class="card-title">User Account Detail</h3>
					<div class="card-tools">
						<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
						<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-remove"></i></button>
					</div>
				</div>
				<form role="form" id="frmCreateUser">
					<div class="card-body">
						<div class="row">
							<div class="col-md-3"></div>
							<div class="col-md-6">
								<div class="form-group" style="text-align: center;">
									<input type="hidden" id="txtFormState" name="formState" value=<?=(($id=="")?"Create":"Edit")?>>
									<input style="display:none" name="file" id="input-image-hidden" onchange="document.getElementById('previewing').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png" >
									<img id="previewing" name="previewing" src="<?=$app_url;?>img/dummy_user.png" style="height:128px; width:128px;cursor:pointer;" onclick="HandleBrowseClick('input-image-hidden');" title="Click to Change the Photo." class="profile-user-img img-responsive img-circle" alt="User profile picture">
									<div><center>128 X 128</center></div>
								</div>
								<div class="form-group row">
									<label class="col-md-4 col-form-label" style="text-align: right;">User Name:</label>
									<div class="col-md-6">
										<input class="form-control" id="txtUserName" name="txtUserName" type="text" <?=(($id=="")?"":"disabled")?>/>
									</div>
									<div class="col-md-2"></div>
								</div>
								<div class="form-group row">
									<label class="col-md-4 col-form-label" style="text-align: right;">User Role:</label>
									<div class="col-md-6">
										<select class="form-select" id="cboUserRole" name="cboUserRole"></select>
									</div>
									<div class="col-md-2"></div>
								</div>
								<div class="form-group row" hidden>
									<label class="col-md-4 col-form-label" style="text-align: right;">Full View(Acc):</label>
									<div class="col-md-6">
										<select class="form-select" id="cboAccFullView" name="cboAccFullView">
											<option value="0">NO</option>
											<option value="1">YES</option>
										</select>
									</div>
									<div class="col-md-2"></div>
								</div>
								<div class="form-group row">
									<label class="col-md-4 col-form-label" style="text-align: right;">City:</label>
									<div class="col-md-6">
										<select class="form-select" id="cboCity" name="cboCity">
	
										</select>
									</div>
									<div class="col-md-2"></div>
								</div>
								<?php 
									if($id==""){
								?>
								<div class="form-group row">
									<label class="col-md-4 col-form-label" style="text-align: right;">Password:</label>
									<div class="col-md-6">
										<input type="password" id="txtPassword"  name="txtPassword" class="form-control" minlength="4"  maxlength="16">
									</div>
									<div class="col-md-2"></div>
								</div>
								<div class="form-group row">
									<label class="col-md-4 col-form-label" style="text-align: right;">Confirm Password:</label>
									<div class="col-md-6">
										<input type="password" id="txtConfirmPassword"  name="txtConfirmPassword" class="form-control"  maxlength="16">
									</div>
									<div class="col-md-2"></div>
								</div>
								<div class="form-group row">
									<label class="col-md-4 col-form-label"></label>
									<div class="col-md-6">
										<button class="btn btn-info col-md-5" type="button" onclick="clearForm()">Clear</button>
										<button id="btnSubmit" class="btn btn-success col-md-5" type="button" value="Create" style="float: right;">Create</button>
									</div>
									<div class="col-md-2"></div>
								</div>
								<?php 
									}else{
								?>
								<div class="form-group row">
									<label class="col-md-4 col-form-label"></label>
									<div class="col-md-6">
										<button id="btnUpdate" class="btn btn-success" type="button" value="Update" style="float: right;">Update</button>
									</div>
									<div class="col-md-2"></div>
								</div>
								<?php 
									}
								?>
							</div>
							<div class="col-md-3"></div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</section>
</div>
<?php include '../footer.php'; ?>
<script>
	var id = '<?=$id;?>';

	$(function() {
		$("body").addClass("sidebar-collapse");
		if(id!=""){
			fillName();
		}
		fillRole();
		getAllCity();
	});

	function getAllCity(){
		$("#cboCity").find("option").remove();
		// $("#cboCity").append("<option value= '' data-id = ''></option>");
		$.ajax({
			url: APP_URL + "api/city/get_all_rows.php"
		}).done(function(data) {
			$.each(data.records, function(i, v) {
				$("#cboCity").append("<option value= '" + v.name + "'  data-id = '"+ v.code +"'  >" + v.name + "</option>");			
			});		
		});
	}

	function HandleBrowseClick(input_image)
	{
		var fileinput = document.getElementById(input_image);
		fileinput.click();
	}     

	$("#btnSubmit").click(function(){
		$("#frmCreateUser").submit();
	});

	$("#btnUpdate").click(function(){
		$("#frmCreateUser").submit();
	});

	$("#frmCreateUser").on('submit',(function(e) {
		e.preventDefault();
		var formState = $("#txtFormState").val();
		var username = $("#txtUserName").val();
		var userrole = $('#cboUserRole').val();
		var city = $('#cboCity').val();
		var accounting_view = $('#cboAccFullView').val();
		var password = $("#txtPassword").val();
		var confirmpassword = $("#txtConfirmPassword").val();
		if(formState=="Create" && (username.trim()=="" || password.trim()=="" || confirmpassword.trim()=="" || userrole.trim()=="") ){
			bootbox.alert("Please fill the boxes.");
		}else if(formState=="Create" && (password.trim() != confirmpassword.trim())){
			bootbox.alert("Passwords are unmatch! Please enter again.");
		}else if(formState=="Create" && password.trim().length<5){
			bootbox.alert("Passwords should be at least 5.");
		}else if(formState=="Edit" && userrole.trim()==""){
			bootbox.alert("Please fill User Role.");
		}else{

			if(formState=="Edit"){	
				$("#txtUserName").prop("disabled", false);
			}
			
			$.ajax({
				url: APP_URL + "api/createaccount/create.php",
				type: "POST",             
				data: new FormData(this),
				// data1: JSON.stringify({userrole: userrole}),
				contentType: false,       
				cache: false,             
				processData:false,        
				success: function(data)   
				{
					if(data=="created"){
						bootbox.alert("Created.");
						$("#frmCreateUser")[0].reset();
						document.getElementById('previewing').src = "<?=$app_url;?>/img/dummy_user.png";
					}else if(data=="updated"){
						bootbox.alert("Updated.");
						$("#txtUserName").prop("disabled", true);
						// $("#frmCreateUser")[0].reset();
						document.getElementById('previewing').src = "<?=$app_url;?>/img/dummy_user.png";
					}else if(data=="duplicate"){
						bootbox.alert("Not allow dupulicate entry.");
					}
				}
			});
		}
	}));

	function clearForm(){
		$("#frmCreateUser")[0].reset();
	}	

	function fillName(){
		$.ajax({
			url: APP_URL + "api/createaccount/get_one_row.php",
			type: "POST",
			data: JSON.stringify({ id: id })
		}).done(function(data){
			if(data.username){
				$("#txtUserName").val(data.username);
				$("#previewing").attr('src', "<?=$app_url;?>/api/createaccount/" + data.profilepicture);
			}
		});
	}

	function fillRole(){
		$("#cboUserRole").find("option").remove();
		$.ajax({
			url: APP_URL + "api/createrole/get_all_rows.php"
		}).done(function(data) {	
			// $("#cboUserRole").append("<option></option>");
			$.each(data.records, function(i, v) {
				console.log(v);
				$("#cboUserRole").append("<option value= '" + v.rolename + "' data-id = '"+ v.id +"' >" + v.rolename + "</option>");
			});
		});
	}
</script>