@section('header')
	@include('common.header')
@stop

@section('js')
	@parent

	<script type="text/ng-template" id="widgets/comments.html">
		@include('bookings::templates.comments')
	</script>
	<script type="text/ng-template" id="clients/templates/widget.html">
		@include('clients::widget')
	</script>
	<script type="text/ng-template" id="widgets/attachments.html">
		@include('bookings::templates.attachments')
	</script>
	<script type="text/ng-template" id="modals/subscribers.html">
		@include('bookings::templates.modals.subscribers')
	</script>

	@include('bookings::templates.modals.related-tasks-modal')
@stop

@section('content')
	<div ng-controller="PagesSaleLeadCtrl" ng-init="taskId = '{!! $task->id !!}'" ng-cloak>
		<span ng-init="statuses = {{ $statuses }}"></span>
		<span ng-init="users = {{ $users }}"></span>

		<div class="navbar task-navbar" data-spy="affix" data-offset-top="50">
			<div class="navbar-inner">
				<div class="brand">{!! $task->id !!} - <span editable-text="data.title" onaftersave="updateValue({title: data.title})">{[{ data.title }]}</span> <span class="label label-danger">{[{ data.client.contract.name }]}</span></div>
				<div class="pull-right">
					<button class="btn btn-warning" ng-click="save()">Save changes</button>
					<span class="btn btn-default go-top" ng-click="scrollTop()"><i class="fa fa-arrow-up"></i></span>
				</div>
			</div>
		</div>

		<div class="widget widget-classic task-beta">
			<div class="widget-content">

				{{-- The layout will be split into 2 columns --}}
				<div class="row">
					<div class="col-sm-7">
						<div class="headline">
							<h4><i class="fa fa-tag"></i> Details</h4>
						</div>

						<div class="alert alert-danger" ng-show="data.no_price_reason">
							<i class="fa fa-exclamation-triangle"></i> Reason for not having a price: {[{ data.no_price_reason }]}
						</div>

						<div class="row">
							<div class="col-sm-9">
								<div class="row task-list">
									<div class="span" style="display: none;"></div>
									<div class="col-sm-4 task-details-block">
										<label class="task-label">Status:</label>
										<span class="text-info dropdown">
											<a href="#" data-toggle="dropdown" data-eat-click><span class="editable editable-click">{[{ data.status.name }]}</span></a>
											<ul class="dropdown-menu dropdown-menu-arrow">
												<li ng-repeat="status in statuses" ng-class="{active: data.status_id == status.id}"><a tabindex="-1" href="#" ng-click="updateValue({status_id: status.id})" ng-bind="status.name"></a></li>
											</ul>
										</span>
									</div>
									<div class="col-sm-4 task-details-block">
										<label class="task-label">Assigned to:</label>
										<span class="text-info dropdown">
											<a href="#" data-toggle="dropdown" data-eat-click><span class="editable editable-click">{[{ data.user.name || 'No one' }]}</span></a>
											<ul class="dropdown-menu dropdown-menu-arrow">
												<li class="disabled"><a href="#"><b>Assign to:</b></a></li>
												<li>
													<ul class="dropdown-menu scroll-menu">
														<li ng-class="{active: !data.assigned_to}"><a tabindex="-1" href="#" ng-confirm-click="Are you sure you want to unassign this job and place it back in the queue?" confirmed-click="unassign()" class="text-warning">No one - Queue</a></li>
														<li ng-repeat="user in users" ng-class="{active: data.assigned_to == user.id}"><a tabindex="-1" href="#" ng-click="updateValue({assigned_to: user.id})" ng-bind="user.name"></a></li>
													</ul>
												</li>
											</ul>
										</span>
									</div>
									<div class="col-sm-4 task-details-block">
										<label class="task-label">Deadline:</label>
										<span editable-bsdate="data.onsite_end" e-datepicker-popup="dd/MM/yyyy" onaftersave="save()"><i class="fa fa-calendar"></i> {[{ (data.onsite_end | date:"dd/MM/yyyy") || 'Not set' }]}</span>
									</div>
									<div class="col-sm-4 task-details-block">
										<label class="task-label">Direct dial:</label>
										<span class="text-info" editable-text="data.direct_dial" onaftersave="save()"><span>{[{ data.direct_dial }]}</span></span>
									</div>
									<div class="col-sm-4 task-details-block">
										<label class="task-label">Lead quality:</label>
                                        <uib-rating ng-model="data.time_spent" max="5" on-hover="hoveringOver(value)" on-leave="overStar = null"></uib-rating>
										<span class="label" ng-class="{'label-warning': percentage <30, 'label-info': percentage >=30 && percentage <70, 'label-success': percentage >=70}" ng-show="overStar">{[{ percentage }]}%</span>
									</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="headline">
									<h4><i class="fa fa-lightbulb-o"></i> Pricing</h4>
								</div>
								<table class="table table-condensed table-striped-odd table-no-header">
									<tbody>
										<tr style="font-size: 13px;">
											<td>Budget</td>
											<td><span editable-text="data.labour" e-class="input-small" onaftersave="save()">{[{ data.labour | currency:"£" }]}</span></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>

						<!-- Task subscribers -->
						<hr>
						<div style="margin-left: 12px; margin-top: 10px;">
							<i class="fa fa-rss-square fa-lg"></i> &nbsp; <a href="#" ng-click="showSubscribers()" data-eat-click><span ng-show="data.user_subscribed">You and </span>{[{ (data.subscribers | exclude:'id':auth.data.id).length }]} people</a> subscribed to this task.
							<a href="#" ng-if="!data.user_subscribed" ng-click="subscribe()">Subscribe</a>
							<a href="#" ng-if="data.user_subscribed" ng-click="unsubscribe()">Unsubscribe</a>
							<div class="pull-right"><i class="fa fa-plus-square"></i> Booked by <span class="text-info" ng-bind="data.creator.name"></span> <span class="muted" tooltip="{[{ data.created_at }]}">{[{ data.created_at | fromNow }]}</span></div>
						</div>

						<hr>
						<textarea rows="5" ng-model="data.problem" summernote summernote-height="200"></textarea>


						{{-- Comments section --}}
						<div widget-comments="data" comment-type="task"></div>

					</div>

					<div class="col-sm-5" style="padding-left: 10px;">
						<div class="task-group">
							<div class="headline">
								<h4><i class="fa fa-user fa-fw"></i> Customer</h4>
							</div>
							<div clients-widget data-site="data.site" data-site-user="data.site_user" data-task="data" data-show-new-booking="true"></div>
						</div>

						<div class="task-group">
							<div class="headline">
								<h4><i class="fa fa-paperclip fa-fw"></i> Attachments</h4>
							</div>
							<div attachments task="data" type="task"></div>
						</div>

						<div class="task-group">
							<div class="headline">
								<h4><i class="fa fa-random fa-fw"></i> Related tasks</h4>
							</div>
							<div class="task-group-inner">
								<small ng-show="data.related_tasks.length == 0">No tasks. <a href="" ng-click="showLinkTaskModal()">Link a task now</a></small>
								<table class="table table-striped-odd table-condensed table-no-header">
									<tbody>
										<tr ng-repeat="task in data.related_tasks">
											<td>{[{ task.id }]}</td>
											<td>{[{ task.title }]}</td>
											<td>{[{ task.status.name }]}</td>
											<td><a href="#" ng-confirm-click="Remove task {[{ task.id }]}?" confirmed-click="removeRelatedTask(task)" data-eat-click><span class="text-danger">Remove</span></a></td>
										</tr>
									</tbody>
								</table>
								<div class="buttons text-right" ng-show="data.related_tasks.length > 0" style="margin-top: 5px;">
									<span class="btn btn-default" ng-click="showLinkTaskModal()">Link new task</span>
								</div>
							</div>
						</div>


					</div>
				</div>

			</div>
		</div>
	</div>
@stop