<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Guru Commodity User Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<script>
var socket=io.connect("http://localhost:4000");
$(document).ready(function(){
	socket.on("tr_emit",function(data){
		console.log(data.trid);
		$("tr#"+data.trid).html(data.trdata);
		$("tr#"+data.trid+" td:nth-child(2)").css("background-color",data.color);
		setTimeout(function(){ $("tr#"+data.trid+" td:nth-child(2)").css("background","none"); }, 2000);
	});
});
</script>
<body style="font-family: 'Josefin Sans', sans-serif;">

	<div class="container">
    	<div class="row">
        	<div class="col-md-8">
            <table id="fullMcxPriceTable" class="table table-condensed table-bordered table-striped">
            <tr><th>Commodity</th><th>Price</th><th>Chg</th><th>%Chg</th><th>Open</th><th>High</th><th>Low</th><th>Time</th></tr>
				<?php $metals=$this->db->get("metals")->result();
					foreach($metals as $d){?>
                <tr id="<?php echo $d->metal;?>" class="metals_tr">
                	<td><?php echo $d->metal;?></td>
                    <td></td>
               		<td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td></tr>
                <?php }?>
            </table>
            </div>
        	<div class="col-md-4">
            	<h1 class="text-center text-danger">Guru Commodity</h1>
                <script>
				$(document).ready(function(){
					$("#loginform").submit(function(e){e.preventDefault();
						var formdata=$(this).serialize();
						$(".login-btn").attr("disabled",true);
						$(".login-btn").html('<i class="fa fa-refresh fa-spin"></i>');
						//alert(formdata);
						$.ajax({
									 type: "POST",
									 url: '<?php echo base_url();?>home/login1',
									 data: {formdata:formdata},
									 success: function(response){//alert(response);
										 if(response==1){
											window.location.href = "<?php echo base_url();?>home/dashboard"; 
										 }else{
											 $(".remeberme").hide();
											 $("#loginerror").html('<b class="text-danger">Invalid Username or Password.</b>');
											 $("#loginform").trigger("reset");
											 //$(".loginerror").hide(5000);
											 $(".login-btn").removeAttr("disabled");
											 $(".login-btn").html('<i class="fa fa-sign-in"></i> Login');
										 }
										 //$("#auction_form").html(response);
									 }
									 });
				});
				});
				</script>
            	<form action="" method="post" id="loginform">
                    <div class="form-group">
                        <label>Username</label>
                        <input type="text" name="username" required class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" name="password" required class="form-control" />
                        <b id="loginerror"></b>
                    </div>
                   <button type="submit" class="btn btn-warning btn-block login-btn"><i class="fa fa-sign-in"></i> Login</button>
                    <a href="#" class="pull-right" data-toggle="modal" data-target="#myModal">Forgot Your Password?</a>
                </form>
            </div>
        </div>
    </div>

</body>
</html>
