gps-frontend/resources/views/menu_v1/_userLogs.blade.php

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

	#viewPdf {
		display: flex;
		justify-content: center;
		width: 794px;
		/* height: auto; */
		max-width: 100%; /* Ensures it is responsive */
	}
	/* .modal-dialog{
		width: 794px;
	} */

</style>


<div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
	<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="mdlDetailTripLabel">{{$user->first_name}} Logs</h5>
			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
			<div class="row">
				<div class="col-4">
					<div class="form-group">
						<label class="text-muted">From</label>
						<!-- default today -->
						<!-- <input class="form-control" id="tgl0" value="02-09-2025 00:00"> -->
						<input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}">
					</div>
				</div>
				<div class="col-4">
					<div class="form-group">
						<label class="text-muted">To</label>
						<!-- <input class="form-control" id="tgl1" value="02-09-2025 23:00"> -->
						<input class="form-control" id="tgl1" value="{{ date('d-m-Y 23:59') }}">
					</div>
				</div>
				<div class="col-4 d-flex align-items-end">
					<button class="btn btn-primary" id="submitFilter">Submit</button>
				</div>
			</div>
			<div class="table-responsive">
				<table id="tLogs" class="table table-hover dataTable w-100">
					<thead>
						<tr class="">
							<th class="">Time</th>
							<th class="">Log</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Close</button>
		</div>
	</div>
</div>

<script>
	$(document).ready(function(){
		$('.time').each(function () {
			const unix = parseInt($(this).text().trim()) + AppState.TIMEFIX;
			$(this).text(moment.unix(unix).format('DD MMM YYYY HH:mm:ss'));
		});
		$('#tgl0, #tgl1').datetimepicker({
			format:'d-m-Y H:i',
			defaultTime:'00:00',
			closeOnDateSelect: true,
			// mask:true
		});

		$('#submitFilter').on('click', function() {
			DTable.reload();
		});
		// $('#submitFilter').trigger('click');

        const DTable = {
			table: null,
    		lastAjax: null, // keep track of the last ajax request
            activate: function() {
                DTable.reload();
            },
            reload: function() {
				// Abort the last request if it's still running
				if (DTable.lastAjax) {
					DTable.lastAjax.abort();
				}
				if (DTable.table) {
					// If table already exists → reload
					DTable.table.ajax.reload();
					return;
				}

				DTable.table = $('#tLogs').DataTable({
					searching: false,   // 🔹 remove search box
					ordering: false,    // 🔹 disable sorting for all columns
					processing: true,
					serverSide: false,
					bLengthChange: true,
					deferRender: true,
					destroy: true,
					ajax: function(data, callback, settings) {
						// Abort previous
						if (DTable.lastAjax) {
							DTable.lastAjax.abort();
						}

						// Fire new request
						DTable.lastAjax = $.ajax({
							url: `{{ route('api_user_logs') }}?
								tgl0=${moment($('#tgl0').val(), "DD-MM-YYYY HH:mm").unix()}
								&tgl1=${moment($('#tgl1').val(), "DD-MM-YYYY HH:mm").unix()}
								&id={{$user->id}}
							`,
							type: 'GET',
							success: function(json) {
								callback(json);
							},
							error: function(xhr, status, error) {
								if (status !== 'abort') {
									console.error("AJAX error:", error);
								}
							},
							complete: function() {
								DTable.lastAjax = null;
							}
						});
					},
                    deferRender: true,
					columns: [
						{
							data: 'crt',
							render: (data, type, row, meta) => {
								// let addr = row
								return `
									${moment.unix(data).format('DD MMM YYYY HH:mm:ss')}<br>
								`;
							} 

						},
						{ data: 'log'},
					],
					paging: false,
				});
            },
        };
		DTable.activate();
	});
</script>