<div class="content-container" ng-controller="SavingAccountActionsController">
    <ul class="breadcrumb">
        <li><a href="#/viewsavingaccount/{{accountId}}">{{'label.anchor.viewsavingaccount' | translate}}</a></li>
        <li class="active">{{action}}</li>
    </ul>
    <wizard current-step="step" on-finish="submitDatatable()" class="card well">
        <wz-step wz-title="{{title | translate}}">
    <form name="savingccountactionform" novalidate="" class="form-horizontal" ng-submit="submit()">
        <fieldset>
            <div ng-show="submittedDatatables.length > 0" uib-alert type="success">
                <span ng-repeat="table in submittedDatatables"><i class="fa fa-check"></i>Entry in ` {{table}} ` has been made successfully. If the inputs are changed, the entries will be updated.<br></span>
            </div>
            <api-validate></api-validate>
            <!--<legend>{{ title | translate}}</legend>-->

            <div class="form-group" ng-show="showDateField">
                <label class="control-label col-sm-2" for="modelName">{{labelName | translate}}<span
                        class="required">*</span></label>

                <div class="col-sm-3">
                    <input id="{{modelName}}" type="text" sort datepicker-pop="dd MMMM yyyy"
                           ng-model="formData[modelName]" is-open="opened" min="minDate" max="restrictDate" class="form-control"/>
                </div>
            </div>

            <div class="form-group" data-ng-show="withdrawBalance">
                <label class="control-label col-sm-2" for="withdrawBalance">{{ 'label.input.withdrawBalance' |
                    translate}}<span class="required">*</span></label>

                <div class="col-sm-3">
                    <input id="withdrawBalance" type="checkbox" name="withdrawBalance"
                           ng-model="formData.withdrawBalance" ng-change="isTransaction=formData.withdrawBalance"/>
                </div>
            </div>

            <div class="form-group" data-ng-show="postInterestValidationOnClosure">
                <label class="control-label col-sm-2" for="checkValidate">{{ 'label.input.postInterestValidationOnClosure' |
                    translate}}<span class="required">*</span></label>

                <div class="col-sm-3">
                    <input id="checkValidate" type="checkbox" name="Validation"
                           ng-model="formData.postInterestValidationOnClosure" ng-checked="true"/>
                </div>
            </div>

            <div class="form-group" data-ng-show="formData.withdrawBalance">
                <label class="control-label col-sm-2" >{{ 'label.input.transactionamount' |
                    translate}}<span class="required">*</span></label>

                <div class="col-sm-3">
                    <input type="text" class="form-control" ng-model="accountBalance" readonly/>
                </div>


            </div>
            <div ng-show="isTransaction">
                <div class="form-group" data-ng-show="transactionAmountField">
                    <label class="control-label col-sm-2" for="transactionAmount">{{ 'label.input.transactionamount' |
                        translate}}<span class="required">*</span></label>

                    <div class="col-sm-3">
                        <input id="transactionAmount" type="text" name="transactionAmount"
                               ng-model="formData.transactionAmount" class="form-control" number-format required late-Validate/>
                    </div>
                    <div class="col-sm-3">
                        <form-validate valattributeform="savingccountactionform" valattribute="transactionAmount"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="paymentTypeId">{{ 'label.input.paymenttype' | translate}}</label>

                    <div class="col-sm-3">
                        <select id="paymentTypeId" ng-model="formData.paymentTypeId"
                                ng-options="paymentType.id as paymentType.name for paymentType in paymentTypes"
                                value="{{paymentType.id}}" class="form-control">
                            <option value="">{{'label.selectone' | translate}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">{{ 'label.input.showpaymentdetails' | translate}}</label>

                    <div class="col-sm-3">
                        <a class="btn btn-primary" ng-click="showPaymentDetails=!showPaymentDetails">
                            <i ng-show="showPaymentDetails" class="fa fa-minus "></i>
                            <i ng-show="!showPaymentDetails" class="fa fa-plus "></i>
                        </a>
                    </div>
                </div>
                <div uib-collapse="!showPaymentDetails">
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="accountNumber">{{ 'label.input.accnum' | translate}}</label>

                        <div class="col-sm-3">
                            <input id="accountNumber" type="text" ng-model="formData.accountNumber" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="checkNumber">{{ 'label.input.checknumber' |
                            translate}}</label>

                        <div class="col-sm-3">
                            <input id="checkNumber" type="text" ng-model="formData.checkNumber" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="routingCode">{{ 'label.input.routingcode' |
                            translate}}</label>

                        <div class="col-sm-3">
                            <input id="routingCode" type="text" ng-model="formData.routingCode" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="receiptNumber">{{ 'label.input.receiptnumber' |
                            translate}}</label>

                        <div class="col-sm-3">
                            <input id="receiptNumber" type="text" ng-model="formData.receiptNumber" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="bankNumber">{{ 'label.input.banknumber' | translate}}</label>

                        <div class="col-sm-3">
                            <input id="bankNumber" type="text" ng-model="formData.bankNumber" class="form-control"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group" ng-show="showAnnualAmountField">
                <label class="control-label col-sm-2">{{ 'label.input.amount' | translate}}<span
                        class="required">*</span></label>

                <div class="col-sm-3">
                    <input id="amoun" type="text" name="amount" ng-model="formData.amount" required late-Validate/>
          <span ng-show="savingccountactionform.amoun.$invalid">
            <small class="error">
                {{ 'label.requiredfield' | translate}}
            </small>
          </span>
                </div>
            </div>
            <div class="form-group" ng-show="showNoteField">
                <label class="control-label col-sm-2" for="note">{{ 'label.input.note' | translate}}</label>

                <div class="col-sm-3">
                    <textarea rows="2" id="note" ng-model="formData.note" class="form-control"></textarea>
                </div>
            </div>

            <div class="form-group" ng-show="showAmountField">
                <label class="control-label col-sm-2">{{ labelName | translate}}<span class="required">*</span></label>

                <div class="col-sm-3">
                    <input type="text" id="amount" ng-model="formData.amount" class="form-control"/>
                </div>
            </div>

            <div class="form-group" ng-show="paymentDatefield">
                <label class="control-label col-sm-2" for="modelName">{{'label.input.paymentdate' | translate}}<span
                        class="required">*</span></label>

                <div class="col-sm-3">
                    <input id="{{modelName}}" type="text" sort datepicker-pop="dd MMMM yyyy"
                           ng-model="formData[modelName]" is-open="opened" class="form-control"/>
                </div>
            </div>
            <div class="">
                <button id="save1"  wz-next class="btn btn-primary pull-right" ng-show="isEntityDatatables">
                    {{'label.button.proceed' | translate}}
                </button>
                <div ng-hide="isEntityDatatables">
                    <div class="form-group" ng-show="showDelete || waiveCharge || inactivateCharge">
                        <label class="control-label col-sm-2">{{ 'label.areyousure' | translate }}</label>
                    </div>
                    <div class="col-md-offset-3" ng-show="showDelete">
                        <button type="reset" ng-click="submit()" has-permission='{{taskPermissionName}}' class="btn btn-default">{{ 'label.button.confirm' | translate }}</button>
                        <button type="submit" ng-click="cancel()" class="btn btn-primary">{{ 'label.button.cancel' | translate }}</button>
                    </div>

                    <div class="col-md-offset-3" ng-hide="showDelete">
                        <button id="cancel" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' | translate }}</button>
                        <button id="save" type="submit" has-permission='{{taskPermissionName}}' class="btn btn-primary">{{ 'label.button.save' | translate }}</button>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
        </wz-step>
        <wz-step ng-if="isEntityDatatables" ng-repeat="datatable in datatables" wz-title="{{datatable.registeredTableName}}">
            <div class="card-content">
                <form class="form-horizontal">
                    <div ng-show="submittedDatatables.length>0" uib-alert type="success">
                        <span ng-repeat="table in submittedDatatables"><i class="fa fa-check"></i>Entry in ` {{table}} ` has been made successfully. If the inputs are changed, the datatable entries will be updated.<br></span>
                    </div>
                    <fieldset>
                        <api-validate></api-validate>
                        <!--<legend>{{datatable.registeredTableName}}</legend>-->
                        <div class="form-group" ng-repeat="columnHeader in datatable.columnHeaders">
                            <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="entityformData.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="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateType.date"
                                       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="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateTimeType.date"
                                               is-open="opened{{$index}}" class="form-control"/>
                                    </div>
                                    <div class="form-group">
                                        <input type="time" placeholder="HH:MM:SS"
                                               ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateTimeType.time" class="form-control"/>
                                    </div>
                                </div>
                                <div ng-show="fieldType(columnHeader.columnDisplayType) == 'BOOLEAN'">
                                    <label class="radio-inline">
                                        <input type="radio" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
                                               value="true"/>
                                        {{'label.input.true' | translate}}
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" ng-model="entityformData.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="entityformData.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="entityformData.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" wz-next>
                                {{'label.button.proceed' | translate}}
                            </button>
                        </div>
                        <div class="col-md-offset-5" ng-if="$last">
                            <div class="form-group" ng-show="showDelete || showwaiveforspecicficduedate">
                                <label class="control-label col-sm-2">{{ 'label.areyousure' | translate}}</label>
                            </div>
                            <div class="col-md-offset-2" ng-show="showDelete || showwaiveforspecicficduedate">
                                <button type="reset" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' |
                                    translate}}
                                </button>
                                <button type="submit" has-permission='{{taskPermissionName}}' wz-next
                                        class="btn btn-primary">{{
                                    'label.button.confirm' |
                                    translate}}
                                </button>
                            </div>
                            <div class="col-md-offset-2" ng-hide="showDelete || showwaiveforspecicficduedate">
                                <button id="cancel" type="reset" class="btn btn-default" ng-click="cancel()">{{ 'label.button.cancel' |
                                    translate}}
                                </button>
                                <button id="save" type="submit" has-permission='{{taskPermissionName}}' wz-next class="btn btn-primary">{{
                                    'label.button.save' | translate}}
                                </button>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </wz-step>
    </wizard>
</div>
