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

	{{-- Parts template --}}
	<script type="text/ng-template" id="widgets/parts.html">
		@include('bookings::templates.parts')
	</script>
@stop

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

		<div class="col-sm-4">

			<div class="widget">
				<div class="widget-content text-center">
					<h1 ng-init="statuses = {{ $statuses->toJson() }}">
						<i class="muted fa fa-{[{ getStatusIcon() }]}"></i>
						{[{ getStatusName() }]}
					</h1>
					<br>
					<div ng-if="data.status_id != 29 && data.status_id != 30">
						<span ng-disabled=" data.completed " class="col-sm-6 btn btn-danger" ng-confirm-click confirmed-click="updateStatus(29)"><i class="fa fa-times"></i> Cancel Order</span>
						<span class="col-sm-6 btn btn-success" ng-disabled=" ! data.completed " ng-click="updateStatus(30)"><i class="fa fa-cube"></i> Collected</span>
					</div>

				</div>
			</div>
			<div class="task-group widget-content">
				<div class="headline">
					<h4><i class="fa fa-thumbs-up fa-fw"></i> Accounts</h4>
				</div>
				<ul class="fa-ul">
					<li>
						<i class="fa-li fa fa-angle-right"></i>
						Invoice number: <span class="text-warning" editable-number="data.invoice_number">{[{ data.invoice_number ? data.invoice_number : 'not invoiced' }]}</span>
						<a href="#" class="pull-right" ng-hide="data.invoice_number" ng-click="generateInvoice(data)"><i class="fa fa-tint"></i> Generate</a>
						<a href="#" class="pull-right" ng-show="data.invoice_number" ng-click="InvoiceService.show(data)"><i class="fa fa-tint"></i> View Invoice</a>
					</li>
					<li>
							<i class="fa-li fa fa-angle-right"></i>
							Payment status: <span editable-select="data.paid" e-ng-options="o.value as o.name for o in payment_options" onaftersave="save()"><span ng-class="{'text-danger': data.paid == '0', 'text-success': data.paid == '1'}">{[{ getPaymentDisplay(data.paid) }]}</span></span>
							<span class="pull-right" ng-show="data.paid == '1'" editable-bsdate="data.paid_at" e-datepicker-popup="dd-MM-yyyy" onaftersave="save()"><i class="fa fa-calendar"></i> {[{ data.paid_at | date:"dd/MM/yyyy" }]}</span>
					</li>
				</ul>

			</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>Order Details</h3>
				</div>
				<div class="widget-content">

					<div class="headline">
						<h4><i class="fa fa-wrench fa-fw"></i> Parts</h4>
					</div>
					<div widget-parts="data" related-type="task" ></div>

					<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