<div class="content-container" ng-controller="CreateSavingProductController">
    <ul class="breadcrumb">
        <li><a href="#/products">{{'label.anchor.products' | translate}}</a></li>
        <li><a href="#/savingproducts">{{'label.anchor.savingproducts' | translate}}</a></li>
        <li class="active">{{'label.anchor.createsavingproduct' | 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="" ng-submit="goNext(Details)" class="form-horizontal">
                <api-validate></api-validate>
                <fieldset>
                    <!--<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.productname' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-3">
                            <input ng-autofocus="true" id="name" class="form-control" name="name" type="text"
                                   ng-model="formData.name"
                                   required late-validate/>
                        </div>
                        <div class="col-sm-3">
                            <form-validate valattributeform="Details" valattribute="name"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <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.shortname' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-3">
                            <input type="text" id="shortName" name="shortName" class="form-control"
                                   ng-model="formData.shortName"
                                   maxlength="4" required late-validate/>
                        </div>
                        <div class="col-sm-3">
                            <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.description' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-3">
                            <textarea rows="2" id="description" name="description" class="form-control"
                                      ng-model="formData.description"></textarea>
                        </div>
                        <div class="col-sm-3">
                            <form-validate valattributeform="Details" valattribute="description"/>
                        </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="" ng-submit="goNext(Currency)" class="form-horizontal">
                <api-validate></api-validate>
                <fieldset>
                    <!--<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.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"
                                    ng-change="savingproduct.currency.name = formValue(product.currencyOptions,formData.currencyCode,'code','name')"
                                    value="{{currency.code}}">
                            </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.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.multiplesof' | translate }}
                            <span class="required">*</span>
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.multiplesof' | 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>
                    <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="" ng-submit="goNext(Terms)" class="form-horizontal">
                <api-validate></api-validate>
                <fieldset>
                    <!--<h3>{{ 'label.heading.terms' | translate }}</h3>-->
                    <hr>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.nominalannualinterestrate' | translate}}
                            <span class="required">*</span>
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.nominalannualinterest' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="nominalAnnualInterestRate" name="nominalAnnualInterestRate" type="text"
                                   class="form-control"
                                   ng-model="formData.nominalAnnualInterestRate" required late-validate decimals/>
                        </div>
                        <div class="col-sm-2">
                            <form-validate valattributeform="Terms" valattribute="nominalAnnualInterestRate"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.interestcompoundingperiod' | translate}}
                            <span class="required">*</span>
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestcompoundingperiod' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestCompoundingPeriodTypeOptions" class="form-control"
                                    ng-model="formData.interestCompoundingPeriodType"
                                    ng-options="type.id as type.value for type in product.interestCompoundingPeriodTypeOptions"
                                    ng-change="savingproduct.interestCompoundingPeriodOption.value = formValue(product.interestCompoundingPeriodTypeOptions,formData.interestCompoundingPeriodType)"
                                    value="{{type.id}}"></select>
                        </div>
                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.interestpostingperiod' | translate }}
                            <span class="required">*</span>
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestpostingperiod' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestPostingPeriodTypeOptions" class="form-control"
                                    ng-model="formData.interestPostingPeriodType"
                                    ng-options="type.id as type.value for type in product.interestPostingPeriodTypeOptions"
                                    ng-change="savingproduct.interestPostingPeriodOption.value = formValue(product.interestPostingPeriodTypeOptions,formData.interestPostingPeriodType)"
                                    value="{{type.id}}"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.interestcalculatedusing' | translate }}
                            <span class="required">*</span>
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestcalculatedusing' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestCalculationType" class="form-control"
                                    ng-model="formData.interestCalculationType"
                                    ng-options="type.id as type.value for type in product.interestCalculationTypeOptions"
                                    ng-change="savingproduct.interestCalculationOption.value = formValue(product.interestCalculationTypeOptions,formData.interestCalculationType)"
                                    value="{{type.id}}"></select>
                        </div>
                        <label class="control-label col-sm-2 col-sm-offset-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="interestCalculationDaysInYearType" class="form-control"
                                    ng-model="formData.interestCalculationDaysInYearType"
                                    ng-options="type.id as type.value for type in product.interestCalculationDaysInYearTypeOptions"
                                    ng-change="savingproduct.interestCalculationDaysInYearOption.value = formValue(product.interestCalculationDaysInYearTypeOptions,formData.interestCalculationDaysInYearType)"
                                    value="{{type.id}}"></select>
                        </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="" ng-submit="goNext(Settings)" class="form-horizontal">
                <api-validate></api-validate>
                <fieldset>
                    <!--<h3>{{ 'label.heading.settings' | translate }}</h3>-->
                    <hr>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.minimumopeningbalance' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.minimumopeningbalance' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="minRequiredOpeningBalance" type="text" name="minRequiredOpeningBalance" class="form-control"
                                   number-format ng-model="formData.minRequiredOpeningBalance" late-validate>
                            <form-validate valattributeform="Settings" valattribute="minRequiredOpeningBalance"/>
                        </div>
                        <label class="control-label col-sm-2">{{ 'label.input.lockinPeriodFrequency' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.lockinPeriodFrequency' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="lockinPeriodFrequency" type="text" name="lockinPeriodFrequency" class="form-control"
                                   ng-model="formData.lockinPeriodFrequency" late-validate number=true>
                            <form-validate valattributeform="Settings" valattribute="lockinPeriodFrequency"/>
                        </div>
                        <div class="col-sm-2">
                            <select id="lockinPeriodFrequencyType" ng-model="formData.lockinPeriodFrequencyType"
                                    class="form-control"
                                    ng-options="type.id as type.value for type in product.lockinPeriodFrequencyTypeOptions"
                                    ng-change="savingproduct.lockinPeriodFrequencyOption.value = formValue(product.lockinPeriodFrequencyTypeOptions,formData.lockinPeriodFrequencyType)"
                                    value="{{type.id}}">
                                <option class="displaynone" value="">{{'label.selectone' | translate}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">{{ 'label.input.withdrawalfeefortransfers' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.withdrawalfeefortransfers' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="withdrawalFeeForTransfers" type="checkbox"
                                   ng-model="formData.withdrawalFeeForTransfers"
                                   ng-true-value="true" ng-false-value="false">
                        </div>
                        <label class="control-label col-sm-2">{{ 'label.input.minbalanceforinterest' | translate}}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.minbalanceforinterest' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="minBalanceForInterestCalculation" type="text" class="form-control"
                                   number-format ng-model="formData.minBalanceForInterestCalculation">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">{{ 'label.input.enforceMinRequiredBalance' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.enforceMinRequiredBalance' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="enforceMinRequiredBalance" type="checkbox"
                                   ng-model="formData.enforceMinRequiredBalance"/>
                        </div>
                        <label class="control-label col-sm-2">{{'label.input.minRequiredBalance' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.minRequiredBalance' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="minRequiredBalance" type="text" class="form-control"
                                   number-format ng-model="formData.minRequiredBalance"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">{{ 'label.input.allowoverdraft' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.allowoverdraft' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="allowOverdraft" type="checkbox" ng-model="formData.allowOverdraft"
                                   ng-true-value="true"
                                   ng-false-value="false">
                        </div>
                        <div ng-show="formData.allowOverdraft">
                            <label class="control-label col-sm-2">{{'label.input.overdraftlimit' | translate}}
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.overdraftlimit' | translate}}" tooltip-append-to-body="true"></i>
                            </label>
                            <div class="col-sm-2">
                                <input id="overdraftLimit" type="text" class="form-control"
                                       ng-model="formData.overdraftLimit">
                            </div>
                        </div>
                    </div>
                    <div class="form-group" ng-show="formData.allowOverdraft">
                        <label class="control-label col-sm-3">{{'label.input.nominalannualinterestrateoverdraft' | translate}}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.nominalannualinterestrateoverdraft' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="nominalAnnualInterestRateOverdraft" type="text" class="form-control"
                                   ng-model="formData.nominalAnnualInterestRateOverdraft">
                        </div>

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

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

                            <div class="col-sm-2">
                                <select id="taxGroupId" ng-model="formData.taxGroupId"
                                        chosen="product.taxGroupOptions"
                                        ng-options="taxGroup.id as taxGroup.name for taxGroup in product.taxGroupOptions"
                                        ng-change="savingproduct.taxGroup.name = formValue(product.taxGroupOptions,formData.taxGroupId,'id','name')"
                                        value="{{taxGroup.id}}">
                                    <option value="">{{'label.select' | translate}}</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-3">{{ 'label.input.isDormancyTrackingActive' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.isDormancyTrackingActive' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="isDormancyTrackingActive" type="checkbox"
                                   ng-model="formData.isDormancyTrackingActive" ng-true-value="true"
                                   ng-false-value="false">
                        </div>
                        <div ng-show="formData.isDormancyTrackingActive">
                            <label class="control-label col-sm-2">{{'label.input.daysToInactive' | translate}}
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.daysToInactive' | translate}}" tooltip-append-to-body="true"></i>
                            </label>
                            <div class="col-sm-2">
                                <input id="daysToInactive" type="text" class="form-control"
                                       ng-model="formData.daysToInactive">
                            </div>
                        </div>
                    </div>
                    <div class="form-group" ng-show="formData.isDormancyTrackingActive">
                        <label class="control-label col-sm-3">{{'label.input.daysToDormancy' | translate}}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.daysToDormancy' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="daysToDormancy" type="text" class="form-control"
                                   ng-model="formData.daysToDormancy">
                        </div>

                        <label class="control-label col-sm-2">{{'label.input.daysToEscheat' | translate}}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.daysToEscheat' | translate}}" tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="daysToEscheat" type="text" class="form-control"
                                   ng-model="formData.daysToEscheat">
                        </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="" ng-submit="goNext(Charges)" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{ 'label.heading.charges' | translate }}</h3>-->
                    <hr>
                    <div class="form-group">
                        <div class="col-sm-3">
                            <select ng-model="chargeId" class="form-control"
                                    ng-options="charge.id as ((charge.name+' '+'('+charge.currency.name+')')) for charge in product.chargeOptions|filter:formData.currencyCode:strict"
                                    value="{{charge.id}}">
                                <option class="displaynone" value="">{{'label.selectcharge' | translate}}</option>
                            </select>
                        </div>
                        <div class="col-sm-1">
                            <a class="btn btn-primary" ng-click="chargeSelected(chargeId)"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{ 'label.button.add' |
                                translate }}</a>
                        </div>
                    </div>
                    <div class="form-group col-md-12">
                        <table class="table">
                            <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.actions' | translate}}</th>
                            </tr>
                            <tr ng-repeat="charge in charges">
                                <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
                                <td>{{charge.chargeCalculationType.value}}</td>
                                <td></td>
                                <td>{{charge.amount|number}}</td>
                                <td></td>
                                <td>{{charge.chargeTimeType.value}}</td>
                                <td></td>
                                <td><a href="" 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="" ng-submit="goNext(Accounting)" class="form-horizontal">
                <api-validate></api-validate>
                <fieldset>
                    <!--<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>
                    <hr>
                    <div class="col-md-12" ng-show="formData.accountingRule==2">
                        <div class="form-group">
                            <h4>{{"label.heading.assets" | translate}}</h4>
                            <label class="control-label">{{ 'label.input.savingreference' | translate }}
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingreference' | translate}}" tooltip-append-to-body="true"></i>
                            </label>
                            <div class="col-sm-3">
                                <select id="savingsReferenceAccountId" ng-model="formData.savingsReferenceAccountId"
                                        chosen="assetAccountOptions"
                                        ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
                                        ng-change="savingproduct.accountingMappings.savingsReferenceAccount.name = formValue(assetAccountOptions,formData.savingsReferenceAccountId,'id','name')"
                                        value="{{assetAccount.id}}">
                                </select>
                            </div>
                            <label class="control-label col-sm-2">{{ 'label.input.overdraftportfoliocontrol' | translate }}
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.overdraftprotfolio' | translate}}" tooltip-append-to-body="true"></i>
                            </label>
                            <div class="col-sm-3">
                                <select id="overdraftPortfolioControlId" ng-model="formData.overdraftPortfolioControlId"
                                        chosen="assetAccountOptions"
                                        ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
                                        ng-change="savingproduct.accountingMappings.overdraftPortfolioControl.name = formValue(assetAccountOptions,formData.overdraftPortfolioControlId,'id','name')"
                                        value="{{assetAccount.id}}">
                                </select>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <h4>{{"label.heading.liabilities" | translate}}</h4>
                            <label class="control-label col-sm-2">{{ 'label.input.savingcontrol' | translate }}
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingcontrol' | translate}}" tooltip-append-to-body="true"></i>
                            </label>
                            <div class="col-sm-3">
                                <select id="savingsControlAccountId" ng-model="formData.savingsControlAccountId"
                                        chosen="liabilityAccountOptions"
                                        ng-options="liabilityAccount.id as liabilityAccount.name for liabilityAccount in liabilityAccountOptions"
                                        ng-change="savingproduct.accountingMappings.savingsControlAccount.name = formValue(liabilityAccountOptions,formData.savingsControlAccountId,'id','name')"
                                        value="{{liabilityAccount.id}}">
                                </select>
                            </div>
                            <label class="control-label col-sm-2">{{ 'label.input.savingstransfersinsuspenpense' | translate }}
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.savingsuspense' | translate}}" tooltip-append-to-body="true"></i>
                            </label>
                            <div class="col-sm-3">
                                <select id="transfersInSuspenseAccountId"
                                        ng-model="formData.transfersInSuspenseAccountId"
                                        chosen="liabilityAccountOptions"
                                        ng-options="liabilityAccount.id as liabilityAccount.name for liabilityAccount in liabilityAccountOptions"
                                        ng-change="savingproduct.accountingMappings.transfersInSuspenseAccount.name = formValue(liabilityAccountOptions,formData.transfersInSuspenseAccountId,'id','name')"
                                        value="{{liabilityAccount.id}}">
                                </select>
                            </div>
                        </div>
                        <div class="form-group" ng-show="formData.isDormancyTrackingActive">
                            <label class="control-label col-sm-2">{{ 'label.input.escheatLiability' | translate }}
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.escheatLiability' | translate}}" tooltip-append-to-body="true"></i>
                            </label>
                            <div class="col-sm-3">
                                <select id="escheatLiabilityId" ng-model="formData.escheatLiabilityId"
                                        chosen="liabilityAccountOptions"
                                        ng-options="liabilityAccount.id as liabilityAccount.name for liabilityAccount in liabilityAccountOptions"
                                        ng-change="savingproduct.accountingMappings.escheatLiabilityAccount.name = formValue(liabilityAccountOptions,formData.escheatLiabilityId,'id','name')"
                                        value="{{liabilityAccount.id}}">
                                </select>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <h4>{{"label.heading.expenses" | translate}}</h4>
                            <label class="control-label col-sm-2">{{ 'label.input.interestonsavings' | translate }}
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.interestonsavings' | translate}}" tooltip-append-to-body="true"></i>
                            </label>
                            <div class="col-sm-3">
                                <select id="interestOnSavingsAccountId" ng-model="formData.interestOnSavingsAccountId"
                                        chosen="expenseAccountOptions"
                                        ng-options="expenseAccount.id as expenseAccount.name for expenseAccount in expenseAccountOptions"
                                        ng-change="savingproduct.accountingMappings.interestOnSavingsAccount.name = formValue(expenseAccountOptions,formData.interestOnSavingsAccountId,'id','name')"
                                        value="{{expenseAccount.id}}">
                                </select>
                            </div>
                            <label class="control-label col-sm-2">{{ 'label.input.writeOff' | translate }}
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.Writeoffoverdraft' | 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="savingproduct.accountingMappings.writeOffAccount.name = formValue(expenseAccountOptions,formData.writeOffAccountId,'id','name')"
                                        value="{{expenseAccount.id}}">
                                </select>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <h4>{{"label.heading.income" | translate}}</h4>
                            <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="savingproduct.accountingMappings.incomeFromFeeAccount.name = formValue(incomeAccountOptions,formData.incomeFromFeeAccountId,'id','name')"
                                        value="{{incomeAccount.id}}">
                                </select>
                            </div>
                            <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="savingproduct.accountingMappings.incomeFromPenaltyAccount.name = formValue(incomeAccountOptions,formData.incomeFromPenaltyAccountId,'id','name')"
                                        value="{{incomeAccount.id}}">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">{{ 'label.input.interest.on.overdrafts' | translate }}
                                <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.incomefromoverdraftinterest' | translate}}" tooltip-append-to-body="true"></i>
                            </label>
                            <div class="col-sm-3">
                                <select id="incomeFromInterestId" ng-model="formData.incomeFromInterestId"
                                        chosen="incomeAccountOptions"
                                        ng-options="incomeAccount.id as incomeAccount.name for incomeAccount in incomeAccountOptions"
                                        ng-change="savingproduct.accountingMappings.incomeFromInterest.name = formValue(incomeAccountOptions,formData.incomeFromInterestId,'id','name')"
                                        value="{{incomeAccount.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">
                                <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="savingproduct.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"
                                                class="form-control"
                                                ng-model="configureFundOption.fundSourceAccountId"
                                                ng-options="assetAccount.id as assetAccount.name for assetAccount in configureFundOption.assetAccountOptions"
                                                ng-change="savingproduct.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-times-circle fa-2x"></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">
                                <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="specificIncomeaccount in specificIncomeaccounts">
                                    <td class="width30">
                                        <select id="specificIncomeaccounts[{{$index}}].chargeId"
                                                class="form-control"
                                                ng-model="specificIncomeaccount.chargeId"
                                                ng-options="charge.id as charge.name for charge in specificIncomeaccount.chargeOptions"
                                                ng-change="savingproduct.feeToIncomeAccountMappings[$index].charge.name = formValue(specificIncomeaccount.chargeOptions,specificIncomeaccount.chargeId,'id','name')"
                                                value="{{charge.id}}">
                                        </select>
                                    </td>
                                    <td></td>
                                    <td class="width30">
                                        <select id="specificIncomeaccounts[{{$index}}].incomeAccountId"
                                                class="form-control"
                                                ng-model="specificIncomeaccount.incomeAccountId"
                                                ng-options="assetAccount.id as assetAccount.name for assetAccount in specificIncomeaccount.incomeAccountOptions"
                                                ng-change="savingproduct.feeToIncomeAccountMappings[$index].incomeAccount.name = formValue(specificIncomeaccount.incomeAccountOptions,specificIncomeaccount.incomeAccountId,'id','name')"
                                                value="{{assetAccount.id}}">
                                        </select>
                                    </td>
                                    <td></td>
                                    <td class="width30"><a ng-click="deleteFee($index)"><i class="fa fa-times-circle fa-2x"></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">
                                <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 penaltySpecificIncomeaccount.penaltyOptions"
                                                ng-change="savingproduct.penaltyToIncomeAccountMappings[$index].charge.name = formValue(penaltySpecificIncomeaccount.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="assetAccount.id as assetAccount.name for assetAccount in penaltySpecificIncomeaccount.incomeAccountOptions"
                                                ng-change="savingproduct.penaltyToIncomeAccountMappings[$index].incomeAccount.name = formValue(penaltySpecificIncomeaccount.incomeAccountOptions,penaltySpecificIncomeaccount.incomeAccountId,'id','name')"
                                                value="{{assetAccount.id}}">
                                        </select>
                                    </td>
                                    <td></td>
                                    <td class="width30"><a ng-click="deletePenalty($index)"><i class="fa fa-times-circle fa-2x"></i></a>
                                    </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">Next&nbsp;&nbsp;<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>{{savingproduct.name}}</h3>
                    <hr>
                    <table width="100%">
                        <tr class="bottomborder">
                            <td colspan="4">
                                <strong>{{'label.heading.details' | translate}}</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.description' | translate}}</td>
                            <td colspan="3">{{savingproduct.description}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.shortname' | translate}} :</td>
                            <td colspan="3">{{savingproduct.shortName}}</td>
                        </tr>
                        <tr>
                            <td colspan="4"><br/></td>
                        </tr>
                        <tr class="bottomborder">
                            <td colspan="4"><strong>{{'label.heading.items' | translate}}</strong></td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.currency' | translate}}</td>
                            <td colspan="3">{{savingproduct.currency.name}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.decimalplaces' | translate}}</td>
                            <td colspan="3">{{savingproduct.digitsAfterDecimal}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.currencyinmultiplesof' | translate}}</td>
                            <td colspan="3">{{savingproduct.inMultiplesOf}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.nominalannualinterestrate' | translate}}</td>
                            <td colspan="3">{{savingproduct.nominalAnnualInterestRate}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.interestcompoundingperiod' | translate}}</td>
                            <td colspan="3">{{savingproduct.interestCompoundingPeriodOption.value}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.interestpostingperiod' | translate}}</td>
                            <td colspan="3">{{savingproduct.interestPostingPeriodOption.value}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.interestcalculatedusing' | translate}}</td>
                            <td colspan="3">{{savingproduct.interestCalculationOption.value}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.daysinyears' | translate}}</td>
                            <td colspan="3">{{savingproduct.interestCalculationDaysInYearOption.value}}</td>
                        </tr>
                        <tr>
                            <td colspan="4"><br/></td>
                        </tr>
                        <tr class="bottomborder">
                            <td colspan="4"><strong>{{'label.heading.settings' | translate}}</strong></td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.minimumopeningbalance' | translate}}</td>
                            <td colspan="3">{{savingproduct.minRequiredOpeningBalance|number}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.lockinPeriodFrequency' | translate}}</td>
                            <td colspan="3">{{savingproduct.lockinPeriodFrequency}}
                                {{savingproduct.lockinPeriodFrequencyOption.value}}
                            </td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.withdrawalfeefortransfers' | translate}}</td>
                            <td colspan="3">{{savingproduct.withdrawalFeeForTransfers}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.allowoverdraft' | translate}}</td>
                            <td colspan="3">{{savingproduct.allowOverdraft}}</td>
                        </tr>
                        <tr ng-show="savingproduct.allowOverdraft">
                            <td>{{'label.heading.overdraftlimit' | translate}}</td>
                            <td colspan="3">{{savingproduct.overdraftLimit}}</td>
                        </tr>
                        <tr ng-show="savingproduct.allowOverdraft">
                            <td>{{'label.heading.nominalannualinterestrateoverdraft' | translate}}</td>
                            <td colspan="3">{{savingproduct.nominalAnnualInterestRateOverdraft}}</td>
                        </tr>
                        <tr ng-show="savingproduct.allowOverdraft">
                            <td>{{'label.heading.minoverdraftforinterestcalculation' | translate}}</td>
                            <td colspan="3">{{savingproduct.minOverdraftForInterestCalculation}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.minbalanceforinterestcalculation' | translate}}</td>
                            <td colspan="3">{{savingproduct.minBalanceForInterestCalculation|number}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.enforceMinRequiredBalance' | translate}}</td>
                            <td colspan="3">{{savingproduct.enforceMinRequiredBalance}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.minRequiredBalance' | translate}}</td>
                            <td colspan="3">{{savingproduct.minRequiredBalance|number}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.withholdtax' | translate}}</td>
                            <td colspan="3">{{savingproduct.withHoldTax}}</td>
                        </tr>
                        <tr ng-show="savingproduct.withHoldTax">
                            <td>{{'label.heading.withholdtaxgroup' | translate}}</td>
                            <td colspan="3">{{savingproduct.taxGroup.name}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.isDormancyTrackingActive' | translate}}</td>
                            <td colspan="3">{{savingproduct.isDormancyTrackingActive}}</td>
                        </tr>
                        <tr ng-show="savingproduct.isDormancyTrackingActive">
                            <td>{{'label.heading.daysToInactive' | translate}}</td>
                            <td colspan="3">{{savingproduct.daysToInactive}}</td>
                        </tr>
                        <tr ng-show="savingproduct.isDormancyTrackingActive">
                            <td>{{'label.heading.daysToDormancy' | translate}}</td>
                            <td colspan="3">{{savingproduct.daysToDormancy}}</td>
                        </tr>
                        <tr ng-show="savingproduct.isDormancyTrackingActive">
                            <td>{{'label.heading.daysToEscheat' | translate}}</td>
                            <td colspan="3">{{savingproduct.daysToEscheat}}</td>
                        </tr>
                        <tr>
                            <td colspan="4"><br/></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">
                            <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"><span
                                    ng-hide="formData.accountingRule == 2">{{'label.none' | translate}}</span></td>
                        </tr>
                        <tr>
                            <td colspan="4">
                                <table width="100%" ng-show="formData.accountingRule == 2">
                                    <tr>
                                        <td>{{'label.heading.savingsreference' | translate}}({{'label.heading.assets' |
                                            translate}})
                                        </td>
                                        <td colspan="3">
                                            {{savingproduct.accountingMappings.savingsReferenceAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.input.overdraftportfoliocontrol' |
                                            translate}}({{'label.heading.assets' |
                                            translate}})
                                        </td>
                                        <td colspan="3">
                                            {{savingproduct.accountingMappings.overdraftPortfolioControl.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.heading.savingscontrol' | translate}}({{'label.heading.liabilities'
                                            |
                                            translate}})
                                        </td>
                                        <td colspan="3">
                                            {{savingproduct.accountingMappings.savingsControlAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.heading.transfersinsuspenpense' |
                                            translate}}({{'label.heading.liabilities' |
                                            translate}})
                                        </td>
                                        <td colspan="3">
                                            {{savingproduct.accountingMappings.transfersInSuspenseAccount.name}}
                                        </td>
                                    </tr>
                                    <tr ng-show="savingproduct.isDormancyTrackingActive">
                                        <td>{{'label.heading.escheatLiability' |
                                            translate}}({{'label.heading.liabilities' |
                                            translate}})
                                        </td>
                                        <td colspan="3">
                                            {{savingproduct.accountingMappings.escheatLiabilityAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.heading.interestonsavings' | translate}}({{'label.heading.expenses'
                                            |
                                            translate}})
                                        </td>
                                        <td colspan="3">
                                            {{savingproduct.accountingMappings.interestOnSavingsAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.input.writeOff' | translate}}({{'label.heading.expenses' |
                                            translate}})
                                        </td>
                                        <td colspan="3">{{savingproduct.accountingMappings.writeOffAccount.name}}</td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.heading.incomefromfee' | translate}}({{'label.heading.income' |
                                            translate}})
                                        </td>
                                        <td colspan="3">{{savingproduct.accountingMappings.incomeFromFeeAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.heading.incomefrompenalties' | translate}}({{'label.heading.income'
                                            |
                                            translate}})
                                        </td>
                                        <td colspan="3">
                                            {{savingproduct.accountingMappings.incomeFromPenaltyAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.input.interest.on.overdrafts' |
                                            translate}}({{'label.heading.income' | translate}})
                                        </td>
                                        <td colspan="3">{{savingproduct.accountingMappings.incomeFromInterest.name}}
                                        </td>
                                    </tr>

                                    <tr>
                                        <td colspan="4"><br/></td>
                                    </tr>
                                    <tr class="bottomborder">
                                        <td>
                                            <strong>{{'label.heading.advancedaccountingrules' | translate}}</strong>
                                        </td>
                                    </tr>

                                    <tr class="toppadding bottomborder">
                                        <td colspan="4">{{'label.heading.configurefundsourcesforpaymentchannels' |
                                            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 savingproduct.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 savingproduct.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 savingproduct.penaltyToIncomeAccountMappings">
                                        <td>{{penaltyToIncomeAccount.charge.name}}</td>
                                        <td colspan="3">{{penaltyToIncomeAccount.incomeAccount.name}}</td>
                                    </tr>

                                </table>
                            </td>
                        </tr>
                    </table>
                    <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" wz-next class="btn btn-primary" has-permission='CREATE_SAVINGSPRODUCT'>{{'label.button.createsavingproduct'
                            | 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>
