gps-frontend/resources/views/menu_v1/reports/_trip_detail.blade.php

<style>
	#map {
		height: 100%;
		margin: 0;
	}
	.my-leaflet-map-container img {
		max-height: none;
	}
	.dtl-text{
		font-size: 0.75rem;
	}
	/* .leaflet-overlay-pane svg {
		transform: none !important;
	} */
</style>


<div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
	<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="mdlDetailTripLabel">{{$nopol1}} Trip Detail</h5>
			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body row" id="viewPdf">
			<!-- <div class="col-2">
				<img id="infoVehicles-thumb-md" src="https://products.unitedtractors.com/wp-content/uploads/2021/03/udtruck-GWE370.png" class="img-fluid thumb-img-landscape" alt="">
			</div> -->
			<div class="col-4">
				<p class="text-bold mb-0">Start</p>
				<p class="mb-0 time">{{ $start['time'] }}</p>	
				<p class="mb-0">Vehicle Mileage: {{number_format($start['mileage'], 2)}} km</p>
				<p>{{$start['fulladdress']}}</p>
			</div>
			<div class="col-4">
				<p class="text-bold mb-0">Finish</p>
				<p class="mb-0 time">{{ $finish['time'] }}</p>	
				<p class="mb-0">Vehicle Mileage: {{number_format($finish['mileage'], 2)}} km</p>
				<p>{{$finish['fulladdress']}}</p>
			</div>
			<div class="col-2">
				<p class="text-bold mb-0">Distance</p>
				<p class="mb-0">{{number_format($distance, 2)}} km</p>	
			</div>
			<div class="col-2">
				<p class="text-bold mb-0">Duration</p>
				<p class="mb-0">{{$duration}}</p>	
			</div>
			<div class="col-12">
				<div id="leafMap" style="height: 300px;"></div>
			</div>
			<div class="col-12">
				<!-- <li class="list-group-item p-1 px-2">
					<p class="text-bold mb-0">Time: 25 Aug 2025 07:31:08</p>
					<p class="text-muted mb-0 dtl-text">-8.55387 - 125.542409</p>
					<p class="text-muted mb-0 dtl-text">Avenida Luro Mata, Praia dos Coqueiros, Bebunuk, Dom Aleixo, Dili, Timor-Leste;2066973</p>
					<p class="mb-0 dtl-text">Current speed: 7km/h</p>
				</li> -->
				@foreach ($list as $item)
					<!-- <li class="list-group-item p-1 px-2">
						<p class="text-bold mb-0">Time: {{date('d-m-Y H:i:s', $item->crt_s)}}</p>
						<p class="text-muted mb-0 dtl-text">Vehicle Mileage: {{number_format($item->vhc_milleage, 2)}} km</p>
						<p class="text-muted mb-0 dtl-text">{{number_format($item->latitude, 6)}} - {{number_format($item->longitude, 6)}}</p>
						<p class="text-muted mb-0 dtl-text">{{urldecode($item->fulladdress)}}</p>
						<p class="text-muted mb-0 dtl-text">Current speed: {{number_format($item->speed, 2)}} km/h</p>
					</li> -->
					<li class="list-group-item p-1 px-2">
						<div class="row">
							<div class="col-4">
								<p class="text-bold mb-0">Time: <span class="time">{{ $item->crt_s }}</span></p>
								<p class="text-muted mb-0 dtl-text">Vehicle Mileage: {{number_format($item->vhc_milleage, 2)}} km</p>
								<p class="text-muted mb-0 dtl-text">Current speed: {{$item->speed}} km/h</p>
							</div>
							<div class="col-8">
								<p class="text-muted mb-0 dtl-text">{{number_format($item->latitude, 6)}} - {{number_format($item->longitude, 6)}}</p>
								<p class="text-muted mb-0 dtl-text">{{urldecode($item->fulladdress)}}</p>
							</div>
						</div>
					</li>

				@endforeach
			</div>
		</div>
		<div class="modal-footer">
			<!-- <button class="btn btn-sm btn-danger ms-auto" id="btnDownloadReport">Download Report</button> -->
			<!-- @can('vehicle.delete')
				<button type="button" id="btnDelVhc_updt" class="btn btn-sm btn-warning">Delete ?</button>
			@endcan
			<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
			@can('vehicle.edit')
				<button id="btnSubmitEdtVhc" type="button" class="btn btn-sm btn-danger">Update data</button>
			@endcan
			<div id="edt-btnSubmitEdtVhc" class="d-none">
				<div class="spinner-border" role="status">
					<span class="visually-hidden">Loading...</span>
				</div>
			</div> -->
		</div>
	</div>
