<link href="../assets/css/app-style.css" rel="stylesheet"/>
<script src="../assets/js/jquery.min.js"></script>

<%

	strSQL =	"SELECT sum(case when appid = '4' then 1 else 0 end) AS clmcount," &_
			"sum(case when appid = '2' then 1 else 0 end) AS udccount, "&_
			"(SELECT COUNT(*) FROM machines WHERE machines.isactive=1 AND machines.islocationonly=0) AS machinecount "& _
			"FROM installedapps WHERE appid IN (2,4) and installedapps.isactive=1"
	set rs = objconn.Execute(strSQL)
	clmcount			=	rs("clmcount")
	udccount			=	rs("udccount")
	machinecount		=	rs("machinecount")
	nocollections		=	CInt(machinecount) - CInt(clmcount) - CInt(udccount)
	udcpct			=	FormatNumber(CInt(udccount)/Cint(machinecount)*100,2)
	clmpct			=	FormatNumber(CInt(clmcount)/Cint(machinecount)*100,2)
	nocollectionspct		=	FormatNumber(Cint(nocollections)/Cint(machinecount)*100,2)
%>
<script>


$(function() {

		var ctx = document.getElementById("udcchart").getContext('2d');
			var myChart = new Chart(ctx, {
				type: 'doughnut',
				data: {
					labels: ["CLM", "UDC","No Collections"],
					datasets: [{
						backgroundColor: [
							"#ffffff",
							"rgba(255, 255, 255, 0.70)",
							"rgba(255, 255, 255, 0.50)",
							"rgba(255, 255, 255, 0.20)"
						],
						data: [<%Response.Write(rs("clmcount"))%>,<%Response.Write(rs("udccount"))%>,<%Response.Write(nocollections)%>],
						borderWidth: [1, 1,1]
					}]
				},
			options: {
				maintainAspectRatio: false,
			   legend: {
				 position :"bottom",	
				 display: false,
				    labels: {
					  fontColor: '#ddd',  
					  boxWidth:15
				   }
				}
				,
				tooltips: {
				  displayColors:false
				}
			   }
			});
   });	 
   
</script>
<div class="row">     
	<div class="col-12 col-lg-4 col-xl-3">
        <div class="card">
           <div class="card-header">Collection Installs
             <div class="card-action">
              </div>
             </div>
           </div>
           <div class="card-body">
		     <div class="chart-container">
               			<canvas id="udcchart"></canvas>
		</div>
           </div>
           <div class="table-responsive">
             <table class="table align-items-center">
               <tbody>
                 <tr>
                   <td><i class="fa fa-circle text-white mr-2"></i><a href="./displayinstalledapps.asp?appid=2">UDC</a></td>
                   <td><%Response.Write(udccount)%></td>
                   <td><%Response.Write(udcpct)%>%</td>
                 </tr>
                 <tr>
                   <td><i class="fa fa-circle text-light-1 mr-2"></i><a href="./displayinstalledapps.asp?appid=4">CLM<a></td>
                   <td><%Response.Write(clmcount)%></td>
                   <td><%Response.Write(clmpct)%>%</td>
                 </tr>
                 <tr>
                   <td><i class="fa fa-circle text-light-4 mr-3"></i>No Collections</td>
                   <td><%Response.Write(nocollections)%></td>
                   <td><%Response.Write(nocollectionspct)%>%</td>
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
     </div>
</div>

 
