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

@section('js')
	@parent

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

@section('content')

	{{-- Declare the main page wrapper and also the AngularJS Controller --}}
	<div id="bookings_page" class="row" ng-app="archDB" ng-controller="BookingsMainCtrl" ng-cloak>
		<!-- Loading indicator while AngularJS initializes -->
		<div ng-show="!$root.angular_ready" class="text-center" style="padding: 50px;">
			<i class="fa fa-spinner fa-spin fa-2x"></i>
			<h4 style="margin-top: 20px; color: #666;">Loading Bookings...</h4>
		</div>

		{{-- Start of left column --}}
		<div ng-show="$root.angular_ready" class="col-sm-4">

			<div class="input-group"> {{-- start of customer search --}}
				<input id="client_search" type="text" class="form-control" ng-model="client_search" placeholder="Search customer" autocomplete="off" client-search>
				<span class="input-group-btn">
					<button class="btn btn-default" type="button" ng-click="focusSearch()">
						<i class="fa fa-search" style="color: #000 !important; left: 0px !important;"></i>
					</button>
					<button class="btn btn-default" type="button" tooltip="Create a new customer" ng-click="addCustomer('customer')">
						<i class="fa fa-plus"></i> <i class="fa fa-user"></i>
					</button>
				</span>
			</div> {{-- end of customer search --}}

			<div ng-show="!clientManager.isSelected()" class="text-center">
				<h2><i class="fa fa-arrow-up"></i></h2>
				<h2>select a customer</h2>
			</div>

			<div ng-show="clientManager.isSelected() && clientManager.isClient()">
				@include('bookings::client_summary')
			</div>
			<div ng-show="clientManager.isSelected() && clientManager.isCustomer()">
				@include('bookings::customer_summary')
			</div>

		</div> {{-- end of left column --}}


		<div ng-show="$root.angular_ready" class="col-sm-8">
			<!-- Show loading spinner when Angular is ready but data is loading -->
			<div ng-show="loading" class="text-center" style="padding: 50px;">
				<i class="fa fa-spinner fa-spin fa-2x"></i>
				<h4 style="margin-top: 20px; color: #666;">Loading booking data...</h4>
			</div>
		    <ul class="nav nav-tabs" tabdrop>
				<li page-highlighter="/bookings/repair"><a href="#bookings/repair">Repair</a></li>
				<li page-highlighter="/bookings/support"><a href="#bookings/support">Support</a></li>
				<li page-highlighter="/bookings/onsite"><a href="#bookings/onsite">On Site</a></li>
				<li page-highlighter="/bookings/order"><a href="#bookings/order">Order</a></li>
				{{-- a project only has 4 types of bookings so 3 below are excluded when booking tasks from a project --}}
				<li ng-if="projectId == undefined" page-highlighter="/bookings/message"><a href="#bookings/message">Message</a></li>
				<li ng-if="projectId == undefined" page-highlighter="/bookings/rma"><a href="#bookings/rma">RMA</a></li>
				<li ng-if="projectId == undefined" page-highlighter="/bookings/project"><a href="#bookings/project">Project</a></li>
				{{-- <li page-highlighter="/bookings/sale-lead"><a href="#bookings/sale-lead">Sale Lead</a></li> --}}
			</ul>

			{{-- if booking task from project only 4 menu items so add a conditional (on projectId) class col-sm-4 to restrict width of drop-down arrow --}}
			<div ng-show="noTypeSelected()" class="text-center animated" ng-class="{'bounceInDown': clientManager.isSelected(), 'col-sm-4' : projectId}">
				<h2><i class="fa fa-arrow-up"></i></h2>
				<h2 ng-show="!clientManager.isSelected()">then select a booking type</h2>
				<h2 ng-show="clientManager.isSelected()">now select a booking type</h2>
			</div>

			{{-- Dynamic view loads here --}}
			<div class="bookings-content animate repair-tab" ng-animate="{ enter: 'bounceInDown', leave: 'bounceOutDown'}" ng-hide="noTypeSelected()" ng-view></div>
		</div>

		{{-- Include the content pages here --}}
		<script type="text/ng-template" id="bookings/repair.html">
			@include('bookings::repair')
		</script>
		<script type="text/ng-template" id="bookings/support.html">
			@include('bookings::support')
		</script>
		<script type="text/ng-template" id="bookings/onsite.html">
			@include('bookings::onsite')
		</script>
		<script type="text/ng-template" id="bookings/order.html">
			@include('bookings::order')
		</script>
		<script type="text/ng-template" id="bookings/message.html">
			@include('bookings::message')
		</script>
		<script type="text/ng-template" id="bookings/rma.html">
			@include('bookings::rma')
		</script>
		<script type="text/ng-template" id="bookings/project.html">
			@include('bookings::project')
		</script>
		<script type="text/ng-template" id="bookings/sale-lead.html">
			@include('bookings::sale-lead')
		</script>
		<script type="text/ng-template" id="bookings/repairs/devices.html">
			@include('bookings::templates.customer-devices')
		</script>
		<script type="text/ng-template" id="bookings/modals/device.html">
			@include('bookings::templates.modals.device')
		</script>

		{{-- Modal Dialogs --}}
		<script type="text/ng-template" id="clients/modals/new-customer.html">
	        <div class="modal-header">
				<button type="button" class="close" ng-click="close()" aria-hidden="true">×</button>
				<h3 class="modal-title">
					<i class="fa" ng-class="{'fa-plus': !data.id, 'fa-pencil': data.id}"></i> 
					<span ng-if="!data.id">Add a new customer</span>
					<span ng-if="data.id">Edit customer</span>
				</h3>
			</div>
			<div class="modal-body form-modal">
				@include('clients::forms.customer')
			</div>
	    </script>

		{{-- Include the authentification modal --}}
	    @include('templates.modals.auth')
	    <div data-arch-auth></div>

	</div>

@stop