<div class="content-container" ng-controller="CreateFixedDepositProductController">
    <ul class="breadcrumb">
        <li><a href="#/products">{{'label.anchor.products' | translate}}</a></li>
        <li><a href="#/fixeddepositproducts">{{'label.anchor.fixeddepositproducts' | translate}}</a></li>
        <li class="active">{{'label.anchor.createfixeddepositproduct' | translate}}</li>
    </ul>
    <wizard current-step="step" on-finish="submit()" class="card well">
        <wz-step wz-title="{{'label.heading.details' | translate}}">
            <form name="Details" ng-submit="goNext(Details)" novalidate="" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{ 'label.heading.details' | translate }}</h3>-->
                    <hr>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.productname' | translate }}<span class="required">*</span></label>
                        <div class="col-sm-2">
                            <input type="text" id="name" class="form-control" name="name" ng-model="formData.name"
                                required late-validate />
                        </div>
                        <div class="col-sm-2">
                            <form-validate valattributeform="Details" valattribute="name" />
                        </div>
                        <label class="control-label col-sm-2">{{ 'label.input.product.shortname' | translate }}<span
                                class="required">*</span></label>
                        <div class="col-sm-2">
                            <input type="text" id="shortName" name="shortName" ng-model="formData.shortName" class="form-control"
                                maxlength="4" required late-validate />
                        </div>
                        <div class="col-sm-2">
                            <form-validate valattributeform="Details" valattribute="shortName" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.description' | translate }}<span class="required">*</span></label>
                        <div class="col-sm-2">
                            <textarea rows="2" id="description" name="description" ng-model="formData.description"
                                      class="form-control"  required late-validate></textarea>
                        </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" ng-submit="goNext(Currency)" novalidate="" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{ 'label.heading.currency' | translate }}</h3>-->
                    <hr>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.currency' | translate }}<span class="required">*</span></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="depositproduct.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></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" />
                            <span ng-show="Currency.decimalplace.$invalid && Currency.decimalplace.$dirty">
                                <small class="required error" ng-show="Currency.decimalplace.$error.pattern">
                                    {{'label.mustbenumeric' | translate}}
                                </small>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.multiplesof' | translate }}<span class="required">*</span></label>
                        <div class="col-sm-2">
                            <input type="text" id="inMultiplesOf" class="form-control" name="multiplesof" number-format
                                ng-model="formData.inMultiplesOf" required 
                                late-validate number=true />
                        </div>
                        <div class="col-sm-2">
                            <form-validate valattributeform="Currency" valattribute="multiplesof" />
                            <span ng-show="Currency.multiplesof.$invalid && Currency.multiplesof.$dirty">
                                <small class="required error" ng-show="Currency.multiplesof.$error.pattern">
                                    {{'label.mustbenumeric' | translate}}
                                </small>
                            </span>
                        </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" ng-submit="goNext(Terms)" novalidate="" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{ 'label.heading.terms' | translate }}</h3>-->
                    <hr>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.default.deposit.amount' | translate
                            }}<span class="required">*</span>
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fixeddepositproduct.defaultamount' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input type="text" id="depositAmount" name="depositAmount" class="form-control"
                                number-format ng-model="formData.depositAmount" required 
                                late-validate decimal-number=true />
                        </div>
                        <div class="col-sm-2">
                            <form-validate valattributeform="Terms" valattribute="depositAmount" />
                            <span ng-show="Terms.depositAmount.$invalid && Terms.depositAmount.$dirty">
                                <small class="required error" ng-show="Terms.depositAmount.$error.pattern">
                                    {{'label.mustbenumeric' | translate}}
                                </small>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.minDepositAmount' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fixeddepositproduct.minimumamount' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input type="text" id="minDepositAmount" name="minDepositAmount" class="form-control"
                                number-format ng-model="formData.minDepositAmount" late-validate decimal-number=true />
                            <form-validate valattributeform="Terms" valattribute="minDepositAmount" />
                        </div>
                        <label class="control-label col-sm-2">{{ 'label.input.maxDepositAmount' |
                            translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fixeddepositproduct.maximumamount' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input type="text" id="maxDepositAmount" name="maxDepositAmount" class="form-control"
                                number-format ng-model="formData.maxDepositAmount" late-validate decimal-number=true />
                            <form-validate valattributeform="Terms" valattribute="maxDepositAmount" />
                        </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.fixeddepositproduct.compoundperiod' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestCompoundingPeriodTypeOptions" ng-model="formData.interestCompoundingPeriodType"
                                class="form-control" ng-options="type.id as type.value for type in product.interestCompoundingPeriodTypeOptions"
                                ng-change="depositproduct.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.fixeddepositproduct.postingperiod' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestPostingPeriodTypeOptions" ng-model="formData.interestPostingPeriodType"
                                class="form-control" ng-options="type.id as type.value for type in product.interestPostingPeriodTypeOptions"
                                ng-change="depositproduct.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.fixeddepositproduct.calcmethod' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestCalculationType" ng-model="formData.interestCalculationType" class="form-control"
                                ng-options="type.id as type.value for type in product.interestCalculationTypeOptions"
                                ng-change="depositproduct.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.fixeddepositproduct.daysinyear' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestCalculationDaysInYearType" ng-model="formData.interestCalculationDaysInYearType"
                                class="form-control" ng-options="type.id as type.value for type in product.interestCalculationDaysInYearTypeOptions"
                                ng-change="depositproduct.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" ng-submit="goNext(Settings)" novalidate="" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{ 'label.heading.settings' | translate }}</h3>-->
                    <hr>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.lockinPeriodFrequency' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fixeddepositproduct.lockinperiod' | 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="depositproduct.lockinPeriodFrequencyOption.value = formValue(product.lockinPeriodFrequencyTypeOptions,formData.lockinPeriodFrequencyType)"
                                value="{{type.id}}">
                                <option class="displaynone" value="">{{'label.selectone' | translate}}</option>
                            </select>
                        </div>
                        <label class="control-label col-sm-2">{{ 'label.input.minimumdepositterm' | translate }}<span
                                class="required">*</span>
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fixeddepositproduct.minimumterm' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="minimumDepositTerm" type="text" name="minimumDepositTerm" class="form-control"
                                ng-model="formData.minDepositTerm" required late-validate number=true>
                            <form-validate valattributeform="Settings" valattribute="minimumDepositTerm" />
                        </div>

                        <div class="col-sm-2">
                            <select id="minDepositTermTypeId" ng-model="formData.minDepositTermTypeId" class="form-control"
                                ng-options="type.id as type.value for type in product.periodFrequencyTypeOptions"
                                ng-change="depositproduct.minDepositTermType.value = formValue(product.periodFrequencyTypeOptions,formData.minDepositTermTypeId)"
                                value="{{type.id}}">
                                <option class="displaynone" value="">{{'label.selectone' | translate}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.inmultiplesof' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fixeddepositproduct.termmultiplesof' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="inMultiplesOfDepositTerm" type="text" name="inMultiplesOfDepositTerm" class="form-control"
                                ng-model="formData.inMultiplesOfDepositTerm" late-validate number=true>
                            <form-validate valattributeform="Settings" valattribute="inMultiplesOfDepositTerm" />
                        </div>
                        <div class="col-sm-2">
                            <select id="inMultiplesOfDepositTermTypeId" ng-model="formData.inMultiplesOfDepositTermTypeId"
                                class="form-control" ng-options="type.id as type.value for type in product.periodFrequencyTypeOptions"
                                ng-change="depositproduct.inMultiplesOfDepositTermType.value = formValue(product.periodFrequencyTypeOptions,formData.inMultiplesOfDepositTermTypeId)"
                                value="{{type.id}}">
                                <option class="displaynone" value="">{{'label.selectone' | translate}}</option>
                            </select>
                        </div>
                        <label class="control-label col-sm-2">{{ 'label.input.maximumdepositterm' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fixeddepositproduct.maximumterm' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <input id="maximumDepositTerm" type="text" name="maximumDepositTerm" class="form-control"
                                ng-model="formData.maxDepositTerm" late-validate number=true />
                            <form-validate valattributeform="Settings" valattribute="maximumDepositTerm" />
                        </div>
                        <div class="col-sm-2">
                            <select id="maxDepositTermTypeId" ng-model="formData.maxDepositTermTypeId" class="form-control"
                                ng-options="type.id as type.value for type in product.periodFrequencyTypeOptions"
                                ng-change="depositproduct.maxDepositTermType.value = formValue(product.periodFrequencyTypeOptions,formData.maxDepositTermTypeId)"
                                value="{{type.id}}">
                                <option class="displaynone" value="">{{'label.selectone' | translate}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.prematureclosure' | translate }}
                            <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fixeddepositproduct.prematureclosure' | translate}}"
                                tooltip-append-to-body="true"></i>
                        </label>
                        <div class="col-sm-2">
                            <label class="checkbox">
                                <input id="preClosurePenalApplicable" type="checkbox" ng-model="formData.preClosurePenalApplicable">
                                {{ 'label.checkbox.applypreclosurepenalinterest' | translate }}
                            </label>
                        </div>
                        <div class="col-sm-2">
                            <input id="preClosurePenalInterest" name="preClosurePenalInterest" type="text" class="form-control"
                                ng-model="formData.preClosurePenalInterest" late-validate decimal-number=true />
                            <span ng-show="Settings.preClosurePenalInterest.$invalid && Settings.preClosurePenalInterest.$dirty">
                                <small class="required error">
                                    {{'label.mustbenumeric' | translate}}
                                </small>
                            </span>
                        </div>
                        <div class="col-sm-1 col-sm-offset-1">
                            {{ 'label.on' | translate }}
                        </div>
                        <div class="col-sm-2">
                            <select class="form-control" id="preClosurePenalInterestOnTypeId" ng-model="formData.preClosurePenalInterestOnTypeId"
                                ng-options="type.id as type.value for type in product.preClosurePenalInterestOnTypeOptions"
                                value="{{formData.preClosurePenalInterestOnTypeId}}">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">{{ 'label.input.withholdtax' | translate }}</label>
                        <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.withholdtax' | translate}}"></i>
                        <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-if="formData.withHoldTax">
                            <label class="control-label col-sm-2">{{ 'label.input.taxgroup' | translate }}<span class="required">*</span></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"
                                    value="{{taxGroup.id}}" required late-validate>
                                    <option value="">{{'label.select' | translate}}</option>
                                </select>
                            </div>
                        </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.interestchart' | translate}}">
            <form name="interestchart" ng-submit="goNext(interestchart)" novalidate="" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <h3>{{ 'label.heading.interestchart' | translate }}
                        <i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.fixeddepositproduct.interesetchart' | translate}}"
                            tooltip-append-to-body="true"></i>
                    </h3>
                    <hr>
                    <!--<tr>
                           <td>
                               <div class="control-group">
                                   <label class="control-label" for="name">{{ 'label.input.interestratechart.name' | translate
                                       }}<span
                                               class="required">*</span></label>

                                   <div class="controls">
                                       <input id="name" ng-autofocus="true" type="text" name="name" ng-model="chart.name"/>
                                   </div>
                               </div>
                           </td>
                           <td>
                               <div class="control-group">
                                   <label class="control-label" for="name">{{ 'label.input.interestratechart.description' |
                                       translate
                                       }}</label>

                                   <div class="controls">
                                       <input id="chdescription" ng-autofocus="true" type="text" name="chdescription"
                                              ng-model="chart.description"/>
                                   </div>
                               </div>
                           </td>
                           <td>&nbsp;</td>
                           <td>&nbsp;</td>
                       </tr>-->
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="name">{{ 'label.input.interestratechart.valid.from'
                            |
                            translate }}<span class="required">*</span></label>
                        <div class="col-sm-2">
                            <input id="fromDate" sort type="text" name="fromDate" class="form-control" datepicker-pop="dd MMMM yyyy"
                                ng-model="fromDate.date" is-open="opened" min="minDate" max="restrictDate" required
                                late-validate>
                        </div>
                        <div class="col-sm-2">
                            <form-validate valattributeform="interestchart" valattribute="fromDate" />
                        </div>
                        <label class="control-label col-sm-2 col-sm-2 " for="name">{{
                            'label.input.interestratechart.valid.to' | translate }}</label>
                        <div class="col-sm-2">
                            <input id="endDate" sort type="text" class="form-control" datepicker-pop="dd MMMM yyyy"
                                ng-model="endDate.date" is-open="opened" min="minDate" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="name">{{
                            'label.input.interestratechart.primary.grouping.amount' |
                            translate }}</label>
                        <div class="col-sm-2">
                            <label class="checkbox">
                                <input id="isPrimaryGroupingByAmount" type="checkbox" ng-model="isPrimaryGroupingByAmount">

                            </label>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <table class="table table-bordered width100">
                            <tr class="graybg">
                                <td ng-show="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="isPrimaryGroupingByAmount">
                                    {{'label.heading.interestratedetails.amount.range' | translate}}
                                </td>
                                <td>{{'label.heading.interestratedetails.interest' | translate}}<span class="required">*</span></td>
                                <td>{{'label.heading.interestratedetails.description' | translate}}</td>
                                <td>
                                    <div ng-show="chart.chartSlabs.length < 1">
                                        <a class="btn btn-primary" ng-click="addNewRow()"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{'label.add.row'
                                            | translate}}</a>
                                    </div>
                                </td>
                            </tr>

                            <tr ng-repeat="chartSlab in chart.chartSlabs">
                                <td ng-show="isPrimaryGroupingByAmount">
                                    <input id="amountRangeFrom1" name="amountRangeFrom1" type="text" class="input-mini"
                                        ng-model="chartSlab.amountRangeFrom" late-validate decimal-number=true/>
                                    <span ng-show="interestchart.amountRangeFrom1.$invalid && interestchart.amountRangeFrom1.$dirty">
                                        <small class="required error">
                                            {{'label.mustbenumeric' | translate}}
                                        </small>
                                    </span> -
                                    <input id="amountRangeTo1" name="amountRangeTo1" type="text" class="input-mini"
                                        ng-model="chartSlab.amountRangeTo" late-validate decimal-number=true/>
                                    <span ng-show="interestchart.amountRangeTo1.$invalid && interestchart.amountRangeTo1.$dirty">
                                        <small class="required error">
                                            {{'label.mustbenumeric' | translate}}
                                        </small>
                                    </span>
                                </td>
                                <td class="width20">
                                    <select class="form-control" id="periodType" ng-model="chartSlab.periodType.id"
                                        ng-options="type.id as type.value for type in chart.periodTypes" value="{{chartSlab.periodType.id}}">
                                    </select>
                                </td>
                                <td class="width15">
                                    <table class="width100">
                                        <tr>
                                            <td><input id="fromPeriod" name="fromPeriod" type="text" class="form-control"
                                                    ng-model="chartSlab.fromPeriod" /></td>
                                            <td>&nbsp;&nbsp;-&nbsp;&nbsp;</td>
                                            <td><input id="toPeriod" name="toPeriod" type="text" class="form-control"
                                                    ng-model="chartSlab.toPeriod" /></td>
                                        </tr>
                                    </table>
                                </td>
                                <td ng-hide="isPrimaryGroupingByAmount">
                                    <input id="amountRangeFrom" name="amountRangeFrom" type="text" class="input-mini"
                                        ng-model="chartSlab.amountRangeFrom" late-validate decimal-number=true />
                                    <span ng-show="interestchart.amountRangeFrom.$invalid && interestchart.amountRangeFrom.$dirty">
                                        <small class="required error">
                                            {{'label.mustbenumeric' | translate}}
                                        </small>
                                    </span> -
                                    <input id="amountRangeTo" name="amountRangeTo" type="text" class="input-mini"
                                        ng-model="chartSlab.amountRangeTo" late-validate decimal-number=true />

                                    <span ng-show="interestchart.amountRangeTo.$invalid && interestchart.amountRangeTo.$dirty">
                                        <small class="required error">
                                            {{'label.mustbenumeric' | translate}}
                                        </small>
                                    </span>

                                </td>
                                <td class="width15">
                                    <input id="annualInterestRate" name="annualInterestRate" type="text" class="form-control"
                                        ng-model="chartSlab.annualInterestRate"  required late-validate/>
                                </td>
                                <td class="width20"><input name="description" type="text" class="form-control" ng-model="chartSlab.description" /></td>
                                <td class="width10">
                                    <a ng-click="removeRow($index)"><i class="fa fa-times-circle fa-2x"></i></a>

                                    <div ng-show="$last">
                                        <br />
                                        <a ng-click="addNewRow()" class="btn btn-primary"><i class="fa fa-plus "></i>&nbsp;&nbsp;{{'label.add.row'
                                            | translate}}</a>
                                    </div>
                                </td>
                                <td class="width8">
                                    <a ng-click="incentives($index)"><i class=""></i>{{'label.incentive.row'
                                        | translate}}</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.charges' | translate}}">
            <form name="Charges" ng-submit="goNext(Charges)" novalidate="" 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 width100">
                            <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.actions' | translate}}</th>
                            </tr>
                            <tr ng-repeat="charge in charges">
                                <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
                                <td>{{charge.chargeCalculationType.value}}</td>
                                <td>{{charge.amount | number}}</td>
                                <td>{{charge.chargeTimeType.value}}</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" ng-submit="goNext(Accounting)" novalidate="" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{ 'label.heading.accounting' | translate }}</h3>-->
                    <hr>
                    <div class="radio-inline">
                        <label>
                            <input type="radio" ng-model="formData.accountingRule" value="1">{{'label.input.none'
                            |translate}}
                        </label>
                    </div>
                    <div class="radio-inline">
                        <label>
                            <input type="radio" ng-model="formData.accountingRule" value="2">{{'label.input.cash'
                            |translate}}
                        </label>
                    </div>
                    <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 col-sm-2">{{ '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="depositproduct.accountingMappings.savingsReferenceAccount.name = formValue(assetAccountOptions,formData.savingsReferenceAccountId,'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="depositproduct.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="depositproduct.accountingMappings.transfersInSuspenseAccount.name = formValue(liabilityAccountOptions,formData.transfersInSuspenseAccountId,'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="depositproduct.accountingMappings.interestOnSavingsAccount.name = formValue(expenseAccountOptions,formData.interestOnSavingsAccountId,'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="depositproduct.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="depositproduct.accountingMappings.incomeFromPenaltyAccount.name = formValue(incomeAccountOptions,formData.incomeFromPenaltyAccountId,'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="depositproduct.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="depositproduct.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="depositproduct.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="depositproduct.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="depositproduct.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="depositproduct.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>{{depositproduct.name}}</h3>
                    <hr>
                    <table class="width100">
                        <tr>
                            <td>
                                <a name="test" class="old-syle-anchor">&nbsp;</a>
                            </td>
                        </tr>
                        <tr class="bottomborder">
                            <td colspan="4">
                                <strong>{{'label.heading.details' | translate}}</strong>
                            </td>
                        </tr>
                        <tr class="toppadding">
                            <td>{{'label.heading.description' | translate}}</td>
                            <td colspan="3">{{depositproduct.description}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.shortname' | translate}} :</td>
                            <td colspan="3">{{depositproduct.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 class="toppadding">
                            <td>{{'label.heading.currency' | translate}}</td>
                            <td colspan="3">{{depositproduct.currency.name}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.decimalplaces' | translate}}</td>
                            <td colspan="3">{{depositproduct.digitsAfterDecimal}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.currencyinmultiplesof' | translate}}</td>
                            <td colspan="3">{{depositproduct.inMultiplesOf | number}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.input.minDepositAmount' | translate}}</td>
                            <td colspan="3">{{depositproduct.minDepositAmount | number}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.input.default.deposit.amount' | translate}}</td>
                            <td colspan="3">{{depositproduct.depositAmount | number}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.input.maxDepositAmount' | translate}}</td>
                            <td colspan="3">{{depositproduct.maxDepositAmount | number}}</td>
                        </tr>
                        <!--<tr>
                            <td>{{'label.heading.nominalannualinterestrate' | translate}}</td>
                            <td colspan="3">{{depositproduct.nominalAnnualInterestRate}}</td>
                        </tr>-->
                        <tr>
                            <td>{{'label.heading.interestcompoundingperiod' | translate}}</td>
                            <td colspan="3">{{depositproduct.interestCompoundingPeriodOption.value}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.interestpostingperiod' | translate}}</td>
                            <td colspan="3">{{depositproduct.interestPostingPeriodOption.value}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.interestcalculatedusing' | translate}}</td>
                            <td colspan="3">{{depositproduct.interestCalculationOption.value}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.daysinyears' | translate}}</td>
                            <td colspan="3">{{depositproduct.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.lockinPeriodFrequency' | translate}}</td>
                            <td>{{depositproduct.lockinPeriodFrequency}}
                                {{depositproduct.lockinPeriodFrequencyOption.value}}
                            </td>
                            &nbsp;
                        </tr>
                        <tr>
                            <td>{{'label.heading.minimumdepositterm' | translate}}</td>
                            <td>{{depositproduct.minDepositTerm}} &nbsp; {{depositproduct.minDepositTermType.value}}
                            </td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.maximumdepositterm' | translate}}</td>
                            <td>{{depositproduct.maxDepositTerm}} &nbsp; {{depositproduct.maxDepositTermType.value}}
                            </td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.inmultiplesofdeposit' | translate}}</td>
                            <td>{{depositproduct.inMultiplesOfDepositTerm}} -
                                {{depositproduct.inMultiplesOfDepositTermType.value}}
                            </td>
                        </tr>
                        <!--<tr>
                            <td>{{'label.heading.interestfreeperiodapplicable' | translate}}</td>
                            <td>from &nbsp; {{depositproduct.interestFreeFromPeriod}} &nbsp;&nbsp; - {{depositproduct.interestFreeToPeriod}}
                                &nbsp; &nbsp; {{depositproduct.interestFreePeriodFrequencyType.value}}
                            </td>
                        </tr>-->
                        <tr ng-show="depositproduct.preClosurePenalInterest">
                            <td>{{'label.heading.preclosurepenalapplicable' | translate}}</td>
                            <td>{{depositproduct.preClosurePenalInterest | number}} &nbsp; &nbsp; % &nbsp; &nbsp; On
                                &nbsp;&nbsp; {{depositproduct.preClosurePenalInterestOnType.value}}
                            </td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.withholdtax' | translate}}</td>
                            <td colspan="3">{{depositproduct.withHoldTax}}</td>
                        </tr>
                        <tr ng-show="depositproduct.withHoldTax">
                            <td>{{'label.heading.withholdtaxgroup' | translate}}</td>
                            <td colspan="3">{{depositproduct.taxGroup.name}}</td>
                        </tr>
                        <tr>
                            <td colspan="4"><br /></td>
                        </tr>
                        <tr class="bottomborder">
                            <td colspan="4"><strong>{{'label.heading.interestchart' | translate}}</strong></td>
                        </tr>
                        <tr>
                            <td>{{'label.heading.interestratechart.valid.from' | translate}} :
                                {{depositproduct.activeChart.fromDate | DateFormat}}
                            </td>
                            <td>{{'label.heading.interestratechart.valid.to' | translate}} :
                                {{depositproduct.activeChart.endDate | DateFormat}}
                            </td>
                            &nbsp;
                        </tr>
                        <tr class="bottomborder graybg">
                            <td ng-show="depositproduct.activeChart.isPrimaryGroupingByAmount">
                                {{'label.heading.interestratedetails.amount.range' | translate}}
                            </td>
                            <td>{{'label.heading.interestratedetails.period.from.to' | translate}}</td>
                            <td ng-hide="depositproduct.activeChart.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="depositproduct.activeChart.isPrimaryGroupingByAmount && chartSlab.amountRangeFrom != undefined">
                                {{chartSlab.amountRangeFrom}} - {{chartSlab.amountRangeTo}}
                            </td>
                            <td ng-show="chartSlab.fromPeriod != undefined">{{chartSlab.fromPeriod}} -
                                {{chartSlab.toPeriod}} {{chart.periodTypes[chartSlab.periodType.id].value}}
                            </td>
                            <td ng-show="chartSlab.fromPeriod == undefined">&nbsp;</td>
                            <td ng-show="!depositproduct.activeChart.isPrimaryGroupingByAmount && chartSlab.amountRangeFrom != undefined">
                                {{chartSlab.amountRangeFrom}} - {{chartSlab.amountRangeTo}}
                            </td>
                            <td ng-show="!depositproduct.activeChart.isPrimaryGroupingByAmount && chartSlab.amountRangeFrom == undefined">
                                &nbsp;</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>
                        <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 class="width100" ng-show="formData.accountingRule == 2">
                                    <tr class="toppadding">
                                        <td>{{'label.heading.savingsreference' | translate}}({{'label.heading.assets' |
                                            translate}})
                                        </td>
                                        <td colspan="3">
                                            {{depositproduct.accountingMappings.savingsReferenceAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.heading.savingscontrol' |
                                            translate}}({{'label.heading.liabilities' | translate}})
                                        </td>
                                        <td colspan="3">
                                            {{depositproduct.accountingMappings.savingsControlAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.heading.transfersinsuspenpense' |
                                            translate}}({{'label.heading.liabilities' | translate}})
                                        </td>
                                        <td colspan="3">
                                            {{depositproduct.accountingMappings.transfersInSuspenseAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.heading.interestonsavings' |
                                            translate}}({{'label.heading.expenses' | translate}})
                                        </td>
                                        <td colspan="3">
                                            {{depositproduct.accountingMappings.interestOnSavingsAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.heading.incomefromfee' | translate}}({{'label.heading.income' |
                                            translate}})
                                        </td>
                                        <td colspan="3">
                                            {{depositproduct.accountingMappings.incomeFromFeeAccount.name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{'label.heading.incomefrompenalties' |
                                            translate}}({{'label.heading.income' | translate}})
                                        </td>
                                        <td colspan="3">
                                            {{depositproduct.accountingMappings.incomeFromPenaltyAccount.name}}
                                        </td>
                                    </tr>

                                    <tr>
                                        <td colspan="4"><br /></td>
                                    </tr>
                                    <tr>
                                        <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 depositproduct.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 depositproduct.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 depositproduct.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" type="submit">
                            {{'label.button.createfixeddepositproduct' | translate}}
                        </button>
                    </div>
                    <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>
    <!--Incentive Modal (Interest Rate Chart)-->
    <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="width15">{{'label.heading.interestratedetails.incentive.amount' | translate}}</td>
                    <td>
                        <div ng-show="chartSlab.incentives.length < 1">
                            <a class="btn btn-primary" ng-click="addNewRow()"><i class="fa fa-plus "></i>&nbsp;&nbsp;{{'label.add.row'
                                | translate}}</a>
                        </div>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr ng-repeat="incentiveData in chartSlab.incentives">
                    <td>
                        <select class="form-control" id="attributename" ng-model="incentiveData.attributeName.id" ng-options="type.id as type.value for type in data.attributeNameOptions" value="{{type.id}}">
                        </select>
                    </td>
                    <td>
                        <select class="form-control" id="conditionType" ng-model="incentiveData.conditionType.id" ng-options="type.id as type.value for type in data.conditionTypeOptions" value="{{type.id}}">
                        </select>
                    </td>
                    <td>
                        <select class="form-control" ng-show="incentiveData.attributeName.id == 2" id="attributeValuegender" ng-model="incentiveData.attributeValue" ng-options="type.id as type.name for type in data.genderOptions" value="{{type.id}}">
                        </select>
                        <select class="form-control" ng-show="incentiveData.attributeName.id == 4" id="attributeValueclienttype" ng-model="incentiveData.attributeValue" ng-options="type.id as type.name for type in data.clientTypeOptions" value="{{type.id}}">
                        </select>
                        <select class="form-control" ng-show="incentiveData.attributeName.id == 5" id="attributeValueclientclassification" ng-model="incentiveData.attributeValue" ng-options="type.id as type.name for type in data.clientClassificationOptions" value="{{type.id}}">
                        </select>
                        <input id="attributeValue" ng-show="incentiveData.attributeName.id == 3" name="attributeValueclientage" type="text" class="form-control" ng-model="incentiveData.attributeValue" />
                    </td>
                    <td>
                        <select class="form-control" id="incentiveType" ng-model="incentiveData.incentiveType.id" ng-options="type.id as type.value for type in data.incentiveTypeOptions" value="{{type.id}}">
                        </select>
                    </td>

                    <td>
                        <input id="amount" name="amount" type="text" class="form-control" number-format ng-model="incentiveData.amount" />
                    </td>
                    <td>
                        <a class="btn btn-primary" ng-click="removeRow($index)"><i class="fa fa-times "></i>&nbsp;&nbsp;{{'label.remove.row'
                            | translate}}</a>

                        <div ng-show="$last">
                            <br/>
                            <a class="btn btn-primary" ng-click="addNewRow()"><i class="fa fa-plus"></i>&nbsp;&nbsp;{{'label.add.row'
                                | translate}}</a>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" ng-click="cancel()">{{'label.button.close' | translate}}</button>
        </div>
    </script>
</div>