<div class="content-container" ng-controller = "CreateLoanProductController">
    <ul class="breadcrumb">
        <li><a href="#/products">{{'label.anchor.products' | translate}}</a></li>
        <li><a href="#/loanproducts">{{'label.anchor.loanproducts' | translate}}</a></li>
        <li class="active">{{'label.anchor.createloanproduct' | translate}}</li>
    </ul>
    <wizard current-step="step" on-finish="submit()" class="card well">
        <wz-step wz-title="{{'label.heading.details'|translate}}">
            <form name="Details" novalidate="" class=" form-horizontal " ng-submit="goNext(Details)">
                <fieldset>
                    <api-validate></api-validate>
            <!--<h3>{{ 'label.heading.details' | translate }}</h3>-->
            <hr>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.productname' | translate }}<span
                        class="required">*</span>
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.loanproduct.productname' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input type="text" id="name" class="form-control" name="name" ng-model="formData.name"
                           required late-validate/>
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Details" valattribute="name"/>
                </div>
                <label class="control-label col-sm-2">{{ 'label.input.product.shortname' | translate }}<span
                        class="required">*</span>
                    <i class="fa fa-question-circle"
                       uib-tooltip="{{'label.tooltip.loanproduct.shortname' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input type="text" id="shortName" name="shortName" ng-model="formData.shortName"
                           class="form-control" maxlength="4" required late-validate/>
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Details" valattribute="shortName"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.description' | translate }}
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.loanproduct.description' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <textarea rows="2" class="form-control" ng-model="formData.description"></textarea>
                </div>
                <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.fund' | translate }}
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.loanproduct.fund' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="fundId" ng-model="formData.fundId" class="form-control"
                            ng-options="fund.id as fund.name for fund in product.fundOptions"
                            value="{{fund.id}}" ng-change="loanproduct.fundName = formValue(product.fundOptions,formData.fundId,'id','name')">
                        <option value="">{{'label.selectfund' | translate}}</option>
                        </select>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.startdate' | translate }}
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.loanproduct.startdate' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="startDate" sort type="text" class="form-control"
                           datepicker-pop="dd MMMM yyyy" ng-model="date.first" is-open="opened"
                           min="minDate" />
                </div>
                <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.closedate' | translate }}
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.loanproduct.closedate' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="closeDate" sort type="text" class="form-control"
                           datepicker-pop="dd MMMM yyyy" ng-model="date.second" is-open="opened1"
                           min="minDate" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.includeinborrowerloancounter' | translate }}
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.loanproduct.includeborrower' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="checkbox col-sm-2">
                    <label>
                        <input type="checkbox" ng-model="formData.includeInBorrowerCycle" ng-true-value="true"
                               ng-false-value="false">
                    </label>
                </div>
            </div>
                    <hr>
                    <button class = "btn btn-default pull-left" wz-previous disabled><i class = "fa fa-arrow-left"></i>&nbsp;&nbsp;Previous</button>
                    <button class = "btn btn-default pull-right" type="submit">Next&nbsp;&nbsp;<i class = "fa fa-arrow-right"></i></button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title="{{ 'label.heading.currency' | translate }}">
            <form name="Currency" novalidate="" class=" form-horizontal " ng-submit="goNext(Currency)">
                <fieldset>
                    <api-validate></api-validate>
            <!--<h3>{{ 'label.heading.currency' | translate }}</h3>-->
            <hr>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.currency' | translate }}<span
                        class="required">*</span>
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.loanproduct.currency' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="currencyCode" ng-model="formData.currencyCode" class="form-control"
                            ng-options="currency.code as currency.name for currency in product.currencyOptions"
                            value="{{currency.code}}" ng-change="loanproduct.currency.name = formValue(product.currencyOptions,formData.currencyCode,'code','name')"></select>
                </div>
                <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.decimalplaces' | translate
                    }}<span
                            class="required">*</span>
                    <i class="fa fa-question-circle"
                       uib-tooltip="{{'label.tooltip.loanproduct.decimalplaces' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input type="text" id="digitsAfterDecimal" name="decimalplace" class="form-control"
                           ng-model="formData.digitsAfterDecimal" required late-validate number=true />
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Currency" valattribute="decimalplace"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.currencyinmultiplesof' | translate }}<span
                        class="required">*</span>
                    <i class="fa fa-question-circle"
                       uib-tooltip="{{'label.tooltip.loanproduct.currencyinmultiplesof' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input type="text" id="inMultiplesOf" class="form-control" name="multiplesof"
                           ng-model="formData.inMultiplesOf" required late-validate number=true />
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Currency" valattribute="multiplesof"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.installmentinmultiplesof' | translate }}<span
                        class="required">*</span></label>

                <div class="col-sm-2">
                    <input type="text" id="installmentAmountInMultiplesOf" class="form-control"
                           name="installmentAmountInMultiplesOf"
                           ng-model="formData.installmentAmountInMultiplesOf" required late-validate number=true/>
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Currency" valattribute="installmentAmountInMultiplesOf"/>
                </div>
            </div>
                    <hr>
                    <button class = "btn btn-default pull-left" wz-previous><i class = "fa fa-arrow-left"></i>&nbsp;&nbsp;Previous</button>
                    <button class = "btn btn-default pull-right" type="submit" >Next&nbsp;&nbsp;<i class = "fa fa-arrow-right"></i></button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title="{{ 'label.heading.terms' | translate }}">
            <form name="Terms" novalidate="" class=" form-horizontal " ng-submit="goNext(Terms)">
                <fieldset>
                    <api-validate></api-validate>
            <!--<h3>{{ 'label.heading.terms' | translate }}</h3>-->
            <hr>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.useborrowerloancounter' | translate }}
                    <i class="fa fa-question-circle"
                       uib-tooltip="{{'label.tooltip.loanproduct.useborrowerloancounter' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="checkbox col-sm-2">
                    <label>
                        <input type="checkbox" ng-model="formData.useBorrowerCycle"/>
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.principal' | translate }}
                    <span class="required">*</span>
                    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.loanproduct.principal' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="minPrincipal" placeholder="{{'label.input.minimum' | translate}}" type="text"
                           class="form-control" number-format ng-model="formData.minPrincipal">
                </div>
                <div class="col-sm-2">
                    <input type="text" placeholder="{{'label.input.default' | translate}}" id="principal"
                           name="principal"
                           class="form-control" number-format ng-model="formData.principal" required late-validate number=true />
                </div>
                <div class="col-sm-2">
                    <input type="text" placeholder="{{'label.input.maximum' | translate}}" id="maxPrincipal"
                           class="form-control" number-format ng-model="formData.maxPrincipal">
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Terms" valattribute="principal"/>
                </div>
            </div>
            <div class="form-group" ng-show="formData.useBorrowerCycle">
                <label class="control-label col-sm-2">{{'label.heading.principalCycleVariations' | translate}}
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.loanproduct.principalcyclevariations' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <a class="btn btn-primary" ng-click="addPrincipalVariation()"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{ 'label.button.add' | translate
                        }}</a>
                </div>
                <div data-ng-show="pvFlag" class="col-md-9 col-sm-offset-2">
                    <table class="table">
                        <tr class="graybg">
                            <th></th>
                            <th class="center">{{'label.input.cyclenumber' | translate}}</th>
                            <th class="center">{{'label.input.minimum' | translate}}</th>
                            <th class="center">{{'label.input.default' | translate}}</th>
                            <th class="center">{{'label.input.maximum' | translate}}</th>
                            <th></th>
                        </tr>
                        <tr ng-repeat="borrowerCycleVariation in formData.principalVariationsForBorrowerCycle">
                            <td class="col-sm-2">
                                <select id="principalValueUsageCondition{{$index}}"
                                        ng-model="borrowerCycleVariation.valueConditionType"
                                        ng-options="valueConditionType.id as valueConditionType.value for valueConditionType in product.valueConditionTypeOptions"
                                        ng-change="loanproduct.principalVariationsForBorrowerCycle[$index].code = formValue(product.valueConditionTypeOptions,borrowerCycleVariation.valueConditionType,'id','code')"
                                        class="marginleftn19px form-control" value="{{valueConditionType.id}}"></select>
                            </td>
                            <td><input id="principalCycleNumber{{$index}}" type="text" class="form-control"
                                       ng-model="borrowerCycleVariation.borrowerCycleNumber"/>
                            </td>
                            <td>
                                <input type="hidden" id="principalborrowerCycleId{{$index}}" class="form-control"
                                       ng-model="borrowerCycleVariation.id"/>
                                <input type="text" id="minPrincipalPerCycle{{$index}}" class="form-control"
                                       ng-model="borrowerCycleVariation.minValue"/>
                            </td>
                            <td>
                                <input id="principalPerCycle{{$index}}" type="text" class="form-control"
                                       ng-model="borrowerCycleVariation.defaultValue"
                                       name="principalPerCycle{{$index}}"/>

                            </td>
                            <td><input type="text" id="maxPrincipalPerCycle{{$index}}" class="form-control"
                                       ng-model="borrowerCycleVariation.maxValue"/></td>
                            <td><a ng-click="deletePrincipalVariation($index)"><i
                                    class="fa fa-remove "></i></a>

                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.numofrepayments' | translate }}
                    <span class="required">*</span>
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.loanproduct.numofrepayments' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="minNumberOfRepayments" placeholder="{{'label.input.minimum' | translate}}" type="text"
                           class="form-control" ng-model="formData.minNumberOfRepayments">
                </div>
                <div class="col-sm-2">
                    <input type="text" placeholder="{{'label.input.default' | translate}}" id="numberOfRepayments"
                           name="numofrepayments" class="form-control" ng-model="formData.numberOfRepayments" required
                           late-validate number=true />
                </div>
                <div class="col-sm-2">
                    <input type="text" placeholder="{{'label.input.maximum' | translate}}" id="maxNumberOfRepayments"
                           class="form-control" ng-model="formData.maxNumberOfRepayments">
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Terms" valattribute="numofrepayments"/>
                </div>
            </div>

            <div class="form-group" ng-show="formData.useBorrowerCycle">
                <label class="control-label col-sm-2">{{'label.heading.numerOfRepaymentCycleVariations' | translate}}
                    <i class="fa fa-question-circle"
                       uib-tooltip="{{'label.tooltip.loanproduct.numerofrepaymentcyclevariations' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <a class="btn btn-primary" ng-click="addNumberOfRepaymentVariation()"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{ 'label.button.add' |
                        translate
                        }}</a>
                </div>
                <div data-ng-show="rvFlag" class="col-md-9 col-sm-offset-2">
                    <table class="table">
                        <tr class="graybg">
                            <th></th>
                            <th class="center">{{'label.input.cyclenumber' | translate}}</th>
                            <th class="center">{{'label.input.minimum' | translate}}</th>
                            <th class="center">{{'label.input.default' | translate}}</th>
                            <th class="center">{{'label.input.maximum' | translate}}</th>
                            <th></th>
                        </tr>
                        <tr ng-repeat="borrowerCycleVariation in formData.numberOfRepaymentVariationsForBorrowerCycle">
                            <td class="col-sm-2">
                                <select class="marginleftn19px form-control"
                                        id="repaymentValueUsageCondition{{$index}}"
                                        ng-model="borrowerCycleVariation.valueConditionType"
                                        ng-options="valueConditionType.id as valueConditionType.value for valueConditionType in product.valueConditionTypeOptions"
                                        ng-change="loanproduct.numberOfRepaymentVariationsForBorrowerCycle[$index].code = formValue(product.valueConditionTypeOptions,borrowerCycleVariation.valueConditionType,'id','code')"
                                        value="{{valueConditionType.id}}"></select>
                            </td>
                            <td><input id="repaymentCycleNumber{{$index}}" type="text" class="form-control"
                                       ng-model="borrowerCycleVariation.borrowerCycleNumber"/>
                            </td>
                            <td>
                                <input type="hidden" id="repaymentborrowerCycleId{{$index}}" class="form-control"
                                       ng-model="borrowerCycleVariation.id"/>
                                <input type="text" id="minrepaymentPerCycle{{$index}}" class="form-control"
                                       ng-model="borrowerCycleVariation.minValue"/>
                            </td>
                            <td>
                                <input id="repaymentPerCycle{{$index}}" type="text" class="form-control"
                                       ng-model="borrowerCycleVariation.defaultValue"/>

                            </td>
                            <td><input type="text" id="maxrepaymentPerCycle{{$index}}" class="form-control"
                                       ng-model="borrowerCycleVariation.maxValue"/></td>
                            <td><a ng-click="deleterepaymentVariation($index)"><i
                                    class="fa fa-remove "></i></a>

                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-3">
                    <input type="checkbox" name="name1" ng-model="formData.isLinkedToFloatingInterestRates"/>
                    {{'label.input.islinedtofloatinginterestrates' | translate}}
                </div>
            </div>

            <div class="form-group" ng-show="formData.isLinkedToFloatingInterestRates">
                <label class="control-label col-sm-2">{{ 'label.input.floatinginterestrate' | translate }}
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.loanproduct.floatinginterestrate' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="floatingrateoptions" name="floatingrateoptions"
                            ng-model="formData.floatingRatesId"
                            ng-options="floatingrateoption.id as floatingrateoption.name for floatingrateoption in floatingRateOptions"
                            ng-change = "loanproduct.floatingRateName = formValue(floatingRateOptions,formData.floatingRatesId,'id','name')"
                            value="{{floatingrateoption.id}}" class="form-control">
                        <option value="">{{'label.selectfloatingrateoption' | translate}}</option>
                    </select>
                </div>

                <div class="col-sm-2">
                    <input id="differentialinterest" name="differentialinterest" class="form-control" type="text"
                           ng-model="formData.interestRateDifferential"
                           placeholder="{{'label.input.differentialrate' | translate}}" number-format/>
                </div>

                <div class="col-sm-3">
                    <input type="checkbox" name="name1" ng-model="formData.isFloatingInterestRateCalculationAllowed"/>
                    {{'label.input.isfloatingcalculationallowed' | translate}}
                </div>

            </div>

            <div class="form-group" ng-show="formData.isLinkedToFloatingInterestRates">
                <label class="control-label col-sm-2">{{ 'label.input.floatinginterestrate' | translate }}
                    <i class="fa fa-question-circle"
                       uib-tooltip="{{'label.tooltip.loanproduct.floatinginterestrate' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="minValue" name="minValue" class="form-control" type="text"
                           ng-model="formData.minDifferentialLendingRate"
                           placeholder="{{'label.input.minfloatinginterestrate' | translate}}" number-format/>
                </div>
                <div class="col-sm-2">
                    <input id="default" name="default" class="form-control" type="text"
                           ng-model="formData.defaultDifferentialLendingRate"
                           placeholder="{{'label.input.defaultfloatinginterestrate' | translate}}" number-format/>
                </div>
                <div class="col-sm-2">
                    <input id="maxValue" name="maxValue" class="form-control" type="text"
                           ng-model="formData.maxDifferentialLendingRate"
                           placeholder="{{'label.input.maxfloatinginterestrate' | translate}}" number-format/>
                </div>
            </div>
            <div class="form-group" ng-show="!formData.isLinkedToFloatingInterestRates">
                <!--Rate Module-->

              <div ng-show="enableRates">
                <div class="form-group">
                  <label class="control-label col-sm-2">{{ 'label.input.nominalinterestrate' |
                    translate }}
                    <i class="icon-question-sign"
                       tooltip="{{'label.tooltip.loanproduct.nominalinterestrate' | translate}}"
                       tooltip-append-to-body="true"></i>
                  </label>

                  <div class="col-sm-2">
                    <input id="calculatedRatePerPeriod" readonly type="text"
                           class="form-control" ng-model="calculatedRatePerPeriod">
                  </div>
                  <div class="col-sm-2">
                    <select class="form-control" id="interestRateFrequencyTypeR"
                            ng-model="formData.interestRateFrequencyType"
                            ng-options="interestRateFrequencyType.id as interestRateFrequencyType.value for interestRateFrequencyType in product.interestRateFrequencyTypeOptions"
                            value="{{interestRateFrequencyType.id}}"></select>
                  </div>
                  <div class="col-sm-2">
                    <form-validate valattributeform="createloanproductform"
                                   valattribute="interestRatePerPeriod"/>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-sm-3">
                    <select id="currentRate" ng-model="currentRate" class="form-control"
                            ng-options="rate as rate.name for rate in rateOptions"
                            value="{{rate}}">
                      <option class="displaynone" value="">{{'label.selectrate' | translate}}
                      </option>
                    </select>
                  </div>
                  <div class="col-sm-1">
                    <button type="button" class="btn btn-primary"
                            ng-click="rateSelected(currentRate)">{{ 'label.button.add' | translate
                      }}
                    </button>
                  </div>
                </div>
                <div class="form-group col-md-12">
                  <table data-ng-show="rateFlag" class="table width100">
                    <tr class="graybg">
                      <th>{{'label.heading.name' | translate}}</th>
                      <th>{{'label.heading.percentage' | translate}}</th>
                      <th></th>
                      <th>{{'label.heading.actions' | translate}}</th>

                    </tr>
                    <tr ng-repeat="rate in rates">
                      <td>{{rate.name}}</td>
                      <td>{{rate.percentage | number}}</td>
                      <td></td>
                      <td><a ng-click="deleteRate($index)"><i
                          class="fa fa-times icon-white"></i></a>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>

              <!-- End -->
                <label class="control-label col-sm-2">{{ 'label.input.nominalinterestrate' | translate }}
                    <span class="required">*</span>
                    <i class="fa fa-question-circle"
                       uib-tooltip="{{'label.tooltip.loanproduct.nominalinterestrate' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="minInterestRatePerPeriod" placeholder="{{'label.input.minimum' | translate}}" type="text"
                           class="form-control" ng-model="formData.minInterestRatePerPeriod" ng-disabled="rateFlag&&enableRates" number-format>
                </div>
                <div class="col-sm-2">
                    <input type="text" id="interestRatePerPeriod" placeholder="{{'label.input.default' | translate}}"
                           name="interestRatePerPeriod" class="form-control" ng-model="formData.interestRatePerPeriod" required late-validate decimals  ng-disabled="rateFlag&&enableRates" />
                </div>
                <div class="col-sm-2">
                    <input id="maxInterestRatePerPeriod" placeholder="{{'label.input.maximum' | translate}}" type="text"
                           class="form-control" ng-model="formData.maxInterestRatePerPeriod" number-format ng-disabled="rateFlag&&enableRates">
                </div>
                <div class="col-sm-2">
                    <select class="form-control" id="interestRateFrequencyType"
                            ng-model="formData.interestRateFrequencyType"
                            ng-options="interestRateFrequencyType.id as interestRateFrequencyType.value for interestRateFrequencyType in product.interestRateFrequencyTypeOptions"
                            ng-change = "loanproduct.interestRateFrequencyOption.value = formValue(product.interestRateFrequencyTypeOptions,formData.interestRateFrequencyType)"
                            value="{{interestRateFrequencyType.id}}"></select>
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Terms" valattribute="interestRatePerPeriod"/>
                </div>
            </div>
            <div class="form-group" ng-show="formData.useBorrowerCycle">
                <label class="control-label col-sm-2">{{'label.heading.interestRateCycleVariations' | translate}}
                    <i class="fa fa-question-circle"
                       uib-tooltip="{{'label.tooltip.loanproduct.interestratecyclevariations' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <a class="btn btn-primary" ng-click="addInterestRateVariation()"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{ 'label.button.add' | translate
                        }}</a>
                </div>
                <div data-ng-show="irFlag" class="col-md-9 col-sm-offset-2">
                    <table class="table">
                        <tr class="graybg">
                            <th></th>
                            <th class="center">{{'label.input.cyclenumber' | translate}}</th>
                            <th class="center">{{'label.input.minimum' | translate}}</th>
                            <th class="center">{{'label.input.default' | translate}}</th>
                            <th class="center">{{'label.input.maximum' | translate}}</th>
                            <th></th>
                        </tr>
                        <tr ng-repeat="borrowerCycleVariation in formData.interestRateVariationsForBorrowerCycle">
                            <td class="col-sm-2">
                                <select class="marginleftn19px form-control"
                                        id="interestRateValueUsageCondition{{$index}}"
                                        ng-model="borrowerCycleVariation.valueConditionType"
                                        ng-options="valueConditionType.id as valueConditionType.value for valueConditionType in product.valueConditionTypeOptions"
                                        ng-change = "loanproduct.interestRateVariationsForBorrowerCycle[$index].code = formValue(product.ValueConditionTypeOptions,borrowerCycleVariation.valueConditionType,'id','code')"
                                        value="{{valueConditionType.id}}"></select>
                            </td>
                            <td><input id="interestRateCycleNumber{{$index}}" type="text" class="form-control"
                                       ng-model="borrowerCycleVariation.borrowerCycleNumber"/>
                            </td>
                            <td>
                                <input type="hidden" id="interestRateborrowerCycleId{{$index}}"
                                       class="input-small" ng-model="borrowerCycleVariation.id"/>
                                <input type="text" id="mininterestRatePerCycle{{$index}}" class="form-control"
                                       ng-model="borrowerCycleVariation.minValue"/>
                            </td>
                            <td>
                                <input id="interestRatePerCycle{{$index}}" type="text" class="form-control"
                                       ng-model="borrowerCycleVariation.defaultValue"
                                       name="principalPerCycle{{$index}}"/>

                            </td>
                            <td><input type="text" id="maxInterestRatePerCycle{{$index}}" class="form-control"
                                       ng-model="borrowerCycleVariation.maxValue"/></td>
                            <td><a ng-click="deleteInterestRateVariation($index)"><i
                                    class="fa fa-remove "></i></a>

                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.repaidevery' | translate }}
                    <span class="required">*</span>
                    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.repaidevery' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="repaymentEvery" name="repaymentEvery" class="form-control" type="text"
                           ng-model="formData.repaymentEvery" required late-validate number=true />
                </div>
                <div class="col-sm-2">
                    <select id="repaymentFrequencyType" class="form-control"
                            ng-model="formData.repaymentFrequencyType"
                            ng-options="repaymentFrequencyType.id as repaymentFrequencyType.value for repaymentFrequencyType in product.repaymentFrequencyTypeOptions"
                            ng-change = "loanproduct.repaymentFrequencyOption.value = formValue(product.repaymentFrequencyTypeOptions,formData.repaymentFrequencyType)"
                            value="{{repaymentFrequencyType.id}}"></select>
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Terms" valattribute="repaymentEvery"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{
                    'label.input.minimum.days.between.disbursal.and.first.repayment'
                    | translate }}</label>

                <div class="col-sm-2">
                    <input id="minimumDaysBetweenDisbursalAndFirstRepayment" class="form-control"
                           type="text" ng-model="formData.minimumDaysBetweenDisbursalAndFirstRepayment" late-validate number=true >
                </div>
            </div>
                    <hr>
                    <button class = "btn btn-default pull-left" wz-previous><i class = "fa fa-arrow-left"></i>&nbsp;&nbsp;Previous</button>
                    <button class = "btn btn-default pull-right" type="submit">Next&nbsp;&nbsp;<i class = "fa fa-arrow-right"></i></button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title = "{{ 'label.heading.settings' | translate }}">
            <form name="Settings" novalidate="" class=" form-horizontal " ng-submit="goNext(Settings)">
                <fieldset>
                    <api-validate></api-validate>
            <!--<h3>{{ 'label.heading.settings' | translate }}</h3>-->
            <hr>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.amortization' | translate }}<span
                        class="required">*</span>
                    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.amortization' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="amortizationType" ng-model="formData.amortizationType" class="form-control"
                            ng-options="amortizationType.id as amortizationType.value for amortizationType in product.amortizationTypeOptions"
                            ng-change = "loanproduct.amortizationOption.value = formValue(product.amortizationTypeOptions,formData.amortizationType)"
                            value="{{amortizationType.id}}"></select>
                </div>
                <label class="control-label col-sm-2">{{ 'label.input.interestmethod' | translate
                    }}<span
                            class="required">*</span>
                    <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interest' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="interestType" ng-model="formData.interestType" class="form-control"
                            ng-options="interestType.id as interestType.value for interestType in product.interestTypeOptions"
                            ng-change = "loanproduct.interestOption.value = formValue(product.interestTypeOptions,formData.interestType)"
                            value="{{interestType.id}}"></select>
                </div>
                <label class="control-label col-sm-2">{{ 'label.input.isequalamortization' | translate }}</label>
                <div class="checkbox col-sm-1">
                    <input type="checkbox" ng-model="formData.isEqualAmortization" ng-true-value="true"
                               ng-false-value="false">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.interestcalculationperiod' | translate }}<span
                        class="required">*</span>
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.interestcalculationperiod' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="interestCalculationPeriodType" ng-model="formData.interestCalculationPeriodType"
                            class="form-control"
                            ng-options="interestCalculationPeriodType.id as interestCalculationPeriodType.value for interestCalculationPeriodType in product.interestCalculationPeriodTypeOptions"
                            ng-change = "loanproduct.interestCalculationPeriodOption.value = formValue(product.interestCalculationPeriodTypeOptions,formData.interestCalculationPeriodType)"
                            value="{{interestCalculationPeriodType.id}}"></select>
                </div>
                <label class="control-label col-sm-3 col-sm-offset-1"
                       ng-show="formData.interestCalculationPeriodType == 1">{{
                    'label.input.allowpartialperiodinterestcalcualtion' | translate }}
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.allowpartialperiodinterestcalcualtion' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2" ng-show="formData.interestCalculationPeriodType == 1">
                    <label class="checkbox">
                        <input id="allowPartialPeriodInterestCalcualtion" type="checkbox"
                               ng-model="formData.allowPartialPeriodInterestCalcualtion">
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.repaymentstrategy' | translate }}<span
                        class="required">*</span>
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.repaymentstrategy' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="transactionProcessingStrategyId" ng-model="formData.transactionProcessingStrategyId"
                            class="form-control"
                            ng-options="transactionProcessingStrategy.id as transactionProcessingStrategy.name for transactionProcessingStrategy in product.transactionProcessingStrategyOptions"
                            ng-change = "loanproduct.transactionProcessingStrategy.name = formValue(product.transactionProcessingStrategyOptions,formData.transactionProcessingStrategyId,'id','name')"
                            value="{{transactionProcessingStrategy.id}}"></select>
                </div>
            </div>
            <div class="form-group">
                <br>
                <label class="control-label col-sm-2">{{ 'label.input.grace' | translate }}
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.moratorium' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="graceOnPrincipalPayment" class="form-control" name="graceOnPrincipalPayment"
                           placeholder="{{'label.input.onprincipalpayment' | translate}}"
                           type="text" ng-model="formData.graceOnPrincipalPayment"  late-validate number=true >
                    <form-validate valattributeform="Settings" valattribute="graceOnPrincipalPayment"/>
                </div>
                <div class="col-sm-2">
                    <input id="graceOnInterestPayment" placeholder="{{'label.input.oninterestpayment' | translate}}"
                           type="text" name="graceOnInterestPayment" class="form-control" ng-model="formData.graceOnInterestPayment" late-validate number=true >
                    <form-validate valattributeform="Settings" valattribute="graceOnInterestPayment"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.interestfreeperiod' | translate }}
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.interestfreeperiod' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="graceOnInterestCharged" type="text" name="graceOnInterestCharged" class="form-control"
                           ng-model="formData.graceOnInterestCharged" late-validate number=true >
                    <form-validate valattributeform="Settings" valattribute="graceOnInterestCharged"/>
                </div>
                <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.arearstolerance' | translate }}
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.arearstolerance' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="inArrearsTolerance" type="text" name="inArrearsTolerance" class="form-control" number-format
                           ng-model="formData.inArrearsTolerance" late-validate number=true>
                    <form-validate valattributeform="Settings" valattribute="inArrearsTolerance"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{'label.input.daysinyears' | translate }}<span
                        class="required">*</span>
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.daysinyear' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="daysInYearType" class="form-control" ng-model="formData.daysInYearType"
                            ng-options="type.id as type.value for type in product.daysInYearTypeOptions"
                            ng-change = "loanproduct.daysInYearOption.value = formValue(product.daysInYearTypeOptions,formData.daysInYearType)"
                            value="{{type.id}}"></select>
                </div>
                <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.daysinmonth' |
                    translate }}<span class="required">*</span>
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.daysinmonth' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="daysInMonthType" class="form-control" ng-model="formData.daysInMonthType"
                            ng-options="type.id as type.value for type in product.daysInMonthTypeOptions"
                            ng-change = "loanproduct.daysInMonthOption.value = formValue(product.daysInMonthTypeOptions,formData.daysInMonthType)"
                            value="{{type.id}}"></select>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-4">{{ 'label.input.candefineinstallmentamount' | translate }}</label>

                <div class="col-sm-2 checkbox">
                    <label>
                        <input type="checkbox" ng-model="formData.canDefineInstallmentAmount"/>
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-4">{{ 'label.input.no.of.overdue.days.to.move.loan.into.arrears'
                    | translate }}
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.numberofdays' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="graceOnArrearsAgeing" class="form-control" name="graceOnArrearsAgeing"
                           placeholder="{{'label.input.onduedate' | translate}}"
                           type="text" ng-model="formData.graceOnArrearsAgeing" late-validate number=true>
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Settings" valattribute="graceOnArrearsAgeing"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4">{{ 'label.input.no.of.overdue.days.to.change.loan.into.npa'
                    | translate }}
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.maxNumberofDays' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="overdueDaysForNPA" class="form-control" name="overdueDaysForNPA"
                           placeholder="{{'label.input.overduedaysfornpa' | translate}}"
                           type="text" ng-model="formData.overdueDaysForNPA" late-validate number=true>
                </div>
                <div class="col-sm-2">
                    <form-validate valattributeform="Settings" valattribute="overdueDaysForNPA"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4">{{'label.input.loan.account.moves.out.of.npa.only.on.arrears.completion'
                    | translate }}<span class="required">*</span></label>

                <div class="col-sm-2 checkbox">
                    <label>
                        <input id="accountMovesOutOfNPAOnlyOnArrearsCompletion" type="checkbox"
                               ng-model="formData.accountMovesOutOfNPAOnlyOnArrearsCompletion">
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-4">{{ 'label.input.thresholdforlastinstallment' | translate
                    }}</label>

                <div class="col-sm-2">
                    <input id="principalThresholdForLastInstallment" type="text" name="principalThresholdForLastInstallment" class="form-control"
                           ng-model="formData.principalThresholdForLastInstallment" late-validate number=true>
                </div>
                 <div class="col-sm-2">
                    <form-validate valattributeform="Settings" valattribute="principalThresholdForLastInstallment"/>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-3">
                    <input type="checkbox" name="name1" ng-model="formData.allowVariableInstallments"/>
                    {{'label.input.isvariableinstallmentsallowed' | translate}}
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.loanproduct.variableinstallments' | translate}}"
                       tooltip-append-to-body="true"></i>
                </div>
            </div>

            <div class="form-group" ng-show="formData.allowVariableInstallments">
                <label class="control-label col-sm-2">{{ 'label.input.variableinstallments' | translate }}
                </label>

                <div class="col-sm-2">
                    <input id="minimumgap" name="minimumgap" class="form-control" type="text"
                           ng-model="formData.minimumGap"
                           placeholder="{{'label.input.minimumgap' | translate}}" number-format/>
                </div>

                <div class="col-sm-2">
                    <input id="maximumgap" name="maximumgap" class="form-control" type="text"
                           ng-model="formData.maximumGap"
                           placeholder="{{'label.input.maximumgap' | translate}}" number-format/>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-3">
                    <input type="checkbox" name="canUseForTopup" ng-model="formData.canUseForTopup"/>
                    {{'label.input.canUseForTopup' | translate}}
                    <i class="fa fa-question-circle"
                       uib-tooltip="{{'label.tooltip.loanproduct.canUseForTopup' | translate}}"
                       tooltip-append-to-body="true"></i>
                </div>
            </div>


            <h3>{{ 'label.heading.interestRecalculation' | translate }}</h3>
            <hr>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.recalculateinterest' | translate }}</label>

                <div class="col-sm-2 checkbox">
                    <label>
                        <input type="checkbox" ng-model="formData.isInterestRecalculationEnabled"/>
                    </label>
                </div>
            </div>
            <div class="form-group" data-ng-show="formData.isInterestRecalculationEnabled">
                <label class="control-label col-sm-2">{{'label.input.preclose.interest.calculation.strategy'
                    | translate }}<span class="required">*</span>
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.preclosureinterestcalculationstrategy' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="preClosureInterestCalculationStrategy" class="form-control"
                            ng-model="formData.preClosureInterestCalculationStrategy"
                            ng-options="type.id as type.code | translate for type in product.preClosureInterestCalculationStrategyOptions"
                            ng-change = "loanproduct.interestRecalculationData.preClosureInterestCalculationStrategyCode.code = formValue(product.preClosureInterestCalculationStrategyOptions,formData.preClosureInterestCalculationStrategy,'id','code')"
                            value="{{type.id}}"></select>
                </div>
                <label class="control-label col-sm-2 col-sm-offset-2">{{'label.input.interest.recalculation.reschdule.strategy'
                    | translate }}<span class="required">*</span>
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.advancepayments' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="rescheduleStrategyMethod" class="form-control"
                            ng-model="formData.rescheduleStrategyMethod"
                            ng-options="type.id as type.value for type in product.rescheduleStrategyTypeOptions"
                            ng-change = "loanproduct.interestRecalculationData.rescheduleStrategyType.value = formValue(product.rescheduleStrategyTypeOptions,formData.rescheduleStrategyMethod)"
                            value="{{type.id}}"></select>
                </div>
            </div>

            <div class="form-group" data-ng-show="formData.isInterestRecalculationEnabled">
                <label class="control-label col-sm-2">{{'label.input.interest.recalculation.compounding.method'
                    | translate }}<span class="required">*</span>
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.interestrecalculation' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="interestRecalculationCompoundingMethod" class="form-control"
                            ng-model="formData.interestRecalculationCompoundingMethod"
                            ng-options="type.id as type.value for type in product.interestRecalculationCompoundingTypeOptions"
                            ng-change = "loanproduct.interestRecalculationData.interestRecalculationCompoundingType.value = formValue(product.interestRecalculationCompoundingTypeOptions,formData.interestRecalculationCompoundingMethod)"
                            value="{{type.id}}"></select>
                </div>
            </div>

            <div class="form-group"
                 data-ng-show="formData.isInterestRecalculationEnabled && formData.interestRecalculationCompoundingMethod != 0">
                <label class="control-label col-sm-2">{{'label.input.frequency.for.compounding'
                    | translate }}<span class="required">*</span>
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.frequencytocompounding' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="recalculationCompoundingFrequencyType" class="form-control"
                            ng-model="formData.recalculationCompoundingFrequencyType"
                            ng-options="type.id as type.value for type in product.interestRecalculationFrequencyTypeOptions"
                            ng-change = "loanproduct.interestRecalculationData.interestRecalculationFrequencyType.value = formValue(product.interestRecalculationFrequencyTypeOptions,formData.recalculationCompoundingFrequencyType)"
                            value="{{type.id}}"></select>
                </div>

                <div>
                    <div class="col-sm-2" data-ng-show="formData.recalculationCompoundingFrequencyType == 4">
                        <select id="recalculationCompoundingFrequencyNthDayType" class="form-control"
                                ng-model="formData.recalculationCompoundingFrequencyNthDayType"
                                ng-options="recalculationCompoundingFrequencyNthDayType.id as recalculationCompoundingFrequencyNthDayType.value for recalculationCompoundingFrequencyNthDayType in product.interestRecalculationNthDayTypeOptions"
                                ng-change="loanproduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value = formValue(product.interestRecalculationNthDayTypeOptions,formData.recalculationCompoundingFrequencyNthDayType)"
                                value="{{recalculationCompoundingFrequencyNthDayType.id}}">
                            <option value=""></option>
                            <option value="onDay">On day</option>
                        </select>&nbsp;
                    </div>
                    <div class="col-sm-2"
                         data-ng-show="(formData.recalculationCompoundingFrequencyType == 4 && formData.recalculationCompoundingFrequencyNthDayType != -2) || formData.recalculationCompoundingFrequencyType == 3">
                        <select id="recalculationCompoundingFrequencyDayOfWeekType" class="form-control"
                                ng-model="formData.recalculationCompoundingFrequencyDayOfWeekType"
                                ng-options="recalculationCompoundingFrequencyDayOfWeekType.id as recalculationCompoundingFrequencyDayOfWeekType.value for recalculationCompoundingFrequencyDayOfWeekType in product.interestRecalculationDayOfWeekTypeOptions"
                                ng-change="loanproduct.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value = formValue(product.interestRecalculationDayOfWeekTypeOptions,formData.recalculationCompoundingFrequencyDayOfWeekType)"
                                value="{{recalculationCompoundingFrequencyDayOfWeekType.id}}">
                            <option value="">DAY</option>
                        </select>&nbsp;
                    </div>
                    <div class="col-sm-2"
                         data-ng-show="formData.recalculationCompoundingFrequencyType == 4 && formData.recalculationCompoundingFrequencyNthDayType == -2">
                        <select id="recalculationCompoundingFrequencyOnDayType" class="form-control"
                                ng-model="formData.recalculationCompoundingFrequencyOnDayType"
                                ng-options="recalculationCompoundingFrequencyOnDayType as recalculationCompoundingFrequencyOnDayType for recalculationCompoundingFrequencyOnDayType in interestRecalculationOnDayTypeOptions"
                                ng-change="loanproduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay.value = formValue(interestRecalculationOnDayTypeOptions,formData.recalculationCompoundingFrequencyOnDayType)"
                                value="{{recalculationCompoundingFrequencyOnDayType}}"></select>&nbsp;
                    </div>
                </div>
            </div>
            <div class="form-group" data-ng-show="formData.isInterestRecalculationEnabled && formData.interestRecalculationCompoundingMethod != 0
        && formData.recalculationCompoundingFrequencyType != 1">
                <label class="control-label col-sm-2">{{'label.input.frequenc.interval.for.compounding'
                    | translate }}<span class="required">*</span>
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.frequencycompoundinginterval' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="recalculationCompoundingFrequencyInterval" type="text" class="form-control"
                           ng-model="formData.recalculationCompoundingFrequencyInterval">
                </div>

            </div>


            <div class="form-group" data-ng-show="formData.isInterestRecalculationEnabled">
                <label class="control-label col-sm-2">{{'label.input.frequency.for.recalculte.outstanding.principal'
                    | translate }}<span class="required">*</span>
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.frequencytorecalculate' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <select id="recalculationRestFrequencyType" class="form-control"
                            ng-model="formData.recalculationRestFrequencyType"
                            ng-options="type.id as type.value for type in product.interestRecalculationFrequencyTypeOptions"
                            ng-change="loanproduct.interestRecalculationData.recalculationRestFrequencyType.value = formValue(product.interestRecalculationFrequencyTypeOptions,formData.recalculationRestFrequencyType)"
                            value="{{type.id}}"></select>
                </div>
                <div>
                    <div class="col-sm-2" data-ng-show="formData.recalculationRestFrequencyType == 4">
                        <select id="recalculationRestFrequencyNthDayType" class="form-control"
                                ng-model="formData.recalculationRestFrequencyNthDayType"
                                ng-options="recalculationRestFrequencyNthDayType.id as recalculationRestFrequencyNthDayType.value for recalculationRestFrequencyNthDayType in product.interestRecalculationNthDayTypeOptions"
                                ng-change="loanproduct.interestRecalculationData.recalculationRestFrequencyNthDay.value = formValue(product.interestRecalculationNthDayTypeOptions,formData.recalculationRestFrequencyNthDayType)"
                                value="{{recalculationRestFrequencyNthDayType.id}}">
                            <option value=""></option>
                        </select>&nbsp;
                    </div>
                    <div class="col-sm-2"
                         data-ng-show="(formData.recalculationRestFrequencyType == 4 && formData.recalculationRestFrequencyNthDayType != -2) || formData.recalculationRestFrequencyType == 3">
                        <select id="recalculationRestFrequencyDayOfWeekType" class="form-control"
                                ng-model="formData.recalculationRestFrequencyDayOfWeekType"
                                ng-options="recalculationRestFrequencyDayOfWeekType.id as recalculationRestFrequencyDayOfWeekType.value for recalculationRestFrequencyDayOfWeekType in product.interestRecalculationDayOfWeekTypeOptions"
                                ng-change="loanproduct.interestRecalculationData.recalculationRestFrequencyWeekday.value = formValue(product.interestRecalculationDayOfWeekTypeOptions,formData.recalculationRestFrequencyDayOfWeekType)"
                                value="{{recalculationRestFrequencyDayOfWeekType.id}}">
                            <option value=""></option>
                        </select>&nbsp;
                    </div>
                    <div class="col-sm-2"
                         data-ng-show="formData.recalculationRestFrequencyType == 4 && formData.recalculationRestFrequencyNthDayType == -2">
                        <select id="recalculationRestFrequencyOnDayType" class="form-control"
                                ng-model="formData.recalculationRestFrequencyOnDayType"
                                ng-options="recalculationRestFrequencyOnDayType as recalculationRestFrequencyOnDayType for recalculationRestFrequencyOnDayType in interestRecalculationOnDayTypeOptions"
                                ng-change="loanproduct.interestRecalculationData.recalculationRestFrequencyOnDay.value = formData.recalculationRestFrequencyOnDayType"
                                value="{{recalculationRestFrequencyOnDayType}}"></select>&nbsp;
                    </div>
                </div>
            </div>
            <div class="form-group"
                 data-ng-show="formData.isInterestRecalculationEnabled && formData.recalculationRestFrequencyType != 1">
                <label class="control-label col-sm-2">{{'label.input.frequenc.interval.for.recalculte.outstanding.principal'
                    | translate }}<span class="required">*</span>
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.frequencyInterval' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input id="recalculationRestFrequencyInterval" type="text" class="form-control"
                           ng-model="formData.recalculationRestFrequencyInterval">
                </div>

            </div>

            <div class="form-group" data-ng-show="formData.isInterestRecalculationEnabled">
                <label class="control-label col-sm-2">{{'label.input.arrearsbasedonoriginalschedule'
                    | translate }}<span class="required">*</span></label>

                <div class="col-sm-2 checkbox">
                    <label>
                        <input id="isArrearsBasedOnOriginalSchedule" type="checkbox"
                               ng-model="formData.isArrearsBasedOnOriginalSchedule">
                    </label>
                </div>
            </div>
            <h3>{{ 'label.heading.gauranteeRequirements' | translate }}</h3>
            <hr>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.holdguaranteefunds' | translate }}</label>

                        <div class="col-sm-2 checkbox">
                            <label>
                                <input type="checkbox" ng-model="formData.holdGuaranteeFunds"/>
                            </label>
                        </div>
                    </div>
                    <div class="form-group" data-ng-show="formData.holdGuaranteeFunds">
                        <label class="control-label col-sm-2">{{'label.input.mandatory.guarantee'
                            | translate }}<span class="required">*</span></label>

                        <div class="col-sm-2">
                            <input id="mandatoryGuarantee" type="text" class="form-control"
                                   ng-model="formData.mandatoryGuarantee"/>

                        </div>
                    </div>

                    <div class="form-group" data-ng-show="formData.holdGuaranteeFunds">
                        <label class="control-label col-sm-2">{{'label.input.minimum.guarantee.from.own.funds'
                            | translate }}</label>

                        <div class="col-sm-2">
                            <input id="minimumGuaranteeFromOwnFunds" type="text" class="form-control"
                                   ng-model="formData.minimumGuaranteeFromOwnFunds"/>

                        </div>
                        <label class="control-label col-sm-2 col-sm-offset-2">{{'label.input.minimum.guarantee.from.guarantor'
                            | translate }}</label>

                        <div class="col-sm-2"><input id="minimumGuaranteeFromGuarantor" type="text" class="form-control"
                                                     ng-model="formData.minimumGuaranteeFromGuarantor"/>
                        </div>
                    </div>
            <h3>{{ 'label.heading.tranchedetails' | translate }}</h3>
            <hr>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'label.input.multidisburseloan' | translate }}
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.isMultiDisburseLoan' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="checkbox col-sm-2">
                    <label>
                        <input type="checkbox" ng-model="formData.multiDisburseLoan"/>
                    </label>
                </div>
            </div>
            <div class="form-group" ng-show="formData.multiDisburseLoan">
                <label class="control-label col-sm-2">{{ 'label.input.maxtranchecount' | translate }}
                    <i class="fa fa-question-circle " uib-tooltip="{{'label.tooltip.maxtranchecount' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input type="text" class="form-control" id="maxTrancheCount" name="maxTrancheCount"
                           ng-model="formData.maxTrancheCount"/>
                </div>
                <label class="control-label col-sm-3 col-sm-offset-1">{{ 'label.input.outstandingloanbalance' |
                    translate }}
                    <i class="fa fa-question-circle "
                       uib-tooltip="{{'label.tooltip.maxAllowedOutstandingBalance' | translate}}"
                       tooltip-append-to-body="true"></i>
                </label>

                <div class="col-sm-2">
                    <input type="text" class="form-control" id="outstandingLoanBalance"
                           name="outstandingLoanBalance" number-format ng-model="formData.outstandingLoanBalance"/>
                </div>
            </div>
            <h3>{{ 'label.heading.configurableAttributes' | translate }}</h3>
            <hr>
            <div class="form-group">
                <label class="control-label col-sm-2 width20">{{ 'label.input.isConfigLoanAttributes' | translate
                    }}</label>

                <div class="checkbox col-sm-2">
                    <label>
                        <input type="checkbox" ng-model="allowAttributeConfiguration" ng-change="setAttributeValues()"/>
                    </label>
                </div>
            </div>
            <div class="form-group" ng-show="allowAttributeConfiguration">
                <label class="control-label col-sm-1 width20">{{ 'label.input.amortization' | translate }}</label>

                <div class="col-sm-2">
                    <input type="checkbox" ng-model="amortization"/>
                </div>
                <label class="control-label col-sm-2">{{ 'label.input.interestmethod' | translate }}</label>

                <div class="col-sm-2">
                    <input type="checkbox" ng-model="interestMethod"/>
                </div>
            </div>
            <div class="form-group" ng-show="allowAttributeConfiguration">
                <label class="control-label col-sm-1 width20">{{ 'label.input.repaymentstrategy' | translate }}</label>

                <div class="col-sm-2">
                    <input type="checkbox" ng-model="transactionProcessingStrategy"/>
                </div>
                <label class="control-label col-sm-2 ">{{ 'label.input.interestcalculationperiod' | translate }}</label>

                <div class="col-sm-2">
                    <input type="checkbox" ng-model="interestCalcPeriod"/>
                </div>
            </div>
            <div class="form-group" ng-show="allowAttributeConfiguration">

                <label class="control-label col-sm-1 width20">{{ 'label.input.arearstolerance' | translate }}</label>

                <div class="col-sm-2">
                    <input type="checkbox" ng-model="arrearsTolerance"/>
                </div>
                <label class="control-label col-sm-2">{{ 'label.input.repaidevery' | translate }}</label>

                <div class="col-sm-2">
                    <input type="checkbox" ng-model="repaymentFrequency"/>
                </div>
            </div>
            <div class="form-group" ng-show="allowAttributeConfiguration">

                <label class="control-label col-sm-1 width20">{{ 'label.input.grace' | translate }}</label>

                <div class="col-sm-2">
                    <input type="checkbox" ng-model="graceOnPrincipalAndInterest"/>
                </div>
                <label class="control-label col-sm-2">{{ 'label.input.no.of.overdue.days.to.move.loan.into.arrears' |
                    translate
                    }}</label>

                <div class="col-sm-2">
                    <input type="checkbox" ng-model="graceOnArrearsAging"/>
                </div>
            </div>
                    <hr>
                    <button class = "btn btn-default pull-left" wz-previous><i class = "fa fa-arrow-left"></i>&nbsp;&nbsp;Previous</button>
                    <button class = "btn btn-default pull-right" type="submit">Next&nbsp;&nbsp;<i class = "fa fa-arrow-right"></i></button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title="{{ 'label.heading.charges' | translate }}">
            <form name="Charges" novalidate="" class=" form-horizontal " ng-submit="goNext(Charges)">
                <fieldset>
                    <api-validate></api-validate>
            <!--<h3>{{ 'label.heading.charges' | translate }}</h3>-->
            <hr>
            <div class="form-group">
                <div class="col-sm-3">
                    <select id="chargeId" ng-model="chargeId" class="form-control"
                            ng-options="charge.id as charge.name for charge in product.chargeOptions | filter:filterCharges(formData.currencyCode, formData.multiDisburseLoan)"
                            value="{{charge.id}}">
                        <option class="displaynone" value="">{{'label.selectcharge' | translate}}</option>
                    </select>
                </div>
                <div class="col-sm-1">
                    <button type="button" class="btn btn-primary"
                            ng-click="chargeSelected(chargeId)"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{ 'label.button.add' | translate }}
                    </button>
                </div>
            </div>
            <div class="form-group col-md-12">
                <table data-ng-show="chargeFlag" class="table width100">
                    <tr class="graybg">
                        <th>{{'label.heading.name' | translate}}</th>
                        <th>{{'label.heading.type' | translate}}</th>
                        <th></th>
                        <th>{{'label.heading.amount' | translate}}</th>
                        <th></th>
                        <th>{{'label.heading.collectedon' | translate}}</th>
                        <th></th>
                        <th>{{'label.heading.date' | translate}}</th>
                        <th></th>
                        <th>{{'label.heading.actions' | translate}}</th>
                    </tr>
                    <tr ng-repeat="charge in charges" ng-hide="charge.penalty">
                        <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
                        <td>{{charge.chargeCalculationType.value}}</td>
                        <td></td>
                        <td>{{charge.amount}}</td>
                        <td></td>
                        <td>{{charge.chargeTimeType.value}}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><a ng-click="deleteCharge($index)"><i class="fa fa-times-circle fa-2x"></i></a></td>
                    </tr>
                </table>
            </div>
            <h3>{{ 'label.heading.overduepenalitycharge' | translate }}</h3>
            <hr>
            <div class="form-group">
                <div class="col-sm-3">
                    <select id="penalityId" ng-model="penalityId" class="form-control"
                            ng-options="penality.id as penality.name for penality in overduecharges | filter:formData.currencyCode:strict"
                            value="{{penality.id}}">
                        <option class="displaynone" value="">{{'label.selectoverduecharge' | translate}}</option>
                    </select>
                </div>
                <div class="col-sm-1">
                    <button type="button" class="btn btn-primary"
                            ng-click="chargeSelected(penalityId)"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{ 'label.button.add' | translate }}
                    </button>
                </div>
            </div>
            <div class="form-group col-md-12">
                <table data-ng-show="penalityFlag" class="table width100">
                    <tr class="graybg">
                        <th>{{'label.heading.name' | translate}}</th>
                        <th>{{'label.heading.type' | translate}}</th>
                        <th></th>
                        <th>{{'label.heading.amount' | translate}}</th>
                        <th></th>
                        <th>{{'label.heading.collectedon' | translate}}</th>
                        <th></th>
                        <th>{{'label.heading.date' | translate}}</th>
                        <th></th>
                        <th>{{'label.heading.actions' | translate}}</th>
                    </tr>
                    <tr ng-repeat="charge in charges" ng-show="charge.penalty">
                        <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
                        <td>{{charge.chargeCalculationType.value}}</td>
                        <td></td>
                        <td>{{charge.amount}}</td>
                        <td></td>
                        <td>{{charge.chargeTimeType.value}}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><a ng-click="deleteCharge($index)"><i class="fa fa-times-circle fa-2x"></i></a></td>
                    </tr>
                </table>
            </div>
                    <hr>
                    <button class = "btn btn-default pull-left" wz-previous><i class = "fa fa-arrow-left"></i>&nbsp;&nbsp;Previous</button>
                    <button class = "btn btn-default pull-right" type="submit">Next&nbsp;&nbsp;<i class = "fa fa-arrow-right"></i></button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title="{{ 'label.heading.accounting' | translate }}">
            <form name="Accounting" novalidate="" class=" form-horizontal " ng-submit="goNext(Accounting)">
                <fieldset>
                    <api-validate></api-validate>
            <!--<h3>{{ 'label.heading.accounting' | translate }}</h3>-->
            <hr>
            <div class="radio-inline">
                <label>
                    <input type="radio" ng-model="formData.accountingRule" value="1"/>{{'label.input.none' | translate}}
                </label>
            </div>
            <div class="radio-inline">
                <label>
                    <input type="radio" ng-model="formData.accountingRule" value="2"/>{{'label.input.cash' | translate}}
                </label>
            </div>
            <div class="radio-inline">
                <label>
                    <input type="radio" ng-model="formData.accountingRule" value="3"/>{{'label.input.periodicaccrual' |
                    translate}}
                </label>
            </div>
            <div class="radio-inline">
                <label>
                    <input type="radio" ng-model="formData.accountingRule" value="4"/>{{'label.input.upfrontaccrual' |
                    translate}}
                </label>
            </div>
            <hr>
            <div class="col-md-12" ng-show="isAccountingEnabled()">
                <div class="form-group">
                    <h4>{{"label.heading.assets" | translate}}</h4>
                    <label class="control-label col-sm-2">{{ 'label.input.fundsource' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.fundsource' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="fundSourceAccountId" ng-model="formData.fundSourceAccountId"
                                chosen="assetAccountOptions"
                                ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
                                ng-change="loanproduct.accountingMappings.fundSourceAccount.name = formValue(assetAccountOptions,formData.fundSourceAccountId,'id','name')"
                                value="{{assetAccount.id}}">
                        </select>
                    </div>
                    <label class="control-label col-sm-2">{{ 'label.input.loanportfolio' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.loanportfolio' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="loanPortfolioAccountId" class="form-control"
                                ng-model="formData.loanPortfolioAccountId"
                                chosen="assetAccountOptions"
                                ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
                                ng-change="loanproduct.accountingMappings.loanPortfolioAccount.name = formValue(assetAccountOptions,formData.loanPortfolioAccountId,'id','name')"
                                value="{{assetAccount.id}}">
                        </select>
                    </div>
                </div>
                <div class="form-group" ng-show="isAccrualAccountingEnabled()">
                    <label class="control-label col-sm-2">{{ 'label.input.receivableinterest' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.receivableinterest' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="receivableInterestAccountId" class="form-control"
                                ng-model="formData.receivableInterestAccountId" chosen="assetAccountOptions"
                                ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
                                ng-change="loanproduct.accountingMappings.receivableInterestAccount.name = formValue(assetAccountOptions,formData.receivableInterestAccountId,'id','name')"
                                value="{{assetAccount.id}}">
                        </select>
                    </div>
                    <label class="control-label col-sm-2">{{ 'label.input.receivablefees' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.receivablefees' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="receivableFeeAccountId" ng-model="formData.receivableFeeAccountId"
                                chosen="assetAccountOptions"
                                ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
                                ng-change = "loanproduct.accountingMappings.receivableFeeAccount.name = formValue(assetAccountOptions,formData.receivableFeeAccountId,'id','name')"
                                value="{{assetAccount.id}}">
                        </select>
                    </div>
                </div>
                <div class="form-group" ng-show="isAccrualAccountingEnabled()">
                    <label class="control-label col-sm-2">{{ 'label.input.receivablepenalties' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.receivablepenalties' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="receivablePenaltyAccountId" ng-model="formData.receivablePenaltyAccountId"
                                chosen="assetAccountOptions"
                                ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
                                ng-change="loanproduct.accountingMappings.receivablePenaltyAccount.name = formValue(assetAccountOptions,formData.receivablePenaltyAccountId,'id','name')"
                                value="{{assetAccount.id}}">
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">{{ 'label.input.transfersinsuspense' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.transfersinsuspense' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="transfersInSuspenseAccountId" ng-model="formData.transfersInSuspenseAccountId"
                                chosen="assetAccountOptions"
                                ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
                                ng-change="loanproduct.accountingMappings.transfersInSuspenseAccount.name = formValue(assetAccountOptions,formData.transfersInSuspenseAccountId,'id','name')"
                                value="{{assetAccount.id}}">
                        </select>
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <h4>{{"label.heading.income" | translate}}</h4>
                    <label class="control-label col-sm-2">{{ 'label.input.incomefrominterest' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.incomefrominterest' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="interestOnLoanAccountId" ng-model="formData.interestOnLoanAccountId"
                                chosen="incomeAccountOptions"
                                ng-options="incomeAccount.id as incomeAccount.name for incomeAccount in incomeAccountOptions"
                                ng-change="loanproduct.accountingMappings.interestOnLoanAccount.name = formValue(incomeAccountOptions,formData.interestOnLoanAccountId,'id','name')"
                                value="{{incomeAccount.id}}">
                        </select>
                    </div>
                    <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
                                chosen="incomeAccountOptions"
                                ng-options="incomeAccount.id as incomeAccount.name for incomeAccount in incomeAccountOptions"
                                ng-change="loanproduct.accountingMappings.incomeFromFeeAccount.name = formValue(incomeAccountOptions,formData.incomeFromFeeAccountId,'id','name')"
                                value="{{incomeAccount.id}}">
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">{{ 'label.input.incomefrompenalties' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.incomefrompenalties' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="incomeFromPenaltyAccountId" ng-model="formData.incomeFromPenaltyAccountId"
                                chosen="incomeAccountOptions"
                                ng-options="incomeAccount.id as incomeAccount.name for incomeAccount in incomeAccountOptions"
                                ng-change="loanproduct.accountingMappings.incomeFromPenaltyAccount.name = formValue(incomeAccountOptions,formData.incomeFromPenaltyAccountId,'id','name')"
                                value="{{incomeAccount.id}}">
                        </select>
                    </div>
                    <label class="control-label col-sm-2">{{ 'label.input.recoverypayments' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.recoverypayments' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="incomeFromRecoveryAccountId" ng-model="formData.incomeFromRecoveryAccountId"
                                chosen="incomeAccountOptions"
                                ng-options="incomeAccount.id as incomeAccount.name for incomeAccount in incomeAccountOptions"
                                ng-change="loanproduct.accountingMappings.incomeFromRecoveryAccount.name = formValue(incomeAccountOptions,formData.incomeFromRecoveryAccountId,'id','name')"
                                value="{{incomeAccount.id}}">
                        </select>
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <h4>{{"label.heading.expenses" | translate}}</h4>
                    <label class="control-label col-sm-2">{{ 'label.input.loseswrittenoff' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.loseswrittenoff' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="writeOffAccountId" ng-model="formData.writeOffAccountId"
                                chosen="expenseAccountOptions"
                                ng-options="expenseAccount.id as expenseAccount.name for expenseAccount in expenseAccountOptions"
                                ng-change="loanproduct.accountingMappings.writeOffAccount.name = formValue(expenseAccountOptions,formData.writeOffAccountId,'id','name')"
                                value="{{expenseAccount.id}}">
                        </select>
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <h4>{{"label.heading.liabilities" | translate}}</h4>
                    <label class="control-label col-sm-2">{{ 'label.input.overpaymentliability' | translate }}
                        <i class="fa fa-question-circle"
                           uib-tooltip="{{'label.tooltip.overpaymentliability' | translate}}"
                           tooltip-append-to-body="true"></i>
                    </label>
                    <div class="col-sm-3">
                        <select id="overpaymentLiabilityAccountId" ng-model="formData.overpaymentLiabilityAccountId"
                                chosen="liabilityAccountOptions"
                                ng-options="liabilityAccount.id as liabilityAccount.name for liabilityAccount in liabilityAccountOptions"
                                ng-change="loanproduct.accountingMappings.overpaymentLiabilityAccount.name = formValue(liabilityAccountOptions,formData.overpaymentLiabilityAccountId,'id','name')"
                                value="{{liabilityAccount.id}}">
                        </select>
                    </div>
                </div>
                <hr>
                <h4>{{'label.heading.advancedaccountingrules' | translate}}[<a ng-click="showOrHide(showOrHideValue)">{{showOrHideValue}}</a>]
                </h4>

                <div class="col-md-12" ng-show="showOrHideValue == 'hide'">
                    <div class="col-md-8">{{'label.heading.configurefundsourcesforpaymentchannels' | translate}}</div>
                    <div class="col-md-4">
                        <a class="btn btn-primary" ng-click="addConfigureFundSource()"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{ 'label.button.add' | translate
                            }}</a>
                    </div>
                    <table class="table" data-ng-show="frFlag">
                        <tr class="graybg">
                            <th class="width30">{{'label.heading.paymenttype' | translate}}</th>
                            <th></th>
                            <th class="width30">{{'label.heading.fundsource' | translate}}</th>
                            <th></th>
                            <th class="width30">{{'label.heading.actions' | translate}}</th>
                        </tr>
                        <tr ng-repeat="configureFundOption in configureFundOptions">
                            <td class="width30">
                                <select id="configureFundOptions[{{$index}}].paymentTypeId"
                                        class="form-control"
                                        ng-model="configureFundOption.paymentTypeId"
                                        ng-options="paymentType.id as paymentType.name for paymentType in configureFundOption.paymentTypeOptions"
                                        ng-change="loanproduct.paymentChannelToFundSourceMappings[$index].paymentType.name = formValue(configureFundOption.paymentTypeOptions,configureFundOption.paymentTypeId,'id','name')"
                                        value="{{paymentType.id}}">
                                </select>
                            </td>
                            <td></td>
                            <td class="width30">
                                <select id="configureFundOptions[{{$index}}].fundSourceAccountId"
                                        ng-model="configureFundOption.fundSourceAccountId"
                                        chosen="configureFundOption.assetAccountOptions"
                                        ng-options="assetAccount.id as assetAccount.name for assetAccount in configureFundOption.assetAccountOptions"
                                        ng-change = "loanproduct.paymentChannelToFundSourceMappings[$index].fundSourceAccount.name = formValue(configureFundOption.assetAccountOptions,configureFundOption.fundSourceAccountId,'id','name')"
                                        value="{{assetAccount.id}}">
                                </select>
                            </td>
                            <td></td>
                            <td class="width30">
                                <a ng-click="deleteFund($index)"><i class="fa fa-remove "></i></a>
                            </td>
                        </tr>
                    </table>
                    <div class="col-md-8">{{'label.heading.mapfeestoincomeaccounts' | translate}}</div>
                    <div class="col-md-4">
                        <a class="btn btn-primary" ng-click="mapFees()"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{ 'label.button.add' | translate }}</a>
                    </div>
                    <table class="table width100" data-ng-show="fiFlag">
                        <tr class="graybg">
                            <th class="width30">{{'label.heading.fees' | translate}}</th>
                            <th></th>
                            <th class="width30">{{'label.heading.incomeaccount' | translate}}</th>
                            <th></th>
                            <th class="width30">{{'label.heading.actions' | translate}}</th>
                        </tr>
                        <tr ng-repeat="specificMapping in specificIncomeAccountMapping">
                            <td class="width30">
                                <select id="specificIncomeAccountMapping[{{$index}}].chargeId"
                                        ng-model="specificMapping.chargeId" class="form-control"
                                        ng-options="charge.id as charge.name for charge in chargeOptions"
                                        ng-change="loanproduct.feeToIncomeAccountMappings[$index].charge.name = formValue(chargeOptions,specificMapping.chargeId,'id','name')"
                                        value="{{charge.id}}">
                                </select>
                            </td>
                            <td></td>
                            <td class="width30">
                                <select id="specificIncomeAccountMapping[{{$index}}].incomeAccountId"
                                        ng-model="specificMapping.incomeAccountId"
                                        chosen="incomeAndLiabilityAccountOptions"
                                        ng-options="account.id as account.name for account in incomeAndLiabilityAccountOptions"
                                        ng-change="loanproduct.feeToIncomeAccountMappings[$index].incomeAccount.name = formValue(incomeAndLiabilityAccountOptions,specificMapping.incomeAccountId,'id','name')"
                                        value="{{account.id}}">
                                </select>
                            </td>
                            <td></td>
                            <td class="width30">
                                <a ng-click="deleteFee($index)"><i class="fa fa-remove "></i></a>
                            </td>
                        </tr>
                    </table>
                    <div class="col-md-8">{{'label.heading.mappenaltiestospecificincomeaccounts' | translate}}</div>
                    <div class="col-md-4">
                        <a class="btn btn-primary" ng-click="mapPenalty()"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{ 'label.button.add' | translate }}</a>
                    </div>
                    <table class="table" data-ng-show="piFlag">
                        <tr class="graybg">
                            <th class="width30">{{'label.heading.penalty' | translate}}</th>
                            <th></th>
                            <th class="width30">{{'label.heading.incomeaccount' | translate}}</th>
                            <th></th>
                            <th class="width30">{{'label.heading.actions' | translate}}</th>
                        </tr>
                        <tr ng-repeat="penaltySpecificIncomeaccount in penaltySpecificIncomeaccounts">
                            <td class="width30">
                                <select id="penaltySpecificIncomeaccounts[{{$index}}].chargeId"
                                        class="form-control"
                                        ng-model="penaltySpecificIncomeaccount.chargeId"
                                        ng-options="charge.id as charge.name for charge in penaltyOptions"
                                        ng-change="loanproduct.penaltyToIncomeAccountMappings[$index].charge.name = formValue(penaltyOptions,penaltySpecificIncomeaccount.chargeId,'id','name')"
                                        value="{{charge.id}}">
                                </select>
                            </td>
                            <td></td>
                            <td class="width30">
                                <select id="penaltySpecificIncomeaccounts[{{$index}}].incomeAccountId"
                                        class="form-control"
                                        ng-model="penaltySpecificIncomeaccount.incomeAccountId"
                                        ng-options="account.id as account.name for account in incomeAccountOptions"
                                        ng-change="loanproduct.penaltyToIncomeAccountMappings[$index].incomeAccount.name = formValue(incomeAccountOptions,penaltySpecificIncomeaccount.incomeAccountId,'id','name')"
                                        value="{{account.id}}">
                                </select>
                            </td>
                            <td></td>
                            <td class="width30"><i class="fa fa-remove" ng-click="deletePenalty($index)"></i></td>
                        </tr>
                    </table>
                </div>
            </div>
                    <hr>
                    <button class = "btn btn-default pull-left" wz-previous><i class = "fa fa-arrow-left"></i>&nbsp;&nbsp;Previous</button>
                    <button class = "btn btn-default pull-right" type="submit">&nbsp;&nbsp;Next<i class = "fa fa-arrow-right"></i></button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step ng-if="isClicked" wz-title = "Preview">
            <form name="Preview" novalidate="" class="form-horizontal  ">
                <fieldset>
                    <api-validate></api-validate>
                    <br>
                    <br>
            <h3>{{loanproduct.name}}</h3>
                    <hr>
            <table width="100%">
                <tr>
                    <td>
                        <a id="test" class="old-syle-anchor">&nbsp;</a>
                    </td>
                </tr>
                <tr class="bottomborder">
                    <td colspan="4">
                        <strong>{{'label.heading.details' | translate}}</strong>
                    </td>
                </tr>
                <tr class="toppadding" ng-show="loanproduct.description">
                    <td>{{'label.heading.description' | translate}} :</td>
                    <td colspan="3">{{loanproduct.description}}</td>
                </tr>
                <tr ng-show="loanproduct.shortName">
                    <td>{{'label.heading.shortname' | translate}} :</td>
                    <td colspan="3">{{loanproduct.shortName}}</td>
                </tr>
                <tr ng-show="loanproduct.fundName">
                    <td>{{'label.heading.fundname' | translate}}:</td>
                    <td colspan="3">{{loanproduct.fundName}}</td>
                </tr>
                <tr ng-show="date.first">
                    <td>{{'label.heading.startdate' | translate}}:</td>
                    <td colspan="3">{{date.first | DateFormat}}</td>
                </tr>
                <tr ng-show="date.second">
                    <td>{{'label.heading.closedate' | translate}}:</td>
                    <td colspan="3">{{date.second | DateFormat}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.includeborrowercycle' | translate}} :</td>
                    <td colspan="3">{{loanproduct.includeInBorrowerCycle}}</td>
                </tr>
                <tr>
                    <td colspan="4"><br/></td>
                </tr>
                <tr class="bottomborder">
                    <td colspan="4"><strong>{{'label.heading.currency' | translate}}</strong></td>
                </tr>
                <tr class="toppadding">
                    <td>{{'label.heading.currency' | translate}}:</td>
                    <td colspan="3">{{loanproduct.currency.name}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.decimalplaces' | translate}} :</td>
                    <td colspan="3">{{formData.digitsAfterDecimal}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.currencyinmultiplesof' | translate}}</td>
                    <td colspan="3">{{formData.inMultiplesOf}}</td>
                </tr>
                <tr>
                    <td>{{'label.input.installmentinmultiplesof' | translate}}</td>
                    <td colspan="3">{{loanproduct.installmentAmountInMultiplesOf}}</td>
                </tr>
                <tr>
                    <td colspan="4"><br/></td>
                </tr>
                <tr class="bottomborder">
                    <td colspan="4"><strong>{{'label.heading.terms' | translate}}</strong></td>
                </tr>
                <tr>
                    <td>{{'label.input.useborrowerloancounter' | translate}} :</td>
                    <td colspan="3">{{loanproduct.useBorrowerCycle}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.principal' | translate}}:</td>
                    <td colspan="3">{{loanproduct.principal|number}}&nbsp;&nbsp;&nbsp;( Min:{{loanproduct.minPrincipal|number}}&nbsp;, Max
                        :{{loanproduct.maxPrincipal|number}} )
                    </td>
                </tr>
                <tr>
                    <td>{{'label.heading.numofrepayments' | translate}}:</td>
                    <td colspan="3">{{loanproduct.numberOfRepayments}}&nbsp;&nbsp;&nbsp;( Min:{{loanproduct.minNumberOfRepayments}}&nbsp;,
                        Max:{{loanproduct.maxNumberOfRepayments}})
                    </td>
                </tr>
                <tr>
                    <td>{{'label.heading.repayevery' | translate}}:</td>
                    <td colspan="3">{{loanproduct.repaymentEvery}}&nbsp;&nbsp;{{loanproduct.repaymentFrequencyOption.value}}</td>
                </tr>
                <tr ng-show="!loanproduct.isLinkedToFloatingInterestRates">
                    <td>{{'label.heading.nominalinterestrate' | translate}}:</td>
                    <td colspan="3">{{loanproduct.interestRatePerPeriod | number}}&nbsp;&nbsp;&nbsp;(
                        Min:{{loanproduct.minInterestRatePerPeriod | number}}&nbsp;, Max:{{loanproduct.maxInterestRatePerPeriod | number}})&nbsp;&nbsp;{{loanproduct.interestRateFrequencyOption.value}}
                    </td>
                </tr>
                <tr ng-show="loanproduct.isLinkedToFloatingInterestRates">
                    <td>{{'label.heading.floatinglendingrate' | translate}}:</td>
                    <td colspan="3">{{loanproduct.floatingRateName}}&nbsp;&nbsp;&nbsp;
                        {{'label.heading.floatinginterestratedifferential' | translate}}:{{loanproduct.interestRateDifferential}} &nbsp;&nbsp;&nbsp;
                        {{'label.heading.isFloatingInterestRateCalculationAllowed' | translate}}:{{loanproduct.isFloatingInterestRateCalculationAllowed}}
                    </td>
                </tr>

                <tr ng-show="loanproduct.isLinkedToFloatingInterestRates">
                    <td>{{'label.heading.floatinginterestrate' | translate}}:</td>
                    <td colspan="3">{{loanproduct.defaultDifferentialLendingRate}}&nbsp;&nbsp;&nbsp;
                        (Min:{{loanproduct.minDifferentialLendingRate}}&nbsp;, Max:{{loanproduct.maxDifferentialLendingRate}})&nbsp;&nbsp;
                    </td>
                </tr>

                <tr class="bottomborder" ng-show="loanproduct.useBorrowerCycle">
                    <td colspan="4"><strong>{{'label.heading.principalCycleVariations' | translate}}:</strong></td>
                </tr>
                <tr class="bottomborder graybg" ng-show="loanproduct.useBorrowerCycle">
                    <td>{{'label.input.cyclenumber' | translate}}</td>
                    <td>{{'label.input.minimum' | translate}}</td>
                    <td>{{'label.input.default' | translate}}</td>
                    <td>{{'label.input.maximum' | translate}}</td>
                    <td></td>
                </tr>
                <tr ng-repeat="borrowerCycleVariation in loanproduct.principalVariationsForBorrowerCycle">
                    <td>{{borrowerCycleVariation.valueConditionType.code | translate}}{{borrowerCycleVariation.borrowerCycleNumber}}
                    </td>
                    <td>{{borrowerCycleVariation.minValue}}</td>
                    <td>{{borrowerCycleVariation.defaultValue}}</td>
                    <td>{{borrowerCycleVariation.maxValue}}</td>
                </tr>
                <tr class="bottomborder" ng-show="loanproduct.useBorrowerCycle">
                    <td colspan="4"><strong>{{'label.heading.numerOfRepaymentCycleVariations' | translate}}</strong></td>
                </tr>
                <tr class="bottomborder graybg" ng-show="loanproduct.useBorrowerCycle">
                    <td>{{'label.input.cyclenumber' | translate}}</td>
                    <td>{{'label.input.minimum' | translate}}</td>
                    <td>{{'label.input.default' | translate}}</td>
                    <td>{{'label.input.maximum' | translate}}</td>
                    <td></td>
                </tr>
                <tr ng-repeat="borrowerCycleVariation in loanproduct.numberOfRepaymentVariationsForBorrowerCycle">
                    <td>{{borrowerCycleVariation.valueConditionType.code | translate}}{{borrowerCycleVariation.borrowerCycleNumber}}
                    </td>
                    <td>{{borrowerCycleVariation.minValue}}</td>
                    <td>{{borrowerCycleVariation.defaultValue}}</td>
                    <td>{{borrowerCycleVariation.maxValue}}</td>
                </tr>
                <tr class="bottomborder" ng-show="loanproduct.useBorrowerCycle">
                    <td colspan="4"><strong>{{'label.heading.interestRateCycleVariations' | translate}}</strong></td>
                </tr>
                <tr class="bottomborder graybg" ng-show="loanproduct.useBorrowerCycle">
                    <td>{{'label.input.cyclenumber' | translate}}</td>
                    <td>{{'label.input.minimum' | translate}}</td>
                    <td>{{'label.input.default' | translate}}</td>
                    <td>{{'label.input.maximum' | translate}}</td>
                    <td></td>
                </tr>
                <tr ng-repeat="borrowerCycleVariation in loanproduct.interestRateVariationsForBorrowerCycle">
                    <td>{{borrowerCycleVariation.valueConditionType.code | translate}}{{borrowerCycleVariation.borrowerCycleNumber}}
                    </td>
                    <td>{{borrowerCycleVariation.minValue}}</td>
                    <td>{{borrowerCycleVariation.defaultValue}}</td>
                    <td>{{borrowerCycleVariation.maxValue}}</td>
                </tr>
                <tr>
                    <td>{{'label.input.minimum.days.between.disbursal.and.first.repayment' | translate}}</td>
                    <td colspan="3">{{loanproduct.minimumDaysBetweenDisbursalAndFirstRepayment}}</td>
                </tr>
                <tr>
                    <td colspan="4"><br/></td>
                </tr>
                <tr class="bottomborder">
                    <td colspan="4"><strong>{{'label.heading.settings' | translate}}</strong></td>
                </tr>
                <tr class="toppadding">
                    <td>{{'label.heading.amortization' | translate}}</td>
                    <td colspan="3">{{loanproduct.amortizationOption.value}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.interestmethod' | translate}}</td>
                    <td colspan="3">{{loanproduct.interestOption.value}}</td>
                </tr>
                <tr>
                    <td>{{ 'label.input.isequalamortization' | translate }}</td>
                    <td colspan="3">{{loanproduct.isEqualAmortization}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.interestcalculationperiod' | translate}}</td>
                    <td colspan="3">{{loanproduct.interestCalculationPeriodOption.value}}</td>
                </tr>
                <tr ng-show="formData.interestCalculationPeriodType == 1">
                    <td>{{'label.heading.allowpartialperiodinterestcalcualtion' | translate}}</td>
                    <td colspan="3">{{loanproduct.allowPartialPeriodInterestCalcualtion}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.arrearstolerance' | translate}}</td>
                    <td colspan="3">{{loanproduct.inArrearsTolerance|number}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.repaymentstrategy' | translate}}</td>
                    <td colspan="3">{{loanproduct.transactionProcessingStrategyName}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.grace' | translate}}</td>
                    <td colspan="3">{{loanproduct.graceOnPrincipalPayment}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.interestfreeperiod' | translate}}</td>
                    <td colspan="3">{{loanproduct.graceOnInterestCharged}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.graceOnArrearsAgeing' | translate}}</td>
                    <td colspan="3">{{loanproduct.graceOnArrearsAgeing}}</td>
                </tr>
                <tr>
                    <td>{{'label.heading.overduedaysfornpa' | translate}}</td>
                    <td colspan="3">{{loanproduct.overdueDaysForNPA}}</td>
                </tr>
                <tr>
                    <td>{{'label.input.loan.account.moves.out.of.npa.only.on.arrears.completion' | translate}}</td>
                    <td colspan="3">{{loanproduct.accountMovesOutOfNPAOnlyOnArrearsCompletion | YesOrNo}}</td>
                </tr>
                <tr>
                    <td>{{'label.input.daysinyears' | translate}}</td>
                    <td colspan="3">{{loanproduct.daysInYearOption.value}}</td>
                </tr>
                <tr>
                    <td>{{'label.input.daysinmonth' | translate}}</td>
                    <td colspan="3">{{loanproduct.daysInMonthOption.value}}</td>
                </tr>
                <tr>
                    <td>{{'label.input.thresholdforlastinstallment' | translate}}</td>
                    <td colspan="3">{{loanproduct.principalThresholdForLastInstallment}}</td>
                </tr>
                <tr>
                    <td>{{'label.input.candefineinstallmentamount' | translate}}</td>
                    <td colspan="3">{{loanproduct.canDefineInstallmentAmount | YesOrNo}}</td>
                </tr>

                <tr ng-show="loanproduct.allowVariableInstallments">
                    <td>{{'label.input.variableinstallments' | translate}}</td>
                    <td colspan="3">(Min:{{loanproduct.minimumGap}}&nbsp;, Max:{{loanproduct.maximumGap}})
                    </td>
                </tr>
                <tr>
                    <td>{{'label.input.canUseForTopup' | translate}}</td>
                    <td colspan="3">{{loanproduct.canUseForTopup | YesOrNo}}</td>
                </tr>

                <tr>
                    <td colspan="4"><br/></td>
                </tr>
                <tr class="bottomborder">
                    <td colspan="4"><strong>{{'label.heading.interestRecalculation' | translate}}</strong></td>
                </tr>
                <tr>
                    <td>{{'label.input.recalculateinterest' | translate}}</td>
                    <td colspan="3">{{loanproduct.isInterestRecalculationEnabled | YesOrNo}}</td>
                </tr>

                <tr data-ng-show="loanproduct.isInterestRecalculationEnabled">
                    <td>{{'label.input.interest.recalculation.reschdule.strategy' | translate}}</td>
                    <td colspan="3">{{loanproduct.interestRecalculationData.rescheduleStrategyType.value}}</td>
                </tr>
                <tr data-ng-show="loanproduct.isInterestRecalculationEnabled">
                    <td>{{'label.input.preclose.interest.calculation.strategy' | translate}}</td>
                    <td colspan="3">{{loanproduct.interestRecalculationData.preClosureInterestCalculationStrategyCode.code | translate}}</td>
                </tr>
                <tr data-ng-show="loanproduct.isInterestRecalculationEnabled">
                    <td>{{'label.input.interest.recalculation.compounding.method' | translate}}</td>
                    <td colspan="3">{{loanproduct.interestRecalculationData.interestRecalculationCompoundingType.value}}</td>
                </tr>
                <tr data-ng-show="loanproduct.isInterestRecalculationEnabled && formData.interestRecalculationCompoundingMethod != 0">
                    <td>{{'label.input.frequency.for.compounding' | translate}}</td>
                    <td colspan="3">{{loanproduct.interestRecalculationData.recalculationCompoundingFrequencyType.value}}
                        <label data-ng-show="formData.recalculationCompoundingFrequencyType == 3 &&
                        loanproduct.interestRecalculationData.recalculationCompoundingFrequencyWeekday != null"> on {{ loanproduct.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}</label>
                        <label data-ng-show="loanproduct.interestRecalculationData.recalculationCompoundingFrequencyType.id == 4 &&
		                loanproduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay.value != null">on day {{ loanproduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay.value}}</label>
                        <label data-ng-show="formData.recalculationCompoundingFrequencyType == 4 &&
                        loanproduct.interestRecalculationData.recalculationCompoundingFrequencyOnDay.value == null &&
                        loanproduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay != null">on {{ loanproduct.interestRecalculationData.recalculationCompoundingFrequencyNthDay.value}} {{ loanproduct.interestRecalculationData.recalculationCompoundingFrequencyWeekday.value}}
                        </label>
                    </td>
                </tr>
                <tr data-ng-show="loanproduct.isInterestRecalculationEnabled && formData.interestRecalculationCompoundingMethod != 0
        && formData.recalculationCompoundingFrequencyType != 1">
                    <td>{{'label.input.frequency.interval.for.compounding' | translate}}</td>
                    <td colspan="3">{{formData.recalculationCompoundingFrequencyInterval}}</td>
                </tr>


                <tr data-ng-show="loanproduct.isInterestRecalculationEnabled">
                    <td>{{'label.input.frequency.for.recalculte.outstanding.principal' | translate}}</td>
                    <td colspan="3">{{loanproduct.interestRecalculationData.recalculationRestFrequencyType.value}}
                        <label data-ng-show="formData.recalculationRestFrequencyType == 3 &&
                        loanproduct.interestRecalculationData.recalculationRestFrequencyWeekday != null"> on {{ loanproduct.interestRecalculationData.recalculationRestFrequencyWeekday.value}}</label>
                        <label data-ng-show="formData.recalculationRestFrequencyType == 4 &&
		                loanproduct.interestRecalculationData.recalculationRestFrequencyOnDay.value != null">on day {{ loanproduct.interestRecalculationData.recalculationRestFrequencyOnDay.value}}</label>
                        <label data-ng-show="formData.recalculationRestFrequencyType == 4 &&
                        loanproduct.interestRecalculationData.recalculationRestFrequencyOnDay.value == null &&
                        loanproduct.interestRecalculationData.recalculationRestFrequencyNthDay != null">on {{ loanproduct.interestRecalculationData.recalculationRestFrequencyNthDay.value}} {{ loanproduct.interestRecalculationData.recalculationRestFrequencyWeekday.value}}
                        </label>
                    </td>
                </tr>
                <tr data-ng-show="loanproduct.isInterestRecalculationEnabled && formData.recalculationRestFrequencyType != 1">
                    <td>{{'label.input.frequenc.interval.for.recalculte.outstanding.principal' | translate}}</td>
                    <td colspan="3">{{loanproduct.recalculationRestFrequencyInterval}}</td>
                </tr>

                <tr data-ng-show="loanproduct.isInterestRecalculationEnabled">
                    <td>{{'label.input.arrearsbasedonoriginalschedule' | translate}}</td>
                    <td colspan="3">{{loanproduct.isArrearsBasedOnOriginalSchedule | YesOrNo}}</td>
                </tr>

                <tr>
                    <td colspan="4"><br/></td>
                </tr>
                <tr class="bottomborder">
                    <td colspan="4"><strong>{{'label.heading.gauranteeRequirements' | translate}}</strong></td>
                </tr>
                <tr>
                    <td>{{'label.input.holdguaranteefunds' | translate}}</td>
                    <td colspan="3">{{loanproduct.holdGuaranteeFunds | YesOrNo}}</td>
                </tr>
                <tr data-ng-show="loanproduct.holdGuaranteeFunds">
                    <td>{{'label.input.mandatory.guarantee' | translate}}</td>
                    <td colspan="3">{{loanproduct.mandatoryGuarantee}}</td>
                </tr>
                <tr data-ng-show="loanproduct.holdGuaranteeFunds">
                    <td>{{'label.input.minimum.guarantee.from.own.funds' | translate}}</td>
                    <td colspan="3">{{loanproduct.minimumGuaranteeFromOwnFunds}}</td>
                </tr>
                <tr data-ng-show="loanproduct.holdGuaranteeFunds">
                    <td>{{'label.input.minimum.guarantee.from.guarantor' | translate}}</td>
                    <td colspan="3">{{loanproduct.minimumGuaranteeFromGuarantor}}</td>
                </tr>

                <tr>
                    <td colspan="4"><br/></td>
                </tr>
                <tr class="bottomborder">
                    <td colspan="4"><strong>{{'label.heading.tranchedetails' | translate}}</strong></td>
                </tr>
                <tr class="toppadding">
                    <td>{{'label.input.multidisburseloan' | translate}}</td>
                    <td colspan="3">{{loanproduct.multiDisburseLoan}}</td>
                </tr>
                <tr ng-show="loanproduct.multiDisburseLoan">
                    <td>{{'label.input.maxtranchecount' | translate}}</td>
                    <td colspan="3">{{loanproduct.maxTrancheCount}}</td>
                </tr>
                <tr ng-show="loanproduct.multiDisburseLoan">
                    <td>{{'label.input.outstandingloanbalance' | translate}}</td>
                    <td colspan="3">{{loanproduct.outstandingLoanBalance}}</td>
                </tr>
                <tr>
                    <td colspan="4"><br/></td>
                </tr>
                <tr class="bottomborder">
                    <td colspan="4"><strong>{{'label.heading.configurableAttributes' | translate}}</strong></td>
                </tr>
                <tr class="toppadding">
                    <td>{{'label.input.isConfigLoanAttributes' | translate}}</td>
                    <td colspan="3">{{allowAttributeConfiguration}}</td>
                </tr>
                <tr ng-show="allowAttributeConfiguration">
                    <td>{{'label.input.amortization' | translate}}</td>
                    <td colspan="3">{{amortization}}</td>
                </tr>
                <tr ng-show="allowAttributeConfiguration">
                    <td>{{'label.input.interestmethod' | translate}}</td>
                    <td colspan="3">{{interestMethod}}</td>
                </tr>
                <tr ng-show="allowAttributeConfiguration">
                    <td>{{'label.input.repaymentstrategy' | translate}}</td>
                    <td colspan="3">{{transactionProcessingStrategy}}</td>
                </tr>
                <tr ng-show="allowAttributeConfiguration">
                    <td>{{'label.input.interestcalculationperiod' | translate}}</td>
                    <td colspan="3">{{interestCalcPeriod}}</td>
                </tr>
                <tr ng-show="allowAttributeConfiguration">
                    <td>{{'label.input.arearstolerance' | translate}}</td>
                    <td colspan="3">{{arrearsTolerance}}</td>
                </tr>
                <tr ng-show="allowAttributeConfiguration">
                    <td>{{'label.input.repaidevery' | translate}}</td>
                    <td colspan="3">{{repaymentFrequency}}</td>
                </tr>
                <tr ng-show="allowAttributeConfiguration">
                    <td>{{'label.input.grace' | translate}}</td>
                    <td colspan="3">{{graceOnPrincipalAndInterest}}</td>
                </tr>
                <tr ng-show="allowAttributeConfiguration">
                    <td>{{'label.input.no.of.overdue.days.to.move.loan.into.arrears' | translate}}</td>
                    <td colspan="3">{{graceOnArrearsAging}}</td>
                </tr>
                <tr class="bottomborder">
                    <td colspan="4"><strong>{{'label.heading.charges' | translate}}</strong></td>
                </tr>
                <tr class="bottomborder graybg">
                    <td>{{'label.heading.name' | translate}}</td>
                    <td>{{'label.heading.type' | translate}}</td>
                    <td>{{'label.heading.amount' | translate}}</td>
                    <td>{{'label.heading.collectedon' | translate}}</td>
                </tr>
                <tr ng-repeat="charge in charges" ng-hide="charge.penalty">
                    <td>{{charge.name}}</td>
                    <td>{{charge.chargeCalculationType.value}}</td>
                    <td>{{charge.amount|number}}</td>
                    <td>{{charge.chargeTimeType.value}}</td>
                </tr>
                <tr>
                    <td colspan="4"><br/></td>
                </tr>
                <tr class="bottomborder">
                    <td colspan="4"><strong>{{'label.heading.overduepenalitycharge' | translate}}</strong></td>
                </tr>
                <tr class="bottomborder graybg">
                    <td>{{'label.heading.name' | translate}}</td>
                    <td>{{'label.heading.type' | translate}}</td>
                    <td>{{'label.heading.amount' | translate}}</td>
                    <td>{{'label.heading.collectedon' | translate}}</td>
                </tr>
                <tr ng-repeat="charge in charges" ng-show="charge.penalty">
                    <td>{{charge.name}}</td>
                    <td>{{charge.chargeCalculationType.value}}</td>
                    <td>{{charge.amount|number}}</td>
                    <td>{{charge.chargeTimeType.value}}</td>
                </tr>
                <tr>
                    <td colspan="4"><br/></td>
                </tr>

                <tr class="bottomborder">
                    <td><strong>{{'label.heading.accounting' | translate}}</strong></td>
                    <td colspan="3">{{accountingOptions[formData.accountingRule - 1]}}</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <table width="100%" ng-show="formData.accountingRule != 1">
                            <tr class="toppadding">
                                <td>{{'label.heading.fundsource' | translate}}:</td>
                                <td colspan="3" width="40%">{{loanproduct.accountingMappings.fundSourceAccount.name}}</td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.loanportfolio' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.loanPortfolioAccount.name}}</td>
                            </tr>
                            <tr ng-show="form">
                                <td>{{'label.heading.receivableinterest' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.receivableInterestAccount.name}}</td>
                            </tr>
                            <tr ng-show="isAccrualAccountingEnabled">
                                <td>{{'label.heading.receivablefees' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.receivableFeeAccount.name}}</td>
                            </tr>
                            <tr ng-show="isAccrualAccountingEnabled">
                                <td>{{'label.heading.receivablepenalties' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.receivablePenaltyAccount.name}}</td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.transfersinsuspenpense' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.transfersInSuspenseAccount.name}}</td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.incomefrominterest' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.interestOnLoanAccount.name}}</td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.incomefromfees' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.incomeFromFeeAccount.name}}</td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.incomefrompenalties' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.incomeFromPenaltyAccount.name}}</td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.recoverypayments' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.incomeFromRecoveryAccount.name}}</td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.loseswrittenoff' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.writeOffAccount.name}}</td>
                            </tr>
                            <tr>
                                <td>{{'label.heading.overpaymentliability' | translate}}:</td>
                                <td colspan="3">{{loanproduct.accountingMappings.overpaymentLiabilityAccount.name}}</td>
                            </tr>
                            <tr>
                                <td colspan="3"><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <strong>{{'label.heading.advancedaccountingrules' | translate}}</strong>
                                </td>
                            </tr>
                            <tr class="toppadding bottomborder">
                                <td colspan="4">{{'label.heading.fundsourcesforpayment' | translate}}</td>
                            </tr>
                            <tr class="bottomborder graybg">
                                <td>{{'label.heading.paymenttype' | translate}}</td>
                                <td colspan="3">{{'label.heading.fundsource' | translate}}</td>
                            </tr>
                            <tr ng-repeat="paymentChannel in loanproduct.paymentChannelToFundSourceMappings">
                                <td>{{paymentChannel.paymentType.name}}</td>
                                <td colspan="3">{{paymentChannel.fundSourceAccount.name}}</td>
                            </tr>
                            <tr>
                                <td colspan="4"></td>
                            </tr>
                            <tr class="toppadding bottomborder">
                                <td colspan="4">{{'label.heading.feestospecificincome' | translate}}</td>
                            </tr>
                            <tr class="bottomborder graybg">
                                <td>{{'label.heading.fees' | translate}}</td>
                                <td colspan="3">{{'label.heading.incomeaccount' | translate}}</td>
                            </tr>
                            <tr ng-repeat="feeToIncomeAccount in loanproduct.feeToIncomeAccountMappings">
                                <td>{{feeToIncomeAccount.charge.name}}</td>
                                <td colspan="3">{{feeToIncomeAccount.incomeAccount.name}}</td>
                            </tr>
                            <tr>
                                <td colspan="4"></td>
                            </tr>
                            <tr class="toppadding bottomborder">
                                <td colspan="4">{{'label.heading.penaltiesspecifictoincomeacc' | translate}}</td>
                            </tr>
                            <tr class="bottomborder graybg">
                                <td>{{'label.heading.penalty' | translate}}</td>
                                <td colspan="3">{{'label.heading.incomeaccount' | translate}}</td>
                            </tr>
                            <tr ng-repeat="penaltyToIncomeAccount in loanproduct.penaltyToIncomeAccountMappings">
                                <td>{{penaltyToIncomeAccount.charge.name}}</td>
                                <td colspan="3">{{penaltyToIncomeAccount.incomeAccount.name}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
                    <br>
                    <br>
                    <br>
                    <div class="col-md-offset-5 paddedtop">
                        <button id="cancel" type="reset" class="btn btn-default" ng-click="cancel()">{{'label.button.cancel' |
                            translate}}
                        </button>
                        <button id="save" type="submit" class="btn btn-primary" wz-next has-permission='CREATE_LOANPRODUCT'>
                            {{'label.button.createloanproduct'
                            | translate}}
                        </button>
                    </div>
                    <hr>
                    <button class = "btn btn-default pull-left" wz-previous><i class = "fa fa-arrow-left"></i>&nbsp;&nbsp;Previous</button>
                    <button class = "btn btn-default pull-right" disabled>Next&nbsp;&nbsp;<i class = "fa fa-arrow-right"></i></button>
                </fieldset>
            </form>
        </wz-step>
    </wizard>
</div>
