<div ng-cloak>
	<span ng-init="vat = {{\Config::get('settings.vat')}}"></span>
	<span ng-init="categories = {{ json_encode( App\Modules\Stock\StockGroup::select('id', 'name')->get() ) }}" ></span>
	<button class="btn btn-default" ng-click="showModal()" eat-click><i class="fa fa-plus"></i> Plan non-existing  build</button>

	<script type="text/ng-template" id="modals/request-non-existing-build-modal.html">
		<div class="modal-header">
			<button type="button" class="close" ng-click="hideModal()" aria-hidden="true">×</button>
			<h3 class="modal-title">Plan non-existing build</h3>
		</div>
		<form name="newBuildForm" class="form-horizontal" ng-submit="save()">
			<div class="modal-body">
				<div class="alert alert-warning">
					<i class="fa fa-exclamation-triangle"></i> Use this feature only if you want to start planning a non existing build.
				</div>
				<div class="alert alert-danger alert-dismissible" ng-show="errors && !hideError">
					<button type="button" class="close" ng-click="hideError = true" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<i class="fa fa-exclamation-triangle"></i> {[{ errors }]}
				</div>
				<div class="row">
					<fieldset class="col-sm-6">
                        <legend>Basic Details</legend>
                        <div class="form-group">
                            <label class="col-sm-3 control-label label-required" for="inputName">Name:</label>
                            <div class="col-sm-9">
                                <input id="inputName" class="form-control" type="text" name="name" ng-model="build.name" required>
                            </div>
                        </div>
                         <div class="form-group">
                            <label class="col-sm-3 control-label label-required" for="inputCategory">Category:</label>
                            <div class="col-sm-9">
                                <select id="inputCategory" class="form-control" name="group_id" ng-model="build.group_id" ng-options="o.id as o.name for o in categories" required>
                                    <option value="">Select a category</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label label-required" for="inputQuantity">Quantity:</label>
                            <div class="col-sm-9">
                                <input id="inputQuantity" class="form-control" type="number" name="quantity" ng-model="build.quantity" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label label-required" for="inputPrice">Price:</label>
                            <div class="col-sm-9">
                               <div class="input-group">
                                    <span class="input-group-addon"><strong>£</strong></span>
                                    <input class="form-control" numbers-only id="inputPrice" type="text" name="price" ng-model="build.price" required>
                                </div>
                            </div>
                        </div>

                    </fieldset>
                    <fieldset class="col-sm-6">
                        <legend>Components</legend>
                        <div class="input-group">
	                       	<input class="form-control" type="text" placeholder="Search and add stock" ng-model="part_search" search-composite="false" search-clear="true" search-callback="addComponent(ev, data)" autocomplete="off" product-search>
	                       	<span class="input-group-btn">
	                        	<button type="button" ng-click="newStock()" class="btn btn-default"><i class="fa fa-plus"></i></button>
	                        </span>
	                    </div>
                        <table class="table" style="margin-top: 30px;" ng-show="build.planned_components.length > 0">
	                        <thead>
	                            <tr>
	                                <th>Name</th>
	                                <th class="centered">Quantity</th>
	                                <th></th>
	                            </tr>
	                        </thead>
	                        <tbody>
	                            <tr ng-repeat="item in build.planned_components">
	                                <td ng-bind="::item.name"></td>
	                                <td class="centered">
	                                    <input type="text" class="form-control" ng-model="item.pivot.quantity">
	                                </td>
	                                <td>
	                                    <a href="#" class="pull-right" ng-click="build.planned_components.splice($index, 1)" data-eat-click>Remove</a>
	                                </td>
	                            </tr>
	                        </tbody>
	                    </table>
                    </fieldset>
				</div>

			</div>
			<div class="modal-footer">
				<button class="btn btn-default" ng-click="hideModal()" data-eat-click>Close</button>
				<button class="btn btn-primary" ng-disabled="loading">
					<span ng-if="loading"><i class="fa fa-spinner fa-spin"></i> Processing...</span>
					<span ng-if="!loading">Request</span>
				</button>
			</div>
		</form>
	</script>
</div>