<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$name="dasfsd";
$errorMessage = $this->session->flashdata('error');
$success = $this->session->flashdata('success');
$show_captcha = $this->session->flashdata('show_captcha',false);
$this->session->set_flashdata('show_captcha', $show_captcha);
?>
<div class="ui container" style="padding-top:5%">
<?php if (validation_errors() || $errorMessage) {?>
	<div class="ui negative message"><i class="close icon"></i><?php echo $errorMessage ? $errorMessage : validation_errors(); ?></div>
<?php } ?>
<?php if ($success) { ?>
	<div class="ui success message"><i class="close icon"></i><?php echo $success; ?></div>
<?php }  ?>
	<img class="ui small centered image" src="assets/img/outputbooks-256.png" />
	<div class="ui grid center aligned mediumfontall">
		<div class="row">
			<div class="sixteen wide tablet six wide computer column">
				<div class="ui left aligned segment">
					 <div id="loggedInUsers" style="display:none" >
					</div>
					<div id="loggedInUsersAction" style="display:none">
					</div>
					<?php echo form_open('login', 'class="ui form" id="login-form"'); ?>
						<h3 class="ui header center aligned">Output Books Login</h3>
						<div id="emailName" style="display:none;text-align: left;margin-bottom: 10px;">
						</div>
						<div class="required field" id="emailInput">
							<label>Email</label>
							<div class="ui fluid icon input">
								<input name="loginName" placeholder="Email"  value="<?php echo set_value('loginName'); ?>" minlength="5" required autocomplete="off" />
								<i class="icon mail outline"></i>
							</div>
						</div>
						<div class="required field">
							<label>Password</label>
							<div class="ui fluid icon input">
								<input name="password" placeholder="Password" type="password" required autocomplete="off" />
								<i class="icon key"></i>
							</div>
						</div>
						<?php if ($show_captcha) { ?>
							<div class="ui two fields">
								<div class="required field">
									<label>Enter the word diplay on image</label>
									<div class="ui fluid input">
										<input name="captcha" type="text" placeholder="Captcha" required autocomplete="off" />
									</div>
								</div>
								<div class="field">
									<label>&nbsp;</label>
									<?php echo $captcha; ?>
								</div>
							</div>
						<?php } ?>
						<div class="field">
							<input name="dCode" value="" minlength="" type="hidden" autocomplete="off" />
							<button type="submit" name="submit" class="ui big teal right labeled icon button fluid">Login<i class="icon sign in"></i></button>
						</div>
						<div class="field">
							<div class="ui left aligned">
								<label style="font-size:14px;"><input type="checkbox" name="remember" style="vertical-align:middle;" /> Remember me</label>
								<a style="font-size:14px;" class="pull-right" href="<?php echo str_replace("cp.outputbooks.com", "app.outputbooks.com", site_url('forgotpassword')); ?>">Forgot/Reset Password ?</a>
							</div>
							<!-- <a class="ui left aligned" href="<?php echo site_url('signup'); ?>">Create New Account ?</a><br/>							 -->
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
				
	<?php echo ''?>

	<script>
		// document.getElementsByName("loginName")[0].value = localStorage.getItem("loggedInEmail");
		// document.getElementsByName("dCode")[0].value = localStorage.getItem("dCode");
		localStorage.setItem("lastScreenActiveTime","");
		var loggedInusers = JSON.parse(localStorage.getItem("loggedInUsers"));
		// console.log(loggedInusers);
		var showCaptcha = "<?php echo $show_captcha  ?>";
		if(!showCaptcha) {
			loggedinUserDivCreate();
		} else {
			createShowcaptchaDivCreate();
		}
		function loggedinUserDivCreate(fromEmailClick = false) {
			document.getElementsByName("loginName")[0].value = ""
			document.getElementsByName("password")[0].value = ""
			if(loggedInusers && loggedInusers.length && document.getElementsByName("loginName")[0].value == "") {
				if(loggedInusers.length == 1 && !fromEmailClick) {	
					accountClicked(loggedInusers[0]);
				} else {
					var divElement = "<div>";
					divElement += "<h2 class=\"ui header center aligned\">Output Books Accounts</h2>";
					for(var i = 0 ; i < loggedInusers.length; i++ ) {
						var user = JSON.stringify(loggedInusers[i]);
						// loggedInusers[i]["logged-on"]
						if((new Date() - new Date(loggedInusers[i]["logged-on"]))/(1000 * 3600 * 24) < 60) {
							var userId = loggedInusers[i]["id"];
							divElement += "<div id=\""+userId+"\" style = \" cursor: pointer;display: grid;grid-template-columns: 9fr 1fr; \" class=\"ui fluid link card nm\">";
								divElement += "<div class=\"content\" onclick=\'accountClicked("+user+")\'>";
									divElement += "<div class=\"header\" ><h3> " + loggedInusers[i]["name"] ;
									divElement += "</h3></div>";
									divElement += "<div  class=\"meta\" >" + loggedInusers[i]["email"] ;
									divElement += "</div>";
								divElement += "</div>";
								divElement +="<div style=\"align-self: center;\" onclick=\'removeUser("+user+")\'><i class=\"blue times icon\"></i></div>";
							divElement += "</div>";
						}
					
					}
					divElement += "</div>";
					var actionbutton = "<div style=\"text-align: center;margin-top: 10px;\" >";
						actionbutton += "<button style=\"border-radius: 15px;\" onclick=\'addAnotherUserClicked()\' class=\" ui button \">";
						actionbutton += "<i class=\"grey user plus icon\"></i>";
						actionbutton += "Add another account";
						actionbutton += "</button>";
					actionbutton += "</div>";
					document.getElementById("loggedInUsers").style.display="";
					document.getElementById("loggedInUsersAction").style.display="";
					document.getElementById("loggedInUsers").innerHTML= divElement;
					document.getElementById("loggedInUsersAction").innerHTML= actionbutton;
					document.getElementById("login-form").style.display="none";
				}
			} else {
				document.getElementById("login-form").style.display="";
				document.getElementById("emailInput").style.display="";
				document.getElementById("emailName").style.display="none";
				document.getElementById("loggedInUsers").style.display="none";
				document.getElementById("loggedInUsersAction").style.display="none";
				if(loggedInusers && loggedInusers.length){
					document.getElementsByName("loginName")[0].value = loggedInusers[0]["email"];
				}
				document.getElementsByName("dCode")[0].value = localStorage.getItem("dCode");
			}
		}

		function createShowcaptchaDivCreate() {
			document.getElementById("login-form").style.display="";
			document.getElementById("loggedInUsers").style.display="none";
			document.getElementById("loggedInUsersAction").style.display="none";
			if(localStorage.getItem("loggedInEmail") && (localStorage.getItem("loggedInEmail") != "" && localStorage.getItem("loggedInEmail").toLowerCase() != "null") ){
				document.getElementById("emailInput").style.display="none";
				document.getElementById("emailName").style.display="";
				var spanElement = "<div class=\"required inline field \">";
				spanElement += "<label>Email</label>"
				spanElement += "<span style = \" cursor: pointer;border-radius: 15px;color: #4183c4;\" onclick=\"loggedinUserDivCreate(true)\" >";
					spanElement +=localStorage.getItem("loggedInEmail");
					spanElement += "</span>";
					spanElement += "</div>";
				document.getElementById("emailName").innerHTML= spanElement;
			} else {
				document.getElementById("emailInput").style.display="";
				document.getElementById("emailName").style.display="none";
			}
			document.getElementsByName("loginName")[0].value = localStorage.getItem("loggedInEmail");
			document.getElementsByName("password")[0].value = "";
			document.getElementsByName("dCode")[0].value = localStorage.getItem("dCode");
		}
		
		function accountClicked(user) {
			document.getElementById("login-form").style.display="";
			document.getElementById("loggedInUsers").style.display="none";
			document.getElementById("loggedInUsersAction").style.display="none";
			document.getElementById("emailInput").style.display="none";
			document.getElementById("emailName").style.display="";
			var spanElement = "<div class=\"required inline field \">";
			spanElement += "<label>Email</label>"
			 spanElement += "<span style = \" cursor: pointer;border-radius: 15px;color: #4183c4;\" onclick=\"loggedinUserDivCreate(true)\" >";
				spanElement +=user["email"];
				spanElement += "</span>";
				spanElement += "</div>";
			document.getElementById("emailName").innerHTML= spanElement;
			document.getElementsByName("loginName")[0].value = user["email"];
			document.getElementsByName("password")[0].value = "";
			document.getElementsByName("dCode")[0].value = localStorage.getItem("dCode");
		}
		function addAnotherUserClicked() {
			document.getElementById("login-form").style.display="";
			document.getElementById("login-form").style.display="";
			document.getElementById("loggedInUsers").style.display="none";
			document.getElementById("loggedInUsersAction").style.display="none";
			document.getElementById("emailInput").style.display="";
			document.getElementById("emailName").style.display="none";
			document.getElementsByName("loginName")[0].value = "";
			document.getElementsByName("password")[0].value = "";
			document.getElementsByName("dCode")[0].value = localStorage.getItem("dCode");
		}
		function removeUser(user) {
			$.ajax({
				url: 'index.php/home/removeuserdevice',
				type: 'POST',
				 data: {id:user["id"],dCode:localStorage.getItem("dCode")},
				success: function(data) {
					loggedInusers.forEach((element,idx,object)=>{
						if(element.id === user["id"]){
							object.splice(idx, 1);
						}
					})
					loggedInusers.sort((a,b)=> (new Date(b["logged-on"]) - new Date(a["logged-on"])));
					localStorage.setItem("loggedInUsers",JSON.stringify(loggedInusers));
					loggedinUserDivCreate();
				}
			});
		}

		function removeAllAccount() {
			console.log("remove ALl called");
		}
	</script>

