@extends('layouts.master')

@section('title', 'Laporan Ringkasan ' . ($report->period ?? ''))

@section('content')
<div class="container-xxl py-3">
    <div class="d-flex justify-content-end align-items-end mb-2">
        <h4 class="fw-bolder mb-0 me-auto">Laporan Ringkasan<br/><small>{{ $report->period ?? '' }}</small></h4>
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <a href="{{ route('reports.index') }}" class="btn btn-light me-2"><i class="fa-solid fa-fw fa-arrow-left"></i> Kembali</a>
            <div id="table-button-container" class="btn-group"></div>
        </div>
    </div>
    <div class="card shadow">
        <div class="card-body">
            <div class="table-responsive">
                <table id="dt" class="table align-middle" width="100%">
                    <thead>
                        <tr>
                            <th>No. Plat</th>
                            <th>Jarak Tempuh</th>
                            <th>Kecepatan Terendah</th>
                            <th>Kecepatan Rata-rata</th>
                            <th>Kecepatan Tertinggi</th>
                            <th>Waktu Mulai</th>
                            <th>Dari Alamat</th>
                            <th>Waktu Selesai</th>
                            <th>Ke Alamat</th>
                            <th>Durasi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<link href="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/datatables.min.css" rel="stylesheet">
@endPush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment-with-locales.min.js" integrity="sha512-4F1cxYdMiAW98oomSLaygEwmCnIP38pb4Kx70yQYqRwLVCs3DbRumfBq82T08g/4LJ/smbFGFpmeFlQgoDccgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/datatables.min.js"></script>
<script>
$(()=>{
    'use strict'
    const table = $('#dt').DataTable({
        ordering:false,
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
        data: {!! json_encode($datatables ?? []) !!},
        columns : [
            { data : 'gps_name', width:'120px' },
            {
                data : 'distance',
                render(data){
                    return `${data} Km`;
                }
            },
            {
                data : 'speed_min',
                render(data){
                    return `${data} Km/Jam`;
                }
            },
            {
                data : 'speed_avg',
                render(data){
                    return `${data} Km/Jam`;
                }
            },
            {
                data : 'speed_max',
                render(data){
                    return `${data} Km/Jam`;
                }
            },
            {
                data: 'from_time',
                render(data){
                    return moment().format('DD MMM YYYY HH:mm');
                }
            },
            {
                data: 'fo_addr'
            },
            {
                data: 'to_time',
                render(data){
                    return moment().format('DD MMM YYYY HH:mm');
                }
            },
            {
                data: 'to_addr'
            },
            {
                data : 'from_time',
                render(data, type, row, meta){
                    let start   = new moment(row.from_time);
                    let end     = new moment(row.to_time);
                    return moment.duration(start.diff(end)).locale('id').humanize();
                }
            }
        ],
        initComplete(){
            this.api().buttons().container().appendTo(`#table-button-container`);
        }
    });

});
</script>
@endPush