<div class="content-container" ng-controller="EditGroupController">
<div class="content-container" data-ng-controller="MemberManageController">
    <ul class="breadcrumb">
        <li><a href="#/groups">{{'label.anchor.groups' | translate}}</a></li>
        <li><a href="#/viewgroup/{{group.id}}">{{'label.anchor.viewgroup' | translate}}</a></li>
    </ul>
    <wizard current-step="step" on-finish="submitDatatable()">
        <div class="card well">
         <wz-step wz-title="{{'label.heading.details' | translate}}">
                <div ng-show="managecode == 1">
               
                    <form name="editgroupform" novalidate="" class="form-horizontal" ng-submit="updateGroup()">
                        <fieldset>
                            <api-validate></api-validate>
                            <legend>{{'label.heading.editgroup' | translate}}</legend>
                            <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 ng-autofocus="true" type="text" id="name" name="name" placeholder="{{editGroup.name}}"
                                           ng-model="formData.name" class="form-control" required late-Validate/>
                                </div>
                                <div class="col-sm-3">
                                    <form-validate valattributeform="editgroupform" valattribute="name"/>
                                </div>
                            </div>
                            <div class="form-group info">
                                <label class="control-label col-sm-2" for="staffId">{{'label.input.staff' | translate}}</label>

                                <div class="col-sm-3">
                                    <select chosen="editGroup.staffOptions" id="staffId" ng-model="formData.staffId"
                                            data-ng-options="staff.id as staff.displayName for staff in editGroup.staffOptions"
                                            value="{{staff.id}}" class="form-control">
                                        <option value="">{{'label.menu.selectstaff' | translate}}</option>
                                    </select>
                                </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" ng-model="formData.externalId" class="form-control"/>
                                </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 ng-hide="editGroup.status.value == 'Pending'">
                                <div class="form-group">
                                    <label class="control-label col-sm-2">{{'label.input.activationdate' | translate}}<span class="required">*</span></label>

                                    <div class="col-sm-3">
                                        <input type="text" datepicker-pop="dd MMMM yyyy" ng-model="first.date" is-open="opened"
                                               min="'2000-01-01'" max="restrictDate" class="form-control" readonly/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-offset-3">
                                <a href="#/viewgroup/{{editGroup.id}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
                                <button type="submit" class="btn btn-primary" has-permission='UPDATE_GROUP'>{{'label.button.save' | translate}}</button>
                            </div>
                        </fieldset>
                    </form>
                </div>
                <div ng-show="managecode == 2">
                    <legend>{{'label.heading.activate.group' | translate}}</legend>
                    <form class="form-horizontal card well">
                        <div class="form-group">
                            <label class="control-label col-sm-2">{{ 'label.input.enteractivationdate' | 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="mindate" max="restrictDate" required class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <button id="save1"  wz-next class="btn btn-primary pull-right" ng-show="isEntityDatatables">
                                {{'label.button.proceed' | translate}}
                            </button>

                            <div class="col-sm-3 col-md-offset-2" ng-hide="isEntityDatatables">
                                <a id="cancel" href="#/viewgroup/{{editGroup.id}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
                                <button id="save" type="button" class="btn btn-primary" wz-next ><i
                                        class="fa fa-check-sign " has-permission='ACTIVATE_GROUP'></i>{{ 'label.button.activate' | translate }}
                                </button>
                            </div>

                        </div>
                    </form>
                </div>
            </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>
                        <api-validate></api-validate>
                        <fieldset>
                            <!--<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">
                                    <a id="cancel" href="#/viewgroup/{{editGroup.id}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
                                    <button id="save" type="button" class="btn btn-primary" wz-next><i
                                            class="fa fa-check-sign " has-permission='ACTIVATE_GROUP'></i>{{ 'label.button.activate' | translate }}
                                    </button>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </wz-step>
        </div>
    </wizard>
</div>
