<div class="content-container" ng-controller="CreateRecurringDepositAccountController">
    <ul class="breadcrumb">
        <li ng-show="centerEntity"><a href="#/viewcenter/{{groupId}}">{{groupName}}</a></li>
        <li ng-show="groupName&&!centerEntity"><a href="#/viewgroup/{{groupId}}">{{groupName}}</a></li>
        <li ng-show="clientName"><a href="#/viewclient/{{clientId}}">{{clientName}}</a></li>
        <li class="active">{{'label.anchor.recurringdepositapplication' | translate}}</li>
    </ul>
    <wizard current-step="step" on-finish="submit()" class="card well">
        <wz-step icon="fa fa-circle-o" wz-title="{{'label.heading.details' | translate}}">
            <form name="Details" novalidate="" ng-submit="goNext(Details)" class="form-inline">
                <api-validate></api-validate>
                <fieldset>
                    <table class="width100">
                        <tr>
                            <td class="width14">
                                <label>{{ 'label.input.product' | translate }}<span class="required">*</span>:&nbsp;</label>
                            </td>
                            <td class="width36 paddedbottom10">
                                <select id="productId" ng-model="formData.productId"
                                        ng-options="product.id as product.name for product in products" value="{{product.id}}"
                                        ng-change="changeProduct()" class="form-control width170px" required="required">
                                    <option style="display:none" value="">{{'label.selectrecurringdepositproduct' | translate}}</option>
                                </select>
                            </td>
                            <td class="width14">
                                <label ng-show="formData.productId" class="control-label">{{ 'label.input.submittedon' | translate
                                    }}&nbsp;<span class="required">*</span></label>
                            </td>
                            <td class="width36 paddedbottom10">
                                <input ng-show="formData.productId" id="submittedOnDate" sort type="text" name="submittedOnDate" datepicker-pop="dd MMMM yyyy"
                                       ng-model="date.submittedOnDate" is-open="opened" min="minDate" max="restrictDate"
                                       class="form-control" required late-validate>
                                <form-validate valattributeform="Details" valattribute="submittedOnDate" />
                            </td>
                        </tr>
                        <tr ng-show="formData.productId">
                            <td class="width14">
                                <label>{{ 'label.input.fieldofficer' | translate }}:&nbsp;</label>
                            </td>
                            <td class="width36 paddedbottom10">
                                <select id="fieldOfficerId" ng-model="formData.fieldOfficerId" class="form-control width170px"
                                        ng-options="fieldOfficer.id as fieldOfficer.displayName for fieldOfficer in fieldOfficers"
                                        ng-change="recurringDetails.fieldOfficerName = formValue(fieldOfficers,formData.fieldOfficerId,'id','displayName')"
                                        value="{{fieldOfficer.id}}" class="form-control">
                                    <option value="">{{'label.selectfieldofficer' | translate}}</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                    <hr>
                    <button class="btn btn-default pull-left" wz-previous disabled ng-hide="disabled"><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
                    </button>
                    <button class="btn btn-default pull-right" type="submit" ng-hide="disabled">Next&nbsp;&nbsp;<i
                            class="fa fa-arrow-right"></i></button>
                    <div class="col-sm-offset-6">
                    <button class="btn btn-warning" ng-hide="!disabled" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
                    </div>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title="{{ 'label.heading.terms' | translate }}" wz-disabled="{{disabled}}">
            <form name="Terms" ng-submit="goNext(Terms)" class="form-inline">
                <fieldset>
                    <api-validate></api-validate>
                    <hr>
                    <hr data-ng-show="formData.productId"/>
                    <div ng-show="data">
                    <table class="width100">
                        <tr>
                            <td class="width14"><label class="control-label">{{ 'label.heading.currency' | translate }}</label>
                            </td>
                            <td class="width36">
                                <label><b>{{data.currency.name}}({{data.currency.displaySymbol}})</b></label>
                            </td>
                            <td class="width14"><label class="control-label">{{ 'label.heading.decimalplaces' | translate}}</label>
                            </td>
                            <td class="width36">
                                <label><b>{{data.currency.decimalPlaces}}</b></label>
                            </td>
                        </tr>
                        <tr>
                            <td class="width14"><label class="control-label">{{ 'label.input.interestcompoundingperiod' | translate
                                }}&nbsp;<span class="required">*</span></label>
                            </td>
                            <td class="width36 paddedbottom10">
                                <select id="interestCompoundingPeriodType"
                                        ng-model="formData.interestCompoundingPeriodType"
                                        ng-options="type.id as type.value for type in data.interestCompoundingPeriodTypeOptions"
                                        ng-change="recurringDetails.interestCompoundingPeriodTypeValue = formValue(data.interestCompoundingPeriodTypeOptions,formData.interestCompoundingPeriodType)"
                                        value="{{type.id}}" class="form-control width170px"></select>
                            </td>
                            <td class="width14"><label class="control-label">{{ 'label.input.interestpostingperiod' | translate
                                }}&nbsp;<span
                                        class="required">*</span></label></td>
                            <td class="width36 paddedbottom10">
                                <select id="interestPostingPeriodType" ng-model="formData.interestPostingPeriodType"
                                        ng-options="type.id as type.value for type in data.interestPostingPeriodTypeOptions"
                                        ng-change="recurringDetails.interestPostingPeriodTypeValue = formValue(data.interestPostingPeriodTypeOptions,formData.interestPostingPeriodType)"
                                        value="{{type.id}}" class="form-control width170px">
                                </select></td>
                        </tr>
                        <tr>
                            <td class="width14"><label class="control-label">{{ 'label.input.interestcalculatedusing' | translate
                                }}&nbsp;<span
                                        class="required">*</span></label>
                            </td>
                            <td class="width36 paddedbottom10">
                                <select id="interestCalculationType" ng-model="formData.interestCalculationType"
                                        class="form-control width170px"
                                        ng-options="type.id as type.value for type in data.interestCalculationTypeOptions"
                                        ng-change="recurringDetails.interestCalculationTypeValue=formValue(data.interestCalculationTypeOptions,formData.interestCalculationType)"
                                        value="{{type.id}}">
                                </select>
                            </td>
                            <td class="width14"><label class="control-label">{{ 'label.input.daysinyears' | translate }}&nbsp;<span
                                    class="required">*</span></label></td>

                            <td class="width36 paddedbottom10">
                                <select id="interestCalculationDaysInYearType" ng-model="formData.interestCalculationDaysInYearType"
                                        ng-options="type.id as type.value for type in data.interestCalculationDaysInYearTypeOptions"
                                        ng-change="recurringDetails.interestCalculationDaysInYearTypeValue = formValue(data.interestCalculationDaysInYearTypeOptions,formData.interestCalculationDaysInYearType)"
                                        value="{{type.id}}" class="form-control width170px">
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="width14">
                                <label class="control-label">{{ 'label.input.lockinPeriodFrequency' | translate }}</label>
                            </td>
                            <td class="width36 paddedbottom10">
                                <div class="form-inline">
                                    <input id="lockinPeriodFrequency" type="text" class="form-control"
                                           ng-model="formData.lockinPeriodFrequency">&nbsp;
                                    <select id="lockinPeriodFrequencyType" ng-model="formData.lockinPeriodFrequencyType"
                                            class="form-control width170px"
                                            ng-options="type.id as type.value for type in data.lockinPeriodFrequencyTypeOptions"
                                            ng-change="recurringDetails.lockinPeriodFrequencyTypeValue = formValue(data.lockinPeriodFrequencyTypeOptions,formData.lockinPeriodFrequencyType)"
                                            value="{{type.id}}">
                                        <option value="">{{'label.selectone' | translate}}</option>
                                    </select>
                                </div>
                            </td>
                            <td class="width14"></td>
                            <td class="width36 paddedbottom10"></td>
                        </tr>
                        <tr>
                            <td colspan="4">
                                <hr/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4" class="paddedbottom20">
                                <div class="form-inline">
                                    <input id="isMandatoryDeposit" type="checkbox"
                                           ng-model="formData.isMandatoryDeposit">
                                    &nbsp;&nbsp;<label class="control-label">{{ 'label.checkbox.ismandatory.deposit' |
                                    translate }}&nbsp;</label>
                                    <input id="allowWithdrawal" type="checkbox"
                                           ng-model="formData.allowWithdrawal">
                                    &nbsp;&nbsp;<label class="control-label">{{ 'label.checkbox.allowWithdrawal' |
                                    translate }}&nbsp;</label>
                                    <input id="adjustAdvanceTowardsFuturePayments" type="checkbox"
                                           ng-model="formData.adjustAdvanceTowardsFuturePayments">
                                    &nbsp;&nbsp;<label class="control-label">{{ 'label.checkbox.adjustAdvanceTowardsFuturePayments' |
                                    translate }}&nbsp;</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="width14 paddedbottom10"><label class="control-label">{{ 'label.input.mandatory.recommended.deposit.amount' |
                                translate
                                }}&nbsp;<span
                                        class="required">*</span></label>
                            </td>
                            <td class="width36 paddedbottom10">
                                <input id="mandatoryRecommendedDepositAmount" type="text" name="mandatoryRecommendedDepositAmount" class="form-control"
                                       number-format ng-model="formData.mandatoryRecommendedDepositAmount" required late-validate>
                                <form-validate valattributeform="Terms" valattribute="mandatoryRecommendedDepositAmount"/>
                            </td>
                            <td class="width14 paddedbottom10"><label class="control-label">{{ 'label.input.depositperiod' | translate }}&nbsp;</label>
                            </td>

                            <td class="width36 paddedbottom10">
                                <div class="form-inline">
                                    <input id="depositPeriod" class="form-control" type="text" ng-model="formData.depositPeriod">
                                    <select id="depositPeriodFrequencyId" ng-model="formData.depositPeriodFrequencyId"
                                            class="form-control width170px"
                                            ng-options="type.id as type.value for type in data.periodFrequencyTypeOptions"
                                            ng-change="recurringDetails.depositPeriodTypeValue = formValue(data.depositPeriodTypeOptions,formData.depositPeriodType)"
                                            value="{{type.id}}">
                                        <option value="">{{'label.selectone' | translate}}</option>
                                    </select></div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4" class="paddedbottom20">
                                <div class="form-inline">
                                    <input id="isCalendarInherited" type="checkbox"
                                           ng-model="formData.isCalendarInherited">
                                    <label class="control-label">{{ 'label.input.same.as.group.meeting' | translate }}</label>
                                </div>
                            </td>
                        </tr>
                        <tr ng-show="!formData.isCalendarInherited">
                            <td class="width14"><label class="control-label">{{ 'label.input.deposit.start.date' | translate
                                }}&nbsp;</label>
                            </td>
                            <td class="width14">
                                <input id="expectedFirstDepositOnDate" type="text" datepicker-pop="dd MMMM yyyy"
                                       ng-model="formData.expectedFirstDepositOnDate" is-open="opened" min="minDate"
                                       class="form-control"/>
                            </td>
                            <td class="width14"><label class="control-label">{{ 'label.input.recurring.frequency' | translate
                                }}&nbsp;<span class="required">*</span></label>
                            </td>
                            <td class="width36 paddedbottom10">
                                <div class="form-inline">
                                    <input id="recurringFrequency" class="form-control" type="text" name="recurringFrequency" ng-model="formData.recurringFrequency" required late-validate>

                                    <select id="recurringFrequencyType" ng-model="formData.recurringFrequencyType"
                                            class="form-control width170px"
                                            ng-options="type.id as type.value for type in data.periodFrequencyTypeOptions"
                                            value="{{type.id}}">
                                        <option value="">{{'label.selectone' | translate}}</option>
                                    </select>
                                    <div class="col-sm-3">
                                    <form-validate valattributeform="Terms" valattribute="recurringFrequency"/>
                                    </div>
                                </div>
                            </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.settings' | translate }}" wz-disabled="{{disabled}}">
            <form name="Settings" ng-submit="goNext(Settings)" class="form-inline">
                <fieldset>
                    <api-validate></api-validate>
                    <hr>
                    <hr data-ng-show="formData.productId"/>
                    <table class="width100">
                        <tr>
                            <td colspan="2" class="width50"><label class="control-label">{{ 'label.input.minimumdepositterm' | translate
                                }}:&nbsp;&nbsp;{{formData.minDepositTerm}}-{{data.minDepositTermType.value}}</label>
                            </td>
                            <tr>
                                <td colspan="7"><br></td>
                            </tr>
                            <td colspan="2" class="width50">
                                <label class="control-label">{{ 'label.input.inmultiplesof' | translate }}:&nbsp;&nbsp;
                                    {{formData.inMultiplesOfDepositTerm}}-{{data.inMultiplesOfDepositTermType.value}}</label>
                            </td>
                        </tr>
                        <tr>
                                <td colspan="7"><br></td>
                            </tr>
                        <tr>
                            <td colspan="4"><label class="control-label">{{ 'label.input.maximumdepositterm' | translate
                                }}:&nbsp;&nbsp;{{formData.maxDepositTerm}}-{{data.maxDepositTermType.value}}</label>
                            </td>
                            <tr>
                                <td colspan="7"><br></td>
                            </tr>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <label class="control-label">{{ 'label.prematureclosure' | translate }}&nbsp;</label>
                            </td>
                            <tr>
                                <td colspan="7"><br></td>
                            </tr>
                        </tr>
                        <tr>
                            <td colspan="4">
                                <div class="form-inline" data-ng-show="formData.preClosurePenalApplicable">
                                    <label class="control-label">{{ 'label.checkbox.applypreclosurepenalinterest' |
                                        translate }}&nbsp;&nbsp;{{formData.preClosurePenalInterest | number}}&nbsp;&nbsp;-&nbsp;&nbsp;On&nbsp;&nbsp;{{data.preClosurePenalInterestOnType.value}}</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                                <td colspan="7"><br></td>
                            </tr>
                        <tr ng-show="data.minBalanceForInterestCalculation">
                            <td > {{'label.heading.minbalanceforinterestcalculation' | translate}}</td>
                            <td>{{data.minBalanceForInterestCalculation | number}}</td>
                        </tr>
                        <tr>
                                <td colspan="7"><br></td>
                            </tr>
                        <tr ng-show="data.taxGroup">
                            <td colspan="2" class="paddedbottom10">
                                <input type="checkbox" ng-model="formData.withHoldTax"> &nbsp;<span
                                    class="control-label">{{ 'label.input.withholdtax' | translate }}&nbsp;</span>
                            </td>
                            <td class="width14" ng-show="formData.withHoldTax">
                                <label class="control-label">{{ 'label.input.taxgroup' | translate
                                    }}&nbsp;</label></td>
                            <td class="width36 paddedbottom10" ng-show="formData.withHoldTax">
                                {{data.taxGroup.name}}
                            </td>
                        </tr>
                    </table>
                    <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.interestchart' | translate }}" wz-disabled="{{disabled}}" >
            <form name="InterestChart" ng-submit="goNext(InterestChart)" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <hr>
                    <hr data-ng-show="formData.productId"/>
                    <table class="width100">
                        <tr>
                            <td class="width50"><label class="control-label">{{ 'label.input.interestratechart.valid.from' |
                                translate }}<span class="required">*</span>: {{fromDate.date | DateFormat}}</label>
                            </td>
                            <td class="width50"><label class="control-label">{{ 'label.input.interestratechart.valid.to' |
                                translate}}: {{endDate.date | DateFormat}}</label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <table class="table table-bordered width100">
                                    <tr class="graybg">
                                        <td ng-show="chart.isPrimaryGroupingByAmount">{{'label.heading.interestratedetails.amount.range' | translate}}</td>
                                        <td>{{'label.heading.interestratedetails.period.type' | translate}}</td>
                                        <td>{{'label.heading.interestratedetails.period.from.to' | translate}}</td>
                                        <td ng-hide="chart.isPrimaryGroupingByAmount">{{'label.heading.interestratedetails.amount.range' | translate}}</td>
                                        <td>{{'label.heading.interestratedetails.interest' | translate}}</td>
                                        <td>{{'label.heading.interestratedetails.description' | translate}}</td>
                                        <td>&nbsp;</td>
                                    </tr>

                                    <tr ng-repeat="chartSlab in chart.chartSlabs">
                                        <td ng-show="chart.isPrimaryGroupingByAmount">{{chartSlab.amountRangeFrom}} - {{chartSlab.amountRangeTo}}</td>
                                        <td>{{chartSlab.periodType.value}}</td>
                                        <td>{{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}</td>
                                        <td ng-hide="chart.isPrimaryGroupingByAmount">{{chartSlab.amountRangeFrom}} - {{chartSlab.amountRangeTo}}</td>
                                        <td>{{chartSlab.annualInterestRate}}</td>
                                        <td>{{chartSlab.description}}</td>
                                        <td>
                                            <a ng-click="incentives($index)"  ><i class=""></i>{{'label.incentive.row'
                                                | translate}}</a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <hr/>
                    <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 }}" wz-disabled="{{disabled}}" >
            <form name="Charges" ng-submit="goNext(Charges)" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <hr>
                    <div class="form-group">
                        <div class="col-sm-3">
                            <select ng-model="chargeId"
                                    ng-options="charge.id as (charge.name + ',' + charge.currency.displaySymbol) for charge in chargeOptions|filter:data.currency.code:strict"
                                    value="{{charge.id}}" class="form-control width170px">
                                <option class="displaynone" value="">{{'label.selectcharge' | translate}}</option>
                            </select>
                        </div>
                        <div class="col-sm-1">
                                <a class="btn btn-primary" ng-click="addCharge(chargeId)"><i class="fa fa-plus "></i>
                                    Add</a>
                        </div>
                        <div class="col-sm-2">
                            <span ng-show="errorchargeevent"><small class="error">{{'label.'+labelchargeerror | translate}}</small></span>
                        </div>
                    </div>
                    <table class="table" class="width100" ng-show="charges.length>0">
                        <tr class="graybg">
                            <th>{{'label.heading.name' | translate}}</th>
                            <th>{{'label.heading.type' | translate}}</th>
                            <th>{{'label.heading.amount' | translate}}</th>
                            <th>{{'label.heading.collectedon' | translate}}</th>
                            <th>{{'label.heading.date' | translate}}</th>
                            <th>{{'label.heading.repaymentsevery' | translate}}</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><input id="charges[{{$index}}].amount" class="form-control" number-format type="text" ng-model="charge.amount"
                                       placeholder="{{'label.placeholder.amount' | translate}}"/></td>
                            <td>{{charge.chargeTimeType.value}}</td>
                            <td ng-show="charge.chargeTimeType.value=='Annual Fee'">
                                <input id="charges[{{$index}}].feeOnMonthDay" class="date-disable form-control"
                                       type="text" datepicker-pop="dd MMMM" ng-model="charge.feeOnMonthDay" is-open="opened"/>
                            </td>
                            <td ng-show="charge.chargeTimeType.value=='Specified due date'">
                                <input id="charges[{{$index}}].dueDate" class="date-disable form-control"
                                       type="text" datepicker-pop="dd MMMM yyyy" ng-model="charge.dueDate" is-open="opened"/>
                            </td>
                            <td ng-show="charge.chargeTimeType.value=='Monthly Fee'">
                                <input class="date-disable form-control" type="text" datepicker-pop="dd MMMM"
                                       ng-model="charge.feeOnMonthDay" is-open="opened"/>
                            </td>
                            <td ng-show="charge.chargeTimeType.value=='Monthly Fee'">
                                <input id="charges[{{$index}}].amount" class="form-control" number-format type="text"
                                       ng-model="charge.feeInterval"/>
                            </td>
                            <td ng-hide="charge.chargeTimeType.value=='Monthly Fee'"></td>
                            <td ng-hide="charge.chargeTimeType.value=='Annual Fee' || charge.chargeTimeType.value=='Specified due date' || charge.chargeTimeType.value=='Monthly Fee'"></td>
                            <td><a ng-click="deleteCharge($index)"><i class="fa fa-times "></i></a></td>
                        </tr>
                    </table>
                    <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="Review" ng-if="formData.productId">
            <form name="Review" novalidate="" class="form-inline">
                <fieldset>
                    <api-validate></api-validate>
                    <hr>
                    <table width="100%">
                        <tr class="bottomborder">
                            <td colspan="7"><strong>{{'label.heading.details' | translate}}</strong></td>
                        </tr>
                        <tr class="paddingtop">
                            <td>{{'label.input.product' | translate}}</td>
                            <td colspan="6">{{recurringDetails.productName}}</td>
                        </tr>
                        <tr ng-show="formData.productId">
                            <td>{{ 'label.input.submittedon' | translate}}</td>
                            <td colspan="6">{{date.submittedOnDate | DateFormat}}</td>
                        </tr>
                        <tr ng-show="formData.fieldOfficerId">
                            <td>{{ 'label.input.fieldofficer' | translate }}</td>
                            <td colspan="6">{{recurringDetails.fieldOfficerName}}</td>
                        </tr>
                        <tr>
                            <td colspan="7"><br></td>
                        </tr>
                        <tr class="bottomborder">
                            <td colspan="7"><strong>{{'label.heading.terms' | translate}}</strong></td>
                        </tr>
                        <tr class="paddingtop">
                            <td>{{ 'label.heading.currency' | translate }}</td>
                            <td colspan="6">{{data.currency.name}}({{data.currency.displaySymbol}})</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.heading.decimalplaces' | translate}}</td>
                            <td colspan="6">{{data.currency.decimalPlaces}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.input.interestcompoundingperiod' | translate}}</td>
                            <td colspan="6">{{recurringDetails.interestCompoundingPeriodTypeValue}}</td>
                        </tr>
                         <tr>
                            <td>{{'label.input.interestpostingperiod' | translate}}</td>
                            <td colspan="6">{{recurringDetails.interestPostingPeriodTypeValue}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.input.interestcalculatedusing' | translate}}</td>
                            <td colspan="6">{{recurringDetails.interestCalculationTypeValue}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.daysinyears' | translate }}</td>
                            <td colspan="6">{{recurringDetails.interestCalculationDaysInYearTypeValue}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.lockinPeriodFrequency' | translate }}</td>
                            <td colspan="6">{{formData.lockinPeriodFrequency}}
                                {{recurringDetails.lockinPeriodFrequencyTypeValue}}
                            </td>
                        <tr>
                            <td>{{ 'label.checkbox.ismandatory.deposit' | translate }}</td>
                            <td colspan="6">{{formData.isMandatoryDeposit}}</td>
                        </tr>
                         <tr>
                            <td>{{ 'label.checkbox.allowWithdrawal' | translate }}</td>
                            <td colspan="6">{{formData.allowWithdrawal}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.checkbox.adjustAdvanceTowardsFuturePayments' | translate }}</td>
                            <td colspan="6">{{formData.adjustAdvanceTowardsFuturePayments}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.mandatory.recommended.deposit.amount' | translate }}</td>
                            <td colspan="6">{{formData.mandatoryRecommendedDepositAmount}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.depositperiod' | translate }}</td>
                            <td colspan="6">{{formData.depositPeriodFrequencyId}}
                                {{recurringDetails.depositPeriodTypeValue}}
                            </td>
                        <tr>
                        <tr>
                            <td>{{ 'label.input.same.as.group.meeting' | translate }}</td>
                            <td colspan="6">{{formData.isCalendarInherited}}</td>
                        </tr>
                        <tr ng-show="!formData.isCalendarInherited">
                            <td>{{ 'label.input.deposit.start.date' | translate }}</td>
                            <td colspan="6">{{formData.expectedFirstDepositOnDate}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.recurring.frequency' | translate }}</td>
                            <td colspan="6">{{formData.recurringFrequencyType}}
                                {{recurringDetails.recurringFrequencyTypeValue}}
                            </td>
                        <tr>
                        <tr>
                            <td colspan="7"><br></td>
                        </tr>
                        <tr class="bottomborder">
                            <td colspan="7"><strong>{{ 'label.heading.settings' | translate }}</strong></td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.minimumdepositterm' | translate }}</td>
                            <td colspan="6">{{formData.minDepositTerm}}-{{data.minDepositTermType.value}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.inmultiplesof' | translate }}</td>
                            <td colspan="6">{{formData.inMultiplesOfDepositTerm}}-{{data.inMultiplesOfDepositTermType.value}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.maximumdepositterm' | translate }}</td>
                            <td colspan="6">{{formData.maxDepositTerm}}-{{data.maxDepositTermType.value}}</td>
                        </tr>
                        <tr data-ng-show="formData.preClosurePenalApplicable">
                            <td>{{ 'label.prematureclosure' | translate }}</td>
                            <td colspan="6">{{formData.expectedFirstDepositOnDate}}</td>
                        </tr>
                        <tr ng-show="data.minBalanceForInterestCalculation">
                            <td>{{'label.heading.minbalanceforinterestcalculation' | translate}}</td>
                            <td colspan="6">{{data.minBalanceForInterestCalculation | number}}</td>
                        </tr>
                        <tr ng-show="data.taxGroup">
                            <td>{{ 'label.input.withholdtax' | translate }}</td>
                            <td colspan="6">{{formData.withHoldTax}}</td>
                        </tr>
                        <tr ng-show="formData.withHoldTax">
                            <td>{{ 'label.input.taxgroup' | translate }}</td>
                            <td colspan="6">{{data.taxGroup.name}}</td>
                        </tr>
                        <tr>
                            <td colspan="7"><br></td>
                        </tr>
                        <tr class="bottomborder">
                            <td colspan="7"><strong>{{ 'label.heading.interestchart' | translate }}</strong></td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.interestratechart.valid.from' | translate }}</td>
                            <td colspan="6">{{fromDate.date | DateFormat}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.interestratechart.valid.to' | translate}}</td>
                            <td colspan="6">{{endDate.date | DateFormat}}</td>
                        </tr>
                        <tr>
                            <td colspan="7"><br></td>
                        </tr>
                        <tr class="graybg paddingtop bottomborder">
                            <td ng-show="chart.isPrimaryGroupingByAmount">{{'label.heading.interestratedetails.amount.range' | translate}}</td>
                            <td>{{'label.heading.interestratedetails.period.type' | translate}}</td>
                            <td>{{'label.heading.interestratedetails.period.from.to' | translate}}</td>
                            <td ng-hide="chart.isPrimaryGroupingByAmount">{{'label.heading.interestratedetails.amount.range' | translate}}</td>
                            <td>{{'label.heading.interestratedetails.interest' | translate}}</td>
                            <td>{{'label.heading.interestratedetails.description' | translate}}</td>
                        </tr>
                        <tr ng-repeat="chartSlab in chart.chartSlabs">
                            <td ng-show="chart.isPrimaryGroupingByAmount">{{chartSlab.amountRangeFrom}} - {{chartSlab.amountRangeTo}}</td>
                            <td>{{chartSlab.periodType.value}}</td>
                            <td>{{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}</td>
                            <td ng-hide="chart.isPrimaryGroupingByAmount">{{chartSlab.amountRangeFrom}} - {{chartSlab.amountRangeTo}}</td>
                            <td>{{chartSlab.annualInterestRate}}</td>
                            <td>{{chartSlab.description}}</td>
                        </tr>
                        <tr>
                            <td colspan="7"><br></td>
                        </tr>
                        <tr class="bottomborder">
                            <td colspan="7"><strong>{{'label.heading.charges' | translate}}</strong></td>
                        </tr>
                        <tr class="graybg paddingtop bottomborder">
                            <th>{{'label.heading.name' | translate}}</th>
                            <th>{{'label.heading.type' | translate}}</th>
                            <th>{{'label.heading.amount' | translate}}</th>
                            <th colspan="2">{{'label.heading.collectedon' | translate}}</th>
                        </tr>
                        <tr ng-repeat="charge in charges">
                            <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
                            <td>{{charge.chargeCalculationType.value}}</td>
                            <td>{{charge.amount}}
                            <td colspan="2">{{charge.chargeTimeType.value}}</td>
                        </tr>
                    </table>
                    <br><br>
                    <div class="col-md-offset-6">
                        <button id="cancel" ng-click="cancel()" class="btn btn-warning">{{ 'label.button.cancel' | translate }}
                        </button>
                        <button id="save" wz-next class="btn btn-primary" ng-show="data"
                                has-permission='CREATE_RECURRINGACCOUNT' type="submit">{{
                            'label.button.save' | 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>

    <script type="text/ng-template" id="incentive.html">
        <div class="modal-header silver">
            <h3 class="bolder">{{'label.heading.incentives' | translate}}</h3>
            <h3 class="bolder">{{'label.heading.customerattributes' | translate}}</h3>
            <table class="table table-bordered width100">
                <tr class="graybg">
                    <td  class="width20">{{'label.heading.interestratedetails.incentive.attributename' | translate}}</td>
                    <td class="width20">{{'label.heading.interestratedetails.incentive.conditiontype' | translate}}</td>
                    <td class="width20">{{'label.heading.interestratedetails.incentive.attributevalue' | translate}}</td>
                    <td class="width20">{{'label.heading.interestratedetails.incentive.incentivetype' | translate}}</td>
                    <td class="width20">{{'label.heading.interestratedetails.incentive.amount' | translate}}</td>
                </tr>
                <tr ng-repeat="incentiveData in chartSlab.incentives">
                    <td>{{incentiveData.attributeName.code | translate}}</td>
                    <td>{{incentiveData.conditionType.code | translate}} </td>
                    <td>{{incentiveData.attributeValueDesc}} </td>
                    <td>{{incentiveData.incentiveType.code | translate}} </td>
                    <td>{{incentiveData.amount | number}}</td>
                </tr>
            </table>
        </div>
    </script>
    </fieldset>
    </form>
    </div>
