{{'label.input.office' | translate}} *

{{ 'label.input.firstname' | translate }}*

{{'validation.msg.client.name.cannot.start.specialchar.ornumber' | translate}}

{{'label.input.lastname' | translate}} *

{{'validation.msg.client.name.cannot.start.specialchar.ornumber' | translate}}

{{'label.input.fullname' | translate}}*

</div>
                        </div>
                     </div>
                  </div>
                  <div class="form-group">
                     <label class="control-label col-sm-2" for="externalId">{{'label.input.externalid' | translate}}</label>
                     <div class="col-sm-3">
                        <input type="text" id="externalId" name="externalId" ng-model="formData.externalId"  class="form-control"/>
                     </div>
                  </div>
                  <div class="form-group" has-permission="ACTIVATE_CLIENT">
                     <label class="control-label col-sm-2">{{'label.input.active' | translate}}</label>
                     <div class="col-sm-3">
                        <input id="activeCheckbox" type="checkbox" ng-model="formData.active" data-ng-change="setChoice()">
                     </div>
                     <div data-ng-switch on="choice">
                        <div data-ng-switch-when="1">
                           <label class="control-label col-sm-2">{{'label.input.activationdate' | translate}}<span class="required">*</span></label>
                           <div class="col-sm-3">
                              <input id="activationDate" type="text" name="activationdate" datepicker-pop="dd MMMM yyyy"
                                 ng-model="first.date" is-open="opened" min="'2000-01-01'" max="restrictDate"  class="form-control"/>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="form-group">
                     <label class="control-label col-sm-2">{{'label.input.submittedon' | translate}}</label>
                     <div class="col-sm-3">
                        <input id="submittedon" type="text" name="submittedon" datepicker-pop="dd MMMM yyyy"
                           ng-model="first.submitondate" is-open="opened1" min="'2000-01-01'" max="restrictDate"  class="form-control"/>
                     </div>
                  </div>
                  <div class="form-group" ng-show="showSavingOptions">
                     <label class="control-label col-sm-2">{{ 'label.input.opensavingsproduct' | translate }} </label>
                     <div class="col-sm-3">
                        <input id="opensavingsproduct" type="checkbox" ng-model="savings.opensavingsproduct" ng-true-value="true"
                           ng-false-value="false">
                     </div>
                     <div ng-show="savings.opensavingsproduct">
                        <label class="control-label col-sm-2">{{'label.input.savingproduct' | translate}}</label>
                        <div class="col-sm-3">
                           <select id="savingsProductId" ng-model="formData.savingsProductId"
                              ng-options="savingProduct.id as savingProduct.name for savingProduct in savingproducts"
                              value="{{savingProduct.id}}"  class="form-control">
                              <option value="">--{{'label.menu.selectsavingproduct' | translate}}--</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="form-group">
                        <div class="control-label col-sm-3">
                        <h3><strong>{{ 'label.heading.familymembers' | translate }}</strong> <a ng-click="addFamilyMember()" ><i class="fa fa-plus" title="{{'label.button.addfamilymember' | translate}}"></i></a></h3>
                        </div>

</div>

<div class="form-group" >
                              <div class="control-label col-sm-2">
                                  <label>{{ 'label.input.relationship' | translate }}<span class="required">*</span></label>
                              </div>
                              <div class="col-sm-3"  >
                                  <select chosen="relationshipIdOptions" id="relationshipIdOption" ng-model="familyArray[$index].relationshipId"  class="form-control"
                                          ng-options="relationshipIdOption.id as relationshipIdOption.name for relationshipIdOption in relationshipIdOptions track by relationshipIdOption.id"
                                          value="formData.relationshipId"></select>
                              </div>
                              <div class = "col-sm-2">
                                  <form-validate valattributeform="createclientform" valattribute="addressType"/>
                              </div>
                              <a ng-click="removeFamilyMember($index)" uib-tooltip="{{'label.remove.row' | translate}}"><i class="fa fa-times"></i></a>
                          </div>

<div class="form-group" >
                              <label class="control-label col-sm-2" for="firstName">{{'label.input.firstname' | translate }}</label>

</div>

<div class="form-group">
                              <label class="control-label col-sm-2" for="middleName">{{'label.input.middlename' | translate }}</label>

</div>

<div class="form-group" >
                              <label class="control-label col-sm-2" for="lastName">{{'label.input.lastname' | translate }}</label>

