@extends('layouts.master')

@section('title', 'Laporan Mudah ' . ($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 Mudah<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>Total Durasi Mesin Hidup</th>
                            <th>Jarak Tempuh</th>
                            <th>Kecepatan Maksimal</th>
                            <th>Estimasi Bahan Bakar</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({
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
        data: {!! json_encode($datatables ?? []) !!},
        columns : [
            { data : 'nopol' },
            {
                data : 'dur',
                render(data){
                    return moment.duration(data, 'minutes').locale('id').humanize();
                }
            },
            {
                data : 'dista',
                render(data){
                    return `${data} Km`;
                }
            },
            {
                data : 'max',
                render(data){
                    return `${data} Km/Jam`;
                }
            },
            {
                data : 'fuel',
                render(data){
                    return `${data} Liter`;
                }
            },
        ],
        initComplete(){
            this.api().buttons().container().appendTo(`#table-button-container`);
        }
    });

});
</script>
@endPush