{extend name="../../base/view/common/base" /}
<!-- Body -->
{block name="body"}
<div class="p-page">
	<h3 class="pb-3">Vehicle details</h3>
	<table class="layui-table layui-table-form">
		<tr>
			<td class="layui-td-gray">Vehicle name</td>
			<td>{$detail.title}</td>
			<td class="layui-td-gray">License plate</td>
			<td>{$detail.name}</td>
			<td class="layui-td-gray-2" rowspan="5">Vehicle thumbnail</td>
			<td rowspan="5" style="width:252px;">
			    <div id="demo1" style="width: 240px; height:136px; overflow: hidden;">
					<img src="{:get_file($detail.thumb)}" style="max-width: 100%; height:136px;" />
			    </div>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray-2">Purchase date</td>
			<td>{$detail.buy_time|date='Y-m-d'}</td>
			<td class="layui-td-gray-2">Purchase price</td>
			<td>{$detail.price}</td>
		</tr>
		<tr>
			<td class="layui-td-gray-2">Color</td>
			<td>{$detail.color}</td>
			<td class="layui-td-gray">Seats</td>
			<td>{$detail.seats}</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Engine No.</td>
			<td>{$detail.engine}</td>
			<td class="layui-td-gray-2">VIN</td>
			<td>{$detail.vin}</td>
		</tr>
		<tr>
			<td class="layui-td-gray-2">Insurance expiry</td>
			<td>{$detail.insure_time|date='Y-m-d'}</td>
			<td class="layui-td-gray-2">Inspection expiry</td>
			<td>{$detail.review_time|date='Y-m-d'}</td>
		</tr>
		<tr>
			<td class="layui-td-gray">Fuel consumption</td>
			<td>{$detail.oil}</td>
			<td class="layui-td-gray-2">Current mileage</td>
			<td>{$detail.latestMileage} (Starting mileage: {$detail.mileage})</td>
			<td class="layui-td-gray-2">Driver</td>
			<td>{$detail.driver_name|default=''}</td>
		</tr>
		{notempty name="$detail.remark"}
		<tr>
			<td class="layui-td-gray">Notes</td>
			<td colspan="5">{$detail.remark|default=''}</td>
		</tr>
		{/notempty}
		{notempty name="$detail.file_ids"}
		<tr>
			<td colspan="6"><strong>Attachments<strong></td>
		</tr>
		<tr>
			<td colspan="6">
				<div class="layui-row" id="uploadBox">					
					{volist name="$detail.file_array" id="vo"}
						<div class="layui-col-md4" id="uploadFile{$vo.id}">{:file_card($vo,'view')}</div>
					{/volist}					
				</div>
			</td>
		</tr>
		{/notempty}
		<tr>
			<td colspan="6"><strong>Mileage records<strong> <span class="layui-btn layui-btn-xs add-mileage">+ Add mileage record</span></td>
		</tr>
		<tr>
			<td colspan="6"><table class="layui-hide" id="mileage" lay-filter="mileage"></table></td>
		</tr>
		<tr>
			<td colspan="6"><strong>Expense records<strong> <span class="layui-btn layui-btn-xs side-a" data-href="/adm/car/fee_add?cid={$detail.id}">+ Add expense record</span></td>
		</tr>
		<tr>
			<td colspan="6"><table class="layui-hide" id="fee" lay-filter="fee"></table></td>
		</tr>
		<tr>
			<td colspan="6"><strong>Repair records<strong> <span class="layui-btn layui-btn-xs side-a" data-href="/adm/car/repair_add?cid={$detail.id}">+ Add repair record</span></td>
		</tr>
		<tr>
			<td colspan="6"><table class="layui-hide" id="repair" lay-filter="repair"></table></td>
		</tr>
		<tr>
			<td colspan="6"><strong>Maintenance records<strong> <span class="layui-btn layui-btn-xs side-a" data-href="/adm/car/protect_add?cid={$detail.id}">+ Add maintenance record</span></td>
		</tr>
		<tr>
			<td colspan="6"><table class="layui-hide" id="protect" lay-filter="protect"></table></td>
		</tr>
	</table>
