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;
	}
</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">
			<!-- <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">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">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: {{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">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(){
		setTimeout(function () {
			window.dispatchEvent(new Event('resize'));
		}, 1000);

		const linesData = (@json($list));
		console.log(linesData);		

		// 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,
		}).addTo(map)

		// // 3) Coordinates (Lat, Lng) for polyline
		const points = linesData.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())


	});
</script>