<div ng-init="suppliers = {{ json_encode($suppliers) }}"></div>

<div class="widget">
	<div class="widget-content">
		<form name="stockForm" class="form-horizontal" ng-submit="saveStock()">
			@csrf

			<fieldset>
				<legend>Basic Details</legend>
				<small>You can load an existing product and create a new variation.</small> <br /><br />
					<div class="form-group" ng-hide="stockData.id">
						<label for="manufacturer_code" class="col-sm-3 control-label">EAN</label>
						<div class="col-sm-9">
							<input type="text" name="manufacturer_code" class="col-sm-12" ng-model="stockData.manufacturer_code" lookup-stock stock-selected="selectStock(data)" ng-required="stockData.id">
						</div>
					</div>
					<div class="form-group" ng-show="stockData.id">
						<label for="ean_code" class="col-sm-3 control-label">EAN</label>
						<div class="col-sm-9">
							<input type="text" name="ean_code" class="col-sm-10" ng-model="stockData.manufacturer_code" required>
						</div>
					</div>

					<div class="form-group">
						<label for="name" class="col-sm-3 control-label">Name</label>
						<div class="col-sm-9">
							<input type="text" name="name" class="col-sm-10" ng-model="stockData.name" required>
						</div>
					</div>
					<div class="form-group">
						<label for="sku" class="col-sm-3 control-label">SKU</label>
						<div class="col-sm-9">
							<input type="text" name="sku" class="" ng-model="stockData.sku">
						</div>
					</div>
					<div class="form-group">
						<label for="buffer" class="col-sm-3 control-label">Buffer</label>
						<div class="col-sm-9">
							<input type="text" name="buffer" class="" ng-model="stockData.buffer">
						</div>
					</div>
					<div class="form-group">
						<label for="group_id" class="col-sm-3 control-label">Category</label>
						<div class="col-sm-9">
							<select name="group_id" class="col-sm-10" ng-model="stockData.group_id" required>
								@foreach($categories as $key => $value)
									<option value="{{ $key }}">{{ $value }}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="type" class="col-sm-3 control-label">Type</label>
						<div class="col-sm-9">
							<select name="type" class="col-sm-10" ng-model="stockData.type" required>
								<option value="stock">Stock</option>
								<option value="non_stock">Non Stock</option>
								<option value="service">Service</option>
								<option value="second_hand">Second Hand</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="discontinued" class="col-sm-3 control-label">Discontinued</label>
						<div class="col-sm-9">
							<input type="checkbox" name="discontinued" value="1" class="" ng-model="stockData.discontinued">
						</div>
					</div>

			</fieldset>

			<fieldset ng-show="stockData.id">
				<legend>Product Variations <a href="#productVariations" class="btn pull-right" data-toggle="modal" ng-click="newItem()" eat-click><i class="fa fa-plus"></i> New</a></legend>
				<table class="table table-striped">
					<thead>
						<th>Markup</th>
						<th>Business Markup</th>
						<th>Cost</th>
						<th>VAT</th>
						<th>Total Cost</th>
						<th>Retail</th>
						<th>Profit</th>
						<th>Staff price</th>
						<th>Quantity</th>
						<th>Supplier</th>
						<th></th>
					</thead>
					<tbody>
						<tr ng-repeat="item in stockData.items">
							<td>{[{ item.margin + '%' }]}</td>
							<td>{[{ item.business_margin + '%' }]}</td>
							<td>{[{ item.cost | currency:"£" }]}</td>
							<td>{[{ item.vat | currency:"£" }]}</td>
							<td>{[{ item.total_cost | currency:"£" }]}</td>
							<td>{[{ item.retail | currency:"£" }]}</td>
							<td>{[{ item.profit | currency:"£" }]}</td>
							<td>{[{ item.staff_price | currency:"£" }]}</td>
							<td>{[{ item.quantity }]}</td>
							<td>{[{ suppliers[item.supplier_id] }]}</td>
							<td><a href="#productVariations" data-toggle="modal" ng-click="editItem(item)" eat-click>Edit</a></td>
						</tr>
					</tbody>
				</table>
			</fieldset>

			<div class="form-actions text-right">
				<a href="#" class="act" ng-click="clearStockForm()" eat-click><i class="fa fa-times-circle-o"></i> Clear</a>&nbsp;&nbsp;
				<button class="btn btn-primary" ng-hide="stockData.id"><i class="fa fa-plus"></i> Add</button>
				<button class="btn btn-warning" ng-show="stockData.id"><i class="fa fa-pencil"></i> Update</button>
			</div>

		</form>

	</div>
