<div class="row">
	<div class="col-sm-6">
		<p class="lead">&nbsp; At a glance</p>
	</div>
	<div class="col-sm-6 text-right">

			<span   id="reportrange" ng-model="helpers.dates" ng-daterangepicker data-ranges="helpers.daterangepicker.ranges" 	data-format="MMMM D, YYYY">
				<i class="fa fa-calendar fa-lg"></i>
				<span>{[{ helpers.dates.startDate.format('MMMM D, YYYY') }]} - {[{ helpers.dates.endDate.format('MMMM D, YYYY') }]}</span> <b class="caret"></b>
			</span>
			<div class="btn-group" style="margin-left:10px;">
				<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#" eat-click="">
					<i class="fa fa-download"></i> Download Stats
					<span class="caret"></span>
				</a>
				<ul class="dropdown-menu pull-right text-left">
					<!-- dropdown menu links -->
					<li><a href="/api/v1/stats/repairs/download-summary?mode=filtered" target="_blank">Averages</a></li>
					<li><a href="/api/v1/stats/repairs/download-summary?mode=repairscount" target="_blank" >Count</a></li>
					<li><a href="/api/v1/stats/repairs/download-summary?mode=repairslabour" target="_blank">Labours</a></li>
				</ul>
			</div>

	</div>
</div>

<div class="row">
	<div class="col-sm-3">

		<div class="widget widget-classic">
			<div class="widget-content">
				<p class="lead">Income</p>
				<dl class="dl-horizontal">
					<dt>Labour</dt>
					<dd data-ng-bind="income.labour | currency:'£'">0.00</dd>
					<dt>Parts</dt>
					<dd data-ng-bind="income.parts | currency:'£'">0.00</dd>
					<dt>Booking Fees</dt>
					<dd data-ng-bind="income.booking_fee | currency:'£'">0.00</dd>
				</dl>
				<hr />
				<dl class="dl-horizontal">
					<dt>Total</dt>
					<dd data-ng-bind="income.total | currency:'£'">0.00</dd>
				</dl>
			</div>
		</div>

		<div class="widget widget-classic">
			<div class="widget-content">
				<p class="lead">General Stats</p>
				<table class="table table-striped table-condensed">
					<tbody>
						<tr>
							<td>Repairs completed</td>
							<td class="centered" data-ng-bind="overview.completed"></td>
						</tr>
						<tr>
							<td>Repairs in progress</td>
							<td class="centered" data-ng-bind="overview.open"></td>
						</tr>
						<tr>
							<td>Repairs in the queue</td>
							<td class="centered" data-ng-bind="overview.queue"></td>
						</tr>
						<tr>
							<td>Repairs assigned</td>
							<td class="centered" data-ng-bind="overview.assigned"></td>
						</tr>
						<tr>
							<td>Returns</td>
							<td class="centered" data-ng-bind="overview.returns"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="widget widget-classic">
			<div class="widget-content">
				<p class="lead">Repairs</p>
				<div data-stats-piechart data-type="repair" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
			</div>
		</div>

	</div>
	<div class="col-sm-9">

		<!-- Render the line chart -->
		<div data-labour-points-graph="" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate" data-url="{!! URL::to('api/v1/stats/repairs/graph') !!}"></div>

		<div class="widget widget-classic">
			<div class="widget-content">
				<p class="lead text-right">Booked in - VS - Fixed</p>

				<!-- render the graph -->
				<canvas class="chart chart-line" chart-data="dailyLineChart.data" chart-labels="dailyLineChart.labels" chart-series="dailyLineChart.series"></canvas>
			</div>
		</div>

		<!-- Render the table of users -->
		<div class="widget widget-classic">
			<div class="widget-content">
				<p class="lead">Users summary</p>
				<div data-stats-users-repairs-list="" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
			</div>
		</div>

	</div>
</div>