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

@php
    $user_role = Auth::user()->role;
@endphp

@extends('app.app')

@section('title')
    Vehicles
@endsection

@section('customcss')
@endsection

@section('content')
    <div class="container-fluid">
        <div class="content">
            <div class="card">
                <div class="card-header">
                    <div class="row d-flex align-items-center">
                        <div class="col-3">
                            <p class="card-title text-bold mb-0">Vehicle Trip Report</p>
                        </div>
                        @if ($user_role == \App\Models\Users::ROLE_VENDOR || $user_role == \App\Models\Users::ROLE_ADMIN)
                            @can('vehicle.create')
                                <!-- <div class="col text-end">
                                    <button id="btnMdlNewVhc" class="btn btn-sm btn-danger">Add New Vehicle</button>
                                </div> -->
                            @endcan

                            {{-- <div class="col-auto text-end ps-0">
                                <button class="btn btn-sm btn-danger">Upload</button>
                            </div> --}}
                        @endif
                        <div class="col-auto text-end ps-0">
                            <!-- <button class="btn btn-sm btn-danger">Download</button> -->
                        </div>
                    </div>
                </div>
                <div class="card-body">
					<!-- filter -->
					<div class="row">
						<div class="col-2">
							<div class="form-group">
								<label class="text-muted">From</label>
								<!-- default today -->
								<!-- <input type="date" class="form-control" id="tgl0" value="{{ date('Y-m-d') }}"> -->
								<input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}">
							</div>
						</div>
						<div class="col-2">
							<div class="form-group">
								<label class="text-muted">To</label>
								<input class="form-control" id="tgl1" value="{{ date('d-m-Y 23:59') }}">
							</div>
						</div>
						<div class="col-2">
							<div class="form-group">
								<label class="text-muted">License Plate</label>
								<select name="license_plate" class="form-control" id="filterNopol">
									<option value="">-- All --</option>
									@foreach ($listNopol as $nopol)
										<option value="{{ $nopol->id }}">{{ $nopol->nopol1 }}</option>
									@endforeach
								</select>
							</div>
						</div>
						<div class="col-1 d-flex align-items-end">
							<button class="btn btn-sm btn-primary" id="submitFilter">Submit</button>
						</div>
						<div class="col-5 d-flex align-items-end">
							<button class="btn btn-sm btn-danger ms-auto" id="btnDownloadReport">Download Report</button>
						</div>
					</div>
					</div>
                    <div class="table-responsive p-3">
                        <table id="tVehicleTrips" class="table table-hover dataTable w-100">
                            <thead>
                                <tr class="">
                                    <th class="">Vehicle ID</th>
                                    <!-- <th class="text-center">Action</th> -->
                                    <th class="">Vehicle Name</th>
                                    <th class="">License Plate Number</th>
                                    <th class="">Number of Trip</th>
                                    <th class="">Total Mileage (km)</th>
                                    <th class="">Trip #</th>
                                    <th class="">Start</th>
                                    <th class="">Finish</th>
                                    <th class="">Mileage (km)</th>
                                </tr>
                            </thead>
                            <!-- <tbody>
								<tr>
									<td>24-679</td>
									<td>24-679</td>
									<td>26</td>
									<td>442.3</td>
								</tr>
								<tr>
									<td>24-682</td>
									<td>24-682</td>
									<td>28</td>
									<td>312.7</td>
								</tr>
								<tr>
									<td>24-877</td>
									<td>24-877</td>
									<td>15</td>
									<td>276.4</td>
								</tr>
								<tr>
									<td>A.16-347</td>
									<td>A.16-347</td>
									<td>37</td>
									<td>543.2</td>
								</tr>
								<tr>
									<td>AL2025-B21</td>
									<td>AL2025-B21</td>
									<td>18</td>
									<td>295.4</td>
								</tr>
								<tr>
									<td>B.16-542</td>
									<td>B.16-542</td>
									<td>32</td>
									<td>478.2</td>
								</tr>
								<tr>
									<td>B.24-264</td>
									<td>B.24-264</td>
									<td>24</td>
									<td>188.4</td>
								</tr>
								<tr>
									<td>B.24-274</td>
									<td>B.24-274</td>
									<td>33</td>
									<td>440.1</td>
								</tr>
								<tr>
									<td>Ford Ranger</td>
									<td>26-199</td>
									<td>30</td>
									<td>631.4</td>
								</tr>
								<tr>
									<td>Nissan AD</td>
									<td>B.10-517</td>
									<td>27</td>
									<td>375.9</td>
								</tr>
								<tr>
									<td>Triton</td>
									<td>A.29-127</td>
									<td>26</td>
									<td>508.2</td>
								</tr>
                            </tbody> -->
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<!-- modal -->
@endsection

