<div class="content-container" ng-controller="CreateSavingAccountController">
    <ul class="breadcrumb">
        <li ng-show="centerEntity">
            <a href="#/viewcenter/{{groupId}}">
                <strong>'{{groupName}}'</strong>
            </a>
        </li>
        <li ng-show="groupName&&!centerEntity">
            <a href="#/viewgroup/{{groupId}}">
                <strong>'{{groupName}}'</strong>
            </a>
        </li>
        <li ng-show="clientName">
            <a href="#/viewclient/{{clientId}}">
                <strong>'{{clientName}}'</strong>
            </a>
        </li>
        <li class="active">{{'label.anchor.savingapplication' | translate}}</li>
    </ul>
    <wizard current-step="step" on-finish="submit()" class="card well">
        <wz-step wz-title="{{'label.heading.details' | translate}}">
            <form name="Details" novalidate="" ng-submit="goNext(Details)" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{'label.heading.details' | translate}}</h3>-->
                    <hr>
                    <table class="" style="border-spacing: 10px; border-collapse: separate">
                        <tr>
                            <div class="form-group">
                                <td class="width14">
                                    <label>{{ 'label.input.product' | translate }}
                                        <span class="required">*</span>:&nbsp;
                                    </label>
                                </td>
                                <td class="width36 paddedbottom20">
                                    <select id="productId" ng-model="formData.productId" class="form-control width170px" 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.selectsavingproduct' | translate}}
                                        </option>
                                    </select>
                                </td>
                                <td class="width14">
                                    <label ng-show="formData.productId" class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.submittedon' | translate }}&nbsp;
                                        <span class="required">*</span>
                                    </label>
                                </td>
                                <td class="width36 paddedbottom20" style="position: relative;">
                                    <input ng-show="formData.productId" id="submittedOnDate" sort type="text" datepicker-pop="dd MMMM yyyy" ng-model="date.submittedOnDate"
                                        is-open="opened" min="minDate" max="restrictDate" class="form-control" />
                                </td>
                            </div>
                        </tr>
                        <tr ng-show="formData.productId">
                            <td class="width14">
                                <label class="control-label col-sm-2">{{ 'label.input.fieldofficer' | translate }}:&nbsp;
                                </label>
                            </td>
                            <td class="width36 paddedbottom20">
                                <select id="fieldOfficerId" ng-model="formData.fieldOfficerId" class="form-control width170px" ng-options="fieldOfficer.id as fieldOfficer.displayName for fieldOfficer in fieldOfficers"
                                    ng-change="savingdetails.fieldOfficerName = formValue(fieldOfficers,formData.fieldOfficerId,'id','displayName')"
                                    value="{{fieldOfficer.id}}" class="form-control">
                                    <option value="">{{'label.selectfieldofficer' | translate}}</option>
                                </select>
                            </td>
                            <td class="width14">
                                <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.externalid' | translate }}
                                </label>
                            </td>
                            <td class="width36 paddedbottom20">
                                <input ng-show="formData.productId" id="externalId" ng-model="formData.externalId" class="form-control" />
                            </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" novalidate="" ng-submit="goNext(Terms)" 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.heading.currency' | translate }}</label>
                        <label class="control-label col-sm-2">
                            <b>{{data.currency.name}}({{data.currency.displaySymbol}})</b>
                        </label>
                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.heading.decimalplaces' | translate}}
                        </label>
                        <label class="control-label col-sm-2">
                            <b>{{data.currency.decimalPlaces}}</b>
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.nominalannualinterestrate' | translate }}&nbsp;
                            <span class="required">*</span>
                        </label>
                        <div class="col-sm-2">
                            <input id="nominalAnnualInterestRate" type="text" name="nominalannualinterestrate" ng-model="formData.nominalAnnualInterestRate"
                                class="form-control" number-format required late-Validate/>
                        </div>
                        <div class="col-sm-2">
                            <form-validate valattributeform="Terms" valattribute="nominalannualinterestrate" />
                        </div>
                        <label class="control-label col-sm-2">{{ 'label.input.interestcompoundingperiod' | translate }}&nbsp;
                            <span class="required">*</span>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestCompoundingPeriodType" ng-model="formData.interestCompoundingPeriodType" ng-options="type.id as type.value for type in data.interestCompoundingPeriodTypeOptions"
                                ng-change="savingdetails.interestCompoundingPeriodTypeValue = formValue(data.interestCompoundingPeriodTypeOptions,formData.interestCompoundingPeriodType)"
                                value="{{type.id}}" class="form-control width170px"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.currencyinmultiplesof' | translate }}&nbsp;</label>
                        <div class="col-sm-2">
                            <input type="text" value="{{data.currency.inMultiplesOf}}" class="form-control" readonly/>
                        </div>

                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.interestpostingperiod' | translate }}&nbsp;
                            <span class="required">*</span>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestPostingPeriodType" ng-model="formData.interestPostingPeriodType" ng-options="type.id as type.value for type in data.interestPostingPeriodTypeOptions"
                                ng-change="savingdetails.interestPostingPeriodTypeValue = formValue(data.interestPostingPeriodTypeOptions,formData.interestPostingPeriodType)"
                                value="{{type.id}}" class="form-control width170px">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.interestcalculatedusing' | translate }}&nbsp;
                            <span class="required">*</span>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestCalculationType" ng-model="formData.interestCalculationType" ng-options="type.id as type.value for type in data.interestCalculationTypeOptions"
                                ng-change="savingdetails.interestCalculationTypeValue=formValue(data.interestCalculationTypeOptions,formData.interestCalculationType)"
                                value="{{type.id}}" class="form-control width170px">
                            </select>
                        </div>
                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.daysinyears' | translate }}&nbsp;
                            <span class="required">*</span>
                        </label>
                        <div class="col-sm-2">
                            <select id="interestCalculationDaysInYearType" ng-model="formData.interestCalculationDaysInYearType" ng-options="type.id as type.value for type in data.interestCalculationDaysInYearTypeOptions"
                                ng-change="savingdetails.interestCalculationDaysInYearTypeValue = formValue(data.interestCalculationDaysInYearTypeOptions,formData.interestCalculationDaysInYearType)"
                                value="{{type.id}}" class="form-control width170px">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{ 'label.input.minimumopeningbalance' | translate }}&nbsp;</label>
                        <div class="col-sm-2">
                            <input id="minRequiredOpeningBalance" type="text" ng-model="formData.minRequiredOpeningBalance" class="form-control" number-format>
                        </div>
                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.lockinPeriodFrequency' | translate }}</label>

                        <div class="col-sm-4">
                            <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="savingdetails.lockinPeriodFrequencyTypeValue = formValue(data.lockinPeriodFrequencyTypeOptions,formData.lockinPeriodFrequencyType)"
                                    value="{{type.id}}">
                                    <option value="">{{'label.selectone' | translate}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="formData.withdrawalFeeForTransfers">&nbsp;
                            <label class="control-label">{{ 'label.input.applywithdrawalfeefortransfers' | translate }}&nbsp;</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="formData.allowOverdraft"> &nbsp;
                            <span class="control-label">{{ 'label.input.allowoverdraft' | translate }}&nbsp;</span>
                        </div>
                        <div class="col-sm-2 col-sm-offset-2" ng-show="formData.allowOverdraft">
                            <label class="control-label">{{ 'label.input.overdraftlimit' | translate }}&nbsp;
                            </label>
                        </div>
                        <div class="col-sm-2" ng-show="formData.allowOverdraft">
                            <input id="overdraftLimit" type="text" class="form-control" ng-model="formData.overdraftLimit" number-format>
                        </div>
                    </div>
                    <div class="form-group" ng-show="formData.allowOverdraft">
                        <div class="col-sm-2">
                            <label class="control-label">{{ 'label.input.nominalannualinterestrateoverdraft' | translate }}&nbsp;
                            </label>
                        </div>
                        <div class="col-sm-2">
                            <input id="nominalAnnualInterestRateOverdraft" type="text" ng-model="formData.nominalAnnualInterestRateOverdraft">
                        </div>
                        <div class="col-sm-2 col-sm-offset-2">
                            <label class="control-label">{{ 'label.input.minoverdraftforinterestcalculation' | translate }}&nbsp;
                            </label>
                        </div>
                        <div class="col-sm-2">
                            <input id="minOverdraftForInterestCalculation" type="text" ng-model="formData.minOverdraftForInterestCalculation" number-format>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="formData.lienAllowed   "> &nbsp;
                            <span class="control-label">{{ 'label.input.lienallowed' | translate }}&nbsp;</span>
                        </div>
                        <div class="col-sm-2 col-sm-offset-2" ng-show="formData.lienAllowed">
                            <label class="control-label">{{ 'label.input.maxallowedlienlimit' | translate }}&nbsp;
                            </label>
                        </div>
                        <div class="col-sm-2" ng-show="formData.lienAllowed">
                            <input id="maxAllowedLienLimit" type="text" class="form-control" ng-model="formData.maxAllowedLienLimit" number-format>
                        </div>
                    </div>
                    <div class="form-control" ng-hide="formData.allowOverdraft">
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="formData.enforceMinRequiredBalance"> &nbsp;
                            <span class="control-label">{{ 'label.input.enforceMinRequiredBalance' | translate }}&nbsp;</span>
                        </div>
                        <div class="col-sm-2 col-sm-offset-2">
                            <label class="control-label">{{ 'label.input.minRequiredBalance' | translate }}&nbsp;
                            </label>
                        </div>
                        <div class="col-sm-2">
                            <input id="minRequiredBalance" type="text" class="form-control" ng-model="formData.minRequiredBalance" number-format>
                        </div>
                    </div>
                    <div class="form-control" ng-show="data.minBalanceForInterestCalculation">
                        <div class="col-sm-2"> {{'label.heading.minbalanceforinterestcalculation' | translate}}</div>
                        <div class="col-sm-2">{{data.minBalanceForInterestCalculation | number}}</div>
                    </div>
                    <div class="form-control" ng-show="data.taxGroup">
                        <div class="col-sm-4">
                            <input type="checkbox" ng-model="formData.withHoldTax"> &nbsp;
                            <span class="control-label">{{ 'label.input.withholdtax' | translate }}&nbsp;</span>
                        </div>
                        <div class="col-sm-2 col-sm-offset-2" ng-show="formData.withHoldTax">
                            <label class="control-label">{{ 'label.input.taxgroup' | translate }}&nbsp;
                            </label>
                        </div>
                        <div class="col-sm-2" ng-show="formData.withHoldTax">
                            {{data.taxGroup.name}}
                        </div>
                    </div>
                    <hr>
                    <button class="btn btn-default pull-left" wz-previous>
                        <i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
                    </button>
                    <button class="btn btn-default pull-right" type="submit">Next&nbsp;&nbsp;
                        <i class="fa fa-arrow-right"></i>
                    </button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title="{{'label.heading.charges' | translate}}" wz-disabled="{{disabled}}">
            <form name="Charges" novalidate="" ng-submit="goNext(Charges)" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>{{ 'label.heading.charges' | translate }}</h3>-->
                    <hr>
                    <div class="form-group">
                        <div class="col-sm-3">
                            <select ng-model="chargeId" ng-options="charge.id as charge.name for charge in chargeOptions|filter:data.currency.code:strict"
                                value="{{charge.id}}" class="form-control">
                                <option 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" width="100%" 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="input-sm form-control" type="text" ng-model="charge.amount" number-format placeholder="{{'label.input.amount' | translate}}"
                                />
                            </td>
                            <td>{{charge.chargeTimeType.value}}</td>
                            <td ng-switch on="charge.chargeTimeType.value">
                                <input id="charges[{{$index}}].feeOnMonthDay" class="input-medium form-control" readonly class="date-disable" type="text"
                                    datepicker-pop="dd MMMM" ng-model="charge.feeOnMonthDay" is-open="opened" ng-switch-when='Annual Fee'
                                />
                                <input id="charges[{{$index}}].dueDate" class="input-medium form-control" readonly class="date-disable" type="text" datepicker-pop="dd MMMM yyyy"
                                    ng-model="charge.dueDate" is-open="opened" ng-switch-when='Specified due date' />
                                <input readonly class="date-disable" class="input-medium form-control" readonly class="date-disable" type="text" datepicker-pop="dd MMMM"
                                    ng-model="charge.feeOnMonthDay" is-open="opened" ng-switch-when='Monthly Fee' />
                                <input id="charges[{{$index}}].dueDate" class="input-medium form-control" datepicker-pop="dd MMMM yyyy" ng-model="charge.dueDate"
                                    is-open="opened" ng-switch-when='Weekly Fee' />
                            </td>
                            <td ng-switch on="charge.chargeTimeType.value">
                                <input id="charges[{{$index}}].feeInterval" class="input-sm form-control" type="text" ng-model="charge.feeInterval" ng-switch-when='Monthly Fee'
                                />
                                <input id="charges[{{$index}}].feeInterval" class="input-sm form-control" type="text" ng-model="charge.feeInterval" ng-switch-when='Weekly Fee'
                                />
                            </td>
                            <td>
                                <a ng-click="deleteCharge($index)">
                                    <i class="fa fa-times-circle fa-2x"></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 icon="fa fa-circle-o" wz-disabled="{{disabled}}" ng-repeat="datatable in datatables" wz-title="{{datatable.registeredTableName}}"
            id="dynamicSteps">
            <form name="Datatables" class="form-horizontal" ng-submit="submit()">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3><strong>{{datatable.registeredTableName}}</strong></h3>-->
                    <hr/>
                    <div class="form-group" ng-repeat="columnHeader in datatable.columnHeaderData">
                        <label class="control-label col-sm-3">{{ columnHeader.columnName | prettifyDataTableColumn }}
                            <span ng-show="!columnHeader.isColumnNullable" class="required">*</span>
                        </label>

                        <div class="col-sm-3">
                            <input ng-show="fieldType(columnHeader.columnDisplayType) == 'TEXT'" type="text" ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
                                class="form-control" />
                            <input ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'" type="text" datepicker-pop="dd MMMM yyyy" ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
                                is-open="opened{{$index}}" class="form-control" />
                            <div ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'" class="form-inline">
                                <div class="form-group">
                                    <input type="text" datepicker-pop="dd MMMM yyyy" ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].date"
                                        is-open="opened{{$index}}" class="form-control" />
                                </div>
                                <div class="form-group">
                                    <input type="time" placeholder="HH:MM:SS" ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].time"
                                        class="form-control" />
                                </div>
                            </div>
                            <div ng-show="fieldType(columnHeader.columnDisplayType) == 'BOOLEAN'">
                                <label class="radio-inline">
                                    <input type="radio" ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]" value="true"
                                    /> {{'label.input.true' | translate}}
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]" value="false"
                                    /> {{'label.input.false' | translate}}
                                </label>
                            </div>
                            <span data-ng-switch on="columnHeader.columnDisplayType">
                                <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'" data-ng-switch-when="CODELOOKUP" ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
                                    ng-options="columnValue.id as columnValue.value for columnValue in columnHeader.columnValues"
                                    value="{{columnValue.id}}" class="form-control">
                                    <option value="">{{'label.selectone' | translate}}</option>
                                </select>
                                <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'" data-ng-switch-when="CODEVALUE" ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
                                    ng-options="columnValue.value as columnValue.value for columnValue in columnHeader.columnValues"
                                    value="{{columnValue.id}}" class="form-control">
                                    <option value="">{{'label.selectone' | translate}}</option>
                                </select>
                            </span>
                        </div>
                    </div>
                    <!--<div class="col-md-offset-5" ng-if="$last">-->
                    <!--<button id="cancel3" type="reset" class="btn btn-default" ng-click="cancel()">-->
                    <!--{{'label.button.cancel' | translate}}-->
                    <!--</button>-->
                    <!--<button id="save3" type="submit" has-permission='CREATE_LOAN' class="btn btn-primary"-->
                    <!--ng-show="loanaccountinfo">{{'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" type="submit">Next&nbsp;&nbsp;
                        <i class="fa fa-arrow-right"></i>
                    </button>
                </fieldset>
            </form>
        </wz-step>
        <wz-step wz-title="Review" ng-if="!disabled">
            <form name="Preview" class="form-horizontal">
                <fieldset>
                    <api-validate></api-validate>
                    <!--<h3>Review</h3>-->
                    <hr>
                    <table width="100%">
                        <tr class="bottomborder">
                            <td colspan="7">
                                <strong>{{'label.heading.details' | translate}}</strong>
                            </td>
                        </tr>
                        <tr class="toppadding">
                            <td>{{ 'label.input.product' | translate }}</td>
                            <td colspan="6">{{savingdetails.productName}}</td>
                        </tr>
                        <tr>
                            <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">{{savingdetails.fieldOfficerName}}</td>
                        </tr>
                        <tr ng-show="formData.externalId">
                            <td>{{ 'label.input.externalid' | translate}}</td>
                            <td colspan="6">{{formData.externalId}}</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="toppadding">
                            <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>
                        <td>{{ 'label.input.nominalannualinterestrate' | translate}}</td>
                        <td colspan="6">{{formData.nominalAnnualInterestRate}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.input.interestcompoundingperiod' | translate}}</td>
                            <td colspan="6">{{savingdetails.interestCompoundingPeriodTypeValue}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.currencyinmultiplesof' | translate }}</td>
                            <td colspan="6">{{data.currency.inMultiplesOf}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.input.interestpostingperiod' | translate}}</td>
                            <td colspan="6">{{savingdetails.interestPostingPeriodTypeValue}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.input.interestcalculatedusing' | translate}}</td>
                            <td colspan="6">{{savingdetails.interestCalculationTypeValue}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.daysinyears' | translate }}</td>
                            <td colspan="6">{{savingdetails.interestCalculationDaysInYearTypeValue}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.minimumopeningbalance' | translate }}</td>
                            <td colspan="6">{{formData.minRequiredOpeningBalance}}</td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.lockinPeriodFrequency' | translate }}</td>
                            <td colspan="6">{{formData.lockinPeriodFrequency}} {{savingdetails.lockinPeriodFrequencyTypeValue}}
                            </td>
                        </tr>
                        <tr>
                            <td>{{ 'label.input.applywithdrawalfeefortransfers' | translate }}</td>
                            <td colspan="6">{{formData.withdrawalFeeForTransfers}}</td>
                        </tr>
                        <tr>
                            <td>{{'label.input.allowoverdraft' | translate}}</td>
                            <td colspan="6">{{formData.allowOverdraft}}</td>
                        </tr>
                        <tr ng-show="formData.allowOverdraft">
                            <td>{{'label.input.overdraftlimit' | translate}}</td>
                            <td colspan="6">{{formData.overdraftLimit}}</td>
                        </tr>
                        <tr ng-show="formData.allowOverdraft">
                            <td>{{ 'label.input.nominalannualinterestrateoverdraft' | translate}}</td>
                            <td colspan="6">{{formData.nominalAnnualInterestRateOverdraft}}</td>
                        </tr>
                        <tr ng-show="formData.allowOverdraft">
                            <td>{{ 'label.input.minoverdraftforinterestcalculation' | translate}}</td>
                            <td colspan="6">{{formData.minOverdraftForInterestCalculation}}</td>
                        </tr>
                        <tr ng-hide="formData.allowOverdraft">
                            <td>{{ 'label.input.enforceMinRequiredBalance' | translate }}</td>
                            <td colspan="6">{{formData.enforceMinRequiredBalance}}</td>
                        </tr>
                        <tr ng-hide="formData.allowOverdraft">
                            <td>{{ 'label.input.minRequiredBalance' | translate}}</td>
                            <td colspan="6">{{formData.minRequiredBalance}}</td>
                        </tr>
                        <tr ng-show="formData.lienAllowed">
                            <td>{{ 'label.input.lienallowed' | translate }}</td>
                            <td colspan="6">{{formData.lienAllowed}}</td>
                        </tr>
                        <tr ng-show="formData.lienAllowed">
                            <td>{{ 'label.input.maxallowedlienlimit' | translate}}</td>
                            <td colspan="6">{{formData.maxAllowedLienLimit}}</td>
                        </tr>
                        <tr ng-show="data.taxGroup">
                            <td>{{ 'label.input.withholdtax' | translate }}&nbsp;</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.charges' | translate}}</strong>
                            </td>
                        </tr>
                        <tr class="graybg bottomborder paddingtop">
                            <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 colspan="2">{{'label.heading.repaymentsevery' | 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>
                            <td>{{charge.chargeTimeType.value}}</td>
                            <td>
                                {{charge.feeOnMonthDay | DateFormat}} {{charge.dueDate | DateFormat}}
                            </td>
                            <td colspan="2">
                                {{charge.feeInterval}}
                            </td>
                        </tr>
                    </table>
                    <br>
                    <table width="100%" ng-repeat="datatable in datatables">
                        <tr class="bottomborder toppadding">
                            <td colspan="7">
                                <strong>{{datatable.registeredTableName}}</strong>
                            </td>
                        </tr>
                        <tr ng-repeat="columnHeader in datatable.columnHeaderData">
                            <td colspan="6">{{ columnHeader.columnName | prettifyDataTableColumn }}</td>
                            <td ng-hide="fieldType(columnHeader.columnDisplayType) == 'DATETIME' || fieldType(columnHeader.columnDisplayType) == 'DATE'">{{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]}}</td>
                            <td ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'">{{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].date | DateFormat}}
                                {{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].time }}</td>
                            <td ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'">{{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName] | DateFormat}}</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_SAVINGSACCOUNT' 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>
