@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>

	{{-- Promote to project modal --}}
	<script type="text/ng-template" id="bookings/modals/promote.html">
		@include('bookings::templates.modals.promote')
	</script>
@stop

@section('content')
	<div id="supportPage" class="row" ng-app="archDB" ng-controller="PagesRmaCtrl" ng-init="taskId = '{!! $task->id !!}'" ng-cloak>

		<div class="col-sm-4">
			<div class="widget">
				<div class="widget-content text-center">
					<h3 ng-init="statuses = {{ $statuses->toJson() }}">
						{[{ getStatusName() }]}
						<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">
								<!-- dropdown menu links -->
								@foreach ($statuses as $status)
									<li><a tabindex="-1" href="#status/{!! $status->id !!}" ng-click="updateStatus({!! $status->id !!})" eat-click><i class="fa-fw fa fa-check" ng-show="data.status_id == {!! $status->id !!}"></i> {!! $status->name !!}</a></li>
								@endforeach
							</ul>
						</div>
					</h3>
					<h5 class="text-success">
						<span ng-show="data.assigned_to">Assigned to <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">Booked in <span tooltip="{[{ data.created_at }]}">{[{ data.created_at | fromNow }]}</span></small>
					<br /><br />
					<div>
						@if ( ! $task->project_id)
							<span data-promote-project-btn="{!! $task->id !!}" data-redirect-url="{!! URL::to('projects') !!}"></span>
						@endif
					</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 widget-sla="data"></div>
			<script type="text/ng-template" id="widgets/sla.html">
				@include('bookings::templates.sla')
			</script>

			<div class="widget">
				<div class="widget-header">
					<h3>RMA</h3>
				</div>
				<div class="widget-content">
					<div class="alert alert-info" ng-show="data.prebook">
						<i class="fa fa-exclamation-triangle"></i> This repair is a prebook due on {[{ data.prebook_date | date:'EEEE, dd of MMMM At HH:mm' }]}.
					</div>
					<form name="mainForm" class="basic-form" ng-submit="update($event)">
						<fieldset>
							<legend>Items</legend>
							<div class="search input-append pull-right">
								<input type="text" ng-model="search" placeholder="Search for items" stock-selected='addItem(data)' lookup-stock />
								<span class="add-on"><i class="fa fa-search"></i></span>
							</div>
							<table class="table">
								<tbody>
									<tr ng-repeat="item in data.items">
										<td style="vertical-align:middle"><strong>{[{ item.stock.name }]}</strong></td>
										<td style="vertical-align:middle">{[{ item.stock.manufacturer_code }]}</td>
										<td style="vertical-align:middle">
											<i class="fa fa-tags"></i> <input type="text" class="input-hidden col-sm-3" ng-change="updateItem(item)" ng-model="item.quantity" ng-init="item.quantity = 1" />
										</td>
										<td style="vertical-align:middle">
											<select class="col-sm-12" name="status_id" ng-model="item.status_id" ng-change="updateItem(item)" ng-options="o.id as o.name for o in data.statuses"></select>
										</td>
										<td style="vertical-align:middle"><a href="#" class="btn btn-danger pull-right" ng-click="removeItem(item)" eat-click>Remove</a></td>
									</tr>
									<tr ng-show="data.items.length === 0">
										<td colspan="5">No items are currently selected</td>
									</tr>
								</tbody>
							</table>
							<small><strong>Note:</strong> Items are automatically saved once added, deleted or modified</small>
							<br /><br /><br />

							<div class="control-group">
								<label class="control-label label-required" for="inputProblem">Details:</label>
								<div class="controls">
									<textarea id="inputProblem" name="problem" class="col-sm-12" summernote summernote-height="200" ng-model="data.problem" 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>
						</fieldset>
					</form>

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