<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/products">Products</a></li>
	<li class="active">Import From Quickbooks</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-midnightblue">
				<div class="panel-heading">
					<h2>Import From Quickbooks</h2>
					<div class="panel-ctrls">
						<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-8">
							<input type="text" class="form-control" ng-model="searchInput" placeholder="Search here...">
						</div>
						<div class="col-sm-4">
							<select class="form-control" name="_statusFilter" id="_statusFilter" ng-model="vm._statusFilter">
								<option value="">-- Select --</option>
								<option value="Not Imported">Not Imported</option>
								<option value="Imported">Imported</option>
							</select>
						</div>
					</div>
					<div style="max-height: 500px; overflow-y: auto;">
						<table class="table table-striped">
							<thead>
								<tr>
									<th width="5%"><input type="checkbox" ng-model="_selectedAll" ng-click="vm._selectAll(_selectedAll)" /></th>
									<th width="5%">ID</th>
									<th>Name</th>
									<th class="hidden-xs">SKU</th>
									<th class="hidden-xs">Description</th>
									<th>Cost</th>
									<th>Unit Price</th>
									<th>Status</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="product in vm.filteredProducts = (vm.products | filter: searchInput | filter: vm._filterByStatus)">
									<td><input type="checkbox" ng-disabled="product.status == 'Imported'" checklist-model="vm._selectedProducts" checklist-value="product.id" /></td>
									<td>{{product.id}}</td>
									<td>{{product.name}}</td>
									<td class="hidden-xs">{{product.sku}}</td>
									<td class="hidden-xs">{{product.description}}</td>
									<td>{{product.cost | currency: "$"}}</td>
									<td>{{product.price | currency: "$"}}</td>
									<td><span class="label" ng-class="{'label-success': product.status == 'Imported', 'label-danger': product.status == 'Not Imported'}">{{product.status}}</span></td>
								</tr>
							</tbody>
						</table>
					</div>
					<p class="text-center" ng-show="vm.products.length == 0">No records found</p>
				</div>
				<div class="panel-footer" ng-show="vm.products.length > 0">
					<div class="row">
						<div class="col-xs-12 col-sm-4 text-center">
							<a ng-disabled="vm._noMoreProductsToLoad" ng-click="vm._loadMore()" class="btn-warning btn">Load More {{vm._total}} Product(s)</a>
						</div>
						<div class="col-xs-12 col-sm-4 text-center">{{vm.filteredProducts.length}} Record(s) Found</div>
						<div class="col-xs-12 col-sm-4 text-center">
							<a ng-disabled="vm._selectedProducts.length == 0 || !vm._importButton" ng-click="vm._importProducts()" class="btn-info btn">Import {{vm._selectedProducts.length}} Product(s)</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
