@using InventoryTraker.Web.Helpers
@model InventoryTraker.Web.Models.InventoryAddForm
@{
    var inventory = Html.Angular().ModelFor("vm.inventory");
}
<form novalidate
	  name="vm.form"
	  ng-submit="vm.form.$valid && vm.add()">
	<fieldset ng-disabled="vm.saving">

		<div class="modal-header">
		    <h3 class="modal-title"><i class="fa fa-cubes"></i> Inventory Arrival</h3>
		</div>

		<div class="modal-body">

            <div class="alert alert-info" ng-hide="vm.errorMessages.length">
                Enter details for the inventory arrival below.
            </div>
            <div class="alert alert-danger" ng-show="vm.errorMessages.length">
                There were problems adding the inventory.
                <ul>
                    <li ng-repeat="error in vm.errorMessages">{{error}}</li>
                </ul>
            </div>

            <script type="text/ng-template" id="commodityTypeahead.html">
                <a>
                    <span ng-bind-html="match.label.name | uibTypeaheadHighlight:query"></span>
                </a>
            </script>

		    <div class="form-group" form-group-validation="Commodity">
		        <label for="Commodity" class="control-label">Commodity</label>
		        <input name="Commodity" type="text"
		               ng-model="vm.commodity"
                       required
		               uib-typeahead=
		                   "inventoryType as inventoryType.name for inventoryType in vm.inventoryTypes 
                           | filter:{name:$viewValue} 
                           | limitTo:8"
                       typeahead-editable='false'
		               class="form-control">
                <i class="fa fa-search form-control-feedback"></i>
		        <div class="panel panel-default" ng-show="vm.commodity.id">
                    <div class="panel-body">
                        <dl class="dl-horizontal">
                            <dt>Commodity ID</dt>
                            <dd>{{vm.commodity.identifier}}</dd>
                            <dt>Units per Case</dt>
                            <dd>{{vm.commodity.unitsPerCase}} / {{vm.commodity.containerType}}</dd>
                        </dl>
                    </div>
		        </div>
		    </div>

		    @inventory.FormGroupFor(m => m.ExpirationDate)
             
		    <div class="form-group panel panel-default">
		        <div class="panel-heading"><label>Quantity</label></div>
                <div class="panel-body container-fluid">
                    <div class="row">
                        <div class="col-sm-5"><label for="PalletCount">Pallets</label></div>
                        <div class="col-sm-3">
                            <input ng-model="palletCount" name="PalletCount" type="number" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 col-sm-offset-1"><label for="CasesPerPallet">Cases per Pallet</label></div>
                        <div class="col-sm-3">
                            <input ng-model="casesPerPallet" name="CasesPerPallet" type="number" class="form-control" />
                        </div>
                    </div>
                    <hr />
                    <div class="row">
                        <div class="col-sm-5"><label for="CaseCount">Individual Cases</label></div>
                        <div class="col-sm-3">
                            <input ng-model="caseCount" name="CaseCount" type="number" class="form-control" />
                        </div>
                    </div>
                    <hr />
                    <div class="row">
                        <div class="col-sm-5"><strong>Total Units</strong></div>
                        <div class="col-sm-3"><strong>{{vm.quantity()}}</strong></div>
                    </div>
                </div>
		    </div>

         @inventory.FormGroupFor(m => m.AddedDate)
         @inventory.FormGroupFor(m => m.Memo)

        </div>

	<div class="modal-footer">
		<button class="btn btn-success">Add</button>
		<button type="button" class="btn" ng-click="$dismiss()">Cancel</button>
	</div>

	</fieldset>
</form>