</div>
{/block}
<!-- /Body -->
<!-- Script -->
{block name="script"}
<script>
	var car_id = {$detail.id};
	var moduleInit = ['tool'];
	function gouguInit() {
		var tool = layui.tool,table = layui.table;
		
		layui.mileageTable = table.render({
			elem: '#mileage',
			title: 'Mileage records',
			cellMinWidth: 80,
			url: "/adm/api/get_car_mileage", // Data API
			where: { 'car_id': car_id },
			page: true, // Enable pagination
			limit: 10,
			cols: [[ // Headers
				{ field: 'id', title: 'No.', width: 60, align: 'center' }
				, { field: 'mileage', title: 'Mileage', align: 'center', width: 120}
				, { field: 'mileage_time', title: 'Month', align: 'center', width: 120 }
				, { field: 'admin_name', title: 'Created by', align: 'center', width: 120 }
				, { field: 'create_time', title: 'Recorded at', align: 'center', minWidth: 150,}
				, {title: 'Actions',fixed:'right', align: 'center', width: 124, templet: function (d) {
						return '<div class="layui-btn-group"><span class="layui-btn layui-btn-xs" lay-event="edit">Edit</span><span class="layui-btn layui-bg-red layui-btn-xs" lay-event="del">Delete</span></div>';
					}
				}
			]]
		});
		
		$('body').on('click','.add-mileage',function(){
			addMileage(0,'','');	
		});
		
		function addMileage(id,mileage_time,mileage){
			var biaoti = 'Add mileage record';
			if(id>0){
				biaoti = 'Edit mileage record';
			}				
			layer.open({
				type: 1
				,title: biaoti
				,area: '368px;'
				,id: 'LAY_module' // Prevent duplicate popups
				,btn: ['OK', 'Cancel']
				,btnAlign: 'c'
				,content: '<div style="padding-top:15px;">\
							<div class="layui-form-item">\
							  <label class="layui-form-label">Month</label>\
							  <div class="layui-input-inline">\
								<input type="hidden" name="id" value="'+id+'">\
								<input type="text" name="mileage_time" autocomplete="off" value="'+mileage_time+'" placeholder="Please enter month" readonly class="layui-input tool-time" data-type="month">\
							  </div>\
							</div>\
							<div class="layui-form-item">\
							  <label class="layui-form-label">Mileage</label>\
							  <div class="layui-input-inline">\
								<input type="text" name="mileage" autocomplete="off" value="'+mileage+'" placeholder="Please enter mileage" class="layui-input">\
							  </div>\
							</div>\
						  </div>'
				,yes: function(index){
					let id = $('#LAY_module').find('[name="id"]').val();
					let mileage_time = $('#LAY_module').find('[name="mileage_time"]').val();
					let mileage = $('#LAY_module').find('[name="mileage"]').val();
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							layui.mileageTable.reload();	
							layer.close(index);			
						}
					}
					tool.post("/adm/car/mileage_add", {
						id: id,
						mileage_time: mileage_time,
						mileage: mileage,
						car_id:car_id
					}, callback);						
				}
				,btn2: function(){
					layer.closeAll();
				}
			});
		}
			
			
		// Row tool events
		table.on('tool(mileage)', function(obj) {
			var data = obj.data;			
			if(obj.event === 'edit'){
				addMileage(data.id,data.mileage_time,data.mileage)
				return;
			}
			if (obj.event === 'del') {
				layer.confirm('Are you sure you want to delete?', {
					icon: 3,
					title: 'Confirm'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.del();
						}
					}
					tool.delete("/adm/car/mileage_del", {id: data.id}, callback);
					layer.close(index);
				});
			}
		});
		
		layui.feeTable = table.render({
			elem: '#fee',
			title: 'Expense records',
			cellMinWidth: 80,
			url: "/adm/api/get_car_fee", // Data API
			where: { 'car_id': car_id },
			page: true, // Enable pagination
			limit: 10,
			cols: [[
				{field:'id',width:80, title: 'ID', align:'center'}
				,{field:'fee_time',title: 'Expense date',align: 'center',width: 110}
				,{field:'types_str',title: 'Expense type',align: 'center',width: 110}
				,{field:'amount',width:110, title: 'Amount (CNY)', align:'center',style:"color:#16b777"}
				,{field:'title',minWidth:260,title: 'Expense subject'}
				,{field:'handled_name',title: 'Handler',align: 'center',width: 100}
				,{field:'create_time',title: 'Recorded at',align: 'center',width: 150}
				,{width:160,fixed:'right', title: 'Actions', align:'center',templet: function(d){
					var html='<div class="layui-btn-group"><a class="layui-btn layui-btn-xs" lay-event="edit">Edit</a><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view">Details</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">Delete</a></div>';
					return html;
				}}
			]]
		});
		// Row tool events
		table.on('tool(fee)', function(obj) {
			var data = obj.data;			
			if(obj.event === 'edit'){
				tool.side('/adm/car/fee_add?id='+data.id);
				return;
			}
			if(obj.event === 'view'){
				tool.side('/adm/car/fee_view?id='+data.id);
				return;
			}
			if (obj.event === 'del') {
				layer.confirm('Are you sure you want to delete?', {
					icon: 3,
					title: 'Confirm'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.del();
						}
					}
					tool.delete("/adm/car/fee_del", {id: data.id}, callback);
					layer.close(index);
				});
			}
		});	

		layui.repairTable = table.render({
			elem: '#repair',
			title: 'Repair records',
			cellMinWidth: 80,
			url: "/adm/api/get_car_repair", // Data API
			where: { 'car_id': car_id },
			page: true, // Enable pagination
			limit: 10,
			cols: [[ // Headers
				{ field: 'id', title: 'No.', width: 60, align: 'center' }
				, { field: 'amount', title: 'Cost', style: 'color: #91CC75;', align: 'center', width: 100 }
				, { field: 'repair_time', title: 'Repair date', align: 'center', width: 110 }
				, { field: 'content', title: 'Details',minWidth:240}
				, { field: 'handled_name', title: 'Handler', align: 'center', width: 90 }
				, { field: 'create_time', title: 'Recorded at', align: 'center', width: 150}
				, {title: 'Actions',fixed:'right', align: 'center', width: 140, templet: function (d) {
						return '<div class="layui-btn-group"><span class="layui-btn layui-btn-xs" lay-event="edit">Edit</span><span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view">Details</span><span class="layui-btn layui-bg-red layui-btn-xs" lay-event="del">Delete</span></div>';
					}
				}
			]]
		});
		// Row tool events
		table.on('tool(repair)', function(obj) {
			var data = obj.data;			
			if(obj.event === 'edit'){
				tool.side('/adm/car/repair_add?id='+data.id);
				return;
			}
			if(obj.event === 'view'){
				tool.side('/adm/car/repair_view?id='+data.id);
				return;
			}
			if (obj.event === 'del') {
				layer.confirm('Are you sure you want to delete?', {
					icon: 3,
					title: 'Confirm'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.del();
						}
					}
					tool.delete("/adm/car/repair_del", {id: data.id}, callback);
					layer.close(index);
				});
			}
		});
		
		
		layui.protectTable = table.render({
			elem: '#protect',
			title: 'Maintenance records',
			cellMinWidth: 80,
			url: "/adm/api/get_car_protect", // Data API
			where: { 'car_id': car_id },
			page: true, // Enable pagination
			limit: 10,
			cols: [[ // Headers
				{ field: 'id', title: 'No.', width: 60, align: 'center' }
				, { field: 'amount', title: 'Cost', style: 'color: #91CC75;', align: 'center', width: 100 }
				, { field: 'repair_time', title: 'Maintenance date', align: 'center', width: 140 }
				, { field: 'content', title: 'Details',minWidth:240}
				, { field: 'handled_name', title: 'Handler', align: 'center', width: 90 }
				, { field: 'create_time', title: 'Recorded at', align: 'center', width: 150}
				, {title: 'Actions',fixed:'right', align: 'center', width: 140, templet: function (d) {
						return '<div class="layui-btn-group"><span class="layui-btn layui-btn-xs" lay-event="edit">Edit</span><span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view">Details</span><span class="layui-btn layui-bg-red layui-btn-xs" lay-event="del">Delete</span></div>';
					}
				}
			]]
		});
		// Row tool events
		table.on('tool(protect)', function(obj) {
			var data = obj.data;			
			if(obj.event === 'edit'){
				tool.side('/adm/car/protect_add?id='+data.id);
				return;
			}
			if(obj.event === 'view'){
				tool.side('/adm/car/protect_view?id='+data.id);
				return;
			}
			if (obj.event === 'del') {
				layer.confirm('Are you sure you want to delete?', {
					icon: 3,
					title: 'Confirm'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.del();
						}
					}
					tool.delete("/adm/car/protect_del", {id: data.id}, callback);
					layer.close(index);
				});
			}
		});
	}
</script>
{/block}
<!-- /Script -->