@extends('root')
@section('title', 'WABA Audit Logs')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Audit Logs',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.waba-platform.dashboard'), 'label' => 'WABA Platform'],
        ],
        'current' => 'Audit Logs'
    ])

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0"><i class="ti ti-list-search me-2"></i>Audit Logs</h5>
                <div class="d-flex gap-2">
                    <select class="form-select form-select-sm" id="filterAction" style="width: 150px;">
                        <option value="">All Actions</option>
                        <option value="message_sent">Message Sent</option>
                        <option value="message_failed">Message Failed</option>
                        <option value="oauth_connected">OAuth Connected</option>
                        <option value="oauth_disconnected">OAuth Disconnected</option>
                        <option value="token_refreshed">Token Refreshed</option>
                    </select>
                    <select class="form-select form-select-sm" id="filterStatus" style="width: 120px;">
                        <option value="">All Status</option>
                        <option value="success">Success</option>
                        <option value="failed">Failed</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped" id="datatable">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>Action</th>
                            <th>Client</th>
                            <th>WABA</th>
                            <th>Status</th>
                            <th>Details</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: '{{ route('admin.waba-platform.audit-logs.data') }}',
            data: function(d) {
                d.action = $('#filterAction').val();
                d.status = $('#filterStatus').val();
            }
        },
        order: [[0, 'desc']],
        columns: [
            { 
                data: 'created_at',
                render: function(data) {
                    return new Date(data).toLocaleString('id-ID');
                }
            },
            { 
                data: 'action',
                render: function(data) {
                    return '<span class="badge bg-secondary">' + data + '</span>';
                }
            },
            { 
                data: 'client',
                render: function(data) {
                    return data ? data.name : '<span class="text-muted">System</span>';
                }
            },
            { 
                data: 'waba_pool',
                render: function(data) {
                    return data ? data.phone_number : '-';
                }
            },
            { 
                data: 'status',
                render: function(data) {
                    return data === 'success'
                        ? '<span class="badge bg-success">Success</span>'
                        : '<span class="badge bg-danger">Failed</span>';
                }
            },
            { 
                data: 'error_message',
                render: function(data) {
                    return data ? '<span class="text-danger" title="'+data+'">Error</span>' : '-';
                }
            }
        ]
    });

    $('#filterAction, #filterStatus').on('change', function() {
        table.ajax.reload();
    });
});
</script>
@endpush