<div class="modal-header">
	<button type="button" class="close" data-ng-click="close()">×</button>
	<h4><i class="fa fa-phone"></i> Call details</h4>
</div>

<div class="modal-body" ng-cloak>

	<div class="row-fluid">
		<div class="span8">
			<p class="lead">What would you like to do?</p>

			<div class="row-fluid">
				<div class="span3 text-center" ng-click="changeView('jobs')" ng-if="call.client_id">
					<div ng-class="{active: view == 'jobs'}" class="call-tabs">
						<div class="text-center">
							<i class="fa fa-list fa-3x"></i>
						</div>
						View customer jobs
					</div>
				</div>
				<div class="span3 text-center" ng-click="changeView('booking')" ng-if="call.client_id">
					<div ng-class="{active: view == 'booking'}" class="call-tabs">
						<div class="text-center">
							<i class="fa fa-plus fa-3x"></i>
						</div>
						Book a new job
					</div>
				</div>
				<div class="span3 text-center" ng-click="changeView('link')">
					<div ng-class="{active: view == 'link'}" class="call-tabs">
						<div class="text-center">
							<i class="fa fa-external-link fa-3x"></i>
						</div>
						Link to an existing job
					</div>
				</div>
				<div class="span3 text-center" ng-click="changeView('note')">
					<div ng-class="{active: view == 'note'}" class="call-tabs">
						<div class="text-center">
							<i class="fa fa-comment fa-3x"></i>
						</div>
						Write a note
					</div>
				</div>
			</div>

			<br><br><br>

			{{-- Render the jobs list view --}}
			<div ng-if="view == 'jobs'">
				<p class="lead">Below is a list of this customer's most recent jobs</p>
				<table class="table table-striped">
					<tbody>
						<tr ng-repeat="task in call.tasks">
							<td><a href="{!! URL::to('tasks') !!}/{[{ task | taskUrl }]}" target="_blank">{[{ task.id }]}</a></td>
							<td>{[{ task.title }]}</td>
							<td>{[{ task.user.name }]}</td>
							<td>{[{ task.labour | currency:"£" }]}</td>
							<td>{[{ task.created_at | fromNow }]}</td>
							<td><a href="#" ng-click="GoToLink(task.id)" data-eat-click>Link to this call</a></td>
						</tr>
					</tbody>
				</table>
			</div>

			{{-- Render the bookings view --}}
			<div ng-if="view == 'booking'">
				<p class="lead">Book in a new job for this customer</p>

				<div ng-if="task.id" class="text-center">
					<i class="fa fa-check-circle fa-3x"></i>
					<p>The task was created successfully under <a href="{!! URL::to('tasks') !!}/{[{ task | taskUrl }]}" target="_blank">#<span ng-bind="task.id"></span></a>.</p>
				</div>

				<p class="muted"><i class="fa fa-info-circle"></i> At the moment this will book in a Remote Support type of job.</p>

				<form name="CallNewTaskForm" class="form-horizontal form-edit" ng-submit="NewTask()" ng-if="!task.id">
					<div class="control-group">
						<label for="title" class="control-label label-required">Title:</label>
						<div class="controls">
							<input type="text" name="title" ng-model="task.title" class="span12" required>
						</div>
					</div>
					<div class="control-group">
						<label for="problem" class="control-label label-required">Problem:</label>
						<div class="controls">
							<textarea name="problem" ng-model="task.problem" class="span12" summernote summernote-height="200"></textarea>
						</div>
					</div>
					<div class="text-right">
						<button class="btn btn-primary" type="submit" ng-disabled="CallNewTaskForm.$invalid">Create</button>
					</div>
				</form>
			</div>

			<div ng-if="view == 'link'">
				<p class="lead">Link this call to an existing job</p>

				<div class="alert alert-success" ng-if="linkSaved">
					<i class="fa fa-check"></i> The job #{[{ call.task_id }]} was succesfully linked to this call.
				</div>
				<div class="alert alert-success" ng-if="unlinkSaved">
					<i class="fa fa-check"></i> The job #{[{ call.task_id }]} was succesfully unlinked from this call.
				</div>

				<div ng-if="call.task_id" class="text-center">
					This call is linked to task #<span ng-bind="call.task_id"></span>. <a href="#" ng-click="UnlinkCall()" data-eat-click>Unlink</a>
				</div>

				<form class="form-edit" ng-submit="LinkCall()" ng-if="!call.task_id">
					<div class="control-group">
						<label for="task_id" class="control-label label-required">Task Id:</label>
						<div class="controls">
							<input type="text" name="task_id" ng-model="bindings.task_id" class="span12" required>
						</div>
					</div>
					<div class="control-group">
						<label for="task_comment" class="control-label">Post a comment (optional)</label>
						<div class="controls">
							<textarea name="task_comment" ng-model="bindings.task_comment" class="span12" rows="4"></textarea>
						</div>
					</div>
					<div class="text-right">
						<button class="btn btn-primary" type="submit" ng-disabled="!bindings.task_id">Link</button>
					</div>
				</form>
			</div>


			{{-- Render the notes view --}}
			<div ng-if="view == 'note'">
				<p class="lead">Write a note about this call</p>
				<div ng-if="hideNoteForm">
					<div class="alert alert-success" ng-if="noteSaved">
						<i class="fa fa-check"></i> Your note was successfully saved.
					</div>
					<p>
						{[{ call.message }]} <a href="#" ng-click="showNoteForm()" data-eat-click>Edit</a>
					</p>
				</div>
				<form class="form-edit" ng-submit="SaveCall()" ng-if="!hideNoteForm">
					<textarea name="message" ng-model="call.message" class="span12" placeholder="Write your notes here..." rows="4"></textarea>
					<div class="text-right">
						<button class="btn btn-primary" type="submit" ng-disabled="!call.message">Save</button>
					</div>
				</form>
			</div>
		</div>


		<div class="span4">
			<p class="lead" ng-if="call.client_id">
				<a href="{!! URL::to('clients') !!}#/{[{ call.client_type }]}/{[{ call.client_id }]}" target="_blank" style="color: #333;" title="Click to go to the customer page">{[{ call.client.name }]}</a> <i class="fa fa-external-link"></i>
			</p>
			<p class="lead" ng-if="!call.client_id">
				{[{ call.number }]}
			</p>
			<table class="table">
				<tbody>
					<tr>
						<td><strong>Dialled number</strong></td>
						<td>{[{ call.number }]}</td>
					</tr>
					<tr>
						<td><strong>Called at</strong></td>
						<td>{[{ call.created_at }]}</td>
					</tr>
					<tr>
						<td><strong>Duration</strong></td>
						<td>{[{ call.answered_time }]}</td>
					</tr>
					<tr>
						<td><strong>State</strong></td>
						<td>{[{ call.state }]}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

<div class="modal-footer">
	<span class="btn" data-ng-click="cancel()">Remind me later</span>
	<span class="btn btn-warning" ng-confirm-click="Are you sure you want to close this call window?" confirmed-click="close()" data-eat-click>Close</span>
</div>