<?php session_start(); ?>
<html>
<head>
<title><?php echo $_GET['username']; ?> profile</title>
<style>
html{
	background-color: rgb(30,30,30);
	color: white;
}
::-webkit-scrollbar {
	width: 0px;  /* Remove scrollbar space */
	background: transparent;  /* Optional: just make scrollbar invisible */
}
.editb, .saveb{
	display: none;
	font-size: 20px;
}
.saveb{
	position: absolute;
	top: 0px;
	left: 60px;
}
.edituserform input{
	font-size: 20px;
	padding: 5px;
	background-color: rgb(30,30,30);
	color: white;
	border: inset 2px white;
	width: 50%;
}
.color{
	width: 40px;
	height: 40px;
	border: none;
}
td{
	border: solid 2px white;
	padding: 5px;
	font-size: 25px;
}
.notibox{
	background-color: rgb(0,120,0);
	padding: 5px;
	display: none;
}
</style>
</head>
<body>
<?php
require_once("../../mysql_connect.php");
$password=$_SESSION['password'];
if($_SESSION['username']!="guest"){
	$stmt=$dbc->prepare("select username,password from ".$dbc_ver_accounts." where username=?");
	$stmt->execute([$_SESSION['username']]);
	$getuser=$stmt->fetch();
	if($getuser[0]==$_SESSION['username']){
		if(password_verify($_SESSION['password'],$getuser[1])){
			$pass="pass";
		}
	}
}
if($_GET['username']=="guest"){ 
	$pass="guest"; 
} else {
	$stmt=$dbc->prepare("select username,discord,email from ".$dbc_ver_accounts." where username=?");
	$stmt->execute([$_GET['username']]);
	$getuser=$stmt->fetch();
	$get_username=$getuser[0];
	$get_discord=$getuser[1];
	$get_email=$getuser[2];
	if(file_exists("../account_data/".$_GET['username'].".xml")){
		$xml=simplexml_load_file("../account_data/".$_GET['username'].".xml");
	} else {
		$pass="not exist";
	}
	if(file_exists("../account_data/".$_GET['username'].".png")){
		$user_pfp="../account_data/".$_GET['username'].".png";
	} elseif(file_exists("../account_data/".$_GET['username'].".jpg")){
		$user_pfp="../account_data/".$_GET['username'].".jpg";
	} elseif(file_exists("../account_data/".$_GET['username'].".gif")){
		$user_pfp="../account_data/".$_GET['username'].".gif";
	} else {
		$user_pfp="../account_data/guest.png";
	}
}
//get history
for($i=0;$i<count($xml->history->action);$i++){
	$gethistory[$i][0]=strval($xml->history->action[$i]);
	$gethistory[$i][1]=strval($xml->history->action['page'][$i]);
	$gethistory[$i][2]=strval($xml->history->action['type'][$i]);
	$gethistory[$i][3]=strval($xml->history->action['datetime'][$i]);
	$gethistory[$i][4]=strval($xml->history->action['attime'][$i]);
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--run cheak-->
<script language="javascript" type="text/javascript">
if("<?php echo $pass; ?>"=="guest"){
	if(alert('guest can not view/edit profiles')) {
		window.close();
	} else {
		window.close();
	}
	throw new Error('This is not an error. This is just to abort javascript');
}
if("<?php echo $pass; ?>"=="not exist"){
	if(alert('user does not exist')) {
		window.close();
	} else {
		window.close();
	}
	window.close();
	throw new Error('This is not an error. This is just to abort javascript');
}
</script>
<!--shown page-->
<div id="notibox" class="notibox" align="center"></div>
<div style="padding: 20px; position: absolute; left: 15%; border: solid 2px black; width: 70vw; height: 70vh;">
	<div style="position: absolute;">
		<img onmouseover="show('editprofilebox')" style="height: 100px; width: 100px; object-fit: cover; border-radius: 100px;" src="<?php echo $user_pfp; ?>"></img>
		<div onmouseout="hide('editprofilebox')" style="display: none; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; border-radius: 100px; background-color: rgba(0,0,0,0.6);" id="editprofilebox">
			<form style="position: absolute; top: 30px; left: 10px;" action="profile_update.php" method="post" enctype="multipart/form-data" target="_blank" onsubmit="setTimeout(() => { location.reload(); }, 1000);">
			<input autocomplete="off" type="file" name="pfp_picture" /><br>
			<input autocomplete="off" type="submit" name="pfp_change" value="change" /><br>
			</form>
		</div>
	</div>
	
	<div class="edituserform" style="position: absolute; left: 140px; padding: 4px; font-size: 25px; right: 10px">
		<div style="padding: 5px;">username: <span id="username"><?php echo $get_username; ?></span></div>
		<div style="padding: 5px;">discord: <span id="discord"><?php echo $get_discord ?></span></div>
		<div style="padding: 5px;">email: <span id="email"><?php echo $get_email ?></span></div>
		<div style="padding: 5px;">color: 
		<span id="color"><span style="padding: 3px"></span><span style="padding: 10px; padding-top: 1px; padding-bottom: 1px; background-color: <?php echo $xml->color; ?>;"></span> </span></div>
	</div>
	<div align="Center" style="position: absolute; padding: 5px; max-height: 30%; overflow: scroll; bottom: 50px; left: 23%; right: 23%; border: solid 2px white;">
		history<br>
		<p>m=minute, h=hour, d=day</p>
		<table align="Center">
		<tr style="background-color: rgb(180,20,0);">
		<td>page</td><td>date</td><td>type</td><td>for</td><td>reason</td></tr>
		
		<script language="javascript" type="text/javascript">
			var gethistory=JSON.parse('<?php echo json_encode($gethistory); ?>');
			for(var i=0; i<=(gethistory.length)-1; i++){
				document.write("<td>"+gethistory[i][1]+"</td>");
				document.write("<td>"+gethistory[i][3]+"</td>");
				document.write("<td>"+gethistory[i][2]+"</td>");
				document.write("<td>"+gethistory[i][4]+"</td>");
				document.write("<td>"+gethistory[i][0]+"</td>");
				document.write("</tr>");
			}
		</script>
		</table>
	</div>
	<div style="position: absolute; bottom: 10px; left: 43%;" align="center">
		<button class="editb" id="editbutton" onclick="editm()" >edit</button>
		<button class="saveb" id="savebutton" onclick="save()" >save</button>
	</div>
</div>
<!--hidden form-->
<form style="display: none" id="editform" action="poster.php" method="get" target="_blank">
	<input autocomplete="off" type="hidden" name="doing" value="edituser" />
	<input autocomplete="off" type="hidden" name="discord" id="discordF" />
	<input autocomplete="off" type="hidden" name="email" id="emailF" />
	<input autocomplete="off" type="hidden" name="color" id="colorF" />
</form>
<!--functions and shit-->
<script language="javascript" type="text/javascript">
//notification
if("<?php echo $_SESSION['message']; ?>"=="file uploaded"){
	$("#notibox").html("profile changed!");
	$("#notibox").css("display","block");
	setTimeout(function(){ $("#notibox").css("display","none"); },4000)
} else if("<?php echo $_SESSION['message']; ?>"!=""){
	$("#notibox").html("<?php echo $_SESSION['message'] ?>");
	$("#notibox").css("background-color","rgb(180,0,0)");
	$("#notibox").css("display","block");
}

//functions
if("<?php echo $pass; ?>"=="null"){
	$("#editbutton").css("display","block");
}
function editm(){
	$("#savebutton").css("display","block");
	$("#discord").html('<input autocomplete="off" type="text" id="discordi" value="<?php echo $xml->discord; ?>" />');
	$("#email").html('<input autocomplete="off" type="email" id="emaili" value="<?php echo $xml->email; ?>" />');
	$("#color").html('<input class="color" autocomplete="off" type="color" id="colori" value="<?php echo $xml->color; ?>"/>');
}
function save(){
	$("#discordF").val($("#discordi").val());
	$("#emailF").val($("#emaili").val());
	$("#colorF").val($("#colori").val());
	$("#editform").submit();
	setTimeout(() => { location.reload(); }, 500);
}
function show(idd){
	if((idd=="editprofilebox")){
		if(("<?php echo $pass; ?>"!="!edit")){
			$("#"+idd).css("display","block");
		}
	} else {
		$("#"+idd).css("display","block");
	}
}
function hide(idd){
	$("#"+idd).css("display","none");
}
</script>
<?php $_SESSION['message']=""; ?>
</body>
</html>