<form id='supportForm' name='supportForm' ng-submit="form.save()" class="form-horizontal form-edit" confirm-on-exit>
	@include('bookings::templates.bookings_projects_header')
	
	@csrf

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

	<h4 class="subheader">Problem Description</h4>
	<div class="alert alert-danger">
		<h3><i class="fa fa-exclamation-triangle"></i> Does the customer think this is an emergency? Select 'Yes' to notify all technicians.</h3>
		<h5>Let the customer know that extra charges will apply if this is not an emergency.</h5>
		<div class="form-group checkboxes">
			<label for="urgent" class="col-sm-3 control-label">&nbsp;</label>
			<div class="col-sm-9">
				<label class="radio-inline">
					<input type="radio" name="urgent" value="1" ng-model="data.urgent" required> Yes
				</label>
				<label class="radio-inline">
					<input type="radio" name="urgent" value="0" ng-model="data.urgent" required> No
				</label>
			</div>
		</div>
	</div>
	<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="subtype_id" class="col-sm-3 control-label label-required">Type:</label>
		<div class="col-sm-9">
			<select name="subtype_id" ng-model="data.subtype_id" class="form-control" required ng-init="data.subtype_id = 1">
				@foreach(App\Modules\Bookings\TaskSubtype::support()->get()->pluck('name', 'id') as $id => $name)
					<option value="{{ $id }}">{{ $name }}</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">Assign to:</label>
		<div class="col-sm-9">
			<select name="assigned_to" ng-model="data.assigned_to" class="form-control">
				<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.subtype_id">Type is required.</li>
			<li ng-if="data.urgent === undefined || data.urgent === null || data.urgent === ''">Please specify if this is an emergency.</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>