<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/invoices">Invoices</a></li>
	<li class="active">Invoice Details</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<tabset tab-theme="orange" tab-position="top">
				<tab heading="General Information">
					<table class="table">
						<tbody>
							<tr>
								<th width="15%">ID:</th>
								<td>{{vm.invoice.number}}</td>
							</tr>
							<tr>
								<th>Date:</th>
								<td>{{vm.invoice.date_formatted}}</td>
							</tr>
							<tr>
								<th>Due Date:</th>
								<td>{{vm.invoice.date_due_formatted}}</td>
							</tr>
							<tr>
								<th>Customer:</th>
								<td>
									<a href="#/customers/{{vm.invoice.customer.id}}">
										{{vm.invoice.customer.name}}
									</a>
								</td>
							</tr>
							<tr>
								<th>Property:</th>
								<td>
									<a href="#/properties/{{vm.invoice.customer.id}}/detail/{{vm.invoice.property.id}}">
										{{vm.invoice.property.location['address']}}
									</a>
								</td>
							</tr>
							<tr ng-if="vm.invoice.work_order_id">
								<th>Work Order:</th>
								<td>
									<a href="#/work-orders/{{vm.invoice.work_order_id}}">
										{{vm.invoice.work_order.number}}
									</a>
								</td>
							</tr>
							<tr>
								<th>Send By:</th>
								<td>
									<span class="label label-info" style="margin-right: 5px;" ng-repeat="option in vm.invoice.send_by">
										{{option}}
									</span>
								</td>
							</tr>
							<tr>
								<th>Discount:</th>
								<td>{{vm.invoice.discount | currency: "$"}}</td>
							</tr>
							<tr>
								<th>Amount:</th>
								<td>{{vm.invoice.amount | currency: "$"}}</td>
							</tr>
							<tr>
								<th>Status:</th>
								<td><span class="badge" ng-class="{'badge-danger': vm.invoice.status_formatted == 'Billed', 'badge-info': vm.invoice.status_formatted == 'Canceled', 'badge-success': vm.invoice.status_formatted == 'Paid'}">{{vm.invoice.status_formatted}}</span></td>
							</tr>
							<tr ng-if="vm.invoice.status_formatted == 'Paid'">
								<th>Payment Date:</th>
								<td>{{vm.invoice.date_paid_formatted}}</td>
							</tr>
							<tr ng-if="vm.invoice.about">
								<th>About:</th>
								<td>{{vm.invoice.about}}</td>
							</tr>
							<tr ng-if="vm.invoice.quickbooks_id">
								<th>Quickbooks ID:</th>
								<td>{{vm.invoice.quickbooks_id}}</td>
							</tr>
						</tbody>
					</table>
					<table class="table table-bordered">
						<thead>
							<tr>
								<th class="hidden-xs" width="10%">#</th>
								<th>Name</th>
								<th width="30%" class="hidden-xs">Description</th>
								<th width="15%">Price</th>
								<th width="15%">Qty</th>
								<th class="hidden-xs" width="15%">Sub Total</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="item in vm.invoice.description">
								<td class="hidden-xs">{{item.id}}</td>
								<td>{{item.name}}</td>
								<td class="hidden-xs">{{item.description}}</td>
								<td>{{item.price | currency: '$'}}</td>
								<td>{{item.qty}}</td>
								<td class="hidden-xs">{{item.qty * item.price | currency: '$'}}</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td colspan="6" class="text-right">
									<b>SubTotal:</b> {{(vm.invoice.amount*1) + (vm.invoice.discount*1) | currency: "$"}}<br />
									<b>Discount:</b> {{vm.invoice.discount | currency: "$"}}<br />
									<b>Total:</b> {{vm.invoice.amount | currency: "$"}}
								</td>
							</tr>
						</tfoot>
					</table>
				</tab>
				<li class="tab-controls dropdown" dropdown ng-if="vm.invoice.status_formatted != 'Paid' || vm._checkSendToQuickbooks(vm.invoice)">
					<a class="dropdown-toggle" dropdown-toggle>
						<i class="ti ti-settings"></i>&nbsp;&nbsp;Actions&nbsp;&nbsp;<span class="caret"></span>
					</a>
					<ul class="dropdown-menu pull-left">
						<li ng-if="vm.invoice.status_formatted == 'Canceled'"><a ng-click="vm._destroy(vm.invoice.id)">Delete</a></li>
						<li class="divider"></li>
						<li><a ng-click="vm._resend(vm.invoice.id)">ReSend</a></li>
						<li class="divider" ng-if="vm.invoice.status_formatted == 'Billed'"></li>
						<li ng-if="vm.invoice.status_formatted == 'Billed'"><a ng-click="vm._cancel(vm.invoice.id)">Cancel Invoice</a></li>
						<li ng-if="vm.invoice.status_formatted == 'Billed'"><a ng-click="vm._confirm(vm.invoice.id)">Confirm Payment</a></li>
						<li class="divider" ng-if="vm._checkSendToQuickbooks(vm.invoice)"></li>
						<li ng-if="vm._checkSendToQuickbooks(vm.invoice)">
							<a ng-click="vm._sendToQuickbooks(vm.invoice.id)">
								<span>Add To Quickbooks</span>
							</a>
						</li>
					</ul>
				</li>
			</tabset>
		</div>
	</div>
</div>
