<div ng-controller="CreateGSIMAccountController">
    <div>
        <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.gsimapplication' | translate}}</li>
        </ul>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <hr>
                <wizard current-step="step">
                    <div class="card">
                        <wz-step icon="fa fa-circle-o" title="{{'label.heading.savingapplication' | translate}}">
                            <div class="card-header">
                                <div class="card-badge animated flipInX"><span class="icon fa fa-th"></span></div>
                                <div class="card-actions"></div>
                            </div>
                            <div class="card-content">
                                <form name="newsavingccountform" novalidate="" class="well form-inline" rc-submit="submit()">
                                    <api-validate></api-validate>
                                    <fieldset>
                                        <legend>{{ 'label.heading.gsimaccount' | translate }}</legend>
                                        <table class="width100">
                                            <tr>
                                                <td class="width14">
                                                    <label>{{ 'label.input.product' | translate }}<span class="required">*</span>:&nbsp;</label>
                                                </td>
                                                <td class="width36 paddedbottom10">
                                                    <select id="productId" ng-model="formData1.productId"
                                                            ng-options="product.id as product.name for product in products" value="{{product.id}}"
                                                            ng-change="changeProduct()" class="form-control width170px" required="required">
                                                        <option style="display:none" value="">{{'label.selectsavingproduct' | translate}}</option>
                                                    </select>
                                                </td>
                                                <td class="width14">
                                                    <label ng-show="formData1.productId" class="control-label">{{ 'label.input.submittedon' | translate
                                                        }}&nbsp;<span class="required">*</span></label>
                                                </td>
                                                <td class="width36 paddedbottom10">
                                                    <input ng-show="formData1.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>
                                            </tr>
                                            <tr ng-show="formData1.productId">
                                                <td class="width14">
                                                    <label>{{ 'label.input.fieldofficer' | translate }}:&nbsp;</label>
                                                </td>
                                                <td class="width36 paddedbottom10">
                                                    <select id="fieldOfficerId" ng-model="formData1.fieldOfficerId" class="form-control width170px"
                                                            ng-options="fieldOfficer.id as fieldOfficer.displayName for fieldOfficer in fieldOfficers"
                                                            value="{{fieldOfficer.id}}" class="form-control">
                                                        <option value="">{{'label.selectfieldofficer' | translate}}</option>
                                                    </select>
                                                </td>
                                                <td class="width14">
                                                    <label ng-show="formData1.productId" class="control-label">{{ 'label.input.externalid' | translate
                                                        }}</label>
                                                </td>
                                                <td class="width36 paddedbottom10">
                                                    <input ng-show="formData1.productId" id="externalId" ng-model="formData1.externalId" class="form-control"/>
                                                </td>
                                            </tr>
                                        </table>
                                        <hr data-ng-show="formData1.productId"/>
                                        <label ng-show="data"><strong>{{ 'label.heading.terms' | translate }}</strong></label>

                                        <div ng-show="data">
                                            <table class="width100">
                                                <tr>
                                                    <td class="width14"><label class="control-label">{{ 'label.heading.currency' | translate }}</label>
                                                    </td>
                                                    <td class="width36">
                                                        <label><b>{{data.currency.name}}({{data.currency.displaySymbol}})</b></label>
                                                    </td>
                                                    <td class="width14"><label class="control-label">{{ 'label.heading.decimalplaces' | translate}}</label>
                                                    </td>
                                                    <td class="width36">
                                                        <label><b>{{data.currency.decimalPlaces}}</b></label>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="width14">
                                                        <label class="control-label">{{ 'label.input.nominalannualinterestrate' | translate
                                                            }}&nbsp;<span class="required">*</span></label>
                                                    </td>

                                                    <td class="width36 paddedbottom10">
                                                        <input id="nominalAnnualInterestRate" type="text"
                                                               name="nominalannualinterestrate"
                                                               ng-model="formData1.nominalAnnualInterestRate" class="form-control"
                                                               number-format required late-Validate/>
                                                        <form-validate valattributeform="newsavingccountform"
                                                                       valattribute="nominalannualinterestrate"/>
                                                    </td>
                                                    <td class="width14">
                                                        <label class="control-label">{{ 'label.input.interestcompoundingperiod' | translate
                                                            }}&nbsp;<span class="required">*</span></label>
                                                    </td>
                                                    <td class="width36 paddedbottom10">
                                                        <select id="interestCompoundingPeriodType"
                                                                ng-model="formData1.interestCompoundingPeriodType"
                                                                ng-options="type.id as type.value for type in data.interestCompoundingPeriodTypeOptions"
                                                                value="{{type.id}}" class="form-control width170px"></select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="width14">
                                                        <label class="control-label">{{ 'label.input.currencyinmultiplesof' | translate }}&nbsp;</label></td>
                                                    </td>
                                                    <td class="width36 paddedbottom10">
                                                        <input type="text" value="{{data.currency.inMultiplesOf}}"
                                                               class="form-control" readonly/>
                                                    </td>
                                                    <td class="width14">
                                                        <label class="control-label">{{ 'label.input.interestpostingperiod' | translate }}&nbsp;<span
                                                                class="required">*</span></label></td>
                                                    <td class="width36 paddedbottom10">
                                                        <select id="interestPostingPeriodType" ng-model="formData1.interestPostingPeriodType"
                                                                ng-options="type.id as type.value for type in data.interestPostingPeriodTypeOptions"
                                                                value="{{type.id}}" class="form-control width170px">
                                                        </select></td>

                                                </tr>
                                                <tr>
                                                    <td class="width14"><label class="control-label">{{ 'label.input.interestcalculatedusing' | translate }}&nbsp;<span
                                                            class="required">*</span></label></td>
                                                    <td class="width36 paddedbottom10">
                                                        <select id="interestCalculationType"
                                                                ng-model="formData1.interestCalculationType"
                                                                ng-options="type.id as type.value for type in data.interestCalculationTypeOptions"
                                                                value="{{type.id}}" class="form-control width170px">
                                                        </select></td>
                                                    <td class="width14"><label class="control-label">{{ 'label.input.daysinyears' | translate }}&nbsp;<span
                                                            class="required">*</span></label></td>
                                                    <td class="width36 paddedbottom10">
                                                        <select id="interestCalculationDaysInYearType"
                                                                ng-model="formData1.interestCalculationDaysInYearType"
                                                                ng-options="type.id as type.value for type in data.interestCalculationDaysInYearTypeOptions"
                                                                value="{{type.id}}" class="form-control width170px">
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="width14">
                                                        <label class="control-label">{{ 'label.input.minimumopeningbalance' | translate }}&nbsp;</label>
                                                    </td>
                                                    <td class="width36 paddedbottom10">
                                                        <input id="minRequiredOpeningBalance" type="text"
                                                               ng-model="formData1.minRequiredOpeningBalance" class="form-control" number-format>
                                                    </td>
                                                    <td class="width14">
                                                        <label class="control-label">{{ 'label.input.lockinPeriodFrequency' | translate }}</label>
                                                    </td>
                                                    <td class="width36 paddedbottom10">
                                                        <div class="form-inline">
                                                            <input id="lockinPeriodFrequency" type="text" class="form-control"
                                                                   ng-model="formData1.lockinPeriodFrequency">&nbsp;
                                                            <select id="lockinPeriodFrequencyType" ng-model="formData1.lockinPeriodFrequencyType"
                                                                    class="form-control width170px"
                                                                    ng-options="type.id as type.value for type in data.lockinPeriodFrequencyTypeOptions"
                                                                    value="{{type.id}}">
                                                                <option value="">{{'label.selectone' | translate}}</option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" class="paddedbottom10 paddedtop">
                                                        <input type="checkbox" ng-model="formData1.withdrawalFeeForTransfers">&nbsp;
                                                        <label class="control-label">{{ 'label.input.applywithdrawalfeefortransfers' | translate }}&nbsp;</label>
                                                    </td>
                                                    <td class="width14"></td>
                                                    <td class="width36 paddedbottom10"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" class="paddedbottom10">
                                                        <input type="checkbox" ng-model="formData1.allowOverdraft"> &nbsp;<span
                                                            class="control-label">{{ 'label.input.allowoverdraft' | translate }}&nbsp;</span>
                                                    </td>
                                                    <td class="width14" ng-show="formData1.allowOverdraft">
                                                        <label class="control-label">{{ 'label.input.overdraftlimit' | translate
                                                            }}&nbsp;</label></td>
                                                    <td class="width36 paddedbottom10" ng-show="formData1.allowOverdraft">
                                                        <input id="overdraftLimit" type="text" class="form-control"
                                                               ng-model="formData1.overdraftLimit" number-format>
                                                    </td>
                                                </tr>
                                                <tr ng-show="formData1.allowOverdraft">
                                                    <td class="width14">
                                                        <label class="control-label">{{ 'label.input.nominalannualinterestrateoverdraft' | translate
                                                            }}&nbsp;</label></td>
                                                    <td class="width36 paddedbottom10">
                                                        <input id="nominalAnnualInterestRateOverdraft" type="text"
                                                               ng-model="formData1.nominalAnnualInterestRateOverdraft">
                                                    </td>
                                                    <td class="width14">
                                                        <label class="control-label">{{ 'label.input.minoverdraftforinterestcalculation' | translate
                                                            }}&nbsp;</label></td>
                                                    <td class="width36 paddedbottom10">
                                                        <input id="minOverdraftForInterestCalculation" type="text"
                                                               ng-model="formData1.minOverdraftForInterestCalculation" number-format>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" class="paddedbottom10" ng-hide="formData1.allowOverdraft">
                                                        <input type="checkbox" ng-model="formData1.enforceMinRequiredBalance"> &nbsp;<span
                                                            class="control-label">{{ 'label.input.enforceMinRequiredBalance' | translate }}&nbsp;</span>
                                                    </td>
                                                    <td class="width14" ng-hide="formData1.allowOverdraft">
                                                        <label class="control-label">{{ 'label.input.minRequiredBalance' | translate
                                                            }}&nbsp;</label></td>
                                                    <td class="width36 paddedbottom10" ng-hide="formData1.allowOverdraft">
                                                        <input id="minRequiredBalance" type="text" class="form-control"
                                                               ng-model="formData1.minRequiredBalance" number-format>
                                                    </td>
                                                </tr>
                                                <tr ng-show="data.minBalanceForInterestCalculation">
                                                    <td > {{'label.heading.minbalanceforinterestcalculation' | translate}}</td>
                                                    <td>{{data.minBalanceForInterestCalculation | number}}</td>
                                                </tr>
                                                <tr ng-show="data.taxGroup">
                                                    <td colspan="2" class="paddedbottom10">
                                                        <input type="checkbox" ng-model="formData1.withHoldTax"> &nbsp;<span
                                                            class="control-label">{{ 'label.input.withholdtax' | translate }}&nbsp;</span>
                                                    </td>
                                                    <td class="width14" ng-show="formData1.withHoldTax">
                                                        <label class="control-label">{{ 'label.input.taxgroup' | translate
                                                            }}&nbsp;</label></td>
                                                    <td class="width36 paddedbottom10" ng-show="formData1.withHoldTax">
                                                        {{data.taxGroup.name}}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="width14"></td>
                                                    <td class="width36 paddedbottom10"></td>
                                                    <td class="width14"></td>
                                                    <td class="width36 paddedbottom10"></td>
                                                </tr>

                                            </table>


                                            <div class="row">
                                                <table class="table table-condensed">
                                                    <thead>
                                                    <tr class="active">
                                                        <th><input type="checkbox"  ng-click="checkerInboxAllCheckBoxesClicked()" ng-checked="checkerInboxAllCheckBoxesMet()"/></th>
                                                        <th>{{'label.heading.clientid' | translate}}</th>
                                                        <th>{{'label.heading.clientname' | translate}}</th>

                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr ng-repeat="client in group.clients" ng-init="outerIndex = $index">
                                                        <td>
                                                            <input type="checkbox" ng-model="group.clients[outerIndex].isSelected" ng-click="checkerInboxAllCheckBoxesMet()">
                                                        </td>
                                                        <td>{{client.id}}</td>
                                                        <td>{{client.displayName}}</td>

                                                    </tr>
                                                    <tbody>
                                                </table>
                                            </div>

                                            <hr/>
                                            <label class="control-label"><h4>{{ 'label.heading.charges' | translate }}</h4></label>
                                            <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>
                                            <a ng-click="addCharge(chargeId)"><i class="icon-plus icon-white"></i></a>
                                            <span ng-show="errorchargeevent">
                        <small class="error">
                            {{'label.'+labelchargeerror | translate}}
                        </small>
                      </span>
                                            <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"></i></a></td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="pull-right">
                                            <button id="save1" type="submit" class="btn btn-primary" ng-if="datatables">
                                                {{'label.button.proceed' | translate}}
                                            </button>
                                            <div ng-if="!datatables">
                                                <button id="cancel" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' | translate }}</button>
                                                <button id="save" type="submit" class="btn btn-primary" ng-show="data" has-permission='CREATE_SAVINGSACCOUNT'>{{
                                                    'label.button.save' | translate
                                                    }}
                                                </button>
                                            </div>
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </wz-step>
                        <wz-step ng-if="datatable.columnHeaderData" ng-repeat="datatable in datatables" icon="fa fa-circle-o" title="{{datatable.registeredTableName}}">
                            <form class="form-horizontal well" ng-submit="submit()">
                                <api-validate></api-validate>
                                <fieldset>
                                    <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="formData1.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="formData1.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
                                                           value="true"/>
                                                    {{'label.input.true' | translate}}
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="radio" ng-model="formData1.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="formData1.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="formData1.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="pull-right" ng-if="!$last">
                                        <button id="save4" type="submit" class="btn btn-primary">
                                            {{'label.button.proceed' | translate}}
                                        </button>
                                    </div>
                                    <div class="col-md-offset-5" ng-if="$last">
                                        <a id="cancel2" ng-href="{{cancel}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
                                        <button id="save2" type="submit" class="btn btn-primary"  ng-hide="blockUI" has-permission='CREATE_CLIENT'>{{'label.button.save' | translate}}</button>
                                        <button class="btn btn-info" ng-show="blockUI"><strong>{{'label.button.processing' | translate}}</strong></button>
                                    </div>
                                </fieldset>
                            </form>
                        </wz-step>
                    </div>
                </wizard>
            </div>
        </div>
    </div>
</div>