</div>

<div class="form-group" >
                              <label class="control-label col-sm-2" for="qualification">{{ 'label.input.qualification' | translate }}</label>

</div>

<div class="form-group" >
                              <label class="control-label col-sm-2" for="mobileNumber">{{ 'label.input.mobileNumber' | translate }}</label>

</div>

<div class="form-group" >
                              <label class="control-label col-sm-2" for="age">{{ 'label.input.age' | translate }}</label>

</div>

<div class="form-group" >
                              <label class="control-label col-sm-2" for="isDependent">{{ 'label.input.isDependent' | translate }}</label>

</div>

<div>

</div>

<div class="form-group" >
                              <div class="control-label col-sm-2">
                                  <label>{{ 'label.input.gender' | translate }}</label>
                              </div>
                              <div class="col-sm-3" >
                                  <select chosen="genderIdOptions" id="genderIdOption" ng-model="familyArray[$index].genderId"  class="form-control"
                                          ng-options="genderIdOption.id as genderIdOption.name for genderIdOption in genderIdOptions track by genderIdOption.id"
                                          value="formData.genderId"></select>
                              </div>
                          </div>

<div class="form-group" >
                              <div class="control-label col-sm-2">
                                  <label>{{ 'label.input.profession' | translate }}</label>
                              </div>
                              <div class="col-sm-3" >
                                  <select chosen="professionIdOptions" id="professionIdOption" ng-model="familyArray[$index].professionId"  class="form-control"
                                          ng-options="professionIdOption.id as professionIdOption.name for professionIdOption in professionIdOptions track by professionIdOption.id"
                                          value="formData.professionId"></select>
                              </div>
                          </div>

<div class="form-group" >
                              <div class="control-label col-sm-2">
                                  <label>{{ 'label.input.maritalstatus' | translate }}</label>
                              </div>
                              <div class="col-sm-3" >
                                  <select chosen="maritalStatusIdOptions" id="maritalStatusId" ng-model="familyArray[$index].maritalStatusId"  class="form-control"
                                          ng-options="maritalStatusIdOption.id as maritalStatusIdOption.name for maritalStatusIdOption in maritalStatusIdOptions track by maritalStatusIdOption.id"
                                          value="formData.maritalStatusId"></select>
                              </div>
                          </div>

<div class="form-group" >
                              <label class="control-label col-sm-2" for="dateofbirth">{{ 'label.input.dateofbirth' | translate }}</label>

</div>

