<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/estimates">Estimates</a></li>
	<li class="active">Estimate 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.estimate.number}}</td>
							</tr>
							<tr>
								<th>Date:</th>
								<td>{{vm.estimate.date_formatted}}</td>
							</tr>
							<tr>
								<th>Expiration Date:</th>
								<td>{{vm.estimate.expiration_date_formatted}}</td>
							</tr>
							<tr>
								<th>Customer:</th>
								<td>
									<a href="#/customers/{{vm.estimate.customer.id}}">
										{{vm.estimate.customer.name}}
									</a>
								</td>
							</tr>
							<tr>
								<th>Property:</th>
								<td>
									<a href="#/properties/{{vm.estimate.customer.id}}/detail/{{vm.estimate.property.id}}">
										{{vm.estimate.property.location['address']}}
									</a>
								</td>
							</tr>
							<tr>
								<th>Send To:</th>
								<td>{{vm.estimate.send_to}}</td>
							</tr>
							<tr>
								<th>Discount:</th>
								<td>{{vm.estimate.discount | currency: "$"}}</td>
							</tr>
							<tr>
								<th>Amount:</th>
								<td>{{vm.estimate.amount | currency: "$"}}</td>
							</tr>
							<tr ng-if="vm.estimate.cost">
								<th>Job Cost:</th>
								<td>{{vm.estimate.cost | currency: "$"}}</td>
							</tr>
							<tr ng-if="vm.estimate.gross_profit">
								<th>Gross Profit:</th>
								<td>{{vm.estimate.gross_profit | currency: "$"}}</td>
							</tr>
							<tr>
								<th>Status:</th>
								<td><span class="badge" ng-class="{'badge-danger': vm.estimate.status_formatted == 'Rejected', 'badge-info': vm.estimate.status_formatted == 'Closed', 'badge-default': vm.estimate.status_formatted == 'Open', 'badge-success': vm.estimate.status_formatted == 'Accepted'}">{{vm.estimate.status_formatted}}</span></td>
							</tr>
							<tr>
								<th>Status Date:</th>
								<td>{{vm.estimate.status_date_formatted}}</td>
							</tr>
							<tr ng-if="vm.estimate.about">
								<th>About:</th>
								<td>{{vm.estimate.about}}</td>
							</tr>
							<tr ng-if="vm.estimate.quickbooks_id">
								<th>Quickbooks ID:</th>
								<td>{{vm.estimate.quickbooks_id}}</td>
							</tr>
							<tr ng-if="vm.estimate.attachments.length">
								<th>Attachments:</th>
								<td>
									<div ng-repeat="attachment in vm.estimate.attachments">
										<a href="{{attachment.url}}" target="_blank">{{attachment.name}}</a>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<table class="table table-bordered">
						<thead>
							<tr>
								<th class="hidden-xs" width="10%">#</th>
								<th>Name</th>
								<th class="hidden-xs">Description</th>
								<th width="10%">Type</th>
								<th width="10%">Unit Price</th>
								<th width="10%">Qty</th>
								<th class="hidden-xs" width="15%">Sub Total</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="item in vm.estimate.description">
								<td class="hidden-xs">{{item.id}}</td>
								<td>{{item.name}}</td>
								<td class="hidden-xs">{{item.description}}</td>
								<td>{{item.type}}</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="7" class="text-right">
									<b>SubTotal:</b> {{(vm.estimate.amount*1) + (vm.estimate.discount*1) | currency: "$"}}<br />
									<b>Discount:</b> {{vm.estimate.discount | currency: "$"}}<br />
									<b>Total:</b> {{vm.estimate.amount | currency: "$"}}
								</td>
							</tr>
						</tfoot>
					</table>
				</tab>
				<li class="tab-controls dropdown" dropdown>
					<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><a href="#/estimates/{{vm.estimate.id}}/edit">Edit</a></li>
						<li><a ng-click="vm._destroy(vm.estimate.id)">Delete</a></li>
						<li class="divider"></li>
						<li ng-if="vm.estimate.status_formatted != 'Accepted'"><a ng-click="vm._accept(vm.estimate.id)">Accept Estimate</a></li>
						<li ng-if="vm.estimate.status_formatted != 'Closed'"><a ng-click="vm._close(vm.estimate.id)">Close Estimate</a></li>
						<li ng-if="vm.estimate.status_formatted != 'Open'"><a ng-click="vm._open(vm.estimate.id)">Open Estimate</a></li>
						<li ng-if="vm.estimate.status_formatted != 'Rejected'"><a ng-click="vm._reject(vm.estimate.id)">Reject Estimate</a></li>
						<li class="divider" ng-if="vm.estimate.status_formatted == 'Accepted'"></li>
						<li ng-if="vm.estimate.status_formatted == 'Accepted'"><a ng-click="vm._createWorkOrder(vm.estimate.id)">Create Work Order</a></li>
						<li class="divider"></li>
						<li><a ng-click="vm._resend(vm.estimate.id)">Re-send</a></li>
						<li class="divider" ng-if="vm._checkSendToQuickbooks(vm.estimate)"></li>
						<li ng-if="vm._checkSendToQuickbooks(vm.estimate)">
							<a ng-click="vm._sendToQuickbooks(vm.estimate.id)">
								<span ng-if="!vm.estimate.quickbooks_id">Add To Quickbooks</span>
								<span ng-if="vm.estimate.quickbooks_id">Update To Quickbooks</span>
							</a>
						</li>
					</ul>
				</li>
			</tabset>
		</div>
	</div>
</div>
