{extend name="../../base/view/common/base" /}
{block name="style"}
<style>
.layui-tab-title .layui-this{background-color:#fff;}
.layui-tab-card,.layui-card{box-shadow:0 0 0 0 rgb(0 0 0 / 10%); border-radius:0; border-top:none;}
#checkBox .pb-2{display:none;}
</style>
{/block}
<!-- Body -->
{block name="body"}
<div class="p-page">
	<h3 class="pb-2">Purchase Contract Details</h3>
	<table class="layui-table layui-table-form">
		<tr>
			<td class="layui-td-gray">Contract Name</td>
			<td colspan="3">{$detail.name}</td>
			<td class="layui-td-gray">Contract Number</td>
			<td>{$detail.code}</td>
		</tr>
		<tr>
			<td class="layui-td-gray-3">Contracting Party (Party A)</td>
			<td colspan="3">{$detail.subject_title}</td>
			<td class="layui-td-gray-2">Contract Start/End Dates</td>
			<td>{$detail.start_time} to {$detail.end_time}</td>
		</tr>
		<tr>
			<td class="layui-td-gray-3">Supplier Name (Party B)</td>
			<td colspan="3">{$detail.supplier}</td>
			<td class="layui-td-gray-3">Supplier Representative</td>
			<td>{$detail.contact_name}</td>
		</tr>
		<tr>
			<td class="layui-td-gray-3">Supplier Address</td>
			<td colspan="3">{$detail.contact_address|default='-'}</td>
			<td class="layui-td-gray">Supplier Phone</td>
			<td>{$detail.contact_mobile|default='-'}</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Contract Amount</td>
			<td>{$detail.cost}</td>
			<td class="layui-td-gray">Contract Nature</td>
			<td>{$detail.types_name}</td>
			<td class="layui-td-gray">Contract Category</td>
			<td>{$detail.cate_title}</td>
		</tr>
		<tr>
			<td colspan="6"><strong>Signing Information</strong></td>
		</tr>
		<tr>
			<td class="layui-td-gray-2">Signatory</td>
			<td>{$detail.sign_name}</td>
			<td class="layui-td-gray-2">Department</td>
			<td>{$detail.sign_department}</td>
			<td class="layui-td-gray-2">Signing Date</td>
			<td>{$detail.sign_time}</td>
		</tr>
		<tr>
			<td class="layui-td-gray-2">Prepared By</td>
			<td>{$detail.prepared_name|default='-'}</td>
			<td class="layui-td-gray-2">Custodian</td>
			<td>{$detail.keeper_name|default='-'} <span id="keeper" data-ids="{$detail.keeper_uid}" data-names="{$detail.keeper_name}" class="layui-btn layui-btn-xs layui-btn-normal ml-1">Change</span></td>
			<td class="layui-td-gray">Shared With</td>
			<td colspan="3">{$detail.share_names|default='-'} <span id="shares" data-ids="{$detail.share_ids}" data-names="{$detail.share_names}" class="layui-btn layui-btn-xs layui-btn-normal ml-1">Change</span></td>
		</tr>
		{eq name="$detail.types" value="2"}{include file="/purchase/view_purchased"}{/eq}		
		{eq name="$detail.types" value="3"}{include file="/purchase/view_service"}{/eq}	
		{notempty name="$detail.file_ids"}
		<tr>
			<td colspan="6"><strong>Attachments</strong></td>
		</tr>
		<tr>
			<td colspan="6">
				<div class="layui-row">
					{volist name="$detail.file_array" id="vo"}
					<div class="layui-col-md4">{:file_card($vo,'view')}</div>
					{/volist}
				</div>
			</td>
		</tr>
		{/notempty}
		{notempty name="$detail.remark"}
		<tr>
			<td colspan="6"><strong>Remarks</strong></td>
		</tr>
		<tr>
			<td colspan="6">{$detail.remark}</td>
		</tr>
		{/notempty}
		
		{notempty name="$detail.ticket"}
		<tr>
			<td colspan="6"><strong>Invoice Requests</strong> (Requested invoice amount: <strong class="green">{$detail.has_ticket}</strong> CNY, Not requested: <strong class="red">{$detail.no_ticket}</strong> CNY)</td>
		</tr>
		<tr>
			<td colspan="6">
				<table class="layui-table layui-table-min" style="margin:0;">
					<tr>
						<th style="width:60px;">No.</th>
						<th style="width:150px;">Invoice Amount (CNY)</th>
						<th style="width:150px;">Invoice Status</th>
						<th style="width:200px;">Invoice No.</th>
						<th style="width:150px;">Invoice Date</th>
						<th style="width:100px;">Payment Status</th>
						<th style="width:100px;">Applicant</th>
						<th style="width:150px;">Application Time</th>
						<th style="width:60px;">Actions</th>
					</tr>
					{volist name="$detail.ticket" id="vo"}
					<tr>
						<td>{$vo.id}</td>
						<td><span class="green">{$vo.amount}</span></td>
						{eq name="$vo.open_status" value="1"}
						<td><span class="green">Issued</span></td>
						<td>{$vo.code}</td>
						<td>{$vo.open_time|date='Y-m-d'}</td>
						{else/}
						<td><span class="red">Not Issued</span></td>
						<td>-</td>
						<td>-</td>								
						{/eq}
						<td>
							{eq name="$vo.pay_status" value="0"}<span class="red">Unpaid</span>{/eq}
							{eq name="$vo.pay_status" value="1"}<span class="blue">Partially Paid</span>{/eq}
							{eq name="$vo.pay_status" value="2"}<span class="green">Paid in Full</span>{/eq}
						</td>
						<td>{$vo.admin}</td>
						<td>{$vo.create_time | date='Y-m-d H:i:s'}</td>
						<td><span class="layui-btn layui-btn-normal layui-btn-xs side-a" data-href="/finance/ticket/view?id={$vo.id}">Details</span></td>
					</tr>
					{/volist}
				</table>
			</td>
		</tr>
		{/notempty}
		
		{notempty name="$detail.payment"}
		<tr>
			<td colspan="6"><strong>Payment Records</strong> (Paid: <strong class="green">{$detail.has_payment}</strong> CNY, Unpaid: <strong class="red">{$detail.no_payment}</strong> CNY)</</td>
		</tr>
		<tr>
			<td colspan="6">
				<table class="layui-table layui-table-min" style="margin:0;">
					<tr>
						<th style="width:60px;">No.</th>
						<th style="width:150px;">Payment Amount (CNY)</th>
						<th style="width:200px;">Payment Date</th>
						<th style="width:100px;">Processed By</th>
						<th style="width:150px;">Operation Time</th>
						<th style="width:60px;">Actions</th>
					</tr>
					{volist name="$detail.payment" id="vo"}
					<tr>
						<td>{$vo.id}</td>
						<td><span class="green">{$vo.amount}</span></td>
						<td>{$vo.pay_time | date='Y-m-d'}</td>
						<td>{$vo.admin}</td>
						<td>{$vo.create_time | date='Y-m-d H:i:s'}</td>
						<td><span class="layui-btn layui-btn-normal layui-btn-xs side-a" data-href="/finance/payment/view?id={$vo.ticket_id}">Details</span></td>
					</tr>
					{/volist}
				</table>
			</td>
		</tr>
		{/notempty}
		
		
		<tr>
			<td colspan="6"><strong>Contract Status</strong></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Created By</td>
			<td>{$detail.admin_name} </td>
			<td class="layui-td-gray">Created At</td>
			<td colspan="3">{$detail.create_time}</td>
		</tr>
		{gt name="$detail.archive_time" value="0"}
		<tr>
			<td class="layui-td-gray">Archive Status</td>
			<td>
				<span class="red">Archived</span>
				{if ($auth == 1) }
				<span class="layui-btn layui-btn-danger layui-btn-xs ml-4" data-event="archive" data-status="0">Unarchive</span>
				{/if}
			</td>
			<td class="layui-td-gray">Archived By</td>
			<td>{$detail.archive_name} </td>
			<td class="layui-td-gray">Archived At</td>
			<td>{$detail.archive_time|date='Y-m-d H:i:s'}</td>
		{else/}
			<td class="layui-td-gray">Archive Status</td>
			<td colspan="5">
				<span class="green">Not Archived</span>
				{if ($auth == 1) AND ($detail.check_status == 2) }
				<span class="layui-btn layui-btn-xs ml-4" data-event="archive" data-status="1">Archive</span>
				{/if}
			</td>
		</tr>
		{/gt}
			
		{gt name="$detail.stop_time" value="0"}
		<tr>
			<td class="layui-td-gray">Stopped By</td>
			<td>{$detail.stop_name}</td>
			<td class="layui-td-gray">Stopped At</td>
			<td>{$detail.stop_time|date='Y-m-d H:i:s'}</td>
			<td colspan="2"><span class="layui-btn layui-btn-danger layui-btn-xs" data-event="stop" data-status="0">Reinstate Contract</span></td>
		</tr>
		<tr>
			<td class="layui-td-gray">Stop Reason</td>
			<td colspan="5">{$detail.stop_remark|default='-'}</td>
		</tr>
		{/gt}
			
		{gt name="$detail.void_time" value="0"}
		<tr>
			<td class="layui-td-gray">Voided By</td>
			<td>{$detail.void_name}</td>
			<td class="layui-td-gray">Voided At</td>
			<td>{$detail.void_time|date='Y-m-d H:i:s'}</td>
			<td colspan="2"><span class="layui-btn layui-btn-danger layui-btn-xs" data-event="void" data-status="0">Restore Contract</span></td>
		</tr>
		<tr>
			<td class="layui-td-gray-2">Void Reason</td>
			<td colspan="5">{$detail.void_remark|default='-'}</td>
		</tr>
		{/gt}
	</table>
	<div class="layui-tab layui-tab-card" style="margin:0; background-color:#fff;" lay-filter="purchase" id="purchaseTab">
		<ul class="layui-tab-title">
			<li class="layui-this" data-load="true">Approval</li>
			<li>Activity Log</li>
		</ul>
		<div class="layui-tab-content" style="padding:0;">
			<div class="layui-tab-item layui-show" style="padding-top:12px; background-color:#fff;">	
				{if ($detail.stop_time == 0) AND ($detail.void_time == 0) }
				<div id="checkBox" data-status="{$detail.check_status}" data-id="{$detail.id}" data-checkflowid="{$detail.check_flow_id}" class="px-3 pb-3"></div>
				{/if}	
			</div>
			<div class="layui-tab-item">
				{include file="/purchase/view_log" /}
			</div>
		</div>
	</div>
</div>
{/block}
<!-- /Body -->
<!-- Scripts -->
{block name="script"}
<script>
	var purchase_id = {$detail.id};
	var auth = {$auth};
	var archive = {$detail.archive_time};
	var moduleInit = ['tool','oaCheck','oaPicker','oaEdit'];
	let checking_btn='<span class="layui-btn layui-btn-warm" data-event="stop" data-status="1">Stop Contract</span><span class="layui-btn layui-btn-danger" data-event="void" data-status="1">Void Contract</span>';
	function gouguInit() {
		var tool = layui.tool,element = layui.element,oaCheck=layui.oaCheck,oaPicker=layui.oaPicker;	
		
		element.on('tab(purchase)', function(data){
			let index = data.index;
			if(index == 1){
				log();	
			}
		});
		
		oaCheck.init({
			check_name:'purchase',
			checking_btn:checking_btn,
			check_reversed :function(){
			
			}
		});

		let eventCallback = function (e) {
			layer.msg(e.msg);
			parent.layui.pageTable.reload();
			setTimeout(function(){
				location.reload();
			},1200)					
		}
		
		// Custodian picker dialog
		$('body').on('click','#keeper',function () {
			let that = $(this);
			let ids=$(this).data('ids')+'',names = $(this).data('names')+'';
			oaPicker.employeeInit({
				ids:ids,
				names:names,
				type:1,// 1 = single-select, 2 = multi-select
				callback:function(data){
					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);
					}
					tool.post("/contract/purchase/add", {'id':purchase_id,'keeper_uid':select_id.join(','),'scene':'change'}, eventCallback);
				}
			});
		});
	
		// Shared members picker dialog
		$('body').on('click','#shares',function () {
			let that = $(this);
			let ids=$(this).data('ids')+'',names = $(this).data('names')+'';
			oaPicker.employeeInit({
				ids:ids,
				names:names,
				type:2,// 1 = single-select, 2 = multi-select
				callback:function(data){
					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);
					}
					tool.post("/contract/purchase/add", {'id':purchase_id,'share_ids':select_id.join(','),'scene':'change'}, eventCallback);
				}
			});
		});
		
		// Archive action
		$('body').on('click','[data-event="archive"]',function(){
			let status = $(this).data('status');
			let tips = 'After archiving, this contract can no longer be modified. Submit for archiving?';
			if(status==0){
				tips = 'Confirm unarchive?';
			}
			layer.confirm(tips, {
				icon: 3,
				title: 'Confirm'
			}, function(index) {
				tool.post("/contract/api/purchase_archive", {id: purchase_id,archive_status:status}, eventCallback);
				layer.close(index);
			});
		})

		// Stop action
		$('body').on('click','[data-event="stop"]',function(){
			let status = $(this).data('status');
			if(status==1){
				layer.prompt({
					formType: 2,
					title: 'Enter the reason for stopping',
					area: ['480px', '120px']
				}, function(value, index, elem){
					tool.post("/contract/api/purchase_stop", {id: purchase_id,stop_status:status,stop_remark:value}, eventCallback);
					layer.close(index);
				});
			}
			else{
				layer.confirm('Confirm reinstate this contract?', {
					icon: 3,
					title: 'Confirm'
				}, function(index) {
					tool.post("/contract/api/purchase_stop", {id: purchase_id,stop_status:status}, eventCallback);
					layer.close(index);
				});
			}
		})
		
		// Void action
		$('body').on('click','[data-event="void"]',function(){
			let status = $(this).data('status');
			if(status==1){
				layer.prompt({
					formType: 2,
					title: 'Enter the reason for voiding',
					area: ['480px', '120px']
				}, function(value, index, elem){
					tool.post("/contract/api/purchase_tovoid", {id: purchase_id,void_status:status,void_remark:value}, eventCallback);
					layer.close(index);
				});
			}
			else{
				layer.confirm('Confirm restore this contract?', {
					icon: 3,
					title: 'Confirm'
				}, function(index) {
					tool.post("/contract/api/purchase_tovoid", {id: purchase_id,void_status:status}, eventCallback);
					layer.close(index);
				});
			}
		})		
	}
</script>
{/block}
<!-- /Scripts -->