@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.save()">
    <fieldset ng-disabled="vm.saving">

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

        <div class="modal-body">

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

            <label class="control-label">Box Id</label>
            <p class="form-control-static">{{vm.inventory.id}}</p>
            <label class="control-label">Program Name</label>
            <p class="form-control-static">{{vm.inventory.programName}}<span ng-show="vm.inventory.programSubtype != null">  / {{vm.inventory.programSubtype}}</span></p>
            @inventory.FormGroupFor(m => m.Description)
            <label class="control-label">Currently in Inventory</label>
            <p class="form-control-static">{{vm.isInInventory() ? "Yes" : "No"}}</p>
            @inventory.FormGroupFor(m => m.ShredReadyDate)
            <label class="control-label">Added Date</label>
            <p class="form-control-static">{{vm.inventory.addedDate | date:'shortDate'}}</p>
            @inventory.FormGroupFor(m => m.Memo)

            <div class="modal-footer">
                <button type="button" class="btn btn-sm pull-left" ng-click="vm.removeInventory()"><i class="fa fa-minus-circle"></i> Remove Inventory</button>
                <button class="btn btn-success" ng-disabled="vm.form.$invalid || vm.form.$pristine">Save</button>
                <button type="button" class="btn" ng-click="vm.cancel()">Close</button>
            </div>

            <hr />

            <h4 class="modal-title pull-left"><i class="fa fa-fw fa-list"></i> Transactions</h4>

            <table class="table table-striped table-condensed">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Memo</th>
                        <th>Transaction Date</th>
                        <th>In Inventory</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody ng-hide="vm.loadingTransactions">
                <tr ng-repeat-start="transaction in vm.transactions | orderBy:['-transactionDate', 'currentQuantity']">
                    <td>{{transaction.transactionType}}</td>
                    <td>{{transaction.memo}}</td>
                    <td>{{transaction.transactionDate | date:'shortDate'}}</td>
                    <td>{{transaction.currentQuantity > 0 ? "Yes" : "No"}}</td>
                    <td>
                        <a href="" ng-show="$first"
                           ng-click="vm.confirmDeleteTransaction = !vm.confirmDeleteTransaction">
                            <i class="fa fa-trash"></i>
                        </a>
                    </td>
                </tr>
                <tr ng-repeat-end ng-show="$first && vm.confirmDeleteTransaction">
                    <td colspan="7">
                        <span ng-show="vm.transactions.length == 1" class="text-danger">
                            Warning: Deleting the only transaction will delete the entire inventory
                        </span>
                        <button
                            ng-click="vm.deleteTransaction(transaction.id)"
                            class="btn btn-danger btn-sm pull-right">
                            <i class="fa fa-trash"></i> Confirm Delete
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </fieldset>
</form>