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

@section('js')
	@parent

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

@section('content')
	<div id="sales_page" class="row" ng-controller="InvoicesMainCtrl" 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 Till...</h4>
		</div>

		<div ng-show="$root.angular_ready" class="col-sm-2">
			<ul class="nav nav-pills nav-stacked">
				<li class="nav-header">Sale Receipts</li>
				<li page-highlighter="/sales/new"><a href="#sales/new"><i class="fa-fw fa fa-plus"></i> New Sale</a></li>
				<li page-highlighter="/sales/browse"><a href="#sales/browse"><i class="fa-fw fa fa-list"></i> Browse Sales</a></li>
				<li><br></li>
				<li class="nav-header">Invoices</li>
				<li page-highlighter="/invoices/new"><a href="#invoices/new"><i class="fa-fw fa fa-plus"></i> New Invoice</a></li>
				<li page-highlighter="/invoices/browse"><a href="#invoices/browse"><i class="fa-fw fa fa-list"></i> Browse Invoices</a></li>
				<li><br></li>
				<li class="nav-header">Quotes</li>
				<li page-highlighter="/quotes/new"><a href="#quotes/new"><i class="fa-fw fa fa-plus"></i> New Quote</a></li>
				<li page-highlighter="/quotes/browse"><a href="#quotes/browse"><i class="fa-fw fa fa-list"></i> Browse Quotes</a></li>

				@if (Auth::user()->isMemberOf(5))
					<li><br></li>
					<li class="nav-header">Additional tools</li>
					            <!-- Removed Kashflow sync link - using Xero integration instead -->
				@endif
				{{--
				<li><br></li>
				<li class="nav-header">Purchase Orders</li>
				<li page-highlighter="/purchase-orders/new"><a href="#purchase-orders/new"><i class="fa-fw fa fa-plus"></i> New Purchase Order</a></li>
				<li page-highlighter="/purchase-orders/browse"><a href="#purchase-orders/browse"><i class="fa-fw fa fa-list"></i> Browse Orders</a></li>
				--}}
			</ul>
		</div>

		{{-- Include the content pages here --}}
		<script type="text/ng-template" id="invoices/new.html">
			@include('invoices::new')
		</script>
		<script type="text/ng-template" id="invoices/browse.html">
			@include('invoices::browse')
		</script>
		<script type="text/ng-template" id="invoices/email.html">
			@include('invoices::email')
		</script>
		<script type="text/ng-template" id="invoices/payment.html">
			@include('invoices::payment')
		</script>
		<script type="text/ng-template" id="invoices/online-payment.html">
			@include('invoices::online-payment')
		</script>
		<!-- Removed Kashflow templates - using Xero integration instead -->
		</script>

		{{-- Dynamically load content here --}}
		<div ng-show="$root.angular_ready" class="col-sm-10">
			<!-- 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 data...</h4>
			</div>
			<div ng-view></div>
		</div>

	</div>
@stop