<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li>Settings</li>
	<li><a href="#/customer-sources">Customer Sources</a></li>
	<li class="active">Reports</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-midnightblue">
				<div class="panel-heading">
					<h2>Reports</h2>
					<div class="panel-ctrls">
						<a class="button-icon" ng-click="vm._downloadCSV()" title="Download CSV"><i class="ti ti-save"></i></a>
					</div>
				</div>
				<div class="panel-body">
					<div class="row" style="margin-bottom: 25px;">
						<div class="col-sm-12">
							<form name="form" class="form-inline" ng-submit="vm._filterReport()">
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">
											<i class="ti ti-calendar"></i>
										</span>
										<input type="text" ng-focus="vm._openCalendar($event, 'date_from')" class="form-control datepicker" is-open="vm.calendar_opened['date_from']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="date_from" id="date_from" ng-model="vm.date_from" placeholder="From">
									</div>
								</div>
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">
											<i class="ti ti-calendar"></i>
										</span>
										<input type="text" ng-focus="vm._openCalendar($event, 'date_to')" class="form-control datepicker" is-open="vm.calendar_opened['date_to']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="date_to" id="date_to" ng-model="vm.date_to" placeholder="To">
									</div>
								</div>
								<div class="form-group">
									<button type="submit" ng-disabled="!form.$valid" class="btn btn-primary">Filter</button>
								</div>
							</form>
						</div>
					</div>
					<div class="row" style="margin-bottom: 25px;" ng-if="vm._sourceChart.dataset.length">
						<div class="col-sm-12">
							<flot dataset="vm._sourceChart.dataset" options="vm._sourceChart.options" height="350px"></flot>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12">
							<table class="table">
								<thead>
									<tr>
										<th>Customer Source</th>
										<th>Total</th>
									</tr>
									<tbody>
										<tr ng-repeat="customer_source in vm._sourceChart.dataset">
											<td>{{customer_source.name}}</td>
											<td>{{customer_source.data}}</td>
										</tr>
										<tr>
											<td><b>TOTAL</b></td>
											<td><b>{{vm._total}}</b></td>
										</tr>
									</tbody>
								</thead>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
