@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') }}">
							</div>
						</div>
						<div class="col-2">
							<div class="form-group">
								<label class="text-muted">To</label>
								<input type="date" class="form-control" id="tgl1" value="{{ date('Y-m-d') }}">
							</div>
						</div>
						<div class="col-8 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 ">
                            <thead>
                                <tr class="">
                                    <!-- <th class="">#</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 Milage (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.event();
                DTable.activate();

			},
            event: function() {
                $('#tgl0, #tgl1').on('change', 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();
				}

				DTable.table = $('#tVehicleTrips').DataTable({
					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(safeVal('#tgl0')).startOf('day').unix()}
								&to_date=${moment(safeVal('#tgl1')).endOf('day').unix()}`,
							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: 'name',
							className: 'text-start text-nowrap',
							visible: true,
							orderable: true,
							searchable: true,
						},
						{
							data: 'nopol1',
							className: 'text-start',
							visible: true,
							orderable: true,
							searchable: true,
						},
						{
							data: 'numOfTrip',
							className: 'text-end',
							visible: true,
							orderable: true,
							searchable: true,
						},
						{
							data: 'total_milleage',
							className: 'text-end',
							visible: true,
							orderable: true,
							searchable: false,
							render: function(data, type, row, meta) {
								return (data === null) ? '0' : parseFloat(data).toFixed(2);
							}
						},
					],
					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
						}
					]
				});
            },
        };

        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