{extend name="../../base/view/common/base" /}
<!-- Body -->
{block name="body"}
<form class="layui-form p-page">
	<h3 class="pb-2">Add Purchase Contract</h3>
    <table class="layui-table layui-table-form">
		<tr>
			<td class="layui-td-gray">Contract Name<font>*</font></td>
			<td colspan="3"><input type="text" name="name" value="" lay-verify="required" lay-reqText="Please enter the contract name" autocomplete="off" placeholder="Enter contract name" class="layui-input"></td>
			<td class="layui-td-gray">Contract Type</td>
			<td>
				<input type="hidden" name="types" value="{$types}">
				{eq name="$types" value="1" }Standard Purchase{/eq}
				{eq name="$types" value="2" }Goods Purchase{/eq}
				{eq name="$types" value="3" }Service Purchase{/eq}
			</td>
		</tr>
        <tr>
			<td class="layui-td-gray">Signing Entity <span style="font-size:12px;">(Party A)</span><font>*</font></td>
			<td colspan="3">
				<select name="subject_id" lay-verify="required" lay-reqText="Please select the signing entity">
					<option value="">Select signing entity</option>
					{volist name=":get_base_data('Enterprise')" id="v"}
					<option value="{$v.id}">{$v.title}</option>
					{/volist}
				</select>
			</td>
			<td class="layui-td-gray-2">Contract Date Range<font>*</font></td>
			<td id="barDate" style="width:320px;">
				<div class="layui-input-inline" style="width:150px;">
					<input type="text" class="layui-input" id="start_time" value="" placeholder="Select date" readonly name="start_time" lay-verify="required" lay-reqText="Please select the contract start date">
				</div>
				~
				<div class="layui-input-inline" style="width:150px;">
					<input type="text" class="layui-input" id="end_time" value="" placeholder="Select date" readonly name="end_time" lay-verify="required" lay-reqText="Please select the contract end date">
				</div>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Supplier Name <span style="font-size:12px;">(Party B)</span><font>*</font></td>
			<td colspan="3">			
				{eq name="$is_supplier" value="1"}
				<input type="text" name="supplier" autocomplete="off" value="" readonly lay-verify="required" lay-reqText="Please enter the supplier name" placeholder="Enter supplier name" class="layui-input supplier-picker">				
				{else/}
				<input type="text" name="supplier" autocomplete="off" value="" lay-verify="required" lay-reqText="Please enter the supplier name" placeholder="Enter supplier name" class="layui-input">				
				{/eq}
				<input type="hidden" name="supplier_id" value="0">			
			</td>
			<td class="layui-td-gray">Supplier Representative<font>*</font></td>
			<td><input type="text" name="contact_name" value="" autocomplete="off" lay-verify="required" lay-reqText="Please enter the representative name" placeholder="Enter representative name" class="layui-input"></td>
		</tr>
		<tr>
			<td class="layui-td-gray-3">Supplier Address</td>
			<td colspan="3"><input type="text" name="contact_address" value="" autocomplete="off" placeholder="Enter supplier address" class="layui-input"></td>
			<td class="layui-td-gray-3">Supplier Phone</td>
			<td><input type="text" name="contact_mobile" value="" autocomplete="off" placeholder="Enter supplier phone" class="layui-input"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Contract Amount<font>*</font></td>
			<td>
				{eq name="$types" value="1"}
				<input type="text" name="cost" value="" lay-verify="required|number" lay-reqText="Please enter the contract amount (number)" placeholder="Enter contract amount (number)" autocomplete="off" class="layui-input">
				{/eq}
				{eq name="$types" value="2"}
				<input type="text" name="cost" value="" lay-verify="required|number" lay-reqText="Please complete the goods information" placeholder="Complete goods info; amount is auto-calculated" readonly class="layui-input layui-input-readonly">
				{/eq}
				{eq name="$types" value="3"}
				<input type="text" name="cost" value="" lay-verify="required|number" lay-reqText="Please complete the service information" placeholder="Complete service info; amount is auto-calculated" readonly class="layui-input layui-input-readonly">
				{/eq}
			</td>
			<td class="layui-td-gray">Contract Category<font>*</font></td>
			<td>
				<select name="cate_id" lay-verify="required" lay-reqText="Please select a contract category">
					<option value="">Select contract category</option>
					{volist name=":get_base_data('ContractCate');" id="vo"}
					<option value="{$vo.id}">{$vo.title}</option>
					{/volist}
				</select>
			</td>
			<td class="layui-td-gray">Contract No.<font>*</font></td>
			<td><input type="text" name="code" value="{$codeno}" autocomplete="off" {eq name="$is_codeno" value="1"}readonly{/eq} lay-verify="required" lay-reqText="Please enter the contract number" placeholder="Enter contract number" class="layui-input"></td>
		</tr>
		<tr>
			<td colspan="6"><strong>Signing Information</strong></td>
		</tr>
		<tr>
			<td class="layui-td-gray-2">Signatory<font>*</font></td>
			<td>
				 <input type="text" name="sign_name" value="" autocomplete="off" readonly lay-verify="required" lay-reqText="Please select the signatory" placeholder="Select signatory" class="layui-input picker-diy">
				 <input type="hidden" name="sign_uid" value="0">
			</td>
			<td class="layui-td-gray-2">Department<font>*</font></td>
			<td>
				<input type="text" name="sign_department" value="" autocomplete="off" readonly lay-verify="required" lay-reqText="Please select the department"  placeholder="Select department" class="layui-input picker-oa" data-types="department">
			  	<input type="hidden" name="did" value="0">
			</td>
			<td class="layui-td-gray-2">Signing Date<font>*</font></td>
			<td><input type="text" name="sign_time" value="" readonly lay-verify="required" lay-reqText="Please select the signing date" placeholder="Select signing date" class="layui-input tool-time"></td>
		</tr>
		<tr>
			<td class="layui-td-gray-2">Prepared By</td>
			<td>
				<input type="text" name="prepared_name" value="" readonly placeholder="Select prepared by" class="layui-input picker-admin">
				<input type="hidden" name="prepared_uid" value="0">
			</td>
			<td class="layui-td-gray-2">Custodian</td>
			<td>
				<input type="text" name="keeper_name"  value="" readonly placeholder="Select custodian" class="layui-input picker-admin">
				<input type="hidden" name="keeper_uid" value="0">
			</td>
			<td class="layui-td-gray">Shared With</td>
			<td colspan="3">
				<input type="text" name="share_names" value="" readonly placeholder="Select shared members" class="layui-input picker-admin" data-type="2">
				<input type="hidden" name="share_ids" value="">
			</td>
		</tr>
		{eq name="$types" value="2"}{include file="/purchase/add_purchased"}{/eq}		
		{eq name="$types" value="3"}{include file="/purchase/add_service"}{/eq}	
		<tr>
			<td colspan="6"><strong>Attachments</strong></td>
		</tr>
		<tr>
			<td class="layui-td-gray">
				<button type="button" class="layui-btn layui-btn-sm" id="uploadBtn"><i class="layui-icon"></i>Upload Attachment</button>
			</td>
			<td colspan="5">
				<div class="layui-row" id="uploadBox">
					<input type="hidden" id="fileBoxInput" data-type="file" name="file_ids" value="">
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="6"><strong>Remarks</strong></td>
		</tr>
		<tr>
			<td colspan="6"><textarea name="remark" placeholder="Enter remarks" class="layui-textarea"></textarea></td>
		</tr>
    </table>
	<div class="pt-4">
		<input type="hidden" name="scene" value="add">
		<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 -->

