<div class="widget">
	<div class="widget-header">
		<i class="fa fa-money"></i>
		<h3>{[{ title }]}</h3>
	</div>
	<div class="widget-content">
		<div ng-form="salesForm">
			<div class="row">
				<div class="col-sm-4">
					<div class="form-group">
						<input type="hidden" class="form-control" ng-model="service.client_search" ng-init="service.client_search = {{ $walkInCustomer }}" ui-select2="service.select2ClientOptions" style="width: 100%;" required>
					</div>
					<div class="form-group" style="margin-top: 7px;">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-cog"></i></span>
							<input type="text" name="task_id" class="form-control" placeholder="Job ID" ng-model="service.data.task_id" />
						</div>
					</div>
					<div class="form-group">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-tag"></i></span>
							<input type="text" name="invoice_number" class="form-control" placeholder="Invoice number" ng-disabled="true" ng-model="service.data.invoice_number" />
						</div>
					</div>
					<div class="form-group" ng-if="type == 'sale'">
						<p><strong>Method of payment:</strong></p>
						<div class="col-sm-6">
							<div class="radio">
								<label>
									<input type="radio" name="method_of_payment" ng-model="service.data.method_of_payment" value="cash" required> Cash
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="method_of_payment" ng-model="service.data.method_of_payment" value="card" required> Card
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="method_of_payment" ng-model="service.data.method_of_payment" value="cheque" required> Cheque
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4 col-sm-offset-4 text-right">
					<div class="input-group">
						<input type="text" name="invoice_date" class="form-control" show-button-bar="false" datepicker-options="{showWeeks: false}" is-open="show_invoice_date" ng-click="show_invoice_date = true" uib-datepicker-popup="dd-MM-yyyy" placeholder="Date" ng-model="service.data.invoice_date" />
						<span class="input-group-addon" ng-click="show_invoice_date = true">
							<i class="fa fa-calendar" data-date-icon="fa fa-calendar" data-time-icon="fa fa-clock-o"></i>
						</span>
					</div>
					<div class="text-right" ng-show="service.data.creator">
						Created by <strong>{[{ service.data.creator.name }]}</strong>
					</div>
				</div>
			</div>
			<div class="sales-basket" drop-accept="product" ng-init="service.types = {{ json_encode($types) }}">
				<table class="table">
					<thead class="table-header">
						<th style="width: 150px;">Type</th>
						<th style="width: 30px;"></th>
						<th>Product Name</th>
						<th>Quantity</th>
						<th>Price</th>
						<th>VAT</th>
						<th>Total</th>

						@if (Auth::user()->isMemberOf(5))
							<th class="text-center">Ignore Stock <i class="fa fa-info-circle" uib-tooltip="If ticked, the quantity will not be deducted from stock."></i></th>
						@endif

						<th></th>
					</thead>
					<tbody>
						<tr ng-repeat="product in service.data.items track by $index" ng-class="{refunded: product.refunded == 1 }">
							<td>
								<select name="type" ng-model="product.type" ng-options="o.value as o.name for o in service.types" class="form-control" required></select>
							</td>
							<td>
								<i class="fa fa-cube" tooltip="Stock Item" ng-show="product.stock_id"></i>
							</td>
							<td class="product-name-cell">
								<textarea class="form-control" ng-model="product.name" name="product_name[]" autocomplete="off" product-search search-auto-insert="true" search-callback="service.updateProduct(product, ev, data)" rows="1"></textarea>
							</td>
							<td>
								<input type="text" ng-model="product.quantity" name="quantity" style="width: 50px; background-color: #f8f9fa;" autocomplete="off" numbers-only>
							</td>
							<td><input type="text" ng-model="product.price_sold_exc" name="price_sold_exc" style="width: 50px; background-color: #f8f9fa;" autocomplete="off" numbers-only></td>
							<td>{[{ service.getVATPrice(product.price_sold_exc * product.quantity) }]}</td>
							<td>{[{ service.getTotalPrice(product.price_sold_exc * product.quantity) | currency:"£" }]}</td>

							@if (Auth::user()->isMemberOf(5))
								<td class="text-center">
									<div class="checkbox">
										<label>
											<input type="checkbox" name="ignore_stock" ng-model="product.ignore_stock" ng-checked="product.ignore_stock == '1'" value="1">
										</label>
									</div>
								</td>
							@endif

							<td>
								<div class="btn-group pull-right">
									<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="refund(product)" ng-hide="!product.id || product.refunded == 1" data-eat-click><i class="fa-fw fa-rotate-left"></i> Refund</a></li>
										<li><a tabindex="-1" href="#" ng-click="service.remove($index)" ng-hide="service.data.id && product.id" data-eat-click><i class="fa-fw fa fa-times"></i> Delete</a></li>
										@if (Auth::user()->isMemberOf(5))
											{{-- If the user is member of accounts team then he can delete items from saved invoices --}}
											<li><a tabindex="-1" href="#" ng-click="service.remove($index)" ng-show="service.data.id && product.id" data-eat-click><i class="fa-fw fa fa-times"></i> Delete</a></li>
										@endif
									</ul>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="8">
								<a href="#" ng-click="service.newLine($event)" data-eat-click>Add new line</a>
							</td>
						</tr>
					</tbody>
					<div class="alert-danger" ng-if="errors">
						{[{ errors }]}
					</div>
				</table>
			</div>
			<div class="row">
				<div class="col-sm-2">
					<div class="form-group">
						<div class="checkbox">
							<label>
								<input type="checkbox" ng-model="service.data.include_vat" value="1" /> Prices Include VAT
								<input type="hidden" ng-model="service.data.vat" ng-init="service.data.vat = '{!! Config::get('settings.vat') !!}'" />
							</label>
						</div>
					</div>
					<br>
					<h1 class="text-success text-center" ng-show="service.data.paid == '1'">PAID</h1>
				</div>
				<div class="col-sm-4 col-sm-offset-6 total-price text-right">
					<h4>Subtotal: {[{ service.subtotal | currency:"£" }]}</h4>
					<h4>Tax: {[{ service.tax | currency:"£" }]}</h4>
					<h2>Total: {[{ service.total | currency:"£" }]}</h2>
					<div ng-show="service.data.id && type != 'quote'">
						<hr>
						<h4 ng-class="{'text-danger': service.data.amount_due > 0}">DUE: {[{ service.data.amount_due | currency:"£" }]} ({[{ service.data.total_paid | currency:"£" }]} total paid)</h4>
					</div>
				</div>
			</div>
			<div ng-show="service.data.id && type != 'quote'">
				<div class="alert alert-warning" ng-repeat="email in service.data.emails">
					<i class="fa fa-bullhorn"></i> <strong>{[{ email.creator.name }]}</strong> emailed the invoice to <strong>{[{ email.sent_to }]}</strong> <span class="pull-right" tooltip="{[{ email.created_at }]}"><i class="fa fa-clock-o"></i> {[{ email.created_at | fromNow }]}</span>
				</div>

				<div class="headline">
					<h4>Payment transactions</h4>
				</div>
				<div class="alert alert-info" ng-show="service.data.transactions.length == 0">
					<i class="fa fa-info-circle"></i> There are no payments made against this invoice
				</div>
				<table class="table table-striped">
					<tbody>
						<tr ng-repeat="transaction in service.data.transactions | orderBy:'payment_date'">
							<td><i ng-class="{'fa fa-arrow-right': transaction.type == 'debit', 'fa fa-arrow-left': transaction.type == 'credit'}"></i></td>
							<td>{[{ transaction.payment_date | date:"dd/MM/yyyy" }]}</td>
							<td>{[{ transaction.method_of_payment | capitalize }]}</td>
							<td>{[{ transaction.amount | currency:"£" }]}</td>
							<td>{[{ transaction.notes }]}</td>
							<td>{[{ transaction.creator.name }]}</td>
							<td><span tooltip="{[{ transaction.created_at }]}"><i class="fa fa-clock-o"></i> {[{ transaction.created_at | fromNow }]}</span></td>
							<td><a href="#" ng-confirm-click="Are you sure you want to delete this payment? This action cannot be undone!" data-eat-click confirmed-click="service.deletePayment(transaction)">Delete</a></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="form-actions" style="background-color: #f8f9fa; padding: 30px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center;">
				<!-- Payment Section - Left Corner (only for invoices with amount due) -->
				<div class="payment-section" ng-show="service.data.id && type == 'invoice' && service.data.amount_due > 0" style="display: flex; align-items: center;">
					<div style="display: flex; align-items: center;">
						<h5 style="margin: 0; display: flex; align-items: center;"><i class="fa fa-credit-card"></i> Take Payment</h5>
						<div class="payment-buttons" style="display: flex; align-items: center; margin-left: 15px;">
							<button class="btn btn-success" ng-click="service.showPaymentModal('cash')" ng-disabled="service.data.amount_due == '0'" style="margin-right: 5px; height: 34px; line-height: 1.42857143;">
								<i class="fa fa-money"></i> Cash
							</button>
							<button class="btn btn-success" ng-click="service.showPaymentModal('card')" ng-disabled="service.data.amount_due == '0'" style="margin-right: 5px; height: 34px; line-height: 1.42857143;">
								<i class="fa fa-credit-card"></i> Card
							</button>
							<button class="btn btn-success" ng-click="service.showPaymentModal('cheque')" ng-disabled="service.data.amount_due == '0'" style="margin-right: 5px; height: 34px; line-height: 1.42857143;">
								<i class="fa fa-file"></i> Cheque
							</button>
							<button class="btn btn-success" ng-click="service.showPaymentModal('bacs')" ng-disabled="service.data.amount_due == '0'" style="height: 34px; line-height: 1.42857143;">
								<i class="fa fa-university"></i> BACS
							</button>
						</div>
					</div>
				</div>
				
				<!-- Action Buttons - Right Corner -->
				<div style="display: flex; align-items: center; margin-left: auto;">
					<div class="btn-group margin">
						
						<button class="btn btn-primary" ng-disabled="service.isBusy || service.loading" ng-click="save()" data-eat-click style="height: 34px; line-height: 1.42857143;">
							<i ng-class="{'fa-spinner fa-spin': service.loading, 'fa-floppy-o': !service.loading}" class="fa"></i>
							<span ng-if="!service.loading">&nbsp; Save</span>
							<span ng-if="service.loading">&nbsp; Saving...</span>
						</button>
						<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" ng-disabled="service.isBusy || service.loading" style="height: 34px; line-height: 1.42857143;">
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu pull-right text-left">
							<!-- dropdown menu links -->
							<li><a tabindex="-1" href="#" ng-click="save(true)" data-eat-click><i class="fa-fw fa fa-print"></i> Save and print</a></li>
							<li><a tabindex="-1" href="#" ng-click="save(false, true)" data-eat-click><i class="fa-fw fa fa-envelope"></i> Save and email</a></li>
							<li><a tabindex="-1" href="#" ng-click="service.showEmailModal()" ng-show="service.data.invoice_number" data-eat-click><i class="fa-fw fa fa-envelope"></i> Email</a></li>
							<li><a tabindex="-1" href="#" ng-click="service.print()" ng-show="service.data.invoice_number" data-eat-click><i class="fa-fw fa fa-print"></i> Print Receipt</a></li>
						</ul>
					</div>
					<button class="btn btn-success" ng-confirm-click="Are you sure you want to convert this quote to an invoice? This action CANNOT BE UNDONE!" confirmed-click="convertToInvoice()" ng-show="service.data.id && type == 'quote'" style="margin-left: 10px; height: 34px; line-height: 1.42857143;"><i class="fa fa-random"></i> Convert to Invoice</button>
					@if (Auth::user()->isMemberOf(array(4,5)))
						<button class="btn btn-danger" ng-confirm-click="Are you sure you want to delete this invoice? This action CANNOT BE UNDONE!" confirmed-click="service.deleteInvoice(type)" ng-show="service.data.id" style="margin-left: 10px; height: 34px; line-height: 1.42857143;"><i class="fa fa-times"></i> Delete</button>
					@endif
				    <button type="button" class="btn btn-warning margin" ng-click="reset()" style="margin-left: 10px; height: 34px; line-height: 1.42857143;">
				    	<i class="fa fa-refresh"></i> New Invoice
				    </button>
					<!-- Xero Sync Button - positioned last with spacing -->
					<button class="btn btn-primary" 
							ng-if="service.data.id" 
							ng-click="sendToXero()" 
							ng-disabled="service.data.xeroId || service.data.xero_syncing || service.isBusy"
							style="background-color: #0078c8; color: white; border-color: #0078c8; margin-left: 30px; height: 34px; line-height: 1.42857143;">
						<i ng-class="{'fa-spinner fa-spin': service.data.xero_syncing, 'fa-cloud': !service.data.xero_syncing && !service.data.xeroId, 'fa-check': service.data.xeroId}" class="fa"></i>
						<span ng-if="!service.data.xeroId && !service.data.xero_syncing">&nbsp; Send to Xero</span>
						<span ng-if="service.data.xero_syncing">&nbsp; Syncing...</span>
						<span ng-if="service.data.xeroId">&nbsp; Synced to Xero</span>
					</button>
				</div>
		    </div>
		</div>
	</div>
	<div class="loading-mask" ng-show="service.loading">
		<h1><i class="fa fa-spinner fa-spin"></i> Saving invoice...</h1>
	</div>
</div>
