<div class="modal-header">
	<button type="button" class="close" ng-click="cancel()">&times;</button>
	<h3 class="modal-title">Add a new business</h3>
</div>
<div class="modal-body" style="min-height: 300px;">

	<!-- Show progress -->
	<ul class="breadcrumb">
		<li><span ng-class="{'text-success': step > 1, 'text-info': step == 1}">Step 1. Business details</span></li>
		<li><span ng-class="{'text-success': step > 2, 'text-muted': step < 2, 'text-info': step == 2}">Step 2. Sites & Address</span></li>
		<li><span ng-class="{'text-muted': step < 3, 'text-info': step == 3}">Step 3. Site users</span></li>
	</ul>

	<hr>

	<!-- Step 1. Business details -->
	<form name="step_1_form" class="form-horizontal" ng-show="step == 1">
		<p class="lead">
			Basic details
		</p>
		<div class="form-group">
			<label class="col-sm-3 control-label" for="inputName">Name</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="inputName" ng-model="data.name" name="name" placeholder="Business name" required>
				<span class="help-block" ng-show="step_1_form.$submitted && step_1_form.name.$invalid"><span class="text-danger"><i class="fa fa-exclamation-triangle"></i> The business name is required</span></span>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label" for="inputWebsite">Website</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="inputWebsite" ng-model="data.website" name="website" placeholder="">
			</div>
		</div>
	</form>

	<!-- Step 2. Sites & Address -->
	<form name="step_2_form" class="form-horizontal" ng-show="step == 2">
		<p class="lead">Each business can have one or more sites.</p>
		<div class="alert alert-warning" ng-show="data.sites.length == 0"><i class="fa fa-info-circle"></i> No sites are defined. <div class="btn btn-success btn-sm pull-right" ng-click="SiteModal()"><i class="fa fa-plus"></i> New site</div></div>
		<table class="table">
			<tbody>
				<tr ng-repeat="site in data.sites">
					<td>{[{ site.name }]}</td>
					<td>{[{ site.address }]}</td>
					<td>{[{ site.address2 }]}</td>
					<td>{[{ site.postcode }]}</td>
					<td>{[{ site.primary_phone }]}</td>
					<td><a href="#" ng-click="removeSite(site)" data-eat-click>Remove</a></td>
				</tr>
			</tbody>
		</table>
		<div class="btn btn-success" ng-show="data.sites.length > 0" ng-click="SiteModal()" style="margin-top: 20px;"><i class="fa fa-plus"></i> New site</div>
	</form>

	<!-- Step 3. Site Users -->
	<form name="step_3_form" class="form-horizontal" ng-show="step == 3 && !saving">
		<p class="lead">Now it's time to add some users to the sites you've defined.</p>
		<div class="alert alert-warning" ng-show="data.sites.length == 0">
			<i class="fa fa-info-circle"></i> You didn't define any sites, so you can't add any users. You may continue to create the business as you can add the sites and users later on.
		</div>
		<table class="table">
			<tbody ng-repeat="site in data.sites">
				<tr>
					<td colspan="8"><strong><i class="fa fa-chevron-right"></i> {[{ site.name }]}</strong></td>
					<td><div class="btn btn-success btn-sm pull-right" ng-click="SiteUserModal(site)"><i class="fa fa-plus"></i> New user</div></td>
				</tr>
				<tr ng-repeat="user in site.users">
					<td></td>
					<td>{[{ user.first_name }]}</td>
					<td>{[{ user.last_name }]}</td>
					<td>{[{ user.email }]}</td>
					<td>{[{ user.phone }]}</td>
					<td>{[{ user.mobile }]}</td>
					<td>{[{ user.position }]}</td>
					<td><i class="fa fa-check" ng-show="user.authority == '1'"></i></td>
					<td><a href="#" ng-click="removeSiteUser(site, user)" data-eat-click>Remove</a></td>
				</tr>
			</tbody>
		</table>
	</form>

	<div ng-show="saving">
		<p class="lead text-center" style="margin-top: 100px;"><i class="fa fa-spinner fa-spin"></i> Please wait while we are saving the new business...</p>
	</div>

</div>
<div class="modal-footer">
	<button class="btn btn-default pull-left" ng-show="step > 1" ng-click="back()"><i class="fa fa-chevron-left"></i> Previous</button>
	<button class="btn btn-default" ng-click="cancel()">Cancel</button>
	<button class="btn btn-primary" ng-show="step < last_step" ng-click="next()"><i class="fa fa-chevron-right"></i> Next</button>
	<button class="btn btn-primary" ng-show="step == last_step" ng-click="submit()">Submit</button>
</div>

<!-- Modals templates -->
@include('clients::site-modal')
@include('clients::site-user-modal')