<!-- Scripts -->
{block name="script"}
<script>
	const moduleInit = ['tool','oaPicker','uploadPlus'];
	function gouguInit() {
		var form = layui.form,tool=layui.tool,laydate = layui.laydate, oaPicker = layui.oaPicker,uploadPlus = layui.uploadPlus;
		if(typeof purchased_fun==='function'){
			purchased_fun(layui);
		}
		if(typeof service_fun==='function'){
			service_fun(layui);
		}
		// Date range
		laydate.render({
			elem: '#barDate',
			range: ['#start_time', '#end_time']
		});
		// Attachment upload
		var attachment = new uploadPlus({
			"target":'uploadBtn',
			"targetBox":'uploadBox'
		});
		
		// Employee picker dialog
		$('body').on('click','.picker-diy',function () {
			let that = $(this);
			let ids=that.next().val()+'',names = that.val()+'';
			oaPicker.employeeInit({
				ids:ids,
				names:names,
				type:1,// 1 = single select, 2 = multi select
				callback:function(data){
					// Callback after selection
					let select_id=[],select_name=[];
					for(var a=0; a<data.length;a++){
						select_id.push(data[a].id);
						select_name.push(data[a].name);
					}
					that.val(select_name.join(','));
					that.next().val(select_id.join(','));
				}
			});
		});
		
		// Supplier picker dialog
		$('body').on('click','.supplier-picker',function () {
			let that = $(this),ids = [],titles=[],contact_name=[],contact_mobile=[],address=[],map = {},types = 'supplier',type = 1;
			let callback = function(data){
				for ( var i = 0; i <data.length; i++){
					ids.push(data[i].id);
					titles.push(data[i].title);
					contact_name.push(data[i].contact_name);
					contact_mobile.push(data[i].contact_mobile);
					address.push(data[i].address);
				}
				that.val(titles.join(','));
				that.next().val(ids.join(','));
				$('[name="contact_name"]').val(contact_name.join(','));
				$('[name="contact_mobile"]').val(contact_mobile.join(','));
				$('[name="contact_address"]').val(address.join(','));
			}
			oaPicker.picker(types,type,callback,map);
		});
		
		// Submit handler
		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("/contract/purchase/add", data.field, callback,clickbtn);
			return false;
		});
	}
</script>
{/block}
<!-- /Scripts -->