@extends('layouts.master')

@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">Data Laporan</h4>
        <a href="{{ route('reports.create') }}" class="btn btn-primary"><i class="fa-solid fa-fw fa-plus"></i> Tambah</a>
    </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>ID</th>
                            <th>Type</th>
                            <th>Kendaraan</th>
                            <th>Dari Tanggal</th>
                            <th>Sampai Tanggal</th>
                            <th></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-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://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-html5-2.4.2/b-print-2.4.2/datatables.min.js"></script>
<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>
$(()=>{
    'use strict'
    const table = $('#dt').DataTable({
        processing : true,
        ajax : {
            url : `https://api-v2.foxlogger.app/web-tracker-staging/report-list?user_id={{ settings('foxlogger.account.id') }}`,
            headers : {
                'Authorization' : `Bearer {{ settings('foxlogger.api.access-token') }}`
            }
        },
        columns : [
            { 
                data : 'id',
                render(data, type, row, meta){
                    return `<a href="{{ route('reports.index') }}/${row.report_type}/${data}?start=${row.start_time}&end=${row.end_time}&vehicle=${row.gps_name}"><strong>${data}</strong></a>`;
                } 
            },
            { 
                data : 'report_type',
                render(data){
                    let text = ``;
                    switch(data) {
                        case 'report-convenient':
                            text = 'Laporan Ringkasan';
                            break;
                        case 'report-summary':
                            text = 'Laporan Riwayat';
                            break;
                        case 'report-engine':
                            text = 'Laporan Mesin';
                            break;
                        case 'report-park':
                            text = 'Laporan Parkir';
                            break;
                        default:
                            text = 'Tanpa Jenis';
                    }
                    return text;
                }
            },
            {
                data : 'gps_name',
                render(data){
                    return data == '' ? 'Seluruh Kendaraan' : data; 
                }
            },
            { 
                data : 'start_time',
                render(data){
                    return moment(data).locale('id').format('dddd, DD MMMM YYYY HH:mm')
                } 
            },
            { 
                data : 'end_time',
                render(data){
                    return moment(data).locale('id').format('dddd, DD MMMM YYYY HH:mm ')
                } 
            },
            { 
                data: 'id',
                width: '40px',
                render(data){
                    return `<a class="btn btn-sm btn-light shadow dt-row-delete"><i class="fa fa-fw fa-trash"></i></a>`;
                }
            }
        ],
        rowCallback(row){
            let api = this.api();
            let rowData = api.row(row).data();
            $(row).find('.dt-row-delete').click(function(e){
                e.preventDefault();
                Swal.fire({
                    title   : "Are you sure ?",
                    text    : "Data can't restore after deleted!",
                    icon    : "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, Delete!",
                    cancelButtonText: "No, Cancel",
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: `https://api.v2.foxlogger.info/web-tracker-staging/delete-report`,
                            headers : {
                                'Authorization' : `Bearer {{ settings('foxlogger.api.access-token') }}`,
                                'Content-Type': 'application/json'
                            },
                            type: "DELETE",
                            processData: false,
                            contentType: 'application/json',
                            data: JSON.stringify({
                                id : rowData.id,
                                user_id : rowData.user_id,
                                report_type : rowData.report_type
                            }),
                            error   : function(response){
                                createAlert({status:'error', message:'Data gagal dihapus'});
                            },
                            success : function(response) {
                                api.ajax.reload(null, false);
                                createAlert({
                                    type : 'success',
                                    message : 'Laporan telah dihapus'
                                });
                            }
                        });
                    }
                });
            });
        }
    });
    
});
</script>
@endPush