</div>



<div id="productVariations" class="modal hide fade" tabindex="-1" role="dialog">
	<form name="stockItemForm" class="form-horizontal" ng-submit="saveItem()">
		@csrf
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 ng-hide="stockItemData.id">Add a new variation</h3>
			<h3 ng-show="stockItemData.id">Update variation</h3>
		</div>
		<div class="modal-body">

			<small>Each product can have multiple variations, for example when buying the same item and using different prices.</small> <br /><br />
			<div class="form-group">
				<label class="col-sm-3 control-label" for="cost">Cost (exc.) <br/><small>what we pay</small></label>
				<div class="col-sm-9">
					<input type="text" name="cost" id="cost" ng-model="stockItemData.cost" required ng-change="costChanged(stockItemData.cost)">
				</div>
			</div>
			<div class="form-group">
				<label name="vat" class="col-sm-3 control-label" for="vat">VAT</label>
				<div class="col-sm-9">
					<input type="text" name="vat" id="vat" ng-model="stockItemData.vat" required disabled="true">
				</div>
			</div>
			<div class="form-group">
				<label for="total_cost" class="col-sm-3 control-label">Total Cost</label>
				<div class="col-sm-9">
					<input type="text" name="total_cost" class="" ng-model="stockItemData.total_cost" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label" for="retail">Retail Price <br/><small>what we sell it for</small></label>
				<div class="col-sm-9">
					<input type="text" name="retail" class="" ng-model="stockItemData.retail" ng-change="retailPriceChanged(stockItemData.retail)" required>
				</div>
			</div>
			<div class="form-group">
				<label name="profit" class="col-sm-3 control-label" for="profit">Profit</label>
				<div class="col-sm-9">
					<input type="text" name="profit" id="profit" ng-model="stockItemData.profit" required disabled="true">
				</div>
			</div>
			<div class="form-group">
				<label name="staff_price" class="col-sm-3 control-label" for="staff_price">Staff Price</label>
				<div class="col-sm-9">
					<input type="text" name="staff_price" id="staff_price" ng-model="stockItemData.staff_price" required disabled="true">
				</div>
			</div>
			<div class="form-group">
				<label for="margin" class="col-sm-3 control-label">Markup</label>
				<div class="col-sm-9">
					<input type="text" name="margin" class="" ng-model="stockItemData.margin" required>
				</div>
			</div>
			<div class="form-group">
				<label for="business_margin" class="col-sm-3 control-label">Business Markup</label>
				<div class="col-sm-9">
					<input type="text" name="business_margin" class="" ng-model="stockItemData.business_margin" required>
				</div>
			</div>
			<div class="form-group">
				<label for="quantity" class="col-sm-3 control-label">Quantity</label>
				<div class="col-sm-9">
					<input type="text" name="quantity" class="" ng-model="stockItemData.quantity" required>
				</div>
			</div>
			<div class="form-group">
				<label for="supplier_id" class="col-sm-3 control-label">Supplier</label>
				<div class="col-sm-9">
					<select name="supplier_id" ng-model="stockItemData.supplier_id">
						@foreach($suppliers as $key => $value)
							<option value="{{ $key }}">{{ $value }}</option>
						@endforeach
					</select>
				</div>
			</div>

		</div>
		<div class="modal-footer">
			<a href="#" class="act" ng-click="clearStockItemForm()" eat-click><i class="fa fa-times-circle-o"></i> Clear</a>&nbsp;&nbsp;
			<button class="btn btn-primary" ng-disabled="!stockData.id" ng-hide="stockItemData.id"><i class="fa fa-plus"></i> Add</button>
			<button class="btn btn-warning" ng-disabled="!stockData.id" ng-show="stockItemData.id"><i class="fa fa-pencil"></i> Update</button>
		</div>
	</form>
</div>