{extend name="../../base/view/common/base" /}
<!-- Body -->
{block name="body"}
<form class="layui-form p-page">
	<h3 class="pb-2">Onboarding Request</h3>
	<table class="layui-table layui-table-form">
		<tr>
			<td colspan="6"><strong>Basic Information</strong></td>
		</tr>
		<tr>
			<td class="layui-td-gray-2">Employee Name<font>*</font></td>
			<td><input type="text" name="name" value="{$detail.name|default=''}" placeholder="Please enter" lay-verify="required" lay-reqText="Please enter a name" class="layui-input"></td>
			<td class="layui-td-gray-2">Gender<font>*</font></td>
			<td>
				{empty name="$detail"}
				<input type="radio" name="sex" value="1" title="Male">
				<input type="radio" name="sex" value="2" title="Female">
				{else/}
				<input type="radio" name="sex" value="1" title="Male" {eq name="$detail.sex" value="1"} checked{/eq}>
				<input type="radio" name="sex" value="2" title="Female" {eq name="$detail.sex" value="2"} checked{/eq}>
				{/empty}
			</td>
			<td rowspan="4" class="layui-td-gray-2">Profile Photo<font>*</font></td>
			<td rowspan="4" valign="top" style="width: 180px;">
				<div class="layui-upload" style="width: 180px;">
					<div class="layui-upload-list" id="uploadThumb" style="width: 100%; height:150px; overflow: hidden;">
						{empty name="$detail"}
						<img src="" height="180" style="max-width: 100%;" />
						{else/}
						<img src="{:get_file($detail.thumb)}" height="150" style="max-width: 100%;" />
						{/empty}
						<input type="hidden" name="thumb" value="{$detail.thumb|default=''}" lay-verify="required" lay-reqText="Please upload a profile photo">
					</div>
					<button type="button" class="layui-btn layui-btn-normal" style="width: 100%;" id="uploadImg">Upload Photo</button>
				</div>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Mobile<font>*</font></td>
			<td><input type="text" name="mobile" value="{$detail.mobile|default=''}" lay-verify="required|phone" lay-reqText="Please enter a valid mobile number" placeholder="You can use this to log in" class="layui-input"></td>
			<td class="layui-td-gray">Email</td>
			<td><input type="text" name="email" value="{$detail.email|default=''}" lay-verify="email" placeholder="Please enter an email" class="layui-input"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Date of Birth</td>
			<td><input type="text" name="birthday" value="{$detail.birthday|default=''}" readonly autocomplete="off" placeholder="Please select" class="layui-input tool-time"></td>
			<td class="layui-td-gray">ID Number</td>
			<td><input type="text" name="idcard" value="{$detail.idcard|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Ethnicity</td>
			<td><input type="text" name="nation" value="{$detail.nation|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
			<td class="layui-td-gray">Place of Origin</td>
			<td><input type="text" name="native_place" value="{$detail.native_place|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
		</tr>
		{empty name="$detail"}
		<tr>
			<td class="layui-td-gray">Political Status</td>
			<td>
				<select name="political">
					<option value="0">None</option>
					<option value="1">Party Member</option>
					<option value="2">League Member</option>
				</select>
			</td>
			<td class="layui-td-gray">Marital Status</td>
			<td>
				<input type="radio" name="marital_status" value="1" title="Single" checked>
				<input type="radio" name="marital_status" value="2" title="Married">
			</td>
			<td class="layui-td-gray">First Work Date</td>
			<td><input type="text" name="work_date" value="{$detail.work_date|default=''}" readonly autocomplete="off" placeholder="Please enter" class="layui-input tool-time"></td>
		</tr>
		{else/}
		<tr>
			<td class="layui-td-gray">Political Status</td>
			<td>
				<select name="political">
					<option value="0" {eq name="$detail.political" value="0"} selected{/eq}>None</option>
					<option value="1" {eq name="$detail.political" value="1"} selected{/eq}>Party Member</option>
					<option value="2" {eq name="$detail.political" value="2"} selected{/eq}>League Member</option>
				</select>
			</td>
			<td class="layui-td-gray">Marital Status</td>
			<td>
				<input type="radio" name="marital_status" value="1" title="Single" {eq name="$detail.marital_status" value="1"} checked{/eq}>
				<input type="radio" name="marital_status" value="2" title="Married" {eq name="$detail.marital_status" value="2"} checked{/eq}>
			</td>
			<td class="layui-td-gray">First Work Date</td>
			<td><input type="text" name="work_date" value="{$detail.work_date|default=''}" readonly autocomplete="off" placeholder="Please enter" class="layui-input tool-time"></td>
		</tr>
		{/empty}
		<tr>		
			{empty name="$detail"}
			<td class="layui-td-gray">Household Type</td>
			<td>
				<input type="radio" name="resident_type" value="1" title="Rural">
				<input type="radio" name="resident_type" value="2" title="Urban">
			</td>
			{else/}
			<td class="layui-td-gray">Household Type</td>
			<td>
				<input type="radio" name="resident_type" value="1" title="Rural" {eq name="$detail.resident_type" value="1"} checked{/eq}>
				<input type="radio" name="resident_type" value="2" title="Urban" {eq name="$detail.resident_type" value="2"} checked{/eq}>
			</td>
			{/empty}
			<td class="layui-td-gray">Registered Address</td>
			<td colspan="3"><input type="text" name="resident_place" value="{$detail.resident_place|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Home Address</td>
			<td colspan="3"><input type="text" name="home_address" value="{$detail.home_address|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
			<td class="layui-td-gray">Emergency Contact</td>
			<td><input type="text" name="contact" value="{$detail.contact|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Current Address</td>
			<td colspan="3"><input type="text" name="current_address" value="{$detail.current_address|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
			<td class="layui-td-gray">Emergency Phone</td>
			<td><input type="text" name="contact_mobile" value="{$detail.contact_mobile|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Profile</td>
			<td colspan="5">
				<textarea name="desc" placeholder="Please enter a brief profile" class="layui-textarea">{$detail.desc|default=''}</textarea>
			</td>
		</tr>
		<tr>
			<td colspan="6"><strong>Education</strong></td>
		</tr>
		<tr>
			<td class="layui-td-gray">School</td>
			<td colspan="3"><input type="text" name="graduate_school" value="{$detail.graduate_school|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
			<td class="layui-td-gray">Graduation Date</td>
			<td><input type="text" name="graduate_day" value="{$detail.graduate_day|default=''}" readonly autocomplete="off" placeholder="Please select" class="layui-input tool-time"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Major</td>
			<td colspan="3"><input type="text" name="speciality" value="{$detail.speciality|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
			<td class="layui-td-gray">Highest Degree</td>
			<td><input type="text" name="education" value="{$detail.education|default=''}" autocomplete="off" placeholder="Please enter" class="layui-input"></td>
		</tr>		
		<tr>
			<td colspan="6"><strong>Onboarding Details</strong></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Department<font>*</font></td>
			<td><select id="to_did" name="to_did" xm-selected="{$detail.to_did|default=''}" xm-select="select1" xm-select-skin="default" xm-select-radio="true" lay-verify="required" lay-reqText="Please select a department"></select></td>
			<td class="layui-td-gray">Supervisor</td>
			<td>
				<input type="text" name="pname" readonly placeholder="Please select" class="layui-input picker-admin" value="{$detail.pname|default=''}">
				<input type="hidden" name="pid" value="{$detail.pid|default=''}">
			</td>
			<td class="layui-td-gray">Entry Date<font>*</font></td>
			<td><input type="text" name="entry_time" value="{$detail.entry_time|default=''}" readonly placeholder="Please select" class="layui-input tool-time"></td>
		</tr>	
		{empty name="$detail"}
		<tr>
			<td class="layui-td-gray">Position Title<font>*</font></td>
			<td>
				<select name="position_id" lay-verify="required" lay-reqText="Please select a position title">
					<option value="">Please select</option>
					{volist name="$position" id="v"}
						<option value="{$v.id}">{$v.title}</option>
					{/volist}
				</select>	
			</td>
			<td class="layui-td-gray">Job Role</td>
			<td>
				<select name="position_name" lay-verify="required" lay-reqText="Please select a job role">
					<option value="">Please select</option>
					{volist name=":get_base_type_data('basic_user',1)" id="v"}
					<option value="{$v.id}">{$v.title}</option>
					{/volist}
				</select>
			</td>
			<td class="layui-td-gray">Job Level</td>
			<td>
				<select name="position_rank" lay-verify="required" lay-reqText="Please select a job level">
					<option value="">Please select</option>
					{volist name=":get_base_type_data('basic_user',2)" id="v"}
					<option value="{$v.id}">{$v.title}</option>
					{/volist}
				</select>
			</td>
		</tr>
		{else/}
		<tr>
			<td class="layui-td-gray">Position Title<font>*</font></td>
			<td>
				<select name="position_id" lay-verify="required" lay-reqText="Please select a position title">
					<option value="">Please select</option>
					{volist name="$position" id="v"}
						<option value="{$v.id}" {eq name="$v.id" value="$detail.position_id"}selected{/eq}>{$v.title}</option>
					{/volist}
				</select>	
			</td>
			<td class="layui-td-gray">Job Role<font>*</font></td>
			<td>
				<select name="position_name" lay-verify="required" lay-reqText="Please select a job role">
					<option value="">Please select</option>
					{volist name=":get_base_type_data('basic_user',1)" id="v"}
					<option value="{$v.id}" {eq name="$detail.position_name" value="$v.id"} selected{/eq}>{$v.title}</option>
					{/volist}
				</select>
			</td>
			<td class="layui-td-gray">Job Level<font>*</font></td>
			<td>
				<select name="position_rank" lay-verify="required" lay-reqText="Please select a job level">
					<option value="">Please select</option>
					{volist name=":get_base_type_data('basic_user',2)" id="v"}
					<option value="{$v.id}" {eq name="$detail.position_rank" value="$v.id"} selected{/eq}>{$v.title}</option>
					{/volist}
				</select>
			</td>
		</tr>
		{/empty}
	</table>

	<div id="checkBox" data-status="{$detail.check_status|default=0}" data-id="{$detail.id|default=0}" data-checkflowid="{$detail.check_flow_id|default=0}" class="pt-3"></div>

	<div class="pt-4">
		<input type="hidden" value="{$detail.id|default=0}" name="id">
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">Submit</button>
		<button type="reset" class="layui-btn layui-btn-primary">Reset</button>
	</div>