@section('customjs')
    <script src="{{ asset('assets/js/load-image.all.min.js') }}"></script>
	<!-- DataTables Buttons + JSZip (for Excel export) -->
	<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
	<script>
        'use strict';
        const State = {
            file_jimp_worker: "{{ asset('assets/js/worker/jimp.js') }}",
            storage_lara: "{{ asset('storage') }}/",
            dvc_type: {
                built_in: "{{ \App\Models\Devices::TYPE_BUILT_IN }}",
                portable: "{{ \App\Models\Devices::TYPE_PORTABLE }}",
            },
        };

        const Wrapper = {
            activate: function() {
                Wrapper.init();
                Wrapper.event();
                DTable.activate();

			},
			init: ()=>{
				$('#tgl0, #tgl1').datetimepicker({
					format:'d-m-Y H:i',
					defaultTime:'00:00',
					closeOnDateSelect: true,
					// mask:true
				});

			},
            event: function() {
                $('#submitFilter').on('click', function() {
					DTable.reload();
				});
				// Trigger export on external button click
				$('#btnDownloadReport').on('click', function() {
					DTable.table.button('.buttons-excel').trigger();
				});
            },
        };

        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;
				}

				let mileageSum = {};
				let tripCount = {};


				DTable.table = $('#tVehicleTrips').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_report_vehicle_trips_list') }}?
								cptid=${AppState.current_company}
								&from_date=${moment($('#tgl0').val(), "DD-MM-YYYY HH:mm").unix()}
								&to_date=${moment($('#tgl1').val(), "DD-MM-YYYY HH:mm").unix()}
								&vid=${$('#filterNopol').val() || ''}`,
							type: 'GET',
							success: function(json) {
								// Precompute totals by vhc_id

								json.data.forEach(row => {
									const id = row.id; // vhc_id
									if (!mileageSum[id]) {
										mileageSum[id] = 0;
										tripCount[id] = 0;
									}
									mileageSum[id] += parseFloat(row.milleage || 0);
									tripCount[id] += 1;
								});
								callback(json);
							},
							error: function(xhr, status, error) {
								if (status !== 'abort') {
									console.error("AJAX error:", error);
								}
							},
							complete: function() {
								DTable.lastAjax = null;
							}
						});
					},
                    deferRender: true,
					columns: [
						{ data: 'id', visible: false }, // vhc_id
						{
							data: 'name',
							className: 'text-start text-nowrap',
							visible: true,
							orderable: true,
							searchable: true,
						},
						{
							data: 'nopol1',
							className: 'text-start',
							visible: true,
							orderable: true,
							searchable: true,
						},
 						{ data: "id", className: 'text-end'},
						{ data: "id", className: 'text-end'},
						{ data: "trip_id", className: 'text-end'},
						{ 
							data: 'start', 
							render: (data, type, row, meta) => {
								// let addr = row
								return `
									${moment.unix(data).format('DD MMM YYYY HH:mm:ss')}<br>
									${Helper.shortenText(decodeURIComponent(row.startLoc || 'address'), 255) || "-"}
								`;
							} 
						},
						{ 
							data: 'finish', 
							render: (data, type, row, meta) => {
								// let addr = row
								return `
									${moment.unix(data).format('DD MMM YYYY HH:mm:ss')}<br>
									${Helper.shortenText(decodeURIComponent(row.finishLoc || 'address'), 255) || "-"}
								`;
							} 
						},
						{ 
							data: 'milleage', 
							className: 'text-end', render: function(data, type, row, meta) {
								return (data === null) ? '0' : parseFloat(data).toFixed(2);
							}
						},
					],
					paging: false,
					drawCallback: function (settings) {
						const api = this.api();
						const rows = api.rows({ page: 'current' }).nodes();
						let last = null;

						api.column(0, { page: 'current' }) // vhc_id col
							.data()
							.each(function (group, i) {
								if (last !== group) {
									// count how many rows this vhc_id spans
									const rowspanCount = api
										.column(0, { page: 'current' })
										.data()
										.filter(function (d) {
											return d === group;
										}).length;

									// merge vhc_id
									$(rows).eq(i).find('td:eq(0)').attr('rowspan', rowspanCount);
									$(rows).eq(i).find('td:eq(1)').attr('rowspan', rowspanCount);
									$(rows).eq(i).find('td:eq(2)').attr('rowspan', rowspanCount);
									$(rows).eq(i).find('td:eq(3)').attr('rowspan', rowspanCount);

									// fill trip count
									$(rows).eq(i).find('td:eq(2)')
										.attr('rowspan', rowspanCount)
										.text(tripCount[group]);

									// fill mileage sum
									$(rows).eq(i).find('td:eq(3)')
										.attr('rowspan', rowspanCount)
										.text(mileageSum[group].toFixed(2));

									last = group;
								} else {
									// remove duplicate cells
									$(rows).eq(i).find('td:eq(0)').remove();
									$(rows).eq(i).find('td:eq(0)').remove();
									$(rows).eq(i).find('td:eq(0)').remove();
									$(rows).eq(i).find('td:eq(0)').remove();
								}
							});
						},
					buttons: [
						{
							extend: 'excelHtml5',
							title: `Vehicle Trip Report - ${moment(safeVal('#tgl0')).format('DD MMM YYYY')} to ${moment(safeVal('#tgl1')).format('DD MMM YYYY')}`,
							className: 'd-none', // hide default button
							exportOptions: {
								columns: ':visible:not(:first-child)' // 🔹 exclude first column
							}
						}
					]
				});
            },
        };

        function safeVal(selector) {
            const val = $(selector).val();
            return (val === undefined || val === null || val === '') ? null : val;
        }

        const Filter = {
            activate: function() {
                Filter.event();
            },
            event: function() {},
            triggerFilterCompany: function() {
                DTable.reload();
            },
        }

        async function convertImgHtmlToFile(imgHtml, imgWidth, imgHeight, mimeType, fileName) {
            return new Promise((resolve, reject) => {
                try {
                    let canvas = document.createElement("canvas")

                    // Draw image to canvas.
                    canvas.width = imgWidth
                    canvas.height = imgHeight
                    let ctx = canvas.getContext('2d')
                    ctx.drawImage(imgHtml, 0, 0)

                    // Convert canvas to ImageState.
                    let imageData = ctx.getImageData(0, 0, imgWidth, imgHeight)
                    // console.log(imageState.data.byteLength + ' bytes.')

                    // Convert canvas to Blob
                    canvas.toBlob((blob) => {
                        let newReader = new FileReader();
                        newReader.addEventListener('loadend', () => {
                            // Convert canvas to ArrayBuffer
                            let arrayBuffer = newReader.result
                            // console.log(arrayBuffer.byteLength + ' bytes.')

                            // Convert ArrayBuffer to Blob
                            // let blob = new Blob([arrayBuffer], {type: mimeType})

                            // Dispay Blob content in an Image.
                            // console.log(URL.createObjectURL(blob))

                            // Generate as file
                            let newFile = new File([arrayBuffer], fileName, {
                                type: mimeType,
                                lastModified: new Date(),
                                size: arrayBuffer.byteLength,
                            })
                            resolve(newFile)
                        });
                        newReader.readAsArrayBuffer(blob);
                    }, mimeType);
                } catch (e) {
                    reject(e.message)
                }
            });
        }

        Wrapper.activate();
    </script>
@endsection