<div ng-show="enableAddress" class="form-group">
                     <div class="form-group">
                        <div class="control-label col-sm-2">
                           <h3><strong>{{ 'label.input.address' | translate }}</strong> <a ng-click="addAddress()" ><i class="fa fa-plus" title="{{'label.button.addAddress' | translate}}"></i></a></h3>
                        </div>
                     </div>
                     <div ng-repeat="addr in addressArray">
                        <div class="form-group" >
                           <div class="control-label col-sm-2">
                              <label>{{ 'label.input.addressType' | translate }}<span class="required">*</span></label>
                           </div>
                           <div class="col-sm-3"  >
                              <select chosen="addressTypes" name="addressType" ng-model="addressArray[$index].addressTypeId"  class="form-control"
                                 ng-options="addressType.id as addressType.name for addressType in addressTypes track by addressType.id"
                                 value="addressTypeId" required late-validate></select>
                           </div>
                           <div class = "col-sm-2">
                              <form-validate valattributeform="createclientform" valattribute="addressType"/>
                           </div>
                           <a ng-click="removeAddress($index)" uib-tooltip="{{'label.remove.row' | translate}}"><i class="fa fa-times"></i></a>
                        </div>
                        <div class="form-group" ng-show="addressLine1">
                           <label class="control-label col-sm-2" >{{ 'label.input.addressline1' | translate }}</label>
                           <div class="col-sm-3">
                              <input type="text"  name="addressline1" ng-model="addressArray[$index].addressLine1"  class="form-control">
                           </div>
                        </div>
                        <div class="form-group" ng-show="addressLine2">
                           <label class="control-label col-sm-2" >{{ 'label.input.addressline2' | translate }}</label>
                           <div class="col-sm-3">
                              <input type="text"  name="addressline2" ng-model="addressArray[$index].addressLine2"  class="form-control">
                           </div>
                        </div>
                        <div class="form-group" ng-show="addressLine3">
                           <label class="control-label col-sm-2" >{{ 'label.input.addressline3' | translate }}</label>
                           <div class="col-sm-3">
                              <input type="text"  name="addressline3" ng-model="addressArray[$index].addressLine3"  class="form-control">
                           </div>
                        </div>
                        <div class="form-group" ng-show="city">
                           <label class="control-label col-sm-2" >{{ 'label.input.city' | translate }}</label>
                           <div class="col-sm-3">
                              <input type="text" name="city" ng-model="addressArray[$index].city"  class="form-control">
                           </div>
                        </div>
                        <div class="form-group" ng-show="townVillage">
                           <label class="control-label col-sm-2" >{{ 'label.input.town_village' | translate }}</label>
                           <div class="col-sm-3">
                              <input type="text"  name="town_village" ng-model="addressArray[$index].townVillage"  class="form-control">
                           </div>
                        </div>
                        <div class="form-group" ng-show="countyDistrict">
                           <label class="control-label col-sm-2" >{{ 'label.input.county_district' | translate }}</label>
                           <div class="col-sm-3">
                              <input type="text"  name="county_district" ng-model="addressArray[$index].countyDistrict"  class="form-control">
                           </div>
                        </div>
                        <div class="form-group" ng-show="stateProvinceId">
                           <div class="control-label col-sm-2">
                              <label>{{ 'label.input.state_province' | translate }}</label>
                           </div>
                           <div class="col-sm-3" >
                              <select chosen="stateOptions"  ng-model="addressArray[$index].stateProvinceId"  class="form-control"
                                 ng-options="stateOption.id as stateOption.name for stateOption in stateOptions track by stateOption.id"
                                 value="stateProvinceId"></select>
                           </div>
                        </div>
                        <div>
                        </div>
                        <div class="form-group" ng-show="countryId">
                           <div class="control-label col-sm-2">
                              <label>{{ 'label.input.country' | translate }}</label>
                           </div>
                           <div class="col-sm-3" >
                              <select chosen="countryOptions"  ng-model="addressArray[$index].countryId"  class="form-control"
                                 ng-options="countryOption.id as countryOption.name for countryOption in countryOptions track by countryOption.id"
                                 value="countryId"></select>
                           </div>
                        </div>
                        <div class="form-group" ng-show="postalCode">
                           <label class="control-label col-sm-2" >{{ 'label.input.postal_code' | translate }}</label>
                           <div class="col-sm-3">
                              <input type="text"  name="postal_code" ng-model="addressArray[$index].postalCode"  class="form-control">
                           </div>
                        </div>
                        <div class="form-group" ng-show="latitude">
                           <label class="control-label col-sm-2" >{{ 'label.input.latitude' | translate }}</label>
                           <div class="col-sm-3">
                              <input type="text"  name="latitude" ng-model="addressArray[$index].latitude"  class="form-control">
                           </div>
                        </div>
                        <div class="form-group" ng-show="longitude">
                           <label class="control-label col-sm-2" >{{ 'label.input.longitude' | translate }}</label>
                           <div class="col-sm-3">
                              <input type="text"  name="longitude" ng-model="addressArray[$index].longitude"  class="form-control">
                           </div>
                        </div>
                        <div class="form-group" ng-show="isActive">
                           <label class="control-label col-sm-2" >{{'label.input.is_active' | translate}} </label>
                           <div class="col-sm-3">
                              <input class="input-mini-small" type="checkbox"
                                 ng-model="addressArray[$index].isActive">
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="pull-right">
                     <button id="save1"  class="btn btn-primary" ng-if="datatables" wz-next>
                     {{'label.button.proceed' | translate}}
                     </button>
                     <div ng-if="!datatables">
                        <a id="cancel" ng-href="{{cancel}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
                        <button id="save" 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>
                  </div>
               </fieldset>
            </form>
        </div>
    </wz-step>
    <wz-step ng-if="datatables" ng-repeat="datatable in datatables" icon="fa fa-circle-o" wz-title="{{datatable.registeredTableName}}">
    	<div class="card-content">
		   <form class="form-horizontal" ng-submit="submit()">
		      <api-validate></api-validate>
		      <fieldset>
		      	<legend>{{datatable.registeredTableName}}</legend>
		        <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="pull-right" ng-if="!$last">
		            <button id="save4"  class="btn btn-primary" wz-next>
		            {{'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>
		</div>
	</wz-step>
   </wizard>
</div>