<!DOCTYPE html>
<html lang="\en">

<head>
	<title>Movana Fleet Management | @yield('title', 'App')</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<link rel="icon" type="image/x-icon" href="{{ asset('images/favicon.png') }}">
	<link href="{{ asset('fonts/stylesheet.css') }}" rel="stylesheet">
	<link href="{{ asset('assets/vendor/bootstrap-5.0.2-dist/css/bootstrap.css') }}" rel="stylesheet">
	<link href="{{ asset('assets/vendor/leaflet-1.7.1/leaflet.css') }}" rel="stylesheet">
	<link href="{{ asset('assets/vendor/ionicons-v2.0-1/css/ionicons.css') }}" rel="stylesheet">
	<link href="{{ asset('assets/vendor/select2-4.1.0-rc.0/dist/css/select2.css') }}" rel="stylesheet">
	<link href="{{ asset('assets/vendor/DataTables/datatables.css') }}" rel="stylesheet">
	<link href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
	<link href="{{ asset('assets/css/meus.css') }}" rel="stylesheet">
	<link rel="stylesheet"
		href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css"
		integrity="sha512-f0tzWhCwVFS3WeYaofoLWkTP62ObhewQ1EZn65oSYDZUg1+CyywGKkWzm8BxaJj5HGKI72PnMH9jYyIFz+GH7g=="
		crossorigin="anonymous" referrerpolicy="no-referrer" />
	<style>
		.landscape-photo {
			max-height: max(21vh, 210px);
		}

		.thumb-img-table {
			width: max(4vw, 75px);
			height: max(4vh, 55px);
			object-fit: cover;
		}

		.thumb-img-small {
			width: max(2vw, 45px);
			height: max(2vh, 35px);
			object-fit: cover;
		}

		.thumb-img-landscape {
			width: max(6vw, 275px);
			height: max(5vh, 125px);
			object-fit: cover;
		}

		.thumb-img-landscape-med {
			width: max(4vw, 125px);
			height: max(2vh, 65px);
			object-fit: contain;
		}
	</style>
	@yield('customcss')
</head>

{{--

<body onload="startTime()"> --}}

	<body>
		<div class="container-fluid">
			<div class="content">
				<div class="card">
					<div class="card-header">
						<h4>{{$nopol1}}</h4>
					</div>
					<div class="card-body">
						<div class="row head-text" id="viewPdf">
							<div class="col-6">
								<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-6">
								<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-4">
								<p class="text-bold mb-0">Distance</p>
								<p class="mb-0">{{number_format($distance, 2)}} km</p>
							</div>
							<div class="col-4">
								<p class="text-bold mb-0">Duration</p>
								<p class="mb-0">{{$duration}}</p>
							</div>
							<div class="col-4">
								<p class="text-bold mb-0">Fuel consumption</p>
								<p class="mb-0">{{$fuel_consumed / 10}} L</p>
							</div>
							<div class="col-12 mt-2">
								<div id="leafMap" style="height: 400px;"></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_d)}}</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 dtl-text">Time: <span
														class="time">{{ $item->crt_d }}</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>
				</div>
			</div>
		</div>

		<script src="{{ asset('assets/vendor/jquery-3.6.0/jquery-3.6.0.js') }}"></script>
		<script src="{{ asset('assets/vendor/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js') }}"></script>
		<script src="{{ asset('assets/js/moment.min.js') }}"></script>
		<script src="{{ asset('assets/js/helper.js') }}"></script>

		<script src="{{ asset('assets/js/load-image.all.min.js') }}"></script>
		<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
			integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
		<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
		<script src="{{ asset('assets/vendor/printThis.js') }}"></script>

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

				let coords
				setTimeout(async () => {
					map.invalidateSize();            // force Leaflet to recalc
					map.fitBounds(polyline.getBounds());
					// map.fitBounds(await coords.map(c => L.latLng(c[0], c[1])));
				}, 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: 'red',
					weight: 3,
					opacity: 0.7,
					smoothFactor: 1
				})
				// .addTo(map);

				function chunkArray(arr, size) {
					const result = [];
					for (let i = 0; i < arr.length; i += size) {
						result.push(arr.slice(i, i + size));
					}
					return result;
				}

				function fetchOsrm(points) {
					const coords = points;
					const hints = ";".repeat(points.length - 1);

					const body = {
						coordinates: coords,
						overview: "false",
						alternatives: "false",
						steps: "true",
						hints: hints
					};

					let config = {
						method: 'post',
						maxBodyLength: Infinity,
						url: 'https://brilianapps.britimorleste.tl/osrm-backend/post-route/v1/driving/',
						headers: {
							'Content-Type': 'application/json'
						},
						data: body
					};

					return axios.request(config)
						.then((response) => {
							return response.data;
						})
						.catch((error) => {
							console.error("Error:", error.message);
							return null;
						});
				}

				function decodeOSRMGeometry(encoded) {
					const coordinates = [];
					let index = 0,
						lat = 0,
						lng = 0;

					while (index < encoded.length) {
						let result = 1,
							shift = 0,
							b;
						do {
							b = encoded.charCodeAt(index++) - 63 - 1;
							result += b << shift;
							shift += 5;
						} while (b >= 0x1f);
						lat += (result & 1 ? ~(result >> 1) : result >> 1);

						result = 1;
						shift = 0;
						do {
							b = encoded.charCodeAt(index++) - 63 - 1;
							result += b << shift;
							shift += 5;
						} while (b >= 0x1f);
						lng += (result & 1 ? ~(result >> 1) : result >> 1);

						coordinates.push([lat / 1e5, lng / 1e5]);
					}

					return coordinates;
				}

				async function getCoordinates(points) {
					const chunkSize = 500;
					const chunks = chunkArray(points, chunkSize); // Split the points array into chunks of 500
					let allCoords = [];

					for (const chunk of chunks) {
						const osrm = await fetchOsrm(chunk); // Fetch OSRM data for each chunk

						if (!osrm) {
							console.log("OSRM failed for chunk");
							return;
						}

						const coords = osrm.routes[0].legs.flatMap(leg =>
							leg.steps.flatMap(step =>
								decodeOSRMGeometry(step.geometry)
							)
						);

						allCoords = allCoords.concat(coords); // Combine the result
					}

					// Now add the polyline to the map
					L.polyline(allCoords, {
						color: "#2980B9",
						weight: 3,
						opacity: 0.8
					}).addTo(map);
					// map.fitBounds(allCoords.map(c => L.latLng(c[0], c[1])));
				}

				// Usage: Pass the array of coordinates to the function
				getCoordinates(points);


				// 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
				window._downloadReportBound ||= (
					$(document).on('click', '#btnDownloadReport', function () {
						$('#viewPdf').printThis({
							debug: false,               // show the iframe for debugging
							importCSS: true,            // copy linked styles
							importStyle: true,          // copy inline styles
						});

						// 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`);

						// });
					}),
					true
				);

			});
		</script>

	</body>

</html>