@extends('layouts.master')

@section('title', 'Laporan Parkir ' . ($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 Parkir<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>Alamat</th>
                            <th>Mulai Dari</th>
                            <th>Sampai Dengan</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({
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
        data: {!! json_encode($datatables ?? []) !!},
        columns : [
            { data : 'gps_name' },
            { data : 'addrs' },
            {
                data: 'from_time',
                render(data){
                    return moment().format('DD MMM YYYY HH:mm');
                }
            },
            {
                data: 'from_time',
                render(data){
                    return moment().format('DD MMM YYYY HH:mm');
                }
            },
            {
                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