<div class="col-md-12" ng-controller="EditProvisioningCriteriaController">
    <ul class="breadcrumb">
        <li><a href="#/organization">{{'label.anchor.organization' | translate}}</a></li>
        <li><a href="#/viewallprovisionings">{{'label.anchor.provisioningcriteria' | translate}}</a></li>

        <li class="active">{{'label.anchor.createprovisioningcriteria' | translate}}</li>
    </ul>
    <form name="editeprovisioningcriteriaform" novalidate="" class="form-horizontal well" rc-submit="submit()">
        <api-validate></api-validate>
        <fieldset>
            <div class="form-group">
                <label class="control-label col-sm-2" for="name">{{'label.input.provisioningcriteria' | translate}}<span
                        class="required">*</span></label>

                <div class="col-sm-3">
                    <input name="name" type="text" id="name" ng-model="criteriaName" class="form-control"
                           required late-Validate/>
                </div>
                <div class="col-sm-3">
                    <form-validate valattributeform="editprovisioningcriteriaform" valattribute="name"/>
                </div>
            </div>
            <div class="form-group">
                    <div class="col-sm-3 col-md-3 col-md-offset-1">
                        <label class="control-label col-sm-9">{{ 'label.input.allproducts' | translate }}</label>
                        <select id="available" ng-model="available" name="available" class="form-control multiselectmin" multiple>
                            <option ng-repeat="allowedProduct in allloanproducts" value="{{allowedProduct.id}}">
                                {{allowedProduct.name}}
                            </option>
                        </select>
                    </div>
                    <div class="col-sm-1 col-md-1 paddedtop25px">
                        <button type="button" class="btn btn-primary" data-ng-click="addLoanProduct()"><i
                                class="icon-double-angle-right"></i></button>
                        <br/>
                        <button type="button" class="btn btn-primary" data-ng-click="removeLoanProduct()"><i
                                class="icon-double-angle-left"></i></button>
                    </div>
                    <div class="col-sm-3 col-md-3">
                        <label class="control-label col-sm-9">{{ 'label.input.selectedproducts' | translate }}</label>
                        <select id="selected" ng-model="selected" name="selected" class="form-control multiselectmin" multiple>
                            <option ng-repeat="selectedproduct in selectedloanproducts" value="{{selectedproduct.id}}">
                                {{selectedproduct.name}}
                            </option>
                        </select>
                    </div>
            </div>
            <table class="table" class="width100" ng-show="categories.length>0">
                <tr class="graybg">
                    <th>{{'label.heading.provisioningcategory' | translate}}</th>
                    <th>{{'label.heading.minimumage' | translate}}</th>
                    <th>{{'label.heading.maximumage' | translate}}</th>
                    <th>{{'label.heading.provisioningpercentage' | translate}}</th>
                    <th>{{'label.heading.provisioningliabilityaccount' | translate}}</th>
                    <th>{{'label.heading.provisioningexpenseaccount' | translate}}</th>
                </tr>
                <tr ng-repeat="provisioningcategory in categories">
                    <td>{{provisioningcategory.categoryName}}</td>
                    <td><input id="{{categories[$index].minAge}}" name="MINGAGE" class="form-control" type="text"
                               ng-model="provisioningcategory.minAge"
                               placeholder="{{'label.input.indays' | translate}}" number-format></td>
                    <div class="col-sm-3">
                        <form-validate valattributeform="createprovisioningcriteriaform"
                                       valattribute="MINGAGE"/>
                    </div>
                    <td><input id="{{categories[$index].maxAge}}" name="MAXAGE" class="form-control" type="text"
                               ng-model="provisioningcategory.maxAge"
                               placeholder="{{'label.input.indays' | translate}}" number-format></td>
                    <div class="col-sm-3">
                        <form-validate valattributeform="createprovisioningcriteriaform"
                                       valattribute="MAXAGE"/>
                    </div>
                    <td><input id="{{categories[$index].provisioningPercentage}}" name="PERCENTAGE" class="form-control" type="text"
                               ng-model="provisioningcategory.provisioningPercentage"
                               placeholder="{{'label.input.amount' | translate}}" number-format></td>
                    <div class="col-sm-3">
                        <form-validate valattributeform="createprovisioningcriteriaform"
                                       valattribute="PERCENTAGE"/>
                    </div>

                    <td><select id="{{categories[$index].liabilityaccount}}" name="liabilitaccont"
                                ng-model="provisioningcategory.liabilityAccount"
                                ng-options="liabilitaccont.id as liabilitaccont.glCode for liabilitaccont in liabilityaccounts"
                                value="{{liabilitaccont.id}}" class="form-control" required>
                        <option value="">{{'label.selectliabilitiaccount' | translate}}</option>
                    </select></td>
                    <div class="col-sm-3">
                        <form-validate valattributeform="createprovisioningcriteriaform"
                                       valattribute="liabilitaccont"/>
                    </div>
                    <td>
                        <select id="{{categories[$index].expenseaccount}}" name="expenseaccount"
                                ng-model="provisioningcategory.expenseAccount"
                                ng-options="liabilitaccont.id as liabilitaccont.glCode for liabilitaccont in expenseaccounts"
                                value="{{liabilitaccont.id}}" class="form-control" required>
                            <option value="">{{'label.selectexpenseaccount' | translate}}</option>
                        </select>
                    </td>
                    <div class="col-sm-3">
                        <form-validate valattributeform="createprovisioningcriteriaform"
                                       valattribute="expenseaccount"/>
                    </div>
                </tr>
            </table>

            <div class="col-md-offset-3">
                <a id="cancel" href="#/viewallprovisionings">
                    <button type="reset" class="btn btn-default">{{'label.button.cancel' | translate}}</button>
                </a>
                <button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_PROVISIONINGCRITERIA'>
                    {{'label.button.save' | translate}}
                </button>
            </div>
        </fieldset>
    </form>
</div>
