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

@section('js')
	@parent

	<script src="{{ asset('js/typeahead.min.js') }}"></script>

	{{-- Modal that pops up when the task doesn't have a price --}}
	@include('templates.modals.no-price-confirmation')

	{{-- Clients widget template --}}
	<script type="text/ng-template" id="clients/templates/widget.html">
		@include('clients::widget')
	</script>
@stop

@section('content')
	<div id="messagesPage" class="row" ng-app="archDB" ng-controller="PagesMessageCtrl" ng-init="messageId = '{!! $message->id !!}'" ng-cloak>

		<div class="col-sm-4">
			<div class="widget">
				<div class="widget-content text-center">
					<h3>
						<span ng-hide="data.closed">Open</span>
						<span ng-show="data.closed">Closed</span>
						<div class="btn-group">
							<a class="btn btn-sm dropdown-toggle" data-toggle="dropdown" href="#" eat-click>
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu pull-right text-left">
								<li><a tabindex="-1" href="#" ng-click="closed(0)" eat-click><i class="fa-fw fa fa-check" ng-hide="data.closed"></i> Open</a></li>
								<li><a tabindex="-1" href="#" ng-click="closed(1)" eat-click><i class="fa-fw fa fa-check" ng-show="data.closed"></i> Closed</a></li>
							</ul>
						</div>
					</h3>
					<h5 class="text-success">
						<span ng-show="data.assigned_to">Message for <strong>{[{ data.user.first_name }]}</strong></span>
						<span ng-hide="data.assigned_to" class="text-warning">No one is assigned</span>
						<div class="btn-group">
							<a class="btn btn-sm dropdown-toggle" data-toggle="dropdown" href="#" eat-click>
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu pull-right text-left">
								<!-- dropdown menu links -->
								<li class="disabled"><a href="#"><b>Select a user:</b></a></li>
								<li>
									<ul class="dropdown-menu scroll-menu">
										<li><a tabindex="-1" href="#user" ng-click="assignTo(null)" eat-click><i class="fa-fw fa fa-check" ng-show="!data.user.id"></i> No one</a></li>
										@foreach (App\Models\User::getActiveList() as $user)
											<li><a tabindex="-1" href="#user/{!! $user->id !!}" ng-click="assignTo({{$user->id}})" eat-click><i class="fa-fw fa fa-check" ng-show="data.user.id == {!! $user->id !!}"></i> {!! $user->name !!}</a></li>
										@endforeach
									</ul>
								</li>
							</ul>
						</div>
					</h5>
					<small class="text-danger">Received <span bs-tooltip="data.created_at">{[{ data.created_at | fromNow }]}</span> (booked by {[{ data.creator.name }]})</small>
					<div>
						<br>
						<a href="{!! URL::to('/bookings') !!}/#bookings/{!! $message->client_type !!}/{!! $message->client_id !!}" class="btn"><i class="fa fa-plus"></i> New booking</a>
					</div>
				</div>
			</div>

			{{-- Customer widget --}}
			<tabset>
				<tab data-heading="Customer">
					<div class="bookings-content repair-tab">
						<div clients-widget data-site="data.site" data-site-user="data.site_user" data-task="data"></div>
					</div>
				</tab>
			</tabset>
			<br>
		</div>

		<div class="col-sm-8">
			<div class="widget">
				<div class="widget-header">
					<h3>Message Details</h3>
				</div>
				<div class="widget-content">
					<form name="mainForm" class="basic-form" ng-submit="update($event)">
							<div class="control-group">
								<label class="control-label" for="inputMessage">Message</label>
								<div class="controls">
									<textarea id="inputMessage" name="problem" class="col-sm-12" summernote summernote-height="200" ng-model="data.message" rows="10"></textarea>
								</div>
							</div>
							<div class="text-right">
								<button class="btn btn-warning" ng-disabled="!mainForm.$dirty"><i class="fa fa-pencil"></i> Update</button>
							</div>
					</form>

					<div widget-comments="data" comment-type="message"></div>
					<script type="text/ng-template" id="widgets/comments.html">
						@include('bookings::templates.comments')
					</script>
				</div>
			</div>
		</div>
	</div>
@stop