</div>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
    <!-- <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script> -->

<script>
	$(document).ready(function(){
		$('.time').each(function () {
			const unix = $(this).text().trim();
			$(this).text(moment.unix(unix).format('DD MMM YYYY HH:mm:ss'));
		});


		setTimeout(() => {
			map.invalidateSize();            // force Leaflet to recalc
			map.fitBounds(polyline.getBounds());
		}, 200);

		const linesData = (@json($list));

		// 1) Initialize map
		const map = L.map("leafMap").setView([-8.90507, 125.9945732], 10)

		// 2) Add tile layer
		L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
			maxZoom: 20,
			crossOrigin: true
		}).addTo(map);

		// // // 3) Coordinates (Lat, Lng) for polyline
		const points = linesData
			.filter(p => p.latitude && p.longitude)
			.map((point) => [point.latitude, point.longitude])

		// // 4) Add polyline
		const polyline = L.polyline(points, {
			color: "blue",
			weight: 5,
			opacity: 0.7,
			smoothFactor: 0,
			noClip: true,
		}).addTo(map)
		
		// start and finish point
		const startIcon = L.icon({
			iconUrl: "{{ asset('images/start.png') }}",
			iconSize: [30, 30],
			iconAnchor: [15, 28], // lb, rt, bottom, rb. Positive
		})
		L.marker(points[0], {icon: startIcon}).addTo(map)

		const finishIcon = L.icon({
			iconUrl: "{{ asset('images/finish.png') }}",
			iconSize: [30, 30],
			iconAnchor: [15, 28], // lb, rt, bottom, rb. Positive
		})
		L.marker(points[points.length - 1], {icon: finishIcon}).addTo(map)

		// 5) Auto-fit map to polyline bounds
		map.fitBounds(polyline.getBounds())

		// download pdf
		$(document).on('click', '#btnDownloadReport', function () {
			const viewPdf = document.getElementById("viewPdf");

		// find overlay svg (the one holding polylines)
		const overlaySvg = document.querySelector('.leaflet-overlay-pane svg');
		let originalTransform = '';
		if (overlaySvg) {
			originalTransform = overlaySvg.style.transform;
			overlaySvg.style.transform = 'none';
		}
		
			html2canvas(viewPdf, { 
				scale: 2, 
				useCORS: true, 
				logging: true
			}).then(canvas => {
				const imgData = canvas.toDataURL('image/png');
				const { jsPDF } = window.jspdf;

				const pdf = new jsPDF('p', 'mm', 'a4');
				const pageWidth = pdf.internal.pageSize.getWidth();
				const pageHeight = pdf.internal.pageSize.getHeight();

				const imgWidth = pageWidth - 20; // margin
				const imgHeight = canvas.height * imgWidth / canvas.width;

				let position = 10;

				// 👉 Handle multipage content
				let heightLeft = imgHeight;
				while (heightLeft > 0) {
					pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
					heightLeft -= pageHeight;
					if (heightLeft > 0) {
						pdf.addPage();
						position = 0;
					}
				}
		
				pdf.save(`{{$nopol1}} Trip Report {{$start['time']}}.pdf`);

			});
		});

	});
</script>