{extend name="../../base/view/common/base" /}
{block name="style"}
<style>
.layui-table-1 .tr-2,.layui-table-1 .tr-3{display:none;}
.layui-table-2 .tr-1,.layui-table-2 .tr-3{display:none;}
.layui-table-3 .tr-1,.layui-table-3 .tr-2{display:none;}
.layui-table-4 .tr-1,.layui-table-4 .tr-2,.layui-table-4 .tr-3,.layui-table-4 .tr-4{display:none;}
</style>
{/block}
<!-- Body -->
{block name="body"}
<form class="layui-form p-4">
	{if condition="$id eq 0"}
	<h3 class="pb-3">New Message</h3>
	<table id="messageTable" class="layui-table layui-table-form layui-table-1">
		<tr>
			<td class="layui-td-gray-2">Recipient Type</td>
			<td>
				<input type="radio" name="types" lay-filter="types" value="1" title="Colleague" checked>
				<input type="radio" name="types" lay-filter="types" value="2" title="Department">
				<input type="radio" name="types" lay-filter="types" value="3" title="Position">
				<input type="radio" name="types" lay-filter="types" value="4" title="All">
			</td>
		</tr>
		<tr class="tr-1">
			<td class="layui-td-gray">To<font>*</font></td>
			<td>
				<input type="text" name="unames" value="" placeholder="Select recipient" readonly class="layui-input picker-admin" data-type="2">
				<input type="hidden" name="uids" value="">
			</td>
		</tr>
		<tr class="tr-2">
			<td class="layui-td-gray">To Department<font>*</font></td>
			<td>
				<input type="text" name="dnames" value="" placeholder="Select department" readonly class="layui-input picker-oa" data-types="department" data-type="2">
				<input type="hidden" name="dids" value="">
			</td>
		</tr>
		<tr class="tr-3">
			<td class="layui-td-gray">To Position<font>*</font></td>
			<td>
				<input type="text" name="pnames" value="" placeholder="Select position" readonly class="layui-input picker-oa" data-types="position" data-type="2">
				<input type="hidden" name="pids" value="">
			</td>
		</tr>
		<tr class="tr-4">
			<td class="layui-td-gray">CC</td>
			<td>
				<input type="text" name="copy_names" value="" placeholder="Select CC" readonly class="layui-input picker-admin" data-type="2">
				<input type="hidden" name="copy_uids" value="">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Subject<font>*</font></td>
			<td><input type="text" name="title" value="" lay-verify="required" lay-reqText="Please enter a subject" placeholder="Enter subject" class="layui-input" lay-verify="required"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Message<font>*</font></td>
			<td><textarea name="content" placeholder="Enter message" class="layui-textarea" style="height: 200px;" lay-verify="required" lay-reqText="Please enter message"></textarea></td>
		</tr>
		<tr>
			<td class="layui-td-gray"><div class="layui-input-inline">Attachments</div> <div class="layui-input-inline"><button type="button" class="layui-btn layui-btn-xs" id="uploadBtn"><i class="layui-icon"></i></button></div></td>
			<td>
				<div class="layui-row" id="uploadBox">
					<input type="hidden" data-type="file" name="file_ids" value="">
				</div>
			</td>
		</tr>
	</table>
	{else/}
	<h3 class="pb-3">Edit Message</h3>
	<table id="messageTable" class="layui-table layui-table-form layui-table-{$detail.types}">
		<tr>
			<td class="layui-td-gray-2">Recipient Type</td>
			<td>
				<input type="radio" name="types"  lay-filter="types" value="1" title="Colleague" {eq name="$detail.types" value="1"}checked{/eq}>
				<input type="radio" name="types"  lay-filter="types" value="2" title="Department" {eq name="$detail.types" value="2"}checked{/eq}>
				<input type="radio" name="types"  lay-filter="types" value="3" title="Position" {eq name="$detail.types" value="3"}checked{/eq}>
				<input type="radio" name="types"  lay-filter="types" value="4" title="All" {eq name="$detail.types" value="4"}checked{/eq}>
			</td>
		</tr>
		<tr class="tr-1">
			<td class="layui-td-gray">To<font>*</font></td>
			<td>
				<input type="text" name="unames" value="{$detail.unames|default=''}" placeholder="Select recipient" readonly class="layui-input picker-admin" data-type="2">
				<input type="hidden" name="uids" value="{$detail.uids|default=''}">
			</td>
		</tr>
		<tr class="tr-2">
			<td class="layui-td-gray">To Department<font>*</font></td>
			<td>
				<input type="text" name="dnames" value="{$detail.dnames|default=''}" placeholder="Select department" readonly class="layui-input picker-oa" data-types="department" data-type="2">
				<input type="hidden" name="dids" value="{$detail.dids|default=''}">
			</td>
		</tr>
		<tr class="tr-3">
			<td class="layui-td-gray">To Position<font>*</font></td>
			<td>
				<input type="text" name="pnames" value="{$detail.pnames|default=''}" placeholder="Select position" readonly class="layui-input picker-oa" data-types="position" data-type="2">
				<input type="hidden" name="pids" value="{$detail.pids|default=''}">
			</td>
		</tr>
		<tr class="tr-4">
			<td class="layui-td-gray">CC</td>
			<td>
				<input type="text" name="copy_names" value="{$detail.copy_names|default=''}" placeholder="Select CC" readonly class="layui-input picker-admin" data-type="2">
				<input type="hidden" name="copy_uids" value="{$detail.copy_uids|default=''}">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Subject<font>*</font></td>
			<td><input type="text" name="title" value="{$detail.title|default=''}" lay-verify="required" lay-reqText="Please enter a subject" placeholder="Enter subject" class="layui-input" lay-verify="required"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Message<font>*</font></td>
			<td>
				<textarea name="content" placeholder="Enter message" class="layui-textarea" style="height: 200px;" lay-verify="required" lay-reqText="Please enter message">{$detail.content|default=''}</textarea>
				{if condition="($detail.msg_id > 0)"}		
				<table class="layui-table" style="margin-top:10px">
				<tr>
					<td class="layui-td-gray-2">Quoted Message</td>
					<td>{$detail.from_content}</td>
				</tr>
				{notempty name="$detail.from_file_array"}
				<tr>
					<td class="layui-td-gray" style="vertical-align:top">Quoted Attachments</td>
					<td>
						<div class="layui-row">
							{volist name="$detail.from_file_array" id="vo"}
							<div class="layui-col-md4" id="uploadFile{$vo.id}">{:file_card($vo,'view')}</div>
							{/volist}
						</div>
					</td>
				</tr>
				{/notempty}
				</table>
				{/if}
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray"><div class="layui-input-inline">Attachments</div> <div class="layui-input-inline"><button type="button" class="layui-btn layui-btn-xs" id="uploadBtn"><i class="layui-icon"></i></button></div></td>
			<td colspan="5">
				<div class="layui-row" id="uploadBox">
					<input type="hidden" name="file_ids" data-type="file" value="{$detail.file_ids}">
					{notempty name="$detail.file_ids"}
					{volist name="$detail.file_array" id="vo"}
					<div class="layui-col-md4" id="uploadFile{$vo.id}">{:file_card($vo)}</div>
					{/volist}
					{/notempty}
				</div>
			</td>
		</tr>
	</table>
	{/if}
	<div class="pt-4">
		<input type="hidden" value="{$id}" name="id">
		<input type="hidden" value="{$msg_id}" name="msg_id">
		<button class="layui-btn" lay-submit="" lay-filter="draftform">Save Draft</button>
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">Send Now</button>
	</div>
</form>
{/block}
<!-- /Body -->

<!-- Scripts -->
{block name="script"}
<script>
	const moduleInit = ['tool','oaPicker','uploadPlus'];
	function gouguInit() {
		var form = layui.form,tool=layui.tool,uploadPlus=layui.uploadPlus;
		let uploada = new uploadPlus();
		// Save and send
		form.on('submit(webform)', function(data){
			data.field.is_draft=1;
			let callback = function (e) {
				layer.msg(e.msg);
				if (e.code == 0) {
					tool.sideClose(1000);
				}
			}
			let clickbtn = $(this);
			tool.post("/home/message/save", data.field, callback,clickbtn);
			return false;
		});
		  
		// Save as draft
		form.on('submit(draftform)', function(data){
			data.field.is_draft=2;
			let callback = function (e) {
				layer.msg(e.msg);
				if (e.code == 0) {
					tool.sideClose(1000);
				}
			}
			let clickbtn = $(this);
			tool.post("/home/message/save", data.field, callback, clickbtn);
			return false;
		});

		// Select recipient type
		form.on('radio(types)', function (data) {
			$('#messageTable').attr('class','layui-table layui-table-form layui-table-'+data.value);
		});		
	}		
	</script>
{/block}
<!-- /Scripts -->