<h3>Customer Statistics</h3>
<p class="lead">Here you will see a summary of how busy our customers kept us...</p>

<!-- Customize the date range -->
<div class="clearfix">
	<div class="pull-right" ng-model="dates" ng-daterangepicker data-ranges="daterangepicker.ranges" data-format="MMMM D, YYYY" style="margin-right: 15px; background: #fff; border: 1px solid #cacaca; padding: 10px; border-radius: 3px;">
		<i class="fa fa-calendar fa-lg"></i>
		<strong>Filter by date:</strong>
		<span class="text-info">{[{ dates.startDate.format('MMMM D, YYYY') }]} - {[{ dates.endDate.format('MMMM D, YYYY') }]}</span>
	</div>
</div>

<!-- Add some spacing -->
<br><br>

<div data-masonry load-images="false" data-preserve-order item-selector=".col-sm-3" data-reload-on-show data-column-width="17%" ng-if="data.length > 0">
	<div data-masonry-brick class="col-sm-3" ng-repeat="client in data | orderBy:'total':-1" style="width: 22%; margin-left: 0; margin-right: 1.7%">
		<div class="widget widget-classic">
			<div class="widget-content text-center">
				<h4><a href="{!! URL::to('clients') !!}/#/{[{ client.client_type }]}/{[{ client.client_id }]}" style="color: #333;">{[{ client.client.name }]}</a></h4>
				<h5 class="muted">{[{ client.total }]} tasks booked</h5>
				<h5 class="muted"><i class="fa fa-phone"></i> {[{ client.calls }]} phone calls</h5>
			</div>
		</div>
	</div>
</div>