<div class="row">
	<div class="col-sm-3">
		<div class="widget">
			<div class="widget-content text-center">
				<h1>{!! $total_items !!}</h1>
				<h3>Stock Items</h3>
			</div>
		</div>
	</div>
	<div class="col-sm-3">
		<div class="widget">
			<div class="widget-content text-center">
				<h1>{!! $out_of_stock !!}</h1>
				<h3>Out of Stock</h3>
			</div>
		</div>
	</div>
	<div class="col-sm-3">
		<div class="widget">
			<div class="widget-content text-center">
				<h1>{!! $discontinued !!}</h1>
				<h3>Discontinued</h3>
			</div>
		</div>
	</div>
	<div class="col-sm-3">
		<div class="widget">
			<div class="widget-content text-center">
				<h1>{!! $products_to_order !!}</h1>
				<h3>Products to Order</h3>
			</div>
		</div>
	</div>
</div>

<div uib-tabset>
	<div uib-tab heading="All" select="active_tab = -1">
		<div class="repair-tab bookings-content" stock-table category-id="all" categories="categories"></div>
	</div>
	<div uib-tab ng-repeat="cat in categories" heading="{[{ cat.name }]}" select="active_tab = $index">
		<div class="repair-tab bookings-content" stock-table category-id="{[{ cat.id }]}" active-tab="active_tab" index="{[{ $index }]}" categories="categories"></div>
	</div>
</div>

<script type="text/ng-template" id="stock/stock-table.html">
	<div>

		<div class="form-inline">

				<div class="radio-inline">
					<span class="muted">Records: </span>
					<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>


			    <label class="checkbox-inline">
					<input type="checkbox" name="under_buffer" value="1" ng-model="filters.under_buffer"> <span class="muted">Under Buffer</span>
				</label>
				<label class="checkbox-inline">
					<input type="checkbox" name="in_stock" value="1" ng-model="filters.in_stock"> <span class="muted">In Stock</span>
				</label>
				<label class="checkbox-inline">
					<input type="checkbox" name="Ordered" value="1" ng-model="filters.ordered"> <span class="muted">Ordered</span>
				</label>
        <label class="checkbox-inline">
					<input type="checkbox" ng-true-value="1" ng-false-value="0" ng-model="filters.discontinued"> <span class="muted">Show Discontinued</span>
				</label>


                <select name="status_id" ng-model="filters.type" class="form-control">
                	<option ng-selected=" ! filters.type" value="">All products </option>
                	<option ng-repeat="type in product_types" value="{[{ type }]}">{[{ type}]}</option>
                </select>


				<div class="input-group">
					<input type="text" class="form-control" placeholder="Search" ng-model="filters.search" ng-model-options="{ debounce: {'default': 500, 'blur': 0} }" />
					<span class="input-group-addon">
						<i class="fa fa-search"></i>
					</span>
				</div>

			@if (Auth::user()->hasPermission('edit_stock'))
				<div class="radio-inline">
					<span class="btn btn-success" ng-click="add()" >New Product</span>
				</div>
			@endif
		</div>
		<br>

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

		<table class="table table-striped">
			<thead class="table-header">
				<th></th>
				<th>Name</th>
				<th>EAN</th>
				<th class="centered">Buffer</th>
				<th>Type</th>
				<th class="centered">Price</th>
				<th class="centered">VAT</th>
				<th class="centered">Cost (exc VAT)</th>
				<th class="centered">Retail Price</th>
				<th class="centered">In Stock</th>
				<th class="centered">To Order</th>
				<th class="centered">Ordered</th>
                <th class="centered">Discontinued</th>
				<th></th>
			</thead>
			<tbody>
				<tr ng-repeat="item in products">
					<td><span ng-show="item.approval_required == 1" class="text-danger"><i class="fa fa-bell"></i></span></td>
					<td>{[{ item.name }]}</td>
					<td>{[{ item.model_number }]}</td>
					<td class="centered">{[{ item.buffer }]}</td>
					<td>{[{ item.type }]}</td>
					<td class="centered">{[{ item.price_excluding_vat | currency: "£" }]} </td>
					<td class="centered">{[{ item.vat | currency: "£" }]}</td>
					<td class="centered">{[{ item.cost ? (item.cost | currency: "£") : 'Unknown' }]}</td>
					<td class="centered">{[{ item.retail_price | currency: "£" }]}</td>
					<td class="centered" ng-style="{ fontSize: item.unlimited ? '1.5em' : '100%' }">{[{ item.unlimited ?  "&#8734;" : item.quantity }]}</td>
					<td class="centered">{[{ item.quantity_to_order }]}</td>
					<td class="centered">{[{ item.ordered_quantity }]}</td>
					<td class="centered">{[{ item.discontinued === 1 ? "yes" : "no" }]}</td>
					<td>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" data-eat-click href="#">
								<i class="fa fa-fw fa-cog"></i>
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu pull-right text-left">
								<li><a tabindex="-1" ng-href="{!! URL::to('stock/barcode') !!}/{[{ item.id }]}" target="_blank"><i class="fa fa-fw fa-barcode"></i> Print barcode</a></li>
								<li ng-if="item.id"><a tabindex="-1" ng-click="showHistory(item)" data-eat-click><i class="fa fa-fw fa-history"></i> Product history</a></li>
								<li ng-if="item.id && ! item.unlimited"><a tabindex="-1" ng-click="updateStockQuantity(item)" data-eat-click><i class="fa fa-fw fa-exchange"></i> Update quantity</a></li>
								@if (Auth::user()->hasPermission('edit_stock'))
									<li ng-if="item.id"><a tabindex="-1" ng-click="edit(item)" data-eat-click><i class="fa fa-fw fa-pencil"></i> Edit</a></li>
									<li ng-if="item.id"><a tabindex="-1" ng-confirm-click="Are you sure you want to delete this item?" confirmed-click="delete(item)" data-eat-click><i class="fa fa-fw fa-times"></i> Delete</a></li>
								@endif
							</ul>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<div paginator="paginator"></div>

	</div>
</script>
<script type="text/ng-template" id="stock/stock-update.html">
	@include('stock::manual_update_stock_transaction')
</script>
<script type="text/ng-template" id="stock/item-history.html">
	@include('stock::item-history')
</script>
