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

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Token Logs',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.waba-platform.dashboard'), 'label' => 'WABA Platform'],
        ],
        'current' => 'Token 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-key me-2"></i>Token Logs</h5>
                <select class="form-select form-select-sm" id="filterAction" style="width: 180px;">
                    <option value="">All Actions</option>
                    <option value="generated">Generated</option>
                    <option value="refreshed">Refreshed</option>
                    <option value="revoked">Revoked</option>
                    <option value="oauth_connected">OAuth Connected</option>
                    <option value="oauth_refreshed">OAuth Refreshed</option>
                    <option value="oauth_revoked">OAuth Revoked</option>
                </select>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped" id="datatable">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>WABA</th>
                            <th>Action</th>
                            <th>Token Type</th>
                            <th>Triggered By</th>
                            <th>Success</th>
                            <th>Expires At</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.token-logs.data') }}',
            data: function(d) {
                d.action = $('#filterAction').val();
            }
        },
        order: [[0, 'desc']],
        columns: [
            { 
                data: 'created_at',
                render: function(data) {
                    return new Date(data).toLocaleString('id-ID');
                }
            },
            { 
                data: 'waba_pool',
                render: function(data) {
                    return data ? (data.account_name || data.phone_number) : '-';
                }
            },
            { 
                data: 'action',
                render: function(data) {
                    return '<span class="badge bg-info">' + data + '</span>';
                }
            },
            { 
                data: 'token_type',
                render: function(data) {
                    return data === 'oauth' 
                        ? '<span class="badge bg-purple">OAuth</span>'
                        : '<span class="badge bg-secondary">System User</span>';
                }
            },
            { data: 'triggered_by' },
            { 
                data: 'success',
                render: function(data) {
                    return data 
                        ? '<span class="badge bg-success"><i class="ti ti-check"></i></span>'
                        : '<span class="badge bg-danger"><i class="ti ti-x"></i></span>';
                }
            },
            { 
                data: 'token_expires_at',
                render: function(data) {
                    return data ? new Date(data).toLocaleDateString('id-ID') : '-';
                }
            }
        ]
    });

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