<form id="customerForm" name="customerForm" ng-submit="submit()" class="form-horizontal">
	<div class="row">
		<div class="col-sm-5 col-sm-offset-1">
			<input type="hidden" name="_token" value="{{ csrf_token() }}">

			<input type="hidden" name="id" ng-model="data.id">

			<fieldset>
				<legend>Basic Details</legend>
				<div class="form-group">
					<label for="first_name" class="col-sm-3 control-label">First Name</label>
					<div class="col-sm-9">
						<input type="text" name="first_name" ng-model="data.first_name" required class="form-control">
					</div>
				</div>
				<div class="form-group">
					<label for="last_name" class="col-sm-3 control-label">Last Name</label>
					<div class="col-sm-9">
						<input type="text" name="last_name" ng-model="data.last_name" required class="form-control">
					</div>
				</div>

                                <div class="form-group">
                                        <label for="date_of_birth" class="col-sm-3 control-label">Date of Birth</label>
        		                <div class="col-sm-9">
                                            <input type="text" placeholder="YYYY-MM-DD" ng-model="data.date_of_birth" class="form-control">
					</div>
				</div>
			</fieldset>

			<fieldset>
				<legend>Contact Details</legend>
				<div class="alert alert-warning" ng-if="duplicate_data.total > 0">
					<i class="fa fa-exclamation-triangle"></i>
					<ng-pluralize count="duplicate_data.total"
						when="{'one': 'I\'ve found another customer with these details.',
								'other': 'I\'ve found another {} customers with these details.'}">
					</ng-pluralize> <a href="{!! URL::to('clients') !!}#/customer/{[{ customer.id }]}" ng-repeat="customer in duplicate_data.data | limitTo:5">{[{ customer.name }]}<span class="muted">, </span></a>
				</div>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i> <div style="display: inline-block; width: 70px; text-align: left; font-size: 12px;">E-mail</div></span>
						<input type="text" name="email" ng-model="data.email" required class="form-control" placeholder="E-mail" arch-change="lookupDuplicates(data.email)" maxlength="128">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">

						<input type="text" name="phone" ng-model="data.phone" required class="form-control" placeholder="Phone" arch-change="lookupDuplicates(data.phone)" numbers-only maxlength="15">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">

						<input type="text" name="phone2" ng-model="data.phone2" class="form-control" arch-change="lookupDuplicates(data.phone2)" placeholder="Work Phone" numbers-only maxlength="15">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">

						<input type="text" name="mobile" ng-model="data.mobile" class="form-control" arch-change="lookupDuplicates(data.mobile)" placeholder="Mobile phone" numbers-only maxlength="15">
					</div>
				</div>
			</fieldset>
		</div>

		<div class="col-sm-4 col-sm-offset-1">
			<fieldset>
				<legend>Address Details</legend>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-home"></i></span>
						<input type="text" name="address" ng-model="data.address" required class="form-control" placeholder="Address Line 1" maxlength="128">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-home"></i></span>
						<input type="text" name="address2" ng-model="data.address2" class="form-control" placeholder="Address Line 2" maxlength="128">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-building-o"></i></span>
						<input type="text" name="town" ng-model="data.town" class="form-control" placeholder="Town">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-globe"></i></span>
						<input type="text" name="county" ng-model="data.county" class="form-control" placeholder="County">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-home"></i></span>
						<input type="text" name="postcode" ng-model="data.postcode" required class="form-control" placeholder="Postcode">
						<span class="input-group-addon" ng-click="lookupPostcode(data.postcode)" title="Find the address"><i class="{[{ postcode.icon }]}"></i></span>
					</div>
				</div>

			</fieldset>

			<fieldset>
				<legend>Additional Notes</legend>
				<div class="control">
					<label class="col-sm-3 control-label" style="width: auto;">Send feedback email? </label> &nbsp;&nbsp;
					<label class="radio-inline">
						<input type="radio" value="1" name="enable_feedback" ng-model="data.enable_feedback"> Yes
					</label>
					<label class="radio-inline">
						<input type="radio" value="0" name="enable_feedback" ng-model="data.enable_feedback"> No
					</label>
				</div>

				<div class="control" style="margin-top: 7px;">
					<label class="col-sm-3 control-label" style="width: auto;">Flagged? </label> &nbsp;&nbsp;
					<label class="radio-inline">
						<input type="radio" value="1" name="flagged" ng-model="data.flagged"> Yes
					</label>
					<label class="radio-inline">
						<input type="radio" value="0" name="flagged" ng-model="data.flagged"> No
					</label>
				</div>

				<br>
				<div class="control">
					<label for="blind_notes">Blind Notes</label>
					<textarea name="blind_notes" ng-model="data.blind_notes" class="form-control" rows="4"></textarea>
				</div>
			</fieldset>
		</div>
	</div>


	<div class="form-actions">
		<button class="btn btn-primary" data-loading-text="Saving..." data-success-text="Saved.." ng-hide="data.id">Create</button>
		<button class="btn btn-warning" data-loading-text="Saving..." data-success-text="Saved.." ng-show="data.id">Update</button>
	</div>

</form>
