
<div class="content-container" ng-controller="CreateGroupController">
    <ul class="breadcrumb">
        <li ng-if="!centerid"><a href="#/groups">{{'label.anchor.groups' | translate}}</a></li>
        <li ng-if="centerid"><a href="#/centers">{{'label.anchor.centers' | translate}}</a></li>
        <li ng-if="centerid"><a href="#/viewcenter/{{centerid}}">{{'label.anchor.viewcenter' | translate}}</a></li>
        <li class="active">{{'label.anchor.creategroup' | translate}}</li>
    </ul>
	<wizard current-step="step" class="card well" on-finish="submit()">
			<wz-step  wz-title="{{'label.heading.creategroup' | translate}}">
					<form name="creategroupform" novalidate="" class="form-horizontal" rc-submit="submit()">
						<fieldset>
							<api-validate></api-validate>
							<!--<h3>{{'label.heading.creategroup' | translate}}</h3>-->
							<hr>
							<div class="form-group">
								<label class="control-label col-sm-2">
									{{'label.input.office' | translate}}<span ng-show="forceOffice == null" class="required">*</span>
								</label>
								<div class="col-sm-3">
									<div ng-show="forceOffice == null">
										<select chosen="offices" name="office" id="officeId" ng-model="formData.officeId"
												ng-options="office.id as office.name for office in offices" value="{{office.id}}"
												ng-change="changeOffice(formData.officeId)" class="form-control" required late-validate>
											<option value="">{{'label.menu.selectoffice' | translate}}</option>
										</select>
									</div>
									<div ng-show="forceOffice != null">
										<p class="form-control-static">{{forceOffice.name}}</p>
									</div>
								</div>
								<div class="col-sm-2">
									<form-validate valattributeform="creategroupform" valattribute="office"/>
								</div>
								<label class="control-label col-sm-2" for="externalId">{{'label.input.externalid' | translate}}</label>
								<div class="col-sm-3">
									<input type="text" name="externalid" id="externalId" ng-model="formData.externalId" class="form-control"/>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-sm-2" for="name">{{'label.input.name' | translate}}<span
										class="required">*</span></label>

								<div class="col-sm-3">
									<input type="text" id="name" name="name" ng-model="formData.name" class="form-control" required late-validate>
								</div>
								<div class="col-sm-2">
									<form-validate valattributeform="creategroupform" valattribute="name"/>
								</div>
								<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">
								<label class="control-label col-sm-2" for="staffId">{{'label.input.staff' | translate}}</label>

								<div class="col-sm-3">
									<select chosen="staffs" id="staffId" ng-model="formData.staffId" class="form-control"
											ng-options="staff.id as staff.displayName for staff in staffs" value="{{staff.id}}">
										<option value="">{{'label.menu.selectone' | translate}}</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-sm-2" for="active">{{'label.input.active' | translate}}</label>
								<div class="col-sm-1">
									<input type="checkbox" id="active" 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 col-md-offset-4">{{'label.input.activationdate' | translate}}<span class="required">*</span></label>
										<div class="col-sm-3">
											<input id="activationDate" type="text" 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" for="staffId">{{'label.input.addclients' | translate}}</label>
								<div class="col-sm-9 col-md-9">
									<div class="row">
										<div class="col-sm-4 col-md-4">
											<input id="clientMembers" type="text" ng-model="clientData.available" class="col-md-4 form-control"
																typeahead-min-length="2"
																typeahead-editable="false"
																uib-typeahead="client as client.displayName for client in clientOptions($viewValue)"
																typeahead-on-select="viewClient(clientData.available)"/>
											<div data-ng-show="available" class="paddedtop10">
												<p>{{'label.heading.clientdetails' | translate}}</p>
												<table class="table">
													<tr>
														<td width="35%">{{'label.heading.name' | translate}}</td>
														<td width="65%">{{client.displayName}}</td>
													</tr>
													<tr>
														<td>{{ 'label.heading.id' | translate }}</td>
														<td valign="top">{{client.id}}</td>
													</tr>
													<tr>
														<td>{{ 'label.heading.office' | translate }}</td>
														<td>{{client.officeName}}</td>
													</tr>
												</table>
											</div>
										</div>
										<div class="col-sm-1 col-md-1">
											<button ng-show="available" type="button" class="btn angled-btn btn-primary" data-ng-click="add()" uib-tooltip="{{'label.button.add' | translate}}">
												{{ 'label.button.add' | translate }}
												<i class="fa fa-angle-double-right"></i></button>
										</div>
										<div class="col-sm-5 col-md-5">
											<div ng-repeat="client in addedClients" class="paddedbottom">
												<div class="col-sm-10 col-md-10">
													<input disabled="" class="form-control input-xxlarge" placeholder={{client.displayName}}
													type="text"/>
												</div>
												<div class="col-sm-2 col-md-2">
													<button type="button" class="btn angled-btn btn-primary" data-ng-click="sub(client.id)"><i
														class="fa fa-times"></i></button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-offset-5" ng-hide="datatables.length > 0">
								<a id="cancel" ng-href="{{cancel}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
								<button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_GROUP' wz-next>{{'label.button.save' | translate}}</button>
							</div>
							<hr>
                                                       <button ng-show="datatables.length > 0" class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
							</button>
							<button ng-show="datatables.length > 0" class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i
									class="fa fa-arrow-right"></i></button>

						</fieldset>
					</form>
			</wz-step>
			<wz-step ng-if="datatables" 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>
						<div class="col-md-offset-5">
							<a id="cancel" ng-href="{{cancel}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
							<button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_GROUP' wz-next>{{'label.button.save' | translate}}</button>
						</div>
					</fieldset>
				</form>
			</wz-step>
	</wizard>
</div>