{{-- Log aktivitas, hanya baca: DataTables serverside. Tidak ada tombol hapus di mana pun (FR-22). --}}
@extends('layouts.panel')

@section('judul', 'Log aktivitas')
@section('subjudul', 'Jejak audit tidak dapat diedit maupun dihapus dari antarmuka')

@push('gaya')
    <link rel="stylesheet" href="{{ asset('tema/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('tema/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
@endpush

@section('isi')
    <div class="card card-outline card-primary">
        <div class="card-header">
            <form class="form-inline" id="saringan">
                <label class="mr-2" for="aksi">Saring aksi</label>
                <select class="form-control form-control-sm" id="aksi" name="aksi">
                    <option value="">Semua aksi</option>
                    @foreach ($aksiSemua as $aksi)
                        <option value="{{ $aksi }}">{{ $aksi }}</option>
                    @endforeach
                </select>
            </form>
        </div>

        <div class="card-body">
            {{-- "Tampil" di kiri; kotak cari DataTables ditarik ke baris yang sama. --}}
            <div class="form-inline mb-2" id="baris-tampil">
                <label class="mr-2 mb-0" for="saring-jumlah">Tampil</label>
                <select class="form-control form-control-sm" id="saring-jumlah" name="jumlah">
                    @foreach ([10, 25, 50, 100] as $opsi)
                        <option value="{{ $opsi }}" @selected($opsi === 10)>{{ $opsi }}</option>
                    @endforeach
                </select>
            </div>

            <table class="table table-bordered table-hover table-striped table-sm w-100 dataTable no-footer dtr-inline" id="tabel-log">
                <caption class="sr-only">Jejak aktivitas pengguna panel</caption>
                <thead>
                    <tr>
                        <th scope="col">Waktu</th>
                        <th scope="col">Pelaku</th>
                        <th scope="col">Aksi</th>
                        <th scope="col">Keterangan</th>
                        <th scope="col">Target</th>
                        <th scope="col">IP</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@push('skrip')
    <script src="{{ asset('tema/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('tema/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('tema/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('tema/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script>
        $(function() {
            const esc = function(teks) {
                return $('<div>').text(teks).html();
            };
            const kosong = '—';

            const tabel = $('#tabel-log').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                pageLength: 10,
                lengthChange: false,
                // Kotak cari, info, dan paginasi di card body, di luar wadah gulir tabel.
                dom: "f<'table-responsive'tr><'row'<'col-12 col-md-6'i><'col-12 col-md-6'p>>",
                order: [
                    [0, 'desc']
                ],
                ajax: {
                    url: '{{ route('panel.log.data') }}',
                    data: function(kirim) {
                        kirim.aksi = $('#aksi').val();
                    }
                },
                // Kotak cari DataTables ditarik ke baris "Tampil" agar sejajar.
                initComplete: function() {
                    $(this.api().table().container()).find('.dataTables_filter')
                        .appendTo('#baris-tampil').addClass('ml-auto');
                },
                columns: [{
                        data: 'waktu',
                        name: 'waktu',
                        searchable: false,
                        responsivePriority: 1
                    },
                    {
                        data: 'pelaku',
                        orderable: false,
                        searchable: false,
                        responsivePriority: 3
                    },
                    {
                        data: 'aksi',
                        responsivePriority: 2,
                        render: function(aksi) {
                            return '<code>' + esc(aksi) + '</code>';
                        }
                    },
                    {
                        data: 'keterangan',
                        responsivePriority: 4,
                        render: function(teks) {
                            return teks ? esc(teks) : kosong;
                        }
                    },
                    {
                        data: 'target',
                        orderable: false,
                        searchable: false,
                        responsivePriority: 6,
                        render: function(teks) {
                            return teks ? esc(teks) : kosong;
                        }
                    },
                    {
                        data: 'ip',
                        responsivePriority: 5,
                        render: function(teks) {
                            return teks ? esc(teks) : kosong;
                        }
                    }
                ],
                language: {
                    processing: 'Memuat...',
                    search: 'Cari',
                    info: 'Baris _START_–_END_ dari _TOTAL_',
                    infoEmpty: 'Tidak ada baris',
                    infoFiltered: '(disaring dari _MAX_ baris)',
                    zeroRecords: 'Belum ada aktivitas yang cocok dengan saringan ini.',
                    emptyTable: 'Belum ada aktivitas yang tercatat.',
                    paginate: {
                        first: 'Awal',
                        last: 'Akhir',
                        next: 'Berikutnya',
                        previous: 'Sebelumnya'
                    }
                }
            });

            $('#aksi').on('change', function() {
                tabel.ajax.reload();
            });

            $('#saring-jumlah').on('change', function() {
                tabel.page.len(parseInt(this.value, 10)).draw();
            });
        });
    </script>
@endpush