<div class="row">
	{{-- Starts Order details widget --}}
	<div class="col-sm-4">
		<div class="widget">
			<div class="widget-content">
				<div class="headline">
					<h4>New Purchase Order Details</h4>
				</div>
				<br>

				<div class="form-horizontal">
					<div class="form-group">
		                <label class="col-sm-3 control-label" for="inputSupplier">Supplier</label>
		                <div class="col-sm-9">
		                	<div class="input-group">
		                    	<select class="form-control" id="inputSupplier" name="supplier_id" ng-model="order.supplier_id" ng-options="o.id as o.name for o in suppliers">
		                    		<option value="">Select a supplier</option>
		                    	</select>
		                    	<span ng-click="addSupplier()" class="input-group-addon"><i class="fa fa-plus"></i></span>
		                    </div>
		                </div>
		            </div>
		            <div class="form-group">
		                <label class="col-sm-3 control-label" for="inputOrderReference">Reference Number</label>
		                <div class="col-sm-9">
		                    <input class="form-control" id="inputOrderReference" type="text" name="name" ng-model="order.reference_number" required>
		                </div>
		            </div>
		            <div class="form-group">
		                <label class="col-sm-3 control-label" for="inputDeliveryCost">Delivery Cost Amount</label>
		                <div class="col-sm-9">
		                	<div class="input-group">
			                	<span class="input-group-addon"><strong>&pound;</strong></i></span>
			                    <input class="form-control" id="inputDeliveryCost" type="number" step="any" name="delivery_cost" ng-model="order.delivery_cost" required>
			                    <span class="input-group-addon">
									<input type="checkbox" name="delivery_vat_included" value="1" ng-model="order.delivery_vat_included"> <strong>VAT</strong>
			                    </span>
							</div>
		                </div>
		            </div>
		            <div class="form-group">
		                <label class="col-sm-3 control-label" for="inputDiscountAmount">Discount Amount</label>
		                <div class="col-sm-9">
		                	<div class="input-group">
			                	<span class="input-group-addon"><strong>&pound;</strong></i></span>
			                    <input class="form-control" id="inputDiscountAmount" type="number" step="any" name="discount_amount" ng-model="order.discount_amount" rquired>
			                    <span class=input-group-addon>
									<input type="checkbox" name="discount_vat_included" value="1" ng-model="order.discount_vat_included"> <strong>VAT</strong>
								</span>
							</div>
		                </div>
					</div>
					<div class="form-group">
						<label
							class="col-sm-3 control-label"
							for="inputPayment"
						>
							Method Of Payment
						</label>
						<div class="col-sm-9">
							<div class="input-group">
								<select 
									class="form-control"
									id="inputPayment"
									name="payment_id"
									ng-model="order.payment_id"
									ng-options="o.AccountID as o.AccountName for o in payments"
								>
		                    		<option value="">
										Select a payment method
									</option>
								</select>
								<span ng-click="addPayment()" class="input-group-addon">
									<i class="fa fa-plus"></i>
								</span>
								</div>
						</div>
					</div>


		            <div class="form-group">
	            		<label class="col-sm-3 control-label">Items include <strong>VAT</strong></label>
	            		<div class="col-sm-9">
		                    <label class="radio-inline">
		                    	<input type="radio" name="items_vat_included" value="1" ng-model="order.items_vat_included"> Yes
		                    </label>
		                    <label class="radio-inline">
		                    	<input type="radio" name="items_vat_included" value="0" ng-model="order.items_vat_included"> No
		                    </label>
		                </div>
		            </div>
		        </div>
			</div>
		</div>
	</div>
	<!-- Ends order details widget -->

	<!-- Starts order products list -->
	<div class="col-sm-8">
		<div class="widget">
			<div class="widget-content">

				<div class="headline">
					<h4>Products added to the order</h4>
				</div>
				<br>
				<div class="alert alert-danger" ng-if="errors">
	              	<span ng-bind-html="errors"></span>
	            	<br>
	            </div>

	            <table class="table table-striped">
					<thead class="table-header">
						<th>Name</th>
						<th class="centered">Cost</th>
						<th class="centered">Quantity</th>
						<th></th>
					</thead>
					<tbody>
						<tr ng-show="order.products.length == 0"><td colspan="4">No products added to the order.</td></tr>
						<tr ng-repeat="product in order.products" >
							<td>{[{ product.name }]}</td>
							<td class="centered"><input type="text" class="form-control" ng-model="product.unit_cost"></td>
							<td class="centered"><input type="number" class="form-control" ng-model="product.units" ng-change="updateValues(product)"></td>
							<td>
								<span class="btn btn-danger pull-right" ng-click="removeFromOrderProducts(product)"><i class="fa-fw fa fa-trash-o"></i></span>
							</td>
						</tr>
					</tbody>
				</table>
				<br><br>
				<div class="text-right">
					<h2>Total: &pound;{[{ total() }]}</h2>
				</div>
				<div class="form-actions text-right">
			        <button class="btn btn-primary" ng-disabled="validateOrder() || loading" ng-click="saveOrder()"><i ng-if="loading" class="fa fa-spinner fa-spin"></i> Create</button>
			    </div>
			</div>

	    </div>
    </div>
    {{-- Ends order products list --}}

</div>


<div class="widget-content">
	<div class="headline">
		<h4>Search Products</h4>
	</div>
	<br>
	<div class="row">
		<div class="col-sm-4">
			<select class="form-control" ng-model="data.search_type">
				<option value="requested">Requested Products</option>
				<option value="all">All Products</option>
				<option value="under_buffer">Under buffer</option>
			</select>
		</div>
		<div class="col-sm-6">
			<div class="input-group pull-right">
				<input type="text" class="form-control" placeholder="Search" ng-model="data.search" />
				<span class="input-group-addon">
					<i class="fa fa-search"></i>
				</span>
			</div>
		</div>
		<div class="col-sm-2">
			@if (Auth::user()->hasPermission('edit_stock'))
				<span class="btn btn-success" ng-click="addNewProduct()" >New Product</span>
			@endif
		</div>
	</div>

	<br>

	<table class="table table-condensed table-striped">
		<thead>
			<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>
			<th></th>
		</thead>
		<tbody>
			<tr ng-repeat="product in products"
			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
			}"
			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>{[{ product.name }]}</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 > 0 ? product.quantity_to_order : 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>
				<td>
					@if (Auth::user()->hasPermission('edit_stock'))
						<span class="btn btn-sm btn-warning" ng-click="edit(product)" uib-tooltip="Edit product"><i class="fa-fw fa fa-pencil"></i></span>
					@endif
				</td>
				<td>
					<span class="btn btn-sm btn-success" ng-click="addToOrderProducts(product)" uib-tooltip="Add to order list"><i class="fa-fw fa fa-plus"></i></span>
				</td>
				<td>
					<span class="btn btn-sm btn-primary" ng-click="itemOrders(product)" uib-tooltip="Previous purchase prices"><i class="fa-fw fa fa-list"></i></span>
				</td>
			</tr>
		</tbody>
	</table>
	<div paginator="paginator"></div>

</div>

<script type="text/ng-template" id="stock/item_orders.html">
	@include('stock::item_orders')
</script>
<script type="text/ng-template" id="stock/suppliers/modal.html">
	@include('stock::forms.supplier')
</script>

<script type="text/ng-template" id="stock/payment/modal.html">
	@include('stock::forms.Payment')
</script>