<form id='onsiteForm' name='onsiteForm' ng-submit="save()" class="form-horizontal form-edit" confirm-on-exit>

	@include('bookings::templates.bookings_projects_header')

	@csrf


	@include('bookings::templates.location')
	<h4 class="subheader">Date and Time</h4>
	<br />
	<div class="row">
		<div ng-hide="newEvent.allDay" class="row">
			<div class="col-sm-1">
				<span class="btn btn-default" ng-model="selectedDate" data-date-type="iso" data-date-format="dd-mm-yyyy" bs-datepicker><i class="fa fa-calendar"></i></span>
			</div>
	        <div class="form-group col-sm-5">
	            <label for="onsite_start" class="col-sm-3 control-label label-required">Start Time:</label>
	            <div class="col-sm-9">
	                <div class="input-group">
	                    <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
	                    <select ng-model="start_time" class="form-control" ng-options="o.value as o.label for o in times" required></select>
	                </div>
	            </div>
	        </div>
	        <div class="form-group col-sm-5">
	            <label for="onsite_end" class="col-sm-3 control-label label-required">End Time:</label>
	            <div class="col-sm-9">
	                <div class="input-group">
	                    <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
	                    <select ng-model="end_time" class="form-control" ng-options="o.value as o.label for o in times" required></select>
	                </div>
	            </div>
	        </div>
	    </div>
    </div>
    <br/><br/>
	<div calendar="fullCalendar" ui-calendar="calendar" ng-model="eventSources"></div>

	<h4 class="subheader">Problem Description</h4>
	<div class="form-group">
		<label for="severity_id" class="col-sm-3 control-label label-required">Severity:</label>
		<div class="col-sm-9">
			<select name="severity_id" ng-model="data.severity_id" class="form-control" required>
				@foreach($severities_dropdown as $key => $value)
					<option value="{{ $key }}">{{ $value }}</option>
				@endforeach
			</select>
		</div>
	</div>
	<div class="form-group">
		<label for="selected_templates" class="col-sm-3 control-label">Templates:</label>
		<div class="col-sm-9">
			<div ui-select2="templatesRemoteOptions" ng-model="data.templates" class="form-control" multiple="true"></div>
		</div>
	</div>
	<div class="form-group">
		<label for="assigned_to" class="col-sm-3 control-label">Assigned To:</label>
		<div class="col-sm-9">
			<select name="assigned_to" ng-model="data.assigned_to" class="form-control" required>
				<option value=""></option>
				@foreach(App\Models\User::getActiveList()->pluck('name', 'id') as $id => $name)
					<option value="{{ $id }}">{{ $name }}</option>
				@endforeach
			</select>
			&nbsp; <span class="label label-info" ng-if="clientManager.client.id" ng-click="data.assigned_to = clientManager.client.suggested_user.id">Suggested user: {[{ clientManager.client.suggested_user.name }]}</span>
		</div>
	</div>
	<div class="form-group">
		<label for="title" class="col-sm-3 control-label label-required">Title:</label>
		<div class="col-sm-9">
			<input type="text" name="title" ng-model="data.title" class="form-control" required>
		</div>
	</div>
	<div class="form-group">
		<label for="problem" class="col-sm-3 control-label label-required">Problem:</label>
		<div class="col-sm-9">
			<textarea name="problem" ng-model="data.problem" class="form-control" summernote summernote-height="200"></textarea>
		</div>
	</div>

	<div class="alert alert-warning" ng-if="! formIsValid()">
		<p class="lead"><i class="fa fa-warning"></i> The following are required before saving the job:</p>
		<ul>
			<li ng-if="!clientManager.isSelected()">You need to select a customer from the left hand side.</li>
			<li ng-if="!data.title || data.title.trim() === ''">Title is required.</li>
			<li ng-if="!data.problem || data.problem.trim() === ''">Problem description is required.</li>
			<li ng-if="!data.severity_id">Severity is required.</li>
			<li ng-if="!data.assigned_to">Assigned To is required.</li>
			<li ng-if="!start_time">Start time is required.</li>
			<li ng-if="!end_time">End time is required.</li>
		</ul>
	</div>

	<div class="form-actions">
		<input type="hidden" name="client_id" ng-model="data.client_id" required>
		<input type="hidden" name="type" value="support">
		<button class="btn btn-primary" data-loading-text="Saving..." ng-disabled="!formIsValid()">
			Save
		</button>
	</div>

</form>