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

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

        <div class="modal-body">

            <status-message message="vm.statusMessage"></status-message>
            <error-list errors="vm.errorMessages"></error-list>

            @distribution.FormGroupFor(m => m.Destination)

            @distribution.FormGroupFor(m => m.DistributedDate)

            @distribution.FormGroupFor(m => m.Memo)

            <table class="table table-condensed" ng-class="vm.getValidationClass()">
                <thead>
                    <tr>
                        <th>Name<br/>Units per Case</th>
                        <th>Expiration Date</th>
                        <th>Available Case Qty</th>
                        <th>Distribute Case Qty</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="inventory in vm.quantities" inventory="inventory">
                        <td>
                            {{inventory.name}}<br/>
                            {{inventory.unitsPerCase}} / {{inventory.containerType}}<br/>
                        </td>
                        <td ng-class="{ danger: inventory.isExpired }">{{inventory.expirationDate | date:'shortDate'}}</td>
                        <td>{{inventory.quantity}}</td>
                        <td>
                            <div class="form-group col-sm-9" form-group-validation="DistributeQuantity{{inventory.name}}">
                                <input name="DistributeQuantity{{inventory.name}}" type="number"
                                       class="form-control"
                                       ng-model="inventory.distributeQuantity"
                                       ng-max="{{inventory.quantity}}"
                                       ng-min="0" />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="modal-footer">
            <button class="btn btn-success" ng-disabled="vm.form.$invalid || vm.form.$pristine">Save</button>
            <button type="button" class="btn" ng-click="$dismiss()">Cancel</button>
        </div>

    </fieldset>
</form>