@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 Trips 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>
								<input type="date" class="form-control"id="tgl0" value="2025-08-01">
							</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="2025-08-28">
							</div>
						</div>
						<div class="col-2 d-flex align-items-end">
							<!-- <button class="btn btn-sm btn-danger">Filter</button> -->
                            <button class="btn btn-sm btn-danger">Download</button>
						</div>

					</div>
					</div>
                    <div class="table-responsive p-2">
                        <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 Trips</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>
    <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() {
                $('#add-device_id').select2({
                    dropdownParent: $('#mdlNewVhc'),
                });
                $('#add-brand').select2({
                    dropdownParent: $('#mdlNewVhc'),
                });
                $('#add-type').select2({
                    dropdownParent: $('#mdlNewVhc'),
                });
                $('#add-model').select2({
                    dropdownParent: $('#mdlNewVhc'),
                });
                $('#add-dcurrent').select2({
                    dropdownParent: $('#mdlNewVhc'),
                });
                $('#add-dassign').select2({
                    dropdownParent: $('#mdlNewVhc'),
                });
                $('#add-vendor_id').select2({
                    dropdownParent: $('#mdlNewVhc'),
                });

                $('#edt-device_id').select2({
                    dropdownParent: $('#mdlEdtVhc'),
                });
                $('#edt-brand').select2({
                    dropdownParent: $('#mdlEdtVhc'),
                });
                $('#edt-type').select2({
                    dropdownParent: $('#mdlEdtVhc'),
                });
                $('#edt-model').select2({
                    dropdownParent: $('#mdlEdtVhc'),
                });
                $('#edt-dcurrent').select2({
                    dropdownParent: $('#mdlEdtVhc'),
                });
                $('#edt-dassign').select2({
                    dropdownParent: $('#mdlEdtVhc'),
                });
                $('#edt-vendor_id').select2({
                    dropdownParent: $('#mdlEdtVhc'),
                });
            },
        };

        const DTable = {
            activate: function() {
                DTable.reload();
            },
            reload: function() {
                $('#tVehicleTrips').DataTable();
                // if (Driver.Table.firstInitDataTable == 1) { loadTableSkeletonLoading() } else { Driver.Table.firstInitDataTable = 1; }
                // $('#tVehicles').DataTable({
                //     processing: true,
                //     serverSide: false,
                //     bLengthChange: true,
                //     deferRender: true,
                //     destroy: true,
                //     ajax: {
                //         url: "{{ route('api_report_vehicle_trips_list') }}?cptid=" + AppState.current_company,
                //         type: 'GET',
                //         complete: function() {
                //             // removeTableSkeletonLoading()
                //         },
                //     },
                //     deferRender: true,
                //     columns: [{
                //             data: 'DT_RowIndex',
                //             className: 'text-end',
                //             visible: true,
                //             orderable: true,
                //             searchable: true,
                //         },
                //         {
                //             data: 'action',
                //             className: 'text-center',
                //             visible: true,
                //             orderable: true,
                //             searchable: true,
                //             render: function(data, type, row, meta) {
                //                 let action = `
				// 					<a href="#" class="text-decoration-none me-1 btnEdtVhc">
				// 						<span class="icon ion-eye fz-16"></span>
				// 					</a>
				// 				`;
                //                 // <a href="#" class="text-decoration-none text-danger btnDelVhc">
                //                 //     <span class="icon ion-trash-b fz-16"></span>
                //                 // </a>
                //                 return action;
                //             }
                //         },
                //         {
                //             data: 'name',
                //             className: 'text-start text-nowrap',
                //             visible: true,
                //             orderable: true,
                //             searchable: true,
                //             render: function(data, type, row, meta) {
                //                 return `
                //                     <img src="${State.storage_lara}${row.fvhc_img}" class="img-fluid thumb-img-table" /><br>
                //                     ${row.nopol1} ${row.nopol2} ${row.nopol3}
                //                 `;
                //             },
                //             createdCell: function(td, cellData, rowData, row, col) {
                //                 $(td).attr('data-vid', rowData.vid);
                //                 $(td).attr('data-name', rowData.name);
                //                 $(td).attr('data-nopol1', rowData.nopol1);
                //                 $(td).attr('data-nopol2', rowData.nopol2);
                //                 $(td).attr('data-nopol3', rowData.nopol3);
                //             },
                //         },
                //         // {
                //         //     data: 'stnk_img',
                //         //     className: 'text-start text-nowrap',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         // exp: ${row.stnk_exp?.split('-').reverse().join('-') || ''}
                //         //         return `
                //     //             <img src="${State.storage_lara}${data}" class="img-fluid thumb-img-table" /><br>
                //     //             ${row.nopol1} ${row.nopol2} ${row.nopol3}<br>
                //     //             exp: ${moment(row.stnk_exp).format('DD MMM YYYY') || '-'}
                //     //         `;
                //         //     },
                //         // },
                //         {
                //             data: 'tax_exp',
                //             className: 'text-end text-nowrap',
                //             visible: true,
                //             orderable: true,
                //             searchable: true,
                //             render: function(data, type, row, meta) {
                //                 // return (`${data?.split('-').reverse().join('-') || '-'}`);
                //                 return (`${moment(data).format('DD MMM YYYY') || '-'}`);
                //             },
                //         },
                //         // {
                //         //     data: 'kir_exp',
                //         //     className: 'text-end text-nowrap',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return (`${moment(data).format('DD MMM YYYY') || '-'}`);
                //         //     },
                //         // },
                //         {
                //             data: 'crt',
                //             className: 'text-end text-nowrap',
                //             visible: true,
                //             orderable: true,
                //             searchable: true,
                //             render: function(data, type, row, meta) {
                //                 return moment.unix(data).format('DD MMM YYYY');
                //             },
                //         },
                //         @if ($user_role != \App\Models\Users::ROLE_VENDOR)
                //             {
                //                 data: 'device_id',
                //                 className: 'text-end text-nowrap',
                //                 visible: true,
                //                 orderable: true,
                //                 searchable: true,
                //                 render: function(data, type, row, meta) {
                //                     return `<span class="d-none">${data}</span>` + Helper.splitEvery4Char(`${data}`);
                //                 },
                //             },
                //         @endif
                //         // {
                //         //     data: 'dc_fullname',
                //         //     className: 'text-start text-nowrap',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return (
                //         //             `${data}<br>` +
                //         //             `<a href="tel:0${row.dc_phone}">${Helper.splitEvery4Char('0'+row.dc_phone)}</a>` +
                //         //             ` || ` +
                //         //             `<a href="https://api.whatsapp.com/send/?phone=62${row.dc_phone}&text=Halo&app_absent=0" class="bg-light" target="_blank"><i class="text-success ion-social-whatsapp"></i></a>`
                //         //         );
                //         //     },
                //         // },
                //         // {
                //         //     data: 'da_fullname',
                //         //     className: 'text-start text-nowrap',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return (
                //         //             `${data}<br>` +
                //         //             `<a href="tel:0${row.da_phone}">${Helper.splitEvery4Char('0'+row.da_phone)}</a>` +
                //         //             ` || ` +
                //         //             `<a href="https://api.whatsapp.com/send/?phone=62${row.da_phone}&text=Halo&app_absent=0" class="bg-light" target="_blank"><i class="text-success ion-social-whatsapp"></i></a>`
                //         //         );
                //         //     },
                //         // },
                //         {
                //             data: 'type_name',
                //             className: 'text-start text-nowrap',
                //             visible: true,
                //             orderable: true,
                //             searchable: true,
                //             render: function(data, type, row, meta) {
                //                 // return (`${row.brand_name}<br>-<br>${data}`);
                //                 return data;
                //             },
                //         },
                //         {
                //             data: 'vyear',
                //             className: 'text-end',
                //             visible: true,
                //             orderable: true,
                //             searchable: true,
                //             render: function(data, type, row, meta) {
                //                 return (`${(data || '-')}`);
                //             },
                //         },
                //         // {
                //         //     data: 'cc',
                //         //     className: 'text-start',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return (`${(data || '0')} CC`);
                //         //     },
                //         // },
                //         // {
                //         //     data: 'vin',
                //         //     className: 'text-start text-nowrap',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return (`${Helper.splitEvery4Char(data || '-')}`);
                //         //     },
                //         // },
                //         // {
                //         //     data: 'en',
                //         //     className: 'text-start text-nowrap',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return (`${Helper.splitEvery4Char(data || '-')}`);
                //         //     },
                //         // },
                //         // {
                //         //     data: 'vcolor',
                //         //     className: 'text-start',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return (`${(data || '-')}`);
                //         //     },
                //         // },
                //         // {
                //         //     data: 'fuel_type',
                //         //     className: 'text-start',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return (`${(data || '-')}`);
                //         //     },
                //         // },
                //         // {
                //         //     data: 'tnkb_color',
                //         //     className: 'text-start text-nowrap',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return (`${(data || '-')}`);
                //         //     },
                //         // },
                //         // {
                //         //     data: 'regis_year',
                //         //     className: 'text-end',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return (`${(data || '-')}`);
                //         //     },
                //         // },
                //         // {
                //         //     data: 'speed_limit',
                //         //     className: 'text-end',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         // },
                //         // {
                //         //     data: 'fuel_capacity',
                //         //     className: 'text-end',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         // },
                //         // {
                //         //     data: 'fuel_drop_treshold',
                //         //     className: 'text-end',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         // },
                //         // {
                //         //     data: 'max_pressure',
                //         //     className: 'text-end',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         // },
                //         // {
                //         //     data: 'alert_zones',
                //         //     className: 'text-start',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         // },
                //         // {
                //         //     data: 'is_track_holiday_text',
                //         //     className: 'text-start',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         // },
                //         // {
                //         //     data: 'track_schedule',
                //         //     className: 'text-end',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         // },
                //         {
                //             data: 'sum_milleage',
                //             className: 'text-end',
                //             visible: true,
                //             orderable: true,
                //             searchable: true,
                //             render: function(data, type, row, meta) {
                //                 return Number(data).toFixed(2);
                //             }
                //         },
                //         // {
                //         //     data: 'cameras',
                //         //     className: 'text-start',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         // },
                //         {
                //             data: 'company_name',
                //             className: 'text-start text-nowrap',
                //             visible: true,
                //             orderable: true,
                //             searchable: true,
                //             render: function(data, type, row, meta) {
                //                 return data || '-';
                //             }
                //         },
                //         // {
                //         //     data: 'group_name',
                //         //     className: 'text-start text-nowrap',
                //         //     visible: true,
                //         //     orderable: true,
                //         //     searchable: true,
                //         //     render: function(data, type, row, meta) {
                //         //         return data || 'All Group';
                //         //     }
                //         // },
                //     ],
                // });
            },
        };

        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