{extend name="../../base/view/common/base" /}
<!-- Body -->
{block name="body"}
<form class="layui-form p-page">
	<h3 class="pb-3">New Project</h3>
	<table class="layui-table layui-table-form">
		<tr>
			<td class="layui-td-gray">Project Name<font>*</font></td>
			<td colspan="3"><input type="text" name="name" lay-verify="required" lay-reqText="Please enter project name" placeholder="Please enter project name" class="layui-input" value=""></td>
			<td class="layui-td-gray">Project Category<font>*</font></td>
			<td>
				<select name="cate_id" lay-filter="cate" lay-verify="required" lay-reqText="Please select project category">
					<option value="">Please select</option>
					{volist name = ":get_base_data('ProjectCate')" id="vo"}
					<option value="{$vo.id}">{$vo.title}</option>
					{/volist}
				</select>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Project Manager<font>*</font></td>
			<td>
				<input type="text" name="director_name" placeholder="Please select project manager (owner)" readonly class="layui-input" value="" lay-verify="required" readonly lay-reqText="Please select project manager (owner)">
				<input type="hidden" name="director_uid" value="0">
				<input type="hidden" name="did" value="0">
			</td>
			<td class="layui-td-gray">Department<font>*</font></td>
			<td><input type="text" name="department" value="" autocomplete="off" readonly class="layui-input"></td>
			<td class="layui-td-gray">Date Range<span style="color: red">*</span></td>
			<td><input type="text" name="range_time" class="layui-input tool-time" data-range="to" readonly placeholder="Start to End" lay-verify="required" lay-reqText="Please select planned completion period"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Project Members<span style="color: red">*</span></td>
			<td colspan="5">
				<input type="text" name="team_admin_names"  placeholder="Please select project members" readonly class="layui-input picker-admin" data-type="2" value="" lay-verify="required" lay-reqText="Please select project members">
				<input type="hidden" name="team_admin_ids" class="layui-input" value="">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Linked Contract</td>
			<td colspan="5">
				<input type="text" class="layui-input picker-oa" data-types="contract" name="contract_name" placeholder="Please select a contract to link" readonly value="">		
				<input type="hidden" class="layui-input" name="contract_id" value="0">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Project Summary</td>
			<td colspan="5">
				<textarea name="content" class="layui-textarea"></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="6" style="background-color:#FAFAFA;">
				<strong>Project Stages</strong><span style="color: red">*</span>
				<span class="layui-btn layui-btn-sm" id="stepAdd">+ Add stage</span>				
			</td>
		</tr>
		<tr>
			<td colspan="6">
				<table id="stepTable" class="layui-table layui-table-min" style="margin:0">
					<tr>
						<th width="60">No.</th>
						<th width="200">Stage Name</th>
						<th width="80">Stage Owner</th>
						<th width="180">Stage Members</th>
						<th width="162">Stage Period</th>
						<th>Stage Notes</th>
						<th width="120">Actions</th>
					</tr>
					{volist name = ":get_base_data('step')" id="vo" key="k"}
					<tr class="step-tr">
						<td class="step-key">Stage <strong>{$k}</strong></td>
						<td>
							<div class="layui-input-group">
								<input type="text" name="step_title[]" value="{$vo.title}" class="layui-input" lay-verify="required" lay-reqText="Please enter stage name">
								<div class="layui-input-split layui-input-suffix picker-diy" style="cursor: pointer;"><i class="layui-icon layui-icon-search"></i></div>
							</div>							
						</td>
						<td>
							<input type="text" value="" class="layui-input layui-input-readonly picker-admin" lay-verify="required" lay-reqText="Please select stage owner" readonly>
							<input type="hidden" name="step_director_uid[]" value="0" readonly>
						</td>
						<td>
							<input type="text" value="" class="layui-input layui-input-readonly picker-admin" data-type="2">
							<input type="hidden" name="step_uids[]" value="">
						</td>
						<td><input type="text" name="step_cycle_time[]" value="" class="layui-input layui-input-readonly tool-time" data-range="to" lay-verify="required" lay-reqText="Please select stage period" readonly></td>
						<td><input type="text" name="step_remark[]" value="" class="layui-input"></td>
						<td>
							<input type="hidden" name="step_id[]" value="0" class="layui-input">
							<div class="layui-btn-group">
								<span class="layui-btn layui-btn-xs step-up">Move up</span>
								<span class="layui-btn layui-btn-normal layui-btn-xs step-down">Move down</span>
								<span class="layui-btn layui-btn-danger layui-btn-xs step-del" data-id="0">Delete</span>
							</div>
						</td>
					</tr>
					{/volist}
				</table>
			</td>
		</tr>
	</table>
	<div class="pt-3">
		<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>
	var moduleInit = ['tool','oaPicker'];

	function gouguInit() {
		var form = layui.form, tool = layui.tool,oaPicker = layui.oaPicker;
		// Select project manager
		$('body').on('click','[name="director_name"]',function () {
			var ids=$('[name="director_uid"]').val(),names=$('[name="director_name"]').val();
			oaPicker.employeeInit({
				ids:ids,
				names:names,
				type:1,
				callback:function(data){
					let select_id=[],select_name=[],select_did=[],select_dname=[];
					for(var a=0; a<data.length;a++){
						select_id.push(data[a].id);
						select_name.push(data[a].name);
						select_did.push(data[a].did);
						select_dname.push(data[a].department);
					}
					$('[name="director_uid"]').val(select_id.join(','));
					$('[name="director_name"]').val(select_name.join(','));
					$('[name="did"]').val(select_did.join(','));
					$('[name="department"]').val(select_dname.join(','));
				}
			});
		});
		
		// Add stage row
		$('#stepAdd').on('click',function(){
			var html = '';
			html += '<tr class="step-tr">\
						<td class="step-key">Stage <strong>0</strong></td>\
						<td>\
							<div class="layui-input-group">\
								<input type="text" name="step_title[]" value="" class="layui-input" lay-verify="required" lay-reqText="Please enter stage name">\
								<div class="layui-input-split layui-input-suffix picker-diy" style="cursor: pointer;"><i class="layui-icon layui-icon-search"></i></div>\
							</div>\
						</td>\
						<td>\
							<input type="text" value="" class="layui-input layui-input-readonly picker-admin" lay-verify="required" lay-reqText="Please select stage owner" readonly>\
							<input type="hidden" name="step_director_uid[]" value="0" readonly>\
						</td>\
						<td>\
							<input type="text" value="" class="layui-input layui-input-readonly picker-admin" data-type="2">\
							<input type="hidden" name="step_uids[]" value="">\
						</td>\
						<td><input type="text" name="step_cycle_time[]" value="" class="layui-input layui-input-readonly tool-time" data-range="to" lay-verify="required" lay-reqText="Please select stage period" readonly></td>\
						<td><input type="text" name="step_remark[]" value="" class="layui-input"></td>\
						<td>\
							<input type="hidden" name="step_id[]" value="0" class="layui-input">\
							<div class="layui-btn-group">\
								<span class="layui-btn layui-btn-xs step-up">Move up</span>\
								<span class="layui-btn layui-btn-normal layui-btn-xs step-down">Move down</span>\
								<span class="layui-btn layui-btn-danger layui-btn-xs step-del" data-id="0">Delete</span>\
							</div>\
						</td>\
					</tr>';
			$('#stepTable').append(html).find('.tr-none').remove();
			$('#stepTable').find('.step-key').each(function(index,item){
				$(this).html('Stage <strong>'+(index+1)+'</strong>');
			})
			form.render();
		});
		$('#stepTable').on('click','.step-del',function(){
			if($('.step-tr').length<2){
				layer.msg('Keep at least one project stage');
				return false;
			}
			$(this).parents('.step-tr').remove();
			$('#stepTable').find('.step-key').each(function(index,item){
				$(this).html('Stage <strong>'+(index+1)+'</strong>');
			})
		});
		
		$('#stepTable').on('click','.step-up',function(e){
			let obj = $(e.target).closest('tr');
            tr_pre($(obj[0]));
		})
		
		$('#stepTable').on('click','.step-down',function(e){
			var obj = $(e.target).closest('tr');
            tr_next($(obj[0]));
		})
		
		
		function tr_pre(o) {
			var pres = o.prevAll('tr.step-tr');
			if (pres.length > 0) {
				var tmp = o.clone(true);
				var oo = pres[0];
				o.remove();
				$(oo).before(tmp);
				$('#stepTable').find('.step-key').each(function(index,item){
					$(this).html('Stage <strong>'+(index+1)+'</strong>');
				})
			}
			else{
				layer.msg('Already at the top');
			}
		}

		function tr_next(o) {
			var nexts = o.nextAll('tr.step-tr');
			if (nexts.length > 0) {
				var tmp = o.clone(true);
				var oo = nexts[0];
				o.remove();
				$(oo).after(tmp);
				$('#stepTable').find('.step-key').each(function(index,item){
					$(this).html('Stage <strong>'+(index+1)+'</strong>');
				})
			}else{
				layer.msg('Already at the bottom');
			}
		}
		
		$('body').on('click','.picker-diy',function () {
			let that = $(this),ids = [],titles=[],map = {};
			let callback = function(data){
				for ( var i = 0; i <data.length; i++){
					ids.push(data[i].id);
					titles.push(data[i].title);
				}
				that.prev().val(titles.join(','));
			}
			let opts={
					"title":"Select project stage",
					"url": "/project/api/get_project_step",
					"ids":"",
					"titles":"",
					"area": ['600px', '580px'],
					"cols":[{field: 'id',width: 80,title:'No.',align:'center'},{field:'title',title:'Project stage'}]
		   }
			oaPicker.picker(opts,1,callback,map);// Single select
		});

		
		// Handle submit
		form.on('submit(webform)', function (data) {
			let callback = function (e) {
				layer.msg(e.msg);
				if (e.code == 0) {
					tool.sideClose(1000);
				}
			}
			let clickbtn = $(this);
			tool.post("/project/index/add", data.field, callback,clickbtn);
			return false;
		});
	}
</script>
{/block}
<!-- /Script -->