<md-dialog aria-label="Role Template"
	style="width:1500px;height:1200px; margin-left: 1%;">

<form ng-cloak name="myForm">
	<md-toolbar>
	<div class="md-toolbar-tools" style="background: cadetblue;">
		<h2>{{templateTitle}} Employee</h2>
		<span flex></span>
		<md-button class="md-icon-button" ng-click="cancel()"> <i
			class="fa fa-times fa-2x"
			style="margin-top: 5px; font-size: 1.5em; float: left"></i> </md-button>
	</div>
	</md-toolbar>

	<md-dialog-content style="padding: 15px;">

	<div class="row">
		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
			<h4>Personal Info</h4>
			<div class="form-group">
				<table>
					<tr>
						<td colspan="4"><b>Emp ID:</b><span class="mandatory"></span></td>
						<td colspan="8"><input type="text" class="form-control"
							id="empId" name="employeeId" ng-model="empId"
							placeholder="Employee ID" ng-blur="validateEmpId()" 
							ng-disabled="isDisabled" /></td><!-- ng-blur="validateEmpId()'' -->
					<tr>
					<tr>
						<td colspan="4"><b>Employee Name:</b><span class="mandatory"></span></td>
						<td colspan="8"><input type="text" class="form-control" 
							id="empName" name="employeeName" ng-model="empName"
							placeholder="Employee Name" ng-blur="validateEmpName()"/></td><!-- ng-blur="validateEmpName()"-->
					</tr>
					<tr>
						<td colspan="-10"><b>Gender:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-select ng-model="gender" ng-blur="validateMessage()"  name="gender" 
								md-selected-text="getSelectedGender()" id="gender">
							<md-option ng-model="gender" value="Male">Male </md-option> <md-option
								ng-model="gender" value="Female">Female</md-option> </md-select></td>
					</tr>

					<tr>
						<td colspan="4"><b>Email:</b><span class="mandatory"></span></td>
						<td colspan="8"><input type="text" class="form-control"
							id="empEmail" name="emailId" ng-model="empEmail"
							placeholder="Email ID" ng-blur="validateMessage('email')"
							ng-disabled="isDisabled" style="text-transform: lowercase;"/></td><!--ng-blur="validateEmailId()"-->
					</tr>

					<tr>
						<td colspan="4"><b>Date of Joining:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-datepicker ng-model="dateOfJoining" id="dateOfJoining"
							name="dateOfJoining" md-placeholder="Date of Joining" md-min-date="minDate"
								md-max-date="maxDate" onkeydown="return false" ng-blur="validateMessage()"></md-datepicker>
						</td>
					</tr>

					<tr>
						<td colspan="4"><b>Date of Birth:</b></td>
						<td colspan="8"><md-datepicker ng-model="dateOfBirth" id="dateOfBirth"  name="dateOfBirth"
								md-placeholder="Date of Birth" md-min-date="minDate"
								md-max-date="maxDate" onkeydown="return false"></md-datepicker>
						</td>
					</tr>

					<tr ng-show="templateTitle != 'Add'">
						<td colspan="4"><b>Employment Status {{templateTitle}}:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-select ng-model="empStatus" name ="empStatus" 
								md-selected-text="getSelectedEmpStatus()" id="empStatus">
							<md-optgroup label="Employment Status"> <md-option
								ng-value="status" ng-repeat="status in empStatuses">{{status}}</md-option>
							</md-optgroup> </md-select></td>
					</tr>
					<tr ng-show="empStatus == 'In Active'">
						<td colspan="4"><b>Employee Exit Date:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-datepicker ng-model="exitDate" name="endDate"
								md-placeholder="Exit Date" md-min-date="minDate"
								md-max-date="maxDate" onkeydown="return false"></md-datepicker>
						</td>
					</tr>

					<tr>
						<td colspan="12">
							<div role="alert">
								<span ng-if="errorMessage" class="error" style="color: red;">{{alertMsg}}</span>
							</div>
						</td>
					</tr>

				</table>
			</div>
			<!--form-group-->
		</div>
		 <!---col-lg-4 col-md-4 col-sm-4 col-xs-12-->

		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
			<h4>Organization Info</h4>
			<div class="form-group">
				<table>
					
					<tr>
						<td colspan="4"><b>Functional Group:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-select ng-blur="validateMessage()" ng-model="functionalGroup"
								md-selected-text="getSelectedFunctionalGroup()" name="functionalGroup"
								id="functionalGroup"> <md-optgroup
								label="Functional Group"> <md-option
								ng-value="functionalGroup"
								ng-repeat="functionalGroup in functionalGroups">{{functionalGroup}}</md-option>
							</md-optgroup> </md-select></td>
					</tr>
				

					<tr>
						<td colspan="4"><b>Designation:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-select ng-model="designation" ng-blur="validateMessage()" name="designation"
								md-selected-text="getDesignationText()" id="designation">
							<md-optgroup label="designations"> <md-option
								ng-value="designation" ng-repeat="designation in designations">{{designation}}</md-option>
							</md-optgroup> </md-select></td>
					</tr>

					<tr>
						<td colspan="4"><b>Work &nbsp;Location:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-select ng-model="empLocation" ng-blur="validateMessage()" name="empLocation"
								md-selected-text="getSelectedLocation()" id="empLocation">
							<md-optgroup label="locations"> <md-option
								ng-value="location" ng-repeat="location in locations">{{location}}</md-option>
							</md-optgroup> </md-select></td>
					</tr>

					<tr>
						<td colspan="4"><b>Employment Type:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-select ng-model="employmentType" ng-blur="validateMessage()" name="employmentType"
								md-selected-text="getSelectedEmploymentType()"
								id="employmentType"> <md-optgroup
								label="Employment Type"> <md-option
								ng-value="employmentType"
								ng-repeat="employmentType in employmentTypes">{{employmentType}}</md-option>
							</md-optgroup> </md-select></td>
					</tr>
				</table>
			</div>
			<!--form-group-->
		</div>
		<!---col-lg-4 col-md-4 col-sm-4 col-xs-12-->

		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
			<h4>Other Info</h4>
			<div class="form-group">
				<table>
					<!-- <tr>
						<td colspan="4"><b>Domain:</b></td>
						<td colspan="8"><md-select ng-model="domain"
								md-selected-text="getSelectedDomain()" id="domain">
							<md-optgroup label="Domain"> <md-option
								ng-value="domain" ng-repeat="domain in domains">{{domain}}</md-option>
							</md-optgroup> </md-select></td>
					</tr> -->

					 <tr>
						<td colspan="4"><b>Org Role:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-select ng-model="empRole" ng-blur="validateMessage()"
								md-selected-text="getSelectedRole()" name="role" id="empRole"> <md-optgroup
								label="roles"> <md-option ng-value="role"
								ng-repeat="role in roles">{{role}}</md-option> </md-optgroup> </md-select></td>
					</tr>

					<tr>
						<td colspan="1"><b>HasPassport:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-select ng-model="hasPassort" ng-blur="validateMessage()"
								id="hasPassort"> <md-option ng-model="hasPassort" name="hasPassort"
								value="Yes">Yes </md-option> <md-option ng-model="hasPassort"
								value="No">No</md-option> </md-select></td>
					</tr>

					<tr ng-show="hasPassort == 'Yes'">
						<td colspan="4"><b>Passport Expiry Date:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-datepicker ng-model="passportExpiryDate"
							id="passportExpiryDate"	md-placeholder="Passport Expiry Date" md-min-date="minDate"
							name="passportExpiryDate"	md-max-date="maxDate" onkeydown="return false"></md-datepicker>
						</td>
					</tr>

					<tr>
						<td colspan="1"><b>Has B1 Visa:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-select ng-model="hasB1" id="hasB1" ng-blur="validateMessage()" name="hasB1">
							<md-option ng-model="hasB1" value="Yes">Yes </md-option> <md-option
								ng-model="hasB1" value="No">No</md-option> </md-select></td>
					</tr>

					<tr ng-show="hasB1 == 'Yes'">
						<td colspan="4"><b>B1 Expiry Date:</b><span class="mandatory"></span></td>
						<td colspan="8"><md-datepicker ng-model="b1ExpiryDate" name="b1ExpiryDate"
							id="b1ExpiryDate" md-placeholder="B1 Expiry Date" md-min-date="minDate"
								md-max-date="maxDate" onkeydown="return false"></md-datepicker>
						</td>
					</tr>
				</table>
			</div>
			<!--orm-group-->
		</div>
		<!---col-lg-4 col-md-4 col-sm-4 col-xs-12-->
	</div>

	<!--row--> </md-dialog-content>

	<md-dialog-actions layout="row"> <md-button
		class="md-raised" data-ng-click="validateFields()"
		style="width:120px;background: cadetblue;color:white;">
	{{templateTitle}} </md-button> <md-button class="md-raised" ng-click="cancel()"
		style="width:120px;background: cadetblue;color:white;">
	Cancel </md-button> </md-dialog-actions>
</form>
</md-dialog>

