<div class="row">
	<div class="col-sm-3">
		<div class="widget">
			<div class="widget-content text-center">
				<h3>{[{ data.count.customers }]}</h3>
				<small>Customers</small>
			</div>
		</div>
	</div>
	<div class="col-sm-3">
		<div class="widget">
			<div class="widget-content text-center">
				<h3>{[{ data.count.clients }]}</h3>
				<small>Business clients</small>
			</div>
		</div>
	</div>
	<div class="col-sm-3">
		<div class="widget">
			<div class="widget-content text-center">
				<h3>{[{ data.count.new_customers }]}</h3>
				<small>New customers this month</small>
			</div>
		</div>
	</div>
	<div class="col-sm-3">
		<div class="widget">
			<div class="widget-content text-center">
				<h3>{[{ data.count.average | currency:"£" }]}</h3>
				<small>Average money spent per customer</small>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-sm-9">
		<div data-fade="1" ngModel="activeTab" bs-tabs>
			<div ng-repeat="tab in tabs" data-title="{[{ tab.title }]}" ng-include="tab.template"></div>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="well">
			<button class="btn btn-success btn-block" ng-click="showCustomerForm()"><i class="fa fa-plus"></i> Add Customer</button>
			<button class="btn btn-success btn-block" ng-click="showClientsWizard()"><i class="fa fa-plus"></i> Add Business</button>
			<br>
			<button class="btn btn-warning btn-block disabled"><i class="fa fa-tags"></i> Find duplicates</button>
			<button class="btn btn-warning btn-block disabled"><i class="fa fa-ban"></i> Find dummy entries</button>
		</div>
	</div>
</div>

{{-- Add a customer modal --}}
<script type="text/ng-template" id="clients/modals/new-customer.html">
    <div class="modal-header">
		<button type="button" class="close" ng-click="close()" aria-hidden="true">×</button>
		<h3 class="modal-title"><i class="fa fa-plus"></i> Add customer</h3>
	</div>
	<div class="modal-body form-modal">
		@include('clients::forms.customer')
	</div>
</script>

{{-- Include the create a client wizard --}}
<script type="text/ng-template" id="clients/modals/new-client.html">
	@include('clients::add-client-modal')
</script>

<script type="text/ng-template" id="clients/customers-table.html">
	<div class="bookings-content repair-tab" customers-table>
		<div class="alert alert-info" data-ng-show="loading"><i class="fa fa-spinner fa-spin fa-lg"></i> We are loading data, please be patient...</div>
		<div data-ng-hide="loading">
			<table class="table table-striped">
				<thead>
					<th></th>
					<th>Name</th>
					<th>Phone</th>
					<th>Secondary Phone</th>
					<th>Mobile</th>
					<th>Address</th>
					<th class="centered">Currently spent</th>
					<th class="centered">Active Tasks</th>
				</thead>
				<tbody ng-cloak>
					<tr ng-repeat="customer in data">
						<td><input type="checkbox" ng-model="customer.selected"></td>
						<td><a href="{!! URL::to('clients') !!}/#/customer/{[{ customer.id }]}">{[{ customer.name }]}</a></td>
						<td> {[{ customer.phone }]}</a></td>
						<td>{[{ customer.phone2 }]}</a></td>
						<td>{[{ customer.mobile }]}</a></td>
						<td>{[{ customer.address + ', ' + customer.postcode }]}</td>
						<td class="centered">{[{ customer.spent | currency:"£" }]}</td>
						<td class="centered"><span class="badge">{[{ customer.active_tasks }]}</span></td>
					</tr>
				</tbody>
			</table>
			<div paginator="paginator"></div>
		</div>
	</div>
</script>

<script type="text/ng-template" id="clients/clients-table.html">
	<div class="bookings-content repair-tab" clients-table>
		<div class="alert alert-info" data-ng-show="loading"><i class="fa fa-spinner fa-spin fa-lg"></i> We are loading data, please be patient...</div>
		<div data-ng-hide="loading">
			<table class="table table-striped">
				<thead>
					<th></th>
					<th>Name</th>
					<th>Primary Site</th>
					<th>Primary Contact</th>
					<th>Contract</th>
					<th class="centered">Contract Price</th>
					<th class="centered">Currently spent</th>
					<th class="centered">Active Tasks</th>
				</thead>
				<tbody ng-cloak>
					<tr ng-repeat="client in data">
						<td><input type="checkbox" ng-model="client.selected"></td>
						<td><a href="{!! URL::to('clients') !!}/#/client/{[{ client.id }]}">{[{ client.name }]}</a></td>
						<td>{[{ client.primary_site.name }]}</td>
						<td>{[{ client.primary_contact.name }]}</td>
						<td>{[{ client.contract.name }]}</td>
						<td class="centered">{[{ client.contract_price | currency:"£" }]}</td>
						<td class="centered">{[{ client.revenue | currency:"£" }]}</td>
						<td class="centered"><span class="badge">{[{ client.active_tasks }]}</span></td>
					</tr>
				</tbody>
			</table>
			<div paginator="paginator"></div>
		</div>
	</div>
</script>

<script type="text/ng-template" id="clients/marketing.html">
	@include('clients::marketing')
</script>