<div class="bookings-content repair-tab" ng-controller="MarketingCtrl">
	<div class="headline">
		<h4><i class="fa fa-bookmark"></i> Target your customers in a few easy steps</h4>
	</div>

	<div class="row">
		<div class="col-sm-9">
			<form name="marketingForm" class="form-horizontal" style="margin-top: 30px;">
				<div class="form-group">
					<label class="col-sm-3 control-label label-required">Select the customer base:</label>
					<div class="col-sm-9">
						<select name="client_type[]" multiple size="3" class="form-control" ng-model="filters['client_type[]']">
							<option value="client">Business Customers</option>
							<option value="customer">Regular Customers</option>
						</select>
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-3 control-label">Select the job types:</label>
					<div class="col-sm-9">
						<select multiple size="5" class="form-control" ng-model="filters['task_type[]']">
							<option value="repair">In shop repairs</option>
							<option value="support">Remote support</option>
							<option value="onsite">Onsite</option>
							<option value="order">Orders</option>
							<option value="sale_lead">Sale Leads</option>
						</select>
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-3 control-label">Spent:</label>
					<div class="col-sm-4">
						<select ng-model="filters.spent_operator" class="form-control">
							<option value="">-- not required --</option>
							<option value=">=">more than</option>
							<option value="<=">less than</option>
						</select>
					</div>
					<div class="col-sm-5">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
							<input type="number" class="form-control" ng-model="filters.spent" ng-required="filters.spent_operator">
						</div>
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-3 control-label">Have booked:</label>
					<div class="col-sm-4">
						<select ng-model="filters.tasks_operator" class="form-control">
							<option value="">-- not required --</option>
							<option value=">">more than</option>
							<option value="<">less than</option>
						</select>
					</div>
					<div class="col-sm-5">
						<div class="input-group">
							<input type="number" class="form-control" ng-model="filters.tasks_count" ng-required="filters.tasks_operator">
							<span class="input-group-addon">jobs</span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-3 control-label">Inactive since:</label>
					<div class="col-sm-9">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
							<input type="text" class="form-control" ng-model="inactive_since" bs-datepicker>
						</div>
					</div>
				</div>

				<div class="headline">
					<h4><i class="fa fa-envelope"></i> Customise email</h4>
				</div>

				<div class="form-group">
					<label class="col-sm-3 control-label label-required">Subject:</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" ng-model="email.subject" required>
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-3 control-label label-required">Message body:</label>
					<div class="col-sm-9">
						<textarea class="form-control" rows="5" ng-model="email.message" required></textarea>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-9">
						<button class="btn btn-default" ng-click="preview()" tooltip="Sends an email to {!! Auth::user()->email !!}">Preview</button>
						<button class="btn btn-primary" ng-confirm-click="Are you sure?" confirmed-click="send()">Send</button>
						<span class="pull-right btn btn-default" ng-click="export()"><i class="fa fa-arrow-circle-o-down" ng-class="{'fa fa-spinner fa-spin': exporting}"></i> {[{ exporting ? 'Exporting...' : 'Export' }]}</span>
					</div>
				</div>
			</form>
		</div>

		{{-- Reach stats --}}
		<div class="col-sm-3">
			<div class="well text-center">
				<strong>Potential reach:</strong> <em>{[{ total_reach }]} customers</em>
			</div>
		</div>
	</div>
</div>