<style type="text/css">
	.callrecords {
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		border-collapse: collapse;

	}

	.callrecords td, .callrecords th {
		/*border: 1px solid #ddd;*/
		padding: 8px;
	}

	.callrecords tr:nth-child(odd){background-color: #b3b3b314;}

	.callrecords tr:hover {background-color: #ddd;}

	.callrecords th {
		padding-top: 12px;
		padding-bottom: 12px;
		text-align: left;
		background-color: #5da3c1;
		color: white;

	}
	.panel-default {

		background: #5da3c1;
	}
	.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td{
		border-top: unset; 
	}
	.table thead > tr > th{
		border-bottom:unset;
	}
</style>

<div class=col-md-3>
	<div class=col-md-11>

		<table class="callrecords" style="width:100%">

			<tr>
				<td>
					<span><a href=# onclick="dialerLoadData('CurrentQueue','','',1,'','');return false;">CurrentQueue</a></span>
				</td>
				<td></td>

			</tr>
			<tr>
				<td><span><a href=# onclick="dialerLoadData('MissedCalls','','',1,'','');return false;">MissedCalls</a></span></td>
				<td><span class="label label-small label-primary pull-right" >
					{!!$MissedCalls!!}
				</span></td>

			</tr>
			<tr>
				<td><span><a href=# onclick="dialerLoadData('TotalData','{!!$currentStatus!!}','{!!$legalStatus!!}',1,'','');return false;">TotalData</a></span></td>
				<td><span class="label label-small label-default pull-right" >
					{!!$TotalData!!}
				</span></td>

			</tr>
			<tr>
				<td><span><a href=# onclick="dialerLoadData('NotCalled','{!!$currentStatus!!}','{!!$legalStatus!!}',1,'','');return false;">NotCalled</a></span></td>
				<td><span class="label label-small label-default pull-right" >
					{!!$NotCalled!!}
				</span></td>

			</tr>
			<tr>
				<td><span><a href=# onclick="dialerLoadData('Called','{!!$currentStatus!!}','{!!$legalStatus!!}',1,'','');return false;">Called</a></span></td>
				<td><span class="label label-small label-success pull-right" >
					{!!$TotalCalled!!}
				</span></td>

			</tr>
			<tr>
				<td><span><a href=# onclick="dialerLoadData('Contacted','{!!$currentStatus!!}','{!!$legalStatus!!}',1,'','');return false;">Contacted</a></span></td>
				<td><span class="label label-small label-success pull-right" >
					{!!$Contacted!!}
				</span></td>

			</tr>
			<tr>
			<td><span><a href=# onclick="dialerLoadData('NotContacted','{!!$currentStatus!!}','{!!$legalStatus!!}',1,'','');return false;">Not Contacted</a></span></td>
				<td><span class="label label-small label-success pull-right" >
					{!!$NotContacted!!}
				</span></td>

			</tr>

		</table>
	</div>
</div>
<div class="col-md-9 callrecords" id=bucketlistdiv>
</div>
<div style='clear:both'></div>

<script>

	var currentStatus = $('#currentstatus_select').val();
	var legalStatus = $('#legalstatus_select').val();

	callingModeChange();

	function dialerLoadData(listname,currentstatus,legalstatus,page,skey,stxt)
	{
		doAjax("dialer/bucketdata","client="+client+"&bucket="+listname+"&currentstatus="+currentstatus+"&legalstatus="+legalstatus+'&page='+page+'&skey='+skey+'&stxt='+stxt,"bucketlistdiv","ajax_dialer_list","singlefail","GET");

		savedialermode();
	}

	dialerLoadData('CurrentQueue',currentStatus,legalStatus,1,'','');
	
</script>