<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li class="active">Estimates</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-midnightblue">
				<div class="panel-heading">
					<h2>Estimates</h2>
					<div class="panel-ctrls">
						<a class="button-icon" ng-click="vm._downloadCSV()" title="Download CSV"><i class="ti ti-save"></i></a>
						<a class="button-icon" href="#/estimates/new" title="New Estimate"><i class="ti ti-plus"></i></a>
						<a class="button-icon" ng-click="vm._reload()" title="Reload"><i class="ti ti-reload"></i></a>
					</div>
				</div>
				<div class="panel-body">
					<div class="row" style="margin-bottom: 15px;">
						<div class="col-sm-6">
							<div class="input-group">
								<span class="input-group-addon">
									<i class="ti ti-calendar"></i>
								</span>
								<input type="text" ng-focus="vm._openCalendar($event, 'date_from')" class="form-control datepicker" is-open="vm.calendar_opened['date_from']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="date_from" id="date_from" ng-model="vm.date_from" placeholder="From">
								<span class="input-group-addon">
									<i class="ti ti-calendar"></i>
								</span>
								<input type="text" ng-focus="vm._openCalendar($event, 'date_to')" class="form-control datepicker" is-open="vm.calendar_opened['date_to']" datepicker-popup="MM/dd/yyyy" close-text="Close" name="date_to" id="date_to" ng-model="vm.date_to" placeholder="To">
								<span class="input-group-btn">
									<a ng-disabled="!vm.date_from && !vm.date_to" ng-click="vm._filterByDate()" class="btn btn-primary">Search</a>
								</span>
							</div>
						</div>
						<div class="col-sm-3">
							<select class="form-control" ng-model="vm.status_filter">
								<option value="">-- Status --</option>
								<option value="Accepted">Accepted</option>
								<option value="Closed">Closed</option>
								<option value="Open">Open</option>
								<option value="Rejected">Rejected</option>
								<option value="-1">All</option>
							</select>
						</div>
						<div class="col-md-3">
							<select class="form-control" ng-model="vm.quickbooks_filter">
								<option value="">-- Quickbooks --</option>
								<option value="Yes">Yes</option>
								<option value="No">No</option>
								<option value="-1">All</option>
							</select>
						</div>
					</div>
					<div class="row" style="margin-bottom: 15px;">
						<div class="col-sm-12">
							<input type="text" class="form-control" style="width: 100%;" ng-model="searchInput" placeholder="Search here...">
						</div>
					</div>
					<table class="table table-striped">
						<thead>
							<tr>
								<th>ID</th>
								<th>Date</th>
								<th class="hidden-xs">Expiration Date</th>
								<th class="hidden-xs">Customer</th>
								<th class="hidden-xs">Property</th>
								<th class="hidden-xs">Send To</th>
								<th class="hidden-xs">Amount</th>
								<th class="hidden-xs">Discount</th>
								<th>Status</th>
								<th class="hidden-xs">Quickbooks</th>
								<th width="15%">Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr dir-paginate="estimate in vm._filteredEstimates = (vm.estimates | filter: searchInput | filter: vm._filterByStatus | filter: vm._filterByQuickbooks) | itemsPerPage: 10">
								<td>
									<a href="#/estimates/{{estimate.id}}">
										{{estimate.number}}
									</a>
								</td>
								<td>{{estimate.date_formatted}}</td>
								<td class="hidden-xs">{{estimate.expiration_date_formatted}}</td>
								<td class="hidden-xs">
									<a href="#/customers/{{estimate.customer.id}}">
										{{estimate.customer.name}}
									</a>
								</td>
								<td class="hidden-xs">
									<a href="#/properties/{{estimate.customer.id}}/detail/{{estimate.property.id}}">
										{{estimate.property.location['address']}}
									</a>
								</td>
								<td class="hidden-xs">{{estimate.send_to}}</td>
								<td class="hidden-xs">{{estimate.amount | currency: "$"}}</td>
								<td class="hidden-xs">{{estimate.discount | currency: "$"}}</td>
								<td>
									<span class="badge" ng-class="{'badge-info': estimate.status_formatted == 'Closed', 'badge-default': estimate.status_formatted == 'Open', 'badge-success': estimate.status_formatted == 'Accepted', 'badge-danger': estimate.status_formatted == 'Rejected'}">{{estimate.status_formatted}}</span>
								</td>
								<td class="hidden-xs">
									<span ng-if="estimate.quickbooks_id">Yes</span>
									<span ng-if="!estimate.quickbooks_id">No</span>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
											<i class="ti ti-settings"></i>&nbsp;&nbsp;<span class="caret"></span>
										</button>
										<ul class="dropdown-menu" role="menu">
											<li><a href="#/estimates/{{estimate.id}}/edit">Edit</a></li>
											<li><a ng-click="vm._destroy(estimate.id)">Delete</a></li>
											<li class="divider"></li>
											<li ng-if="estimate.status_formatted != 'Accepted'"><a ng-click="vm._accept(estimate.id)">Accept Estimate</a></li>
											<li ng-if="estimate.status_formatted != 'Closed'"><a ng-click="vm._close(estimate.id)">Close Estimate</a></li>
											<li ng-if="estimate.status_formatted != 'Open'"><a ng-click="vm._open(estimate.id)">Open Estimate</a></li>
											<li ng-if="estimate.status_formatted != 'Rejected'"><a ng-click="vm._reject(estimate.id)">Reject Estimate</a></li>
											<li class="divider"></li>
											<li><a ng-click="vm._resend(estimate.id)">Re-send</a></li>
											<li class="divider" ng-if="estimate.status_formatted == 'Accepted'"></li>
											<li ng-if="estimate.status_formatted == 'Accepted'"><a ng-click="vm._createWorkOrder(estimate.id)">Create Work Order</a></li>
											<li class="divider" ng-if="vm._checkSendToQuickbooks(estimate)"></li>
											<li ng-if="vm._checkSendToQuickbooks(estimate)">
												<a ng-click="vm._sendToQuickbooks(estimate.id)">
													<span ng-if="!estimate.quickbooks_id">Add To Quickbooks</span>
													<span ng-if="estimate.quickbooks_id">Update To Quickbooks</span>
												</a>
											</li>
										</ul>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<p class="text-center" ng-show="vm.estimates.length == 0">No records found</p>
					<div class="row">
						<div class="col-sm-12 text-center">
							<dir-pagination-controls></dir-pagination-controls>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
