<div class="row">
	<div class="col-sm-4">
		<div class="widget">
			<div class="widget-content text-center">
				<h1>{[{ stats.delivered_orders}]}</h1>
				<h3>Delivered Orders</h3>
			</div>
		</div>
	</div>
	<div class="col-sm-4">
		<div class="widget">
			<div class="widget-content text-center">
				<h1>{[{ stats.total_orders - stats.cancelled_orders - stats.delivered_orders }]}</h1>
				<h3>Pending Orders</h3>
			</div>
		</div>
	</div>
	<div class="col-sm-4">
		<div class="widget">
			<div class="widget-content text-center">
				<h1>{[{ stats.cancelled_orders}]}</h1>
				<h3>Cancelled Orders</h3>
			</div>
		</div>
	</div>
</div>

<div class="widget">
	<div class="widget-content">
		<div class="headline">
			<h4>Purchase Orders</h4>
		</div>
		<br>
		<div class="row">
			<div class="col-sm-3">
				<div class="form-inline">
					<strong class="muted">Records: </strong>
					<select name="items" ng-model="filters.limit" class="form-control">
						<option value="10">10</option>
						<option value="20">20</option>
						<option value="50">50</option>
						<option value="100">100</option>
					</select>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="pull-right">
					<div class="form-inline">
				        <strong class="muted" >Status: </strong>
		                <select name="status_id" class="form-control" ng-model="filters.status_id">
		                	<option ng-selected=" ! filters.status_id" value="">All Statuses </option>
		                	<option ng-repeat="status in statuses" value="{[{ status.id }]}">{[{status.name}]}</option>
		                </select>
			        </div>
		        </div>
            </div>
			<div class="col-sm-3">
				<div class="input-group">
					<input type="text" class="form-control" placeholder="Search by reference number" ng-model="filters.search" />
					<span class="input-group-addon">
						<i class="fa fa-search"></i>
					</span>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="input-group">
					<input type="text" class="form-control" placeholder="Search by serial number" ng-model="filters.serial_number" />
					<span class="input-group-addon">
						<i class="fa fa-search"></i>
					</span>
				</div>
			</div>
		</div>

		<br>

		<div class="row">
			<div ng-show="loading">
				<i class="fa fa-spinner fa-spin"></i> Loading orders, please be patient...
				<br>
			</div>
		</div>

		<table class="table table-striped">
			<thead class="table-header">

				<th>Date</th>
				<th>Status</th>
				<th>Supplier</th>
				<th>Items Cost</th>
				<th>Delivery Cost</th>
				<th>Discount Amount</th>
				<th>Total Cost</th>
				<th>Total VAT</th>
				<th>Total Paid</th>
				<th></th>
			</thead>
			<tbody>
				<tr ng-if="orders.length == 0 && !loading"><td colspan="10"> No orders to show</td></tr>
				<tr ng-repeat="order in orders">
					<td><span tooltip="{[{ ::order.created_at | date:'yyyy-MM-dd h:mm:ss a' }]}">{[{ ::order.created_at | date:'dd-MM-yyyy h:mm:ss a' }]}</span></td>
					<td>
						<span class="label label-danger" ng-if=" order.status.name == 'Cancelled'">Cancelled</span>
						<span class="label label-warning" ng-if=" order.status.name == 'Ordered'">Ordered</span>
						<span class="label label-success" ng-if=" order.status.name == 'Delivered'">Delivered</span>
					</td>
					<td>{[{ order.supplier.name }]}</td>
					<td>{[{ order.items_cost | currency : "£" }]}</td>
					<td>{[{ order.delivery_cost | currency : "£" }]}</td>
					<td>{[{ order.discount_amount | currency : "£"}]}</td>
					<td>{[{ order.total_cost | currency : "£" }]}</td>
					<td>{[{ order.total_cost * ( 1 + order.vat/100 ) | currency : "£" }]}</td>
					<td>{[{ order.total_paid | currency : "£" }]}</td>
					<td style="text-align:right;">
						@if (Auth::user()->hasPermission('edit_stock'))
							<a class="btn btn-warning" href="#stock/order-summary/{[{ order.id }]}/"><i class="fa fa-pencil"></i></a>
							<span class="btn btn-danger" ng-disabled="order.status.name != 'Ordered'" ng-confirm-click="Are you sure you want to cancel this order?" confirmed-click="cancel(order)" ng-show="order.id"><i class="fa fa-times"></i></span>
						@endif
					</td>
				</tr>
			</tbody>
		</table>
		<div paginator="paginator"></div>
		@if (Auth::user()->hasPermission('edit_stock'))
			<div class="form-actions text-right">
				<a href="#stock/new_order" class="btn btn-primary"><i class="fa fa-plus"></i> Add new order</a>
			</div>
		@endif
	</div>
</div>

<script type="text/ng-template" id="stock/new_order.html">
	@include('stock::new_order')
</script>
<script type="text/ng-template" id="stock/order.html">
	@include('stock::order')
</script>