<!DOCTYPE html>
<html>
<head>
	<title>SPS Lite Accounting</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,700" rel="stylesheet" type="text/css">
	<link rel="shortcut icon" href="<?php echo base_url(); ?>dist/img/logo_salihin_32x32.png">
	<link rel="apple-touch-icon" href="<?php echo base_url(); ?>dist/img/logo_salihin_32x32.png">
	<title>SPS Lite Accounting</title>
	<!-- Tell the browser to be responsive to screen width -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<!-- Bootstrap 3.3.5 -->
	<link rel="stylesheet" href="<?php echo base_url(); ?>bootstrap/css/bootstrap.min.css">
	<!-- Font Awesome -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<!-- Ionicons -->
	<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
	<!-- Theme style -->
	<link rel="stylesheet" href="<?php echo base_url(); ?>dist/css/AdminLTE.css">
	<!-- iCheck -->
	<link rel="stylesheet" href="<?php echo base_url(); ?>plugins/iCheck/square/blue.css">
	<link rel="stylesheet" href="<?php echo base_url(); ?>dist/custom/custom.css">
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body class="hold-transition skin-red-light login-page">
	<input type="hidden" id="expired" name="expired" type="text" value="<?php echo (isset($expired))?$expired:''; ?>" />
	<div class="login-box">
		<div class="login-wrap col-lg-12 col-md-12 col-xs-12">
			<div class="login-box-body">
				<div class="login-logo">
					<a href="<?php echo base_url(); ?>home" alt="Audit Scoreboard">
						<!--<img src="<?php echo base_url(); ?>dist/img/logo.png" style="width:100%" />-->
						<h1 style="color: #900;">Audit Scoreboard</h1>
					</a>
				</div>
				<div id="alert-placeholder">
					<?php echo validation_errors(); ?>
				</div>
				<?php
				echo form_open('login/verifylogin', 'id="loginForm"  class="form-horizontal"');
				?>
				<div class="form-group has-feedback">
					<input type="email" id="userID" name="userID" required class="form-control" placeholder="Email" />
					<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="password" id="password" name="password" required class="form-control" placeholder="Password" />
					<span class="glyphicon glyphicon-lock form-control-feedback"></span>
				</div>
				<div class="row">
					<div class="col-xs-8" style="margin-top:10px;">
						<a href="<?php echo base_url() ?>forgetPassword">Forgot your password?</a>
					</div>
					<div class="col-xs-4 pull-right">
						<input type="submit" id="signIn" name="signIn" class="btn btn-login btn-flat" value="Sign in" />
					</div>
				</div>
				</form>
			</div>
			<div class="additional-info col-xs-12 text-center">
				<span class="icon-stack">
					<a href="Javascript:void(0);" target="_blank" alt="Facebook">
						<i class="fa fa-circle icon-stack-base" style="color:#fff;"></i>
						<i class="fa fa-facebook-f" style="color:#3a5795;"></i>
					</a>
				</span>
				<span class="icon-stack">
					<a href="Javascript:void(0);" target="_blank" alt="Twitter">
						<i class="fa fa-circle icon-stack-base" style="color:#fff;"></i>
						<i class="fa fa-twitter" style="color:#3a5795;"></i>
					</a>
				</span>
				<span class="icon-stack">
					<a href="Javascript:void(0);" target="_blank" alt="Instagram">
						<i class="fa fa-circle icon-stack-base" style="color:#fff;"></i>
						<i class="fa fa-instagram" style="color:#3a5795;"></i>
					</a>
				</span>
				<span class="icon-stack">
					<a href="Javascript:void(0);" target="_blank" alt="YouTube">
						<i class="fa fa-circle icon-stack-base" style="color:#fff;"></i>
						<i class="fa fa-youtube" style="color:#3a5795;"></i>
					</a>
				</span>
				<span class="icon-stack">
					<a href="Javascript:void(0);" target="_blank" alt="LinkedIn">
						<i class="fa fa-circle icon-stack-base" style="color:#fff;"></i>
						<i class="fa fa-linkedin" style="color:#3a5795;"></i>
					</a>
				</span>
			</div>
		</div>
	</div>

	<script src="<?php echo base_url(); ?>plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<!-- Bootstrap 3.3.5 -->
	<script src="<?php echo base_url(); ?>bootstrap/js/bootstrap.min.js"></script>
	<!-- iCheck -->
	<script src="<?php echo base_url(); ?>plugins/iCheck/icheck.min.js"></script>
	<script type="text/javascript">
	bootstrap_alert = function(message, type){
		$('#alert-placeholder').html('<div class="alert alert-'+type+'"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><span>'+message+'</span></div>');
	}

	$(function () {
		$('#remember_user').attr('checked', true);

		$('input').iCheck({
			checkboxClass: 'icheckbox_square-blue',
			radioClass: 'iradio_square-blue'
		});

		$('input').on('ifChecked', function(event){
			$('#remember_user').attr('checked', true);
		});

		$('input').on('ifUnchecked', function(event){
			$('#remember_user').attr('checked', false);
		});
	});

	$(function(){
		var expired = $('#expired').val();
		if(expired == 1){
			bootstrap_alert('Your account has expired. Please contact our administration for further action.', 'danger');
		}
	});
    </script>
</body>
</html>
