@extends('layout.master')

@section('title', 'Audit Trail')

@push('css')
<link rel="stylesheet" href="{{ asset('assets/vendor/daterangepicker/daterangepicker.css') }}">
@endpush

@section('content')
<div class="page-header">
    <h5 class="page-title">Laporan Audit Trail</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
            <li class="breadcrumb-item">Laporan</li>
            <li class="breadcrumb-item active">Laporan Audit Trail</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 col-md-6 col-lg-4">
                            <label for="" class="form-label">Pilih Julat Tarikh</label>                        
                            <div class="input-group"> 
                                <div class="input-group-text text-muted"> 
                                    <i class="fa fa-calendar-days"></i> 
                                </div> 
                                <input type="text" class="form-control flatpickr-input" id="date-range" placeholder="Date range picker" value="{{ $dateRangeText }}"> 
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                            <label class="form-label">Pilih Negeri</label>
                            <select class="form-select select-2" aria-label="Default select example" id="filterNegeri" autocomplete="off">
                                <option value="" selected>Semua</option>
                                <option value="hq" {{ request()->negeri_id == 'hq' ? 'selected' : '' }}>IPJPSM</option>
                                @foreach (\App\Models\Negeri::orderBy('name')->get() as $negeri)
                                    <option value="{{ $negeri->id }}" {{ request()->negeri_id == $negeri->id ? 'selected' : '' }}>{{ $negeri->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover nowrap w-100" id="the-table"></table>
                    </div>
                </div>
            </div>
        </div>


    </div>

    
    @include('audit_trail.audit_trail_report')
               
</section>

@endsection

@section('js')

<script type="text/javascript">
    $(function() {

        $('#date-range').daterangepicker({
            opens: 'right',
            autoUpdateInput: false,
            showDropdowns: true,
            cancelButtonClasses: 'btn btn-outline-danger',
            alwaysShowCalendars: true,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },            
            locale: {
                format: 'DD/MM/YYYY',
                cancelLabel: 'Reset',
                applyLabel: 'Pilih',
                fromLabel: 'Dari',
                toLabel: 'Hingga',
                customRangeLabel: 'Pilih Julat Tarikh',
                monthNames: ['Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember'],
            }
        }, function(start, end, label) {
            let startDate = start.format('YYYY-MM-DD');
            let endDate = end.format('YYYY-MM-DD');
            let negeriId = $('#filterNegeri').val();
            let url = "{{ route('laporan.audit_trail') }}?start_date=" + startDate + "&end_date=" + endDate + "&negeri_id=" + negeriId;
            window.location.href = url;
        });

        $('#date-range').on('cancel.daterangepicker', function(ev, picker) {
            $('#date-range').val('');
            let negeriId = $('#filterNegeri').val();
            window.location.href = "{{ route('laporan.audit_trail') }}" + (negeriId ? "?negeri_id=" + negeriId : "");
        });

        $('#filterNegeri').on('change', function() {
            let startDate = "{{ request()->start_date }}";
            let endDate = "{{ request()->end_date }}";
            let negeriId = $(this).val();
            
            let url = "{{ route('laporan.audit_trail') }}?";
            let params = [];
            if (startDate && endDate) {
                params.push("start_date=" + startDate);
                params.push("end_date=" + endDate);
            }
            if (negeriId) {
                params.push("negeri_id=" + negeriId);
            }
            
            window.location.href = url + params.join("&");
        });

    });

    $(document).ready( function () {

        const currentUserId = {{ auth()->id() }};
        console.log(currentUserId);
     
        $('#the-table').DataTable({
            ...datatables_config,
            scrollX: true,
            processing: true,
            // serverSide: true,
            columnControl: ['order'],
            ordering: {
                indicators: false,
                handler: false
            },
            ajax: {
                url : "{{ route('laporan.audit_trail') }}",
                data: function(d) {
                    d.start_date = "{{ request()->start_date }}";
                    d.end_date = "{{ request()->end_date }}";
                    d.negeri_id = $("#filterNegeri").val();
                },
            },
            buttons: [
                {
                    className: 'btn btn-danger',
                    text: '<i class="fa fa-file-pdf me-2"></i> PDF',
                    action: function () {
                        const url = new URL(window.location.href);
                        const params = new URLSearchParams();

                        const startDate = url.searchParams.get('start_date');
                        const endDate = url.searchParams.get('end_date');
                        const negeriId = $('#filterNegeri').val();

                        if (startDate) params.set('start_date', startDate);
                        if (endDate) params.set('end_date', endDate);
                        if (negeriId) params.set('negeri_id', negeriId);

                        window.location.href = "{{ route('laporan.audit_trail.exportPdf') }}?" + params.toString();
                    }
                },
                {
                    className: 'btn btn-success',
                    text: '<i class="fa fa-file-csv me-2"></i> CSV',
                    action: function () {
                        const url = new URL(window.location.href);
                        const params = new URLSearchParams();

                        const startDate = url.searchParams.get('start_date');
                        const endDate = url.searchParams.get('end_date');
                        const negeriId = $('#filterNegeri').val();

                        if (startDate) params.set('start_date', startDate);
                        if (endDate) params.set('end_date', endDate);
                        if (negeriId) params.set('negeri_id', negeriId);

                        window.location.href = "{{ route('laporan.audit_trail.exportCsv') }}?" + params.toString();
                    }
                },
            ],
            columns: [
                { 
                    data: 'DT_RowIndex',
                    title: 'Bil', 
                    width: '1%', 
                    className: 'text-center export-pdf export-csv', 
                    orderable: false, 
                    searchable: false
                },
                { 
                    data: 'users',
                    title: 'Nama & Peranan', 
                    className: 'export-csv',
                    render: (data, type, row) => {
                        const isMe = row.user_id == currentUserId ? ' <small class="badge bg-primary-transparent">You</small>' : '';

                        return `
                            <h5 class="mb-0">${row.users?.name ?? '-'} ${isMe}</h5>
                            <small class="text-muted">${row.users?.roles?.name ?? '-'}</small>
                        `;
                    }
                },
                { 
                    data: 'users.ic',
                    title: 'ID Pengguna', 
                    className: 'text-center export-pdf export-csv',
                    render: (data, type, row) => {
                        return `${row.users?.ic ?? '-'}`;
                    }
                },
                { 
                    data: 'users.negeris.name',
                    title: 'Negeri', 
                    className: 'export-pdf export-csv',
                    render: (data, type, row) => {
                        return `${row.users?.negeris?.name ?? 'IPJPSM'}`;
                    }
                },
                { 
                    data: 'event',
                    title: 'Aktiviti',
                    className: 'text-center export-pdf export-csv',
                    columnControl: ['order', ['searchList']],
                    render: (data, type, row) => {
                        if (row.event == 'created') {
                            return `<span class="badge bg-info-transparent">${row.event}</span>`;
                        } else if (row.event == 'updated') {
                            return `<span class="badge bg-warning-transparent">${row.event}</span>`;
                        } else if (row.event == 'deleted') {
                            return `<span class="badge bg-danger-transparent">${row.event}</span>`;
                        } else if (row.event == 'login') {
                            return `<span class="badge bg-success-transparent">${row.event}</span>`;
                        } else if (row.event == 'logout') {
                            return `<span class="badge bg-danger-transparent">${row.event}</span>`;
                        } else {
                            return `<span class="badge bg-secondary-transparent">${row.event}</span>`;
                        }
                    }
                },
                {
                    data: 'auditable_type',
                    title: 'Modul', 
                    className: 'export-pdf export-csv',
                    render: (data, type, row) => {
                        const replace = row.auditable_type.replace('App\\Models\\', '');
                        const replace2 = replace.replace(/\\/g, '');
                        return `${replace2}`;
                    }
                },
                { 
                    data: 'created_at',
                    title: 'Masa', 
                    className: 'export-pdf export-csv',
                    render: (data, type, row) => {
                        if (row.event == 'login' || row.event == 'logout') {
                            return '';
                        } else {
                            return row.created_at;
                        }
                    }
                },
                { 
                    data: 'login_at',
                    title: 'Log Masuk / Log Keluar', 
                    className: 'fw-medium export-pdf export-csv',
                    render: (data, type, row) => {
                        if (row.event == 'login') {
                            return `<small><span class="text-success">Masuk :</span> ${row.login_at}</small>`;
                        } else if (row.event == 'logout') {
                            return `<small><span class="text-success">Masuk :</span> ${row.login_at}<br><span class="text-danger">Keluar :</span> ${row.logout_at}</small>`;
                        } else {
                            return '';
                        }
                    }
                },
                { 
                    data: 'login_time',
                    title: 'Tempoh Masa Penggunaan', 
                    className: 'export-pdf export-csv'
                },
                { 
                    data: 'ip_address',
                    title: 'IP Pengguna', 
                    className: 'export-pdf export-csv'
                },
            ],
            order: [[0, 'asc']],
            columnDefs: [{render: null}],
        });
    });
</script>

@include('audit_trail.audit_trail_js')

@endsection