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

@section('js')
	@parent

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

@section('content')
	<div id="projectPage" ng-controller="ProjectsMainCtrl" data-ng-init="projectId = {!! $project->id !!}" ng-cloak>
		<span data-ng-init="users = {{ App\Models\User::getActiveList() }}"></span>
		<div class="navbar">
			<div class="navbar-inner">
				<ul class="nav">
					<li><a href="#/projects/overview"><i class="fa fa-tachometer"></i> Overview</a></li>
					<li class="divider-vertical"></li>
					<li><a href="#/projects/tasks"><i class="fa fa-tags"></i> Tasks <span class="badge">{[{ data.tasks.length }]}</span></a></li>
					<li class="divider-vertical"></li>
					<li><a href="#/projects/stats"><i class="fa fa-bar-chart-o"></i> Statistics</a></li>
					<li class="divider-vertical"></li>
					<li><a href="#/projects/files"><i class="fa fa-file-o"></i> Files <span class="badge">{[{ files.length }]}</span></a></li>
					<li class="divider-vertical"></li>
				</ul>
			</div>
		</div>

		<div class="alert alert-warning" data-ng-show="data.planning == '0'">
			<i class="fa fa-info-circle"></i> Your project is currently in the planning state. <a href="#" data-ng-click="updateProjectValue('planning', 1)" data-eat-click>Planning complete</a>
		</div>

		<div class="alert alert-warning" data-ng-show="data.planning == '1' && getProgress() < 100">
			<i class="fa fa-info-circle"></i> Your project is currently in progress. Complete all tasks to complete this stage.
		</div>

		<div class="alert alert-warning" data-ng-show="data.planning == '1' && getProgress() >= 100 && data.invoiced == '0'">

			<i class="fa fa-info-circle"></i> All the tasks have been completed, now you can invoice the customer.

			<a href="#" ng-really-message="Are you sure you are ready to send an invoice" ng-really-click="updateProjectValue('invoiced', 1)">Invoiced</a>
			<a href="#" ng-really-message="Are you sure you an invoice is not needed" ng-really-click="updateProjectValue('invoiced', 2)" class="text-danger" data-eat-click>Invoice not needed</a>

		</div>

		<div class="alert alert-warning" data-ng-show="data.invoiced == '1' && data.paid == '0'">
			<i class="fa fa-info-circle"></i> Customer has been invoiced, waiting for payment. <a href="#" data-ng-click="updateProjectValue('paid', 1)" data-eat-click>Paid</a> / <a href="#" data-ng-click="updateProjectValue('paid', 2)" class="text-danger" data-eat-click>Payment not needed</a>
		</div>

		<div class="alert alert-warning" data-ng-show="data.invoiced > 0 && data.paid > 0 && data.completed == '0' && data.planning == '1'">
			<i class="fa fa-info-circle"></i> This project can now be closed. <a href="#" data-ng-click="updateProjectValue('completed', 1)" data-eat-click>Close project!</a>
		</div>

		<div class="alert alert-success" data-ng-show="data.completed == '1'">
			<i class="fa fa-info-circle"></i> This project is completed.
		</div>

		{{-- Dynamic view loads here --}}
		<div data-ng-view></div> 
	</div>

	<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="/projects/overview.html">
		<div class="row">
			<div class="col-sm-7">
				<div class="widget">
					<div class="widget-content">
						<div class="row">
							<div class="col-sm-8">
								<h3><span data-editable-text="data.name" data-onbeforesave="updateProjectValue('name', $data)">{[{ data.name }]}</span></h3>
							</div>
							<div class="col-sm-3">
								<h5>Overall progress:</h5>
								<progress percent="getProgress()" class="progress-success" animate="true"></progress>
							</div>
							<div class="col-sm-1">
								<h5>&nbsp;</h5>
								{[{ getProgress() }]}%
							</div>
						</div>

						<ul class="breadcrumb">
							<li><span class="text-warning" data-ng-class="{'text-success': data.planning == '1'}"><i class="fa fa-check" data-ng-show="data.planning == '1'"></i> Planning</span> <span class="divider">/</span></li>
							<li class="active"><span data-ng-class="{'text-success': getProgress() >= 100, 'text-warning': data.planning == '1'}"><i class="fa fa-check" data-ng-show="getProgress() >= 100"></i> In Progress</span> <span class="divider">/</span></li>
							<li class="active"><span data-ng-class="{'text-warning': getProgress() >= 100, 'text-success': data.invoiced > 0}"><i class="fa fa-check" data-ng-show="data.invoiced > 0"></i> Send Invoice</span> <span class="divider">/</span></li>
							<li class="active"><span data-ng-class="{'text-warning': data.invoiced > 0, 'text-success': data.paid > 0}"><i class="fa fa-check" data-ng-show="data.paid > 0"></i> Paid</span> <span class="divider">/</span></li>
							<li class="active"><span data-ng-class="{'text-warning': getProgress() >= 100, 'text-success': data.feedback > 0}">Feedback</span> <span class="divider">/</span></li>
							<li class="active"><span data-ng-class="{'text-warning': data.paid > 0, 'text-success': data.completed == '1'}"><i class="fa fa-check" data-ng-show="data.completed == '1'"></i> Completed</span></li>
							<li class="pull-right">
								<div class="btn-group" style="margin-top: -5px;">
									<button id="project-breadcrumb-cog" class="btn dropdown-toggle" type="button" data-toggle="dropdown">
										<i class="fa fa-cog"></i>
										<span class="caret"></span></button>
									<ul class="dropdown-menu dropdown-menu-checkbox pull-right dropdown-checkbox" data-eat-click>
										<!-- dropdown menu links -->
										<li><a tabindex="-1" href="#" data-ng-click="updateProjectValue('planning', !data.planning)"><label><input type="checkbox" data-ng-checked="data.planning == '1'"> Planning</label></a></li>
										<li><a tabindex="-1" href="#" data-ng-click="updateProjectValue('invoiced', !data.invoiced)"><label><input type="checkbox" data-ng-checked="data.invoiced > 0"> Invoiced</label></a></li>
										<li><a tabindex="-1" href="#" data-ng-click="updateProjectValue('paid', !data.paid)"><label><input type="checkbox" data-ng-checked="data.paid > 0"> Paid</label></a></li>
										<li><a tabindex="-1" href="#" data-ng-click="updateProjectValue('completed', !data.completed)"><label><input type="checkbox" data-ng-checked="data.completed == '1'"> Completed</label></a></li>
										<li class="divider"></li>
									</ul>
									<button id="project-cancel-button" class="btn btn-danger" ng-really-message="Are you sure you you want to cancel this project"? ng-really-click="cancelProject()"">Cancel project</button>
								</div>
							</li>
						</ul>

						<p><i class="fa-fw fa fa-user"></i> Project leader: <span data-editable-select="data.assigned_to" data-e-ng-options="s.id as s.name for s in users"  data-onbeforesave="updateProjectValue('assigned_to', $data)">{[{ showProjectLeader() }]}</span></p>
						<p><i class="fa-fw fa fa-gbp"></i> Project budget: <span data-editable-number="data.budget" e-step="any" data-onbeforesave="updateProjectValue('budget', $data)">{[{ data.budget | currency:"£" }]}</span></p>
						<p><i class="fa-fw fa fa-gbp"></i> Project expenses: <span data-editable-number="data.expenses" e-step="any" data-onbeforesave="updateProjectValue('expenses', $data)">{[{ data.expenses | currency:"£" }]}</span> / hour</p>
						<p><i class="fa-fw fa fa-clock-o"></i> Estimated duration: <span data-editable-number="data.estimated_duration" data-onbeforesave="updateProjectValue('estimated_duration', $data)">{[{ data.estimated_duration || 'No value' }]}</span> days</p>

						<hr>
						<form name="project" data-ng-submit="update()">
							<textarea class="col-sm-11" name="description" rows="5" data-ng-model="data.description" summernote summernote-height="200"></textarea>
							<div class="text-right">
								<br>
								<button class="btn btn-primary" data-ng-disabled="project.$pristine">Update</button>
							</div>
						</form>

						<div widget-comments="data" comment-type="project"></div>

					</div>
				</div>

			</div>
			<div class="col-sm-5">
				<tabset>
					<tab data-heading="Customer">
						<div class="bookings-content repair-tab">
							<div clients-widget data-task="data" data-site="data.site" data-site-user="data.site_user" data-client-type="data.client_type" data-client-id="data.client_id"></div>
						</div>
					</tab>
				</tabset>

				<div class="widget widget-classic" style="margin-top: 30px;">
					<div class="widget-content">
						<div class="headline">
							<h4>Accounts & Invoices</h4>
						</div>

						<div style="margin-left: 10px; margin-right: 5px; margin-top: 10px;">
							<i class="fa fa-cog"></i> Create a single invoice for the entire project.
							<span class="text-info dropdown">
								<a href="#" data-toggle="dropdown" data-eat-click><span class="editable editable-click">{[{ data.single_invoice == '1' ? 'Yes' : 'No' }]}</span></a>
								<ul class="dropdown-menu dropdown-menu-arrow">
									<li ng-repeat="option in boolean_options" ng-class="{active: data.single_invoice == option.value}"><a tabindex="-1" href="#" ng-click="updateProjectValue('single_invoice', option.value)" ng-bind="option.name" data-eat-click></a></li>
								</ul>
							</span>
						</div>

						<table class="table table-striped" style="margin-top: 20px; margin-bottom: 20px;">
							<tbody>
								<tr ng-repeat="task in data.tasks">
									<td><a href="{!! URL::to('tasks') !!}/{[{ task | taskUrl }]}">{[{ task.id }]}</a></td>
									<td>{[{ task.title }]}</td>
									<td>{[{ task.invoice_number || 'Not invoiced' }]}</td>
									<td><i class="fa fa-check" ng-if="task.paid == '1'"></i></td>
									<td>
										<div ng-if="data.single_invoice == '0'">
											<a href="#" class="pull-right" ng-hide="task.invoice_number" ng-click="InvoiceService.generate(task)" data-eat-click><i class="fa fa-tint"></i> Generate</a>
											<a href="#" class="pull-right" ng-show="task.invoice_number" ng-click="InvoiceService.show(task)" data-eat-click><i class="fa fa-tint"></i> View Invoice</a>
										</div>
									</td>
								</tr>
							</tbody>
						</table>

						<div class="btn btn-default" ng-if="data.single_invoice == '1' && !data.invoice_number" ng-click="InvoiceService.generateSingleInvoice(data)"><i class="fa fa-file-text-o"></i> Generate Invoice</div>
						<div class="btn btn-default" ng-if="data.invoice_number" ng-click="InvoiceService.show(data)">View Invoice</div>
					</div>
				</div>

			</div>
		</div>
	</script>

	<script type="text/ng-template" id="bookings/projects/assign-task.html">
		@include('bookings::templates.modals.assign-task')
	</script>

	<script type="text/ng-template" id="/projects/tasks.html">
		<div class="widget">
			<div class="widget-content">
				<div quick-task data-users="users" client="data.client" client-type="{[{ data.client_type }]}" data-project-id="{[{ data.id }]}" data-site="data.site" data-site-user="data.site_user" data-on-create="taskAdded(data)"></div>
			</div>
		</div>
		<div class="widget">
			<div class="widget-content">

				<div id="project_buttons" class="form-actions text-right">
					<h4 class="subheader text-left col-sm-3"><i class="fa fa-tags"></i> Project tasks</h4>

					<a href="/bookings/#bookings/{[{ data.client_type }]}/{[{ data.client_id }]}/project/{[{ data.id }]}"><button class="btn btn-primary"><i class="fa fa-edit"></i> Book a new task</button></a>
					<button class="btn btn-success" data-ng-click="show()"><i class="fa fa-plus"></i> Assign a new task</button>
					<span data-assign-task></span>
				</div>
				<br>
				<h5 data-ng-show="data.tasks.length == 0">No tasks are assigned to this project.</h5>
				<tabset type="navType">
					<tab heading="Table View">
						<table class="table">
							<tbody>
								<tr data-ng-repeat="task in data.tasks">
									<td>
										<i ng-class="{'fa fa-check': task.completed == '1', 'fa fa-clock-o': task.completed == '0'}"></i>
									</td>
									<td><a href="{!! URL::to('tasks') !!}/{[{ task | taskUrl }]}">ID: {[{ task.id }]}</a></td>
									<td><span class="label label-warning">{[{ task.type }]}</span></td>
									<td>{[{ task.title }]}</td>
									<td>{[{ task.status.name }]}</td>
									<td>{[{ task.severity.name }]}</td>
									<td><span class="label label-info">{[{ task.user.name }]}</span></td>
									<td>{[{ task.labour | currency:"£" }]}</td>
									<td><span bs-tooltip="task.created_at"><i class="fa fa-clock-o"></i> {[{ task.created_at | fromNow }]}</span></td>
									<td>
										<div class="btn-group">
											<a class="btn btn-sm dropdown-toggle" data-toggle="dropdown" href="#" eat-click>
												<i class="fa fa-cog"></i>
												<span class="caret"></span>
											</a>
											<ul class="dropdown-menu pull-right">
												<!-- dropdown menu links -->
												<li><a tabindex="-1" href="#" ng-click="remove(task)" data-eat-click><i class="fa-fw fa fa-times"></i> Remove from project</a></li>
											</ul>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</tab>
					<tab heading="Gantt Chart">
						<gantt template-url="templates/gantt/tasks.html" data="data.tasks"></gantt>
					</tab>
				</tabset>


			</div>
		</div>
	</script>

	<script type="text/ng-template" id="/projects/statistics.html">
		<div class="widget">
			<div class="widget-content">
				<div class="row">
					<div class="col-sm-5">
						<div google-chart chart="duration_piechart"></div>
					</div>
					<div class="col-sm-7">
						<div google-chart chart="expenses_chart"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="widget">
			<div class="widget-content">
				<h3>Tasks timeline</h3>
				<div google-chart chart="tasks_chart"></div>
			</div>
		</div>
	</script>

	<script type="text/ng-template" id="/projects/files.html">
		<div class="widget">
			<div class="widget-content">
				<div class="well text-center">
					<div class="btn btn-primary file-upload">
						<input id="photos_upload" type="file" name="files" data-files="files" data-related-id="{!! $project->id !!}" data-related-type="project" multiple fileupload>
						<i class="fa fa-inbox"></i> &nbsp;Drop files here
					</div>
				</div>
				<table class="table">
					<tbody>
						<tr data-ng-repeat="file in files | orderBy:'-id'">
							<td><i class="fa fa-file"></i></td>
							<td>{[{ file.name | limitTo:18 }]}</td>
							<td>{[{ file.size | bytes }]}</td>
							<td><i class="fa fa-arrow-circle-o-up"></i> {[{ file.creator.name }]}</td>
							<td><span data-tooltip="{[{ file.created_at }]}">{[{ file.created_at | fromNow }]}</span></td>
							<td>
								<a href="{!! URL::to('files/download') !!}/{[{ file.id }]}" data-ng-show="! file.progress">
									<span class="btn btn-success btn-sm"><i class="fa fa-arrow-circle-o-down"></i> Download</span>
								</a>
								<progress data-percent="file.progress" data-ng-show="file.progress"></progress>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</script>

	<script type="text/ng-template" id="templates/gantt/tasks.html">
		@include('templates.gantt.tasks')
	</script>

@stop