<div class="widget">
	<div class="widget-content">
		<div class="headline">
			<h4><i class="fa fa-fw fa-shopping-cart"></i> Products to order</h4>
		</div>
		<br>
		<div class="clearfix">
			@if (Auth::user()->hasPermission('edit_stock'))
				<a href="#stock/new_order" class="btn btn-large btn-primary"><i class="fa fa-plus"></i> Add new order</a>
			@endif
			<div class="pull-right">
	        	<div class="input-group">
					<input type="text" class="form-control" placeholder="Search" ng-model="vm.query" ng-model-options="{ debounce: {'default': 500, 'blur': 0} }" />
					<span class="input-group-addon">
						<i class="fa fa-search"></i>
					</span>
				</div>
			</div>
		</div>

		<table class="table table-condensed table-striped" style="margin-top: 20px;">
			<thead class="table-header">
				<tr>
					<th></th>
					<th>Model Number</th>
					<th>Name</th>
					<th class="centered">Buffer</th>
					<th class="centered">In Stock</th>
					<th class="centered">To Order</th>
					<th class="centered">Price (exc VAT)</th>
					<th class="centered">Price (inc VAT)</th>
					<th class="centered">Cost (exc VAT)</th>
					<th>Requested Date</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="product in vm.products"
					ng-class="{'red-highlight': ((product.quantity_to_order > 0 && (product.severity_id == '3' || product.severity_id == '4')) || (product.requested_date | diff:'hours') > 12 ) }"
					ng-hide="(data.search_type == 'requested' && product.quantity_to_order == 0) || data.search_type == 'under_buffer' && product.quantity > product.buffer">

					<td><span ng-show="product.approval_required == 1" class="text-danger"><i class="fa fa-bell"></i></span></td>
					<td>{[{ product.model_number }]}</td>
					<td><a ng-href="#/stock?query={[{ product.name }]}" target="_blank">{[{ product.name }]}</a></td>
					<td class="centered">{[{ product.buffer }]}</td>
					<td class="centered" ng-style="{ fontSize: product.unlimited ? '1.5em' : '100%' }">{[{ product.unlimited ?  "&#8734;" : product.quantity }]}</td>
					<td class="centered">{[{ product.quantity_to_order }]}</td>
					<td class="centered">{[{ product.price_excluding_vat | currency: "£" }]}</td>
					<td class="centered">{[{ product.cost ? (product.cost | currency: "£"): 'Unknown' }]}</td>
					<td class="centered">{[{ product.retail_price | currency: "£"}]}</td>
					<td>{[{ product.requested_date | fromNow }]}</td>
				</tr>
			</tbody>
		</table>
		<div paginator="vm.paginator"></div>
	</div>
</div>
<div class="widget">
	<div class="widget-content">
		<div class="headline">
			<h4><i class="fa fa-fw fa-exclamation-triangle"></i> Under buffer items</h4>
		</div>
		<br>
		<div class="clearfix">
			@if (Auth::user()->hasPermission('edit_stock'))
				<a href="#stock/new_order" class="btn btn-large btn-primary"><i class="fa fa-plus"></i> Add new order</a>
			@endif
			<div class="pull-right">
	        	<div class="input-group">
					<input type="text" class="form-control" placeholder="Search" ng-model="vm.query" ng-model-options="{ debounce: {'default': 500, 'blur': 0} }" />
					<span class="input-group-addon">
						<i class="fa fa-search"></i>
					</span>
				</div>
			</div>
		</div>

		<table class="table table-condensed table-striped" style="margin-top: 20px;">
			<thead class="table-header">
				<tr>
					<th></th>
					<th>Model Number</th>
					<th>Name</th>
					<th class="centered">Buffer</th>
					<th class="centered">In Stock</th>
					<th class="centered">To Order</th>
					<th class="centered">Ordered</th>
					<th class="centered">Price (exc VAT)</th>
					<th class="centered">Price (inc VAT)</th>
					<th class="centered">Cost (exc VAT)</th>
					<th>Requested Date</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="product in vm.products_ub"
				ng-class="{
					'red-highlight': ((product.quantity_to_order > 0 && (product.severity_id == '3' || product.severity_id == '4')) || (product.requested_date | diff:'hours') > 12 ),
					'green-highlight' : product.ordered_quantity > (product.buffer - product.quantity) || (product.buffer - product.quantity > 0 && product.ordered_quantity + product.quantity >= (product.buffer - product.quantity) + product.quantity) || (product.ordered_quantity == product.buffer && product.buffer > 0),
					'orange-highlight' : (product.ordered_quantity == 0 && product.buffer - product.quantity > 0 && product.quantity != 0),
					'red-highlight' : product.ordered_quantity == 0 && (product.buffer - product.quantity) > 0 && product.quantity == 0
				}">
					<td><span ng-show="product.approval_required == 1" class="text-danger"><i class="fa fa-bell"></i></span></td>
					<td>{[{ product.model_number }]}</td>
					<td><a ng-href="#/stock?query={[{ product.name }]}" target="_blank">{[{ product.name }]}</a></td>
					<td class="centered">{[{ product.buffer }]}</td>
					<td class="centered" ng-style="{ fontSize: product.unlimited ? '1.5em' : '100%' }">{[{ product.quantity }]}</td>
					<td class="centered">{[{ product.ordered_quantity - (product.buffer - product.quantity) >= 0 ? 0 : (product.buffer - product.quantity) -  product.ordered_quantity }]}</td>
					<td class="centered">{[{ product.ordered_quantity }]}</td>
					<td class="centered">{[{ product.price_excluding_vat | currency: "£" }]}</td>
					<td class="centered">{[{ product.cost ? (product.cost | currency: "£"): 'Unknown' }]}</td>
					<td class="centered">{[{ product.retail_price | currency: "£"}]}</td>
					<td>{[{ product.requested_date | fromNow }]}</td>
				</tr>
			</tbody>
		</table>
		<div paginator="vm.paginator"></div>
	</div>
</div>