<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/products">Products</a></li>
	<li class="active">{{vm.action}} Product</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<form name="form" class="form-horizontal" ng-submit="vm._save(vm.product)" novalidate>
				<input type="hidden" ng-if="vm.action == 'Edit'" name="id" id="id" ng-model="vm.product.id">
				<div class="panel panel-midnightblue">
					<div class="panel-heading">
						<h2>{{vm.action}} Product</h2>
					</div>
					<div class="panel-body">
						<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
						<div class="form-group">
							<label for="product_category_id" class="col-sm-2 control-label">Category <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<select class="form-control" name="product_category_id" id="product_category_id"
									ng-model="vm.product.product_category_id" ng-required="true"
										ng-options="item.id as item.name for item in vm._categories">
									<option value="">-- Select --</option>
								</select>
								<p class="help-block" ng-show="form.product_category_id.$touched && form.product_category_id.$error.required">Value is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">Name <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="name" id="name" ng-model="vm.product.name" ng-required="true" ng-minlength="3">
								<p class="help-block" ng-show="form.name.$touched && form.name.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.name.$touched && form.name.$error.minlength">Value is too short.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="sku" class="col-sm-2 control-label">SKU</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="sku" id="sku" ng-model="vm.product.sku">
							</div>
						</div>
						<div class="form-group">
							<label for="image" class="col-sm-2 control-label">Image</label>
							<div class="col-sm-8">
								<a class="btn btn-default" ngf-multiple="false" ngf-select="vm._uploadImage($file)" ngf-resize="{width: 200, height: 200, centerCrop: true, quality: 1.0}" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="1MB" ngf-model-invalid="invalidFiles">Select</a>
								<a ng-if="vm.product.image" class="btn btn-danger" ng-click="vm.product.image = ''">Remove</a>
								<a ng-if="vm.product.image && !vm._editing" class="btn btn-info" ng-click="vm._viewImage(vm.product.image_full)">View</a>
								<span ng-if="invalidFiles">Invalid File. Select Another One.</span>
								<p class="help-block">Only Images up to 1MB. Will be resized to 200px (Width) / 200px (Height).</p>
							</div>
						</div>
						<div class="form-group">
							<label for="cost" class="col-sm-2 control-label">Cost Price</label>
							<div class="col-sm-8">
								<div class="input-group">							
									<span class="input-group-addon">
										<i class="ti ti-money"></i>
									</span>
									<input type="text" class="form-control" name="cost" id="cost" ng-model="vm.product.cost" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/">
								</div>
								<p class="help-block" ng-show="form.cost.$touched && form.cost.$error.pattern">Decimal is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="price" class="col-sm-2 control-label">Base Price <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="input-group">							
									<span class="input-group-addon">
										<i class="ti ti-money"></i>
									</span>
									<input type="text" class="form-control" name="price" id="price" ng-model="vm.product.price" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" ng-required="true">
								</div>
								<p class="help-block" ng-show="form.price.$touched && form.price.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.price.$touched && form.price.$error.pattern">Decimal is required.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="description" class="col-sm-2 control-label">Description</label>
							<div class="col-sm-8">
								<textarea class="form-control" name="description" id="description" ng-model="vm.product.description" rows="5"></textarea>
							</div>
						</div>
						<div class="form-group">
							<label for="send_to_quickbooks" class="col-sm-2 control-label">Send To Quickbooks? <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="radio-inline">
									<label>
										<input type="radio" name="send_to_quickbooks" id="send_to_quickbooks" value="0" ng-model="vm.product.send_to_quickbooks" ng-required="true"> No
									</label>
								</div>
								<div class="radio-inline">
									<label>
										<input type="radio" name="send_to_quickbooks" id="send_to_quickbooks" value="1" ng-model="vm.product.send_to_quickbooks" ng-required="true"> Yes
									</label>
								</div>
								<p class="help-block" ng-show="form.send_to_quickbooks.$touched && form.send_to_quickbooks.$error.required">Value is required.</p>
							</div>
						</div>
					</div>
					<div class="panel-footer">
						<div class="row">
							<div class="col-sm-8 col-sm-offset-2">
								<button type="submit" ng-disabled="!form.$valid" class="btn-primary btn">Save</button>
								<a href="#/products" class="btn-default btn">Cancel</a>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
