time fix

resources/views/menu_v1/reports/_trip_detail.blade.php

@@ -9,6 +9,9 @@
 	.dtl-text{
 		font-size: 0.75rem;
 	}
+	/* .leaflet-overlay-pane svg {
+		transform: none !important;
+	} */
 </style>
 
 
@@ -18,19 +21,19 @@
 			<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">
+		<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">{{$start['time']}}</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">{{$finish['time']}}</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>
@@ -63,7 +66,7 @@
 					<li class="list-group-item p-1 px-2">
 						<div class="row">
 							<div class="col-4">
-								<p class="text-bold mb-0">Time: {{date('d-m-Y H:i:s', $item->crt_s)}}</p>
+								<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>
@@ -100,6 +103,12 @@
 
 <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());
@@ -113,7 +122,8 @@
 		// 2) Add tile layer
 		L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
 			maxZoom: 20,
-		}).addTo(map)
+			crossOrigin: true
+		}).addTo(map);
 
 		// // // 3) Coordinates (Lat, Lng) for polyline
 		const points = linesData
@@ -147,7 +157,50 @@
 		// 5) Auto-fit map to polyline bounds
 		map.fitBounds(polyline.getBounds())
 
-		console.log("Points:", points)
-		console.log("Bounds:", 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>