<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Match</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
		var ws = new WebSocket("ws://148.251.21.118:5570");
		ws.onopen = function() {	  
		  // Web Socket is connected, send data using send()
		  ws.send(JSON.stringify({"requestType":1,"sessionKey":"","Data":{"Firm":"AJAY","PrivateKey":"HMH@212","ApiKey":"CRIC@20"}}));
		  console.log("Message is sent...");
	   };
		
	   ws.onmessage = function (evt) { 
		  const res = JSON.parse(evt.data);
		  
		  if(res.responseType==4){
			 //console.log(res.data); 
			 var trid=res.data.MatchId;//+res.data.Name.split(" ").join("-").toLowerCase();
			 var tr="<tr id='"+trid+"'><td>"+res.data.MatchId+"</td><td>"+res.data.Teams+"</td><td>"+res.data.MatchType+"</td><td>"+res.data.Status+"</td><td></td></tr>";
			  //
			  //
			  //var v2=res.data.Status;
			  if($('tr#'+trid).length){
				  var v1=$("tr#"+trid+" td:nth-child(4)").text();
				  console.log('Status '+v1);
				  var v2=res.data.Status;
				  if(v1!=v2){
					 $("tr#"+trid).remove();
			 		 $("#myTable1 tr:last").after(tr); 
					 //console.log("status updated");
				  }
				  console.log('old');
			  }else{
				  console.log('new');
				  $("#myTable1 tr:last").after(tr);
				  $.ajax({
						 type: "POST",//dataType: 'json',
						 contentType:"application/json",
						 url: 'http://localhost:8081/new_matches_api',
						 data: JSON.stringify({match_id:res.data.MatchId,
								 match_type:res.data.MatchType,
								 match_teams:res.data.Teams,
								 match_time:res.data.StartTime,
								 match_status:res.data.Status}),
								 success: function(response){
									 console.log(response);
								 }
				  });
			  }
			  //var v1=$("tr#"+trid+" td:nth-child(2)").text();
//			  var v1new=res.data.No;
//			  var v2new=res.data.Yes;
//			  $("tr#"+trid).remove();
		  }
		  return false;
		  if(res.responseType==11 && res.data.MatchId=="p10008"){
			 console.log(res.data); 
			 var trid=res.data.MatchId+res.data.Name.replace(/[^a-zA-Z ]/g, "").split(" ").join("-").toLowerCase();
			 var tr="<tr id='"+trid+"'><td>"+res.data.Name+"</td><td>"+res.data.No+"</td><td>"+res.data.Yes+"</td><td>"+res.data.Status+"</td><td>"+res.data.IsRemove+"</td></tr>";
			 var v1=$("tr#"+trid+" td:nth-child(2)").text();
			 var v2=$("tr#"+trid+" td:nth-child(3)").text();
			 var v1new=res.data.No;
			 var v2new=res.data.Yes;
			 console.log(res.data.Name+'---'+v1+'---'+v1new);
			 console.log(res.data.Name+'---'+v2+'---'+v2new);
			 if($('tr#'+trid).length){
				if(res.data.IsRemove==true){
			 		$("tr#"+trid).remove();
				}
			 	$("tr#"+trid).replaceWith(tr);
			 }else{
			 	$("#myTable tr:last").after(tr);
			 }
		  }
	   };
		
	   ws.onclose = function() { 
		  // websocket is closed.
		  alert("Connection is closed..."); 
	   };
	   
	   setInterval(function(){ 
	   
	   },1000);
});
</script>
</head>

<body>
<div class="container-fluid">
<div class="row">
		<div class="col-md-7">
        	<h3 class="text-danger">LIVE MATCHES</h3>
            <table class="table tabel-striped table-bordered" id="myTable1">
                <thead><tr><th>MatchID</th><th>Teams</th><th>MatchType</th><th>Status</th><th>Action</th></tr></thead>
                <tbody>
                    <tr class="live_matches">
                    
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-5">
            <table class="table tabel-striped table-bordered" id="myTable">
                <thead><tr><th>Title</th><th>No</th><th>Yes</th><th>Status</th><th>IsRemoved</tr></thead>
                <tbody>
                    <tr class="session_trs">
                    
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>	
</body>
</html>
