<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>Metal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<style>
.red{ background:#EC7063; padding-left:5; padding-right:5;color:#fff;}
.green{ background:#58D68D;padding-left:5; padding-right:5;color:#fff;}
.none{background:none; padding:0;color:#000;}
small{font-weight:600; font-size:10px; color:#fff;}
p{font-weight:600; font-size:<?php echo $this->uri->segment(4);?>px; margin:0 0 -6px;}
.col-xs-4{background:#47c6e0;}
#rate{color:#fff;}
</style>
<script>
var socket=io.connect("https://gurutrader.in:4002");
$(document).ready(function(){
	var metal="<?php echo $this->uri->segment(3);?>";
	socket.on("tr_emit",function(data){
		console.log(data);
		if(metal==data.trid){
			var icon='';
			if(data.color=='green'){
				//icon='<i class="fa fa-arrow-circle-up"></i>';	
			}if(data.color=='red'){
				//icon='<i class="fa fa-arrow-circle-down"></i>';	
			}
			var dd=data.trdata.split('</td><td>');
		//console.log(dd);
			$("#rate").html(icon+' '+data.single_val);
			//$("#rate").addClass(data.color);
			$("#rate").css("background-color",data.color);
			if(data.color=='none'){
			$("#rate").css("color",'#fff');	
			}else{
			//$("#rate").css("color",'#000');
			}
			setTimeout(function(){ $("#rate").css("background","#000");
			$("#rate").css("color",'#fff'); }, 2000);
			//setTimeout(function(){$("#rate").removeClass('green','red','none'); },1000);
			$("#time").html(dd[7].substring(0,8));
			//$("#div"+data.trid).css("border-left","2px solid "+data.color);
			//$("#bgcolor").css("background-color",data.color);
			//setTimeout(function(){ $("#bgcolor").css("background","#212F3C"); }, 2000);
		}
	});
});
</script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap" rel="stylesheet">
</head>

<body style="font-family: 'Mulish', sans-serif; background:#47c6e0;">
<div class="row" style="padding:2px; background:'#47c6e0';">
	<div class="col-xs-4">
    	<?php $metal=$this->db->get_where("metals",array("metal"=>$this->uri->segment(3)))->row();
			//print_r($metal);?>
        <p style="font-size:18px; color:#900;"><?php echo $metal->metal;?></p>
        <small>OPEN <?php echo $metal->open;?></small>
    </div>
    <div class="col-xs-4 text-center" id="bgcolor">
    	<p id="rate" style="padding-left:10px;padding-right:10px;font-size:16px;"><?php echo $metal->rate;?></p>
        <small style="margin-top:10px;">HIGH <?php echo $metal->high;?></small>
    </div>
    <div class="col-xs-4 text-center">
    	<p id="time" style="font-size:16px; color:#fff;">00:00:00<?php echo $metal->mtime;?></p>
        <small style="margin-top:10px;">LOW <?php echo $metal->low;?></small>
    </div>
</div>
</body>
</html>