</form>
{/block}
<!-- /Body -->

<!-- Script -->
{block name="script"}
<script>
	const moduleInit = ['tool','uploadPlus','oaPicker','formSelects','oaCheck'];
	function gouguInit() {
		var form = layui.form,tool=layui.tool,uploadPlus=layui.uploadPlus,formSelects=layui.formSelects,oaCheck=layui.oaCheck;	
		// Select department
		var selected_a = $('#to_did').attr('xm-selected');
		formSelects.data('select1', 'server', {
			url: '/api/index/get_department_select',
			keyword: selected_a
		});
		
		// Photo upload
		var photoUpload = new uploadPlus({
			'use':'single',
			'target':'uploadImg',
			'callback':function(res){
				layer.msg(res.msg);
				if (res.code == 0) {
					// Upload success
					$('#uploadThumb input').attr('value', res.data.id);
					$('#uploadThumb img').attr('src', res.data.filepath);
				}
			}
		});		
		
		oaCheck.init({
			check_name:'talent',
			check_btn:0
		});	

		// Listen for submit
		form.on('submit(webform)', function(data){
			if(!data.field.sex){
				layer.msg('Please select gender');
				return false;
			}
			if(!data.field.type){
				layer.msg('Please select employee type');
				return false;
			}
			if(!data.field.is_staff){
				layer.msg('Please select identity type');
				return false;
			}
			let callback = function (e) {
				layer.msg(e.msg);
				if (e.code == 0) {
					let checkCallback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							tool.sideClose(1000);				
						}
					}
					data.field.check_name = 'talent';
					data.field.action_id = e.data.return_id;
					oaCheck.submit(data.field,checkCallback);
				}
			}
			let clickbtn = $(this);
			tool.post("/user/talent/add", data.field, callback,clickbtn);
			return false;
		});
	}

</script>
{/block}
<!-- /Script -->