@extends('layouts.demo10.base')

@section('content')

@can('view.activity_log')
<div class="grid gap-5 lg:gap-7.5">
    <!-- begin: Toolbar -->
    <div class="flex flex-wrap items-center justify-between gap-5">
        <div class="flex flex-col gap-1">
            <h1 class="font-semibold text-xl text-mono">
                Audit & Observability Center
            </h1>
            <div class="flex items-center gap-1 text-sm font-normal text-secondary-foreground">
                <a class="hover:text-primary transition-colors" href="/">Home</a>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">Activities</span>
            </div>
        </div>
    </div>
    <!-- end: Toolbar -->

    <!-- begin: KPI Cards -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <div class="card kt-card p-4 hover:-translate-y-1 transition-transform duration-200 border border-gray-200 rounded-xl bg-white shadow-sm">
            <div class="flex flex-col items-center justify-center text-center">
                <h6 class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Total Logs Today</h6>
                <h4 class="text-2xl font-bold text-primary">{{ number_format($totalLogsToday) }}</h4>
                <small class="text-green-500 text-xs font-semibold">↑ 14%</small>
            </div>
        </div>
        <div class="card kt-card p-4 hover:-translate-y-1 transition-transform duration-200 border border-gray-200 rounded-xl bg-white shadow-sm">
            <div class="flex flex-col items-center justify-center text-center">
                <h6 class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Failed Actions</h6>
                <h4 class="text-2xl font-bold text-red-500">{{ number_format($failedActions) }}</h4>
                <small class="text-red-500 text-xs font-semibold">3.1%</small>
            </div>
        </div>
        <div class="card kt-card p-4 hover:-translate-y-1 transition-transform duration-200 border border-gray-200 rounded-xl bg-white shadow-sm">
            <div class="flex flex-col items-center justify-center text-center">
                <h6 class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Security Alerts</h6>
                <h4 class="text-2xl font-bold text-yellow-500">{{ number_format($securityAlerts) }}</h4>
                <small class="text-yellow-500 text-xs font-semibold">4 critical</small>
            </div>
        </div>
        <div class="card kt-card p-4 hover:-translate-y-1 transition-transform duration-200 border border-gray-200 rounded-xl bg-white shadow-sm">
            <div class="flex flex-col items-center justify-center text-center">
                <h6 class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">API Requests</h6>
                <h4 class="text-2xl font-bold text-blue-500">{{ number_format($apiRequests) }}</h4>
                <small class="text-gray-400 text-xs">Today</small>
            </div>
        </div>
        <div class="card kt-card p-4 hover:-translate-y-1 transition-transform duration-200 border border-gray-200 rounded-xl bg-white shadow-sm">
            <div class="flex flex-col items-center justify-center text-center">
                <h6 class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Approval Pending</h6>
                <h4 class="text-2xl font-bold text-green-500">{{ number_format($approvalPending) }}</h4>
                <small class="text-gray-400 text-xs">8 high</small>
            </div>
        </div>
        <div class="card kt-card p-4 hover:-translate-y-1 transition-transform duration-200 border border-gray-200 rounded-xl bg-white shadow-sm">
            <div class="flex flex-col items-center justify-center text-center">
                <h6 class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Active Tenants</h6>
                <h4 class="text-2xl font-bold text-gray-600">{{ number_format($activeTenants) }}</h4>
                <small class="text-gray-400 text-xs">Today</small>
            </div>
        </div>
    </div>
    <!-- end: KPI Cards -->

    <!-- begin: Advanced Filters -->
    <div class="card kt-card rounded-xl border border-gray-200 shadow-sm bg-white">
        <div class="flex justify-between items-center px-6 py-4 border-b border-gray-100">
            <h5 class="text-base font-semibold text-gray-800">Advanced Filters</h5>
           <button class="kt-btn kt-btn-primary add-btn" id="reset-filters">Reset</button>
        </div>
        <div class="p-5">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">

                <!-- Tenant -->
                <div class="flex flex-col gap-1">
                    <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                        <i class="bi bi-building me-1"></i>Tenant
                    </label>
                    <select id="filter_tenant" class="hidden" style="width:100%;" multiple>
                        @foreach($tenants as $tenant)
                            <option value="{{ $tenant->id }}">{{ $tenant->name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- User -->
                <div class="flex flex-col gap-1">
                    <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                        <i class="bi bi-person me-1"></i>User
                    </label>
                    <select id="filter_user" class="hidden" style="width:100%;" multiple>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Date Range -->
                <div class="flex flex-col gap-1">
                    <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                        <i class="bi bi-calendar-range me-1"></i>Date Range
                    </label>
                    <input id="date_range_picker" type="text"
                        placeholder="Select date range"
                        readonly
                        style="height:38px;"
                        class="w-full rounded-lg border border-gray-200 px-3 text-sm text-gray-700
                            bg-white cursor-pointer hover:border-gray-300
                            focus:outline-none focus:border-primary transition-colors" />
                </div>

                <!-- Severity -->
                <div class="flex flex-col gap-1">
                    <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                        <i class="bi bi-shield-exclamation me-1"></i>Severity
                    </label>
                    <select id="filter_severity" class="hidden" style="width:100%;" multiple>
                        <option value="info">Info</option>
                        <option value="warning">Warning</option>
                        <option value="error">Error</option>
                        <option value="critical">Critical</option>
                        <option value="security">Security</option>
                    </select>
                </div>

                <!-- Status / Source -->
                <div class="flex flex-col gap-1">
                    <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                        <i class="bi bi-toggles me-1"></i>Status / Source
                    </label>
                    <select id="filter_status" class="hidden" style="width:100%;" multiple>
                        <option value="success">Success</option>
                        <option value="failed">Failed</option>
                        <option value="user">Web</option>
                        <option value="system">System</option>
                        <option value="api">API</option>
                    </select>
                </div>

            </div>
        </div>
    </div>
    <!-- end: Advanced Filters -->

    <!-- begin: System Logs Card -->
    <div class="card kt-card h-full min-w-full rounded-xl border border-gray-200 shadow-sm bg-white">
        <div class="kt-card-header flex flex-wrap items-center justify-between gap-4 p-4 border-b border-gray-100">
            <div class="flex items-center gap-4">
                <div class="kt-input max-w-48 search">
                    <input id="log-search" placeholder="Search logs..." type="text" />
                </div>
                <div class="flex bg-gray-100 p-1 rounded-lg" role="group">
                    <button type="button" class="px-3 py-1 text-sm font-medium rounded-md transition-colors bg-white text-primary shadow-sm view-tab" data-view="table">Table</button>
                    <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-gray-600 hover:text-primary transition-colors view-tab" data-view="timeline">Timeline</button>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <button id="live-btn" class="kt-btn kt-btn-primary add-btn">
                    <i class="bi bi-play-fill"></i> <span class="live-text">Live Stream</span>
                </button>
                <button id="export-btn" class="kt-btn kt-btn-primary common-secondary-btn px-3">
                    <i class="bi bi-download"></i> Export
                </button>
            </div>
        </div>

        <!-- Live Notification — sits below header, above table -->
        <div id="live-notification"
             class="hidden mx-4 mt-4 p-3 bg-blue-50 border border-blue-100 rounded-lg gap-3 text-blue-700"
             style="display:none;">
            <span class="relative flex h-2.5 w-2.5 flex-shrink-0">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-blue-500"></span>
            </span>
            <span class="text-sm font-medium">Live updates enabled — polling every 5 seconds...</span>
        </div>

        <div class="kt-card-body p-0 relative">

            <!-- Table View -->
            <div id="view-table" class="view-panel block">
                <div class="kt-scrollable-x-auto">
                   <table class="kt-table kt-table-border w-full table-fixed" id="activity_log_table">
                        <thead>
                            <tr>
                                <th class="w-[40px] text-center">
                                    <span class="kt-table-col"><span class="kt-table-col-label font-semibold text-xs">#</span></span>
                                </th>
                                <th class="w-[130px]">
                                    <span class="kt-table-col"><span class="kt-table-col-label font-semibold text-xs">User</span></span>
                                </th>
                                <th class="w-[90px]">
                                    <span class="kt-table-col"><span class="kt-table-col-label font-semibold text-xs">Time</span></span>
                                </th>
                                <th class="w-[100px]">
                                    <span class="kt-table-col"><span class="kt-table-col-label font-semibold text-xs">Section</span></span>
                                </th>
                                <th class="w-[100px]">
                                    <span class="kt-table-col"><span class="kt-table-col-label font-semibold text-xs">Page</span></span>
                                </th>
                                <th class="w-[110px]">
                                    <span class="kt-table-col"><span class="kt-table-col-label font-semibold text-xs">Event / Action</span></span>
                                </th>
                                <th class="w-[80px]">
                                    <span class="kt-table-col"><span class="kt-table-col-label font-semibold text-xs">Severity</span></span>
                                </th>
                                <th class="w-[70px]">
                                    <span class="kt-table-col"><span class="kt-table-col-label font-semibold text-xs">Source</span></span>
                                </th>
                                <th class="w-[80px]">
                                    <span class="kt-table-col"><span class="kt-table-col-label font-semibold text-xs">Status</span></span>
                                </th>
                                <th class="w-[90px]">
                                    <span class="kt-table-col"><span class="kt-table-col-label font-semibold text-xs">Action</span></span>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 bg-white">
                            {{-- JS renders here --}}
                        </tbody>
                    </table>
                </div>
                {{-- DataTables renders pagination here automatically --}}
            </div>

            <!-- Timeline View -->
            <div id="view-timeline" class="view-panel hidden">
                <div class="timeline relative p-6 max-h-[600px] min-h-[300px] overflow-y-auto">
                    <div class="absolute top-0 bottom-0 left-[2.25rem] w-[3px] bg-gray-200"></div>
                    <div id="timeline-body">
                        <div class="text-center text-gray-400 py-10 pl-[3.5rem]">Loading...</div>
                    </div>
                    <p class="text-center text-gray-400 mt-6 pt-3 text-sm">↑ Scroll up for older events • Timeline view</p>
                </div>
            </div>

        </div>
    </div>
    <!-- end: System Logs Card -->

</div>

@else
<div class="flex items-center justify-center min-h-[400px]">
    <div class="text-center">
        <i class="ki-filled ki-lock text-4xl text-danger mb-4"></i>
        <h3 class="text-lg font-semibold text-foreground">Access Denied</h3>
        <p class="text-sm text-secondary-foreground">You do not have permission to view this page.</p>
    </div>
</div>
@endcan

<!-- ── Record Detail Modal ──────────────────────────────────────────────── -->
<div id="record-detail-modal"
     style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);
            align-items:center;justify-content:center;padding:1rem;">
    <div style="background:#fff;border-radius:.75rem;width:100%;max-width:780px;
                max-height:90vh;display:flex;flex-direction:column;
                box-shadow:0 25px 50px -12px rgba(0,0,0,.25);overflow:hidden;">

        <!-- Modal Header -->
        <div style="display:flex;align-items:center;justify-content:space-between;
                    padding:1rem 1.5rem;border-bottom:1px solid #f3f4f6;">
            <div style="display:flex;align-items:center;gap:.75rem;">
                <!-- Actor avatar -->
                <div id="modal-actor-avatar"
                     style="width:2.5rem;height:2.5rem;border-radius:9999px;
                            background:#dbeafe;color:#1e40af;font-weight:700;font-size:.95rem;
                            display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    A
                </div>
                <div>
                    <div id="modal-actor-name" style="font-weight:600;font-size:.95rem;color:#111827;"></div>
                    <div id="modal-actor-role" style="font-size:.75rem;color:#6b7280;"></div>
                </div>
            </div>
            <button id="modal-close-btn"
                    style="width:2rem;height:2rem;border-radius:9999px;border:none;
                           background:#f3f4f6;cursor:pointer;font-size:1.1rem;
                           display:flex;align-items:center;justify-content:center;
                           color:#6b7280;transition:background .15s;"
                    onmouseover="this.style.background='#e5e7eb'"
                    onmouseout="this.style.background='#f3f4f6'">✕</button>
        </div>

        <!-- Meta bar -->
        <div id="modal-meta-bar"
             style="display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
                    padding:.625rem 1.5rem;background:#f9fafb;border-bottom:1px solid #f3f4f6;
                    font-size:.75rem;color:#6b7280;">
        </div>

        <!-- Body -->
        <div style="overflow-y:auto;padding:1.5rem;flex:1;">

            <!-- No details state -->
            <div id="modal-no-details" style="display:none;text-align:center;padding:2rem;color:#9ca3af;">
                <div style="font-size:2rem;margin-bottom:.5rem;">📋</div>
                <div>No record details available for this log entry.</div>
            </div>

            <!-- Before / After diff -->
            <div id="modal-diff" style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">
                <div>
                    <div style="font-size:.8rem;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:2px solid #e5e7eb;">
                        Previous Record
                    </div>
                    <div id="modal-prev" style="display:flex;flex-direction:column;gap:.5rem;"></div>
                </div>
                <div>
                    <div style="font-size:.8rem;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:2px solid #6366f1;">
                        Updated Record
                    </div>
                    <div id="modal-next" style="display:flex;flex-direction:column;gap:.5rem;"></div>
                </div>
            </div>

            <!-- ← new: Meta data section (shown when no before/after but meta exists) -->
            <div id="modal-meta-section" style="display:none;">
                <div style="font-size:.8rem;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:2px solid #6366f1;">
                    📊 Event Meta Data
                </div>
                <div id="modal-meta-body" style="display:flex;flex-direction:column;gap:.5rem;"></div>
            </div>

        </div>

        <!-- Modal Footer -->
        <div style="padding:.875rem 1.5rem;border-top:1px solid #f3f4f6;
                    display:flex;justify-content:flex-end;">
            <button id="modal-close-btn2"
                    style="padding:.4rem 1rem;background:#6366f1;color:#fff;border:none;
                           border-radius:.5rem;font-size:.85rem;font-weight:500;cursor:pointer;">
                Close
            </button>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <!-- DateRangePicker -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <style>
        .timeline-item:last-child { margin-bottom: 0; }
        .kt-scrollable-x-auto, #activity_log_table, td { overflow: visible !important; }

        /* ── DataTables footer ─────────────────────────────────────────── */
        .dataTables_wrapper .dataTables_filter { display: none !important; } /* use our own search */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border: none !important; background: none !important;
            padding: 0.5rem 0.75rem !important; margin: 0 2px !important;
            border-radius: 0.375rem !important;
            color: var(--secondary-foreground) !important; cursor: pointer !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: var(--primary) !important; color: white !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
            background-color: #f3f4f6 !important;
        }
        .dataTables_wrapper .dataTables_info {
            color: var(--secondary-foreground) !important; font-size: 0.875rem !important; padding-top: 0 !important;
        }
        .dataTables_wrapper .dataTables_length select {
            border: 1px solid var(--border) !important; border-radius: 0.375rem !important;
            padding: 0.25rem 2rem 0.25rem 0.5rem !important;
            background-color: transparent !important; color: var(--foreground) !important; margin: 0 0.5rem !important;
        }
        .dataTables_wrapper .dataTables_length { color: var(--secondary-foreground) !important; font-size: 0.875rem !important; }
        .dataTables_wrapper .dataTables_paginate { padding-top: 0 !important; }

        /* footer bar flex layout */
        #activity_log_table_wrapper > div:last-child {
            display: flex; align-items: center; justify-content: space-between;
            flex-wrap: wrap; gap: 0.5rem;
            padding: 0.75rem 1rem; border-top: 1px solid #f3f4f6;
        }

        /* ── Select2 ──────────────────────────────────────────────────── */
        .select2-container--default .select2-selection--multiple,
        #date_range_picker {
            border-color: #d1d5db !important;
            min-height: 38.5px !important;
            border-radius: 0.375rem !important;
        }
        .select2-container .select2-selection--multiple .select2-selection__rendered {
            padding: 0 8px !important;
        }
        .select2-container { width: 100% !important; }

        .select2-container--default .select2-selection--multiple {
            border: 1px solid #e5e7eb !important;
            border-radius: 0.5rem !important;
            min-height: 38px !important;
            padding: 2px 6px !important;
            background-color: #fff !important;
            transition: border-color .15s !important;
        }

        .select2-container--default .select2-selection--multiple:hover {
            border-color: #d1d5db !important;
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border-color: var(--primary, #6366f1) !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            padding: 0 !important;
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 3px !important;
            align-items: center !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #ede9fe !important;
            color: #5b21b6 !important;
            border: none !important;
            border-radius: 4px !important;
            padding: 1px 6px !important;
            font-size: 0.7rem !important;
            font-weight: 600 !important;
            margin: 0 !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #7c3aed !important;
            margin-right: 3px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
            color: #9ca3af !important;
            font-size: 0.875rem !important;
            line-height: 34px !important;
        }

        /* Search box inside dropdown */
        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #e5e7eb !important;
            border-radius: 6px !important;
            padding: 6px 10px !important;
            font-size: 0.8rem !important;
        }

        /* Dropdown options */
        .select2-results__option {
            font-size: 0.8rem !important;
            padding: 6px 12px !important;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #ede9fe !important;
            color: #5b21b6 !important;
        }

        .select2-container--default .select2-results__option[aria-selected=true] {
            background-color: #f5f3ff !important;
            color: #6d28d9 !important;
        }

        /* ── Live flash ───────────────────────────────────────────────── */
        @keyframes liveFlash { from { background-color: #dbeafe; } to { background-color: transparent; } }
        .live-flash { animation: liveFlash 2s ease-out forwards; }
        @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
        .animate-ping { animation: ping 1s cubic-bezier(0,0,.2,1) infinite; }

        /* Force table to fit without horizontal scroll */
        #activity_log_table {
            table-layout: fixed !important;
            width: 100% !important;
        }

        /* Truncate all cells */
        #activity_log_table td,
        #activity_log_table th {
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            padding: 8px 6px !important;
            font-size: 0.75rem !important;
        }

        /* Override the scrollable wrapper */
        #activity_log_table_wrapper .kt-scrollable-x-auto {
            overflow: visible !important;
        }
    </style>
    <script>
    $(document).ready(function () {

        var filterUrl   = "{{ route('activity.logs.filter') }}";
        var lastLogs    = [];
        var logsById    = {};
        var liveTimer   = null;
        var isLive      = false;
        var liveSeenIds = {};
        var activeXhr   = null;

        /* ── 1. Select2 ───────────────────────────────────────────────── */
        var s2Placeholders = { filter_tenant: 'All Tenants', filter_severity: 'Severities', filter_status: 'Statuses' };
       $('#filter_tenant, #filter_severity, #filter_status').each(function () {
            var placeholders = {
                filter_tenant:   'All Tenants',
                filter_severity: 'All Severities',
                filter_status:   'All Statuses'
            };
            $(this).removeClass('hidden').select2({
                width:         '100%',
                allowClear:    true,
                placeholder:   placeholders[this.id] || 'Select…',
                minimumResultsForSearch: Infinity  // hides search box for short lists
            });
        });
        // User — searchable dropdown
        $('#filter_user').removeClass('hidden').select2({
            width:       '100%',
            allowClear:  true,
            placeholder: 'All Users',
            minimumInputLength: 0  // show all on open, search as you type
        });

        // Trigger fetch on user filter change
        $('#filter_user').on('change', function () {
            fetchActivities(1);
        });
        /* ── 2. Date Range Picker ─────────────────────────────────────── */
        $('#date_range_picker').daterangepicker({
            opens: 'left', autoUpdateInput: false,
            locale: { cancelLabel: 'Clear', format: 'MMM D, YYYY' },
            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')]
            }
        });
        $('#date_range_picker').on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('MMM D, YYYY') + ' - ' + picker.endDate.format('MMM D, YYYY'));
            fetchActivities();
        });
        $('#date_range_picker').on('cancel.daterangepicker', function () { $(this).val(''); fetchActivities(); });

        /* ── 3. DataTable — now with Section, Page, Action columns ───── */
        var table = $('#activity_log_table').DataTable({
            dom: 'rt<"flex items-center justify-between flex-wrap gap-2 px-4 py-3 border-t border-gray-100"lip>',
            data: [],
            pageLength: 20,
            lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
            autoWidth: false,
            ordering: false,
            searching: true,
            columns: [
                { title: '#',             width: '40px',  className: 'text-center' },
                { title: 'User',          width: '130px'  },
                { title: 'Time',          width: '90px'   },
                { title: 'Section',       width: '100px'  },
                { title: 'Page',          width: '100px'  },
                { title: 'Event / Action',width: '110px'  },
                { title: 'Severity',      width: '80px'   },
                { title: 'Source',        width: '70px'   },
                { title: 'Status',        width: '80px'   },
                { title: 'Action',        width: '90px',  orderable: false }
            ],
            language: {
                lengthMenu:  '_MENU_ per page',
                info:        'Showing _START_–_END_ of _TOTAL_ logs',
                infoEmpty:   'No logs found',
                zeroRecords: '<div class="text-center text-gray-400 py-8">No logs match your filters.</div>',
                emptyTable:  '<div class="text-center text-gray-400 py-8">No activity logs available.</div>',
                paginate:    { previous: '‹', next: '›' }
            },
            createdRow: function (row, data, rowIdx) {
                // Left border color by severity
                var sev    = parseInt(data[6]?.toString().match(/severity-(\d)/)?.[1] ?? 1);
                var border = sev === 4 ? 'border-l-red-700'
                        : sev === 3 ? 'border-l-red-400'
                        : sev === 2 ? 'border-l-yellow-400'
                        :             'border-l-blue-300';
                $(row).addClass('hover:bg-gray-50 transition-colors border-l-2 ' + border);
            }
        });

        /* ── 4. Search ────────────────────────────────────────────────── */
        $('#log-search').on('keyup input', function () { table.search($(this).val()).draw(); });

        /* ── 5. Helpers ───────────────────────────────────────────────── */
        function esc(s) {
            if (!s) return '—';
            return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
        }

        function statusBadge(s) {
            var ok = parseInt(s) === 1;
            return '<span class="px-2 py-1 rounded w-fit text-xs font-semibold ' +
                (ok ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700') + '">' +
                (ok ? 'Success' : 'Failed') + '</span>';
        }

        function severityBadge(s) {
            var n = parseInt(s);
            var cls = n===1 ? 'bg-blue-100 text-blue-700' : n===2 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700';
            return '<span class="px-2 py-1 rounded w-fit text-xs font-semibold ' + cls + '">' +
                (n===1?'Info':n===2?'Warning':'Error') + '</span>';
        }

        function sourceLabel(s) { var n=parseInt(s); return n===0?'System':n===1?'Web':'API'; }

        // ← new: event type colored badge
        function eventTypeBadge(eventType, action) {
            var type = (eventType || 'action').toLowerCase();
            return '<span class="px-1.5 py-0.5 rounded text-xs font-semibold badge-' + type + '">' + esc(action || type) + '</span>';
        }

        // ← new: section + sub_section display
        function sectionCell(section, subSection) {
            if (!section) return '—';
            var html = '<span class="text-sm font-medium text-gray-700">' + esc(section) + '</span>';
            if (subSection) {
                html += '<br><span class="text-xs text-gray-400">' + esc(subSection) + '</span>';
            }
            return html;
        }

        /* ── buildRow — columns match blade <thead> order exactly ────────────── */
        /*
            Col 0 : #
            Col 1 : User
            Col 2 : Time
            Col 3 : Section
            Col 4 : Page
            Col 5 : Event / Action
            Col 6 : Severity
            Col 7 : Source
            Col 8 : Status
            Col 9 : Action
        */
        function buildRow(log, num) {

            // ── Col 0: # ──────────────────────────────────────────────────────────
            var numCell = (num === 'LIVE')
                ? '<span class="inline-flex items-center gap-1 text-[10px] font-bold text-red-500"><span class="w-1.5 h-1.5 rounded-full bg-red-500 animate-ping inline-block"></span>Live</span>'
                : '<span class="text-[11px] text-gray-400 font-mono">' + num + '</span>';

            // ── Col 1: User ───────────────────────────────────────────────────────
            var initials = (log.actor_display || 'S')
                .split(' ').slice(0, 2).map(function(w){ return w.charAt(0).toUpperCase(); }).join('');
            var userCell =
                '<span class="flex items-center gap-1.5 min-w-0">' +
                    '<span class="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-700 ' +
                        'flex items-center justify-center text-[10px] font-bold">' + esc(initials) + '</span>' +
                    '<span class="flex flex-col min-w-0">' +
                        '<span class="text-[11px] font-medium text-gray-800 truncate leading-tight">' + esc(log.actor_display || 'System') + '</span>' +
                        '<span class="text-[10px] text-gray-400 truncate leading-tight">' + esc(log.actor_role || 'User') + '</span>' +
                    '</span>' +
                '</span>';

            // ── Col 2: Time ───────────────────────────────────────────────────────
            var timeCell = '<span class="text-[11px] text-gray-600 whitespace-nowrap">' + esc(log.occurred_at || '—') + '</span>';

            // ── Col 3: Section ────────────────────────────────────────────────────
            var sectionCell = log.section
                ? '<span class="flex flex-col min-w-0">' +
                    '<span class="text-[11px] text-gray-700 font-medium truncate">' + esc(log.section) + '</span>' +
                    (log.sub_section
                        ? '<span class="text-[10px] text-gray-400 truncate">' + esc(log.sub_section) + '</span>'
                        : '') +
                '</span>'
                : '<span class="text-gray-300 text-xs">—</span>';

            // ── Col 4: Page ───────────────────────────────────────────────────────
            var pageVal  = log.page || log.module || '';
            var pageCell = pageVal
                ? '<span class="text-[11px] text-gray-700 truncate block" title="' + esc(pageVal) + '">' + esc(pageVal) + '</span>'
                : '<span class="text-gray-300 text-xs">—</span>';

            // ── Col 5: Event / Action ─────────────────────────────────────────────
            var typeMap  = {
                'action':     'bg-orange-50 text-orange-600 border-orange-200',
                'navigation': 'bg-sky-50 text-sky-600 border-sky-200',
                'data_view':  'bg-teal-50 text-teal-600 border-teal-200',
                'click':      'bg-pink-50 text-pink-600 border-pink-200',
            };
            var evType   = (log.event_type || 'action').toLowerCase();
            var evCls    = typeMap[evType] || 'bg-gray-100 text-gray-500 border-gray-200';
            var eventCell =
                '<span class="flex flex-col gap-0.5">' +

                    '<span class="text-[10px] text-gray-500 truncate pl-0.5" title="' + esc(log.action || '') + '">' + esc(log.action || '—') + '</span>' +
                '</span>';

            // ── Col 6: Severity ───────────────────────────────────────────────────
            var sev     = parseInt(log.severity) || 1;
            var sevMap  = {
                1: { label: 'Info',     cls: 'bg-blue-50 text-blue-600 border-blue-200' },
                2: { label: 'Warning',  cls: 'bg-yellow-50 text-yellow-700 border-yellow-200' },
                3: { label: 'Error',    cls: 'bg-red-50 text-red-600 border-red-200' },
                4: { label: 'Critical', cls: 'bg-red-100 text-red-800 border-red-300 font-bold' },
            };
            var sd       = sevMap[sev] || sevMap[1];
            var sevCell  =
                '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border ' + sd.cls + '">' +
                    '<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>' + sd.label +
                '</span>';

            // ── Col 7: Source ─────────────────────────────────────────────────────
            var src     = parseInt(log.source);
            var srcMap  = {
                0: { label: 'System', cls: 'bg-gray-100 text-gray-600 border-gray-200' },
                1: { label: 'Web',    cls: 'bg-indigo-50 text-indigo-600 border-indigo-200' },
                2: { label: 'API',    cls: 'bg-purple-50 text-purple-600 border-purple-200' },
            };
            var sd2      = srcMap[src] || srcMap[1];
            var srcCell  =
                '<span class="inline-flex px-2 py-0.5 rounded-full text-[10px] font-medium border ' + sd2.cls + '">' + sd2.label + '</span>';

            // ── Col 8: Status ─────────────────────────────────────────────────────
            var ok       = parseInt(log.status) === 1;
            var stCell   =
                '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border ' +
                (ok ? 'bg-green-50 text-green-700 border-green-200' : 'bg-red-50 text-red-600 border-red-200') + '">' +
                    '<span class="w-1.5 h-1.5 rounded-full ' + (ok ? 'bg-green-500' : 'bg-red-500') + '"></span>' +
                    (ok ? 'Success' : 'Failed') +
                '</span>';

            // ── Col 9: Action (View button) ───────────────────────────────────────
            var actionBtn =
                '<button class="view-detail-btn inline-flex items-center gap-1 px-2 py-1 rounded-md ' +
                        'text-[11px] font-medium bg-gray-100 hover:bg-indigo-50 text-gray-600 hover:text-indigo-600 ' +
                        'border border-gray-200 hover:border-indigo-200 transition" data-id="' + log.id + '">' +
                    '<i class="bi bi-eye text-[11px]"></i> View' +
                '</button>';

            return [
                numCell,    // 0 : #
                userCell,   // 1 : User
                timeCell,   // 2 : Time
                sectionCell,// 3 : Section
                pageCell,   // 4 : Page
                eventCell,  // 5 : Event / Action
                sevCell,    // 6 : Severity
                srcCell,    // 7 : Source
                stCell,     // 8 : Status
                actionBtn   // 9 : Action
            ];
        }

        /* ── 6. Fetch & populate DataTable ───────────────────────────── */
        function fetchActivities(pageNum) {
            if (activeXhr) activeXhr.abort();
            pageNum = pageNum || 1;

            var range  = $('#date_range_picker').val() || '';
            var parts  = range.indexOf(' - ') > -1 ? range.split(' - ') : [];
            var params = { page: pageNum, per_page: 50 };

            var t  = $('#filter_tenant').val();
            var u  = $('#filter_user').val();
            var sv = $('#filter_severity').val();
            var st = $('#filter_status').val();

            if (t  && t.length)  params['tenant[]']   = t;
            if (u  && u.length)  params['user[]']     = u;
            if (sv && sv.length) params['severity[]'] = sv;
            if (st && st.length) params['status[]']   = st;
            if (parts[0]) params.from = parts[0];
            if (parts[1]) params.to   = parts[1];

            // Show loading on first page
            if (pageNum === 1) {
                table.clear().draw(false);
                logsById = {};
                lastLogs = [];
                showLoadingIndicator();
            }

            activeXhr = $.ajax({
                url: filterUrl, type: 'GET', dataType: 'json', data: params,
                success: function (response) {
                    var logs      = response.data       || [];
                    var lastPage  = response.last_page  || 1;
                    var total     = response.total      || 0;

                    // Append rows to table
                    $.each(logs, function (i, log) {
                        logsById[log.id] = log;
                        lastLogs.push(log);
                        table.row.add(buildRow(log, lastLogs.length));
                    });
                    table.draw(false);

                    // Update loading indicator with progress
                    updateLoadingIndicator(lastLogs.length, total);

                    // If more pages exist, auto-fetch next page
                    if (pageNum < lastPage) {
                        setTimeout(function () {
                            fetchActivities(pageNum + 1);
                        }, 100); // small delay to avoid hammering server
                    } else {
                        // All pages loaded
                        hideLoadingIndicator();
                        // Re-number all rows correctly
                    renumberRows();
                    }
                },
                error: function (xhr) {
                    if (xhr.statusText !== 'abort') {
                        console.error('Filter error:', xhr.status, xhr.responseText);
                        hideLoadingIndicator();
                    }
                }
            });
        }

        // ── Row renumbering after all pages loaded ────────────────────
        function renumberRows() {
            table.rows().every(function (rowIdx) {
                var row  = this.data();
                row[0]   = '<span class="text-xs text-gray-600 font-mono">' + (rowIdx + 1) + '</span>';
                this.data(row);
            });
            table.draw(false);
        }

        // ── Loading indicator helpers ─────────────────────────────────
        function showLoadingIndicator() {
            if ($('#audit-loading-bar').length === 0) {
                $('<div id="audit-loading-bar" style="padding:8px 16px;background:#dbeafe;color:#1e40af;font-size:.8rem;font-weight:500;display:flex;align-items:center;gap:8px;">' +
                    '<span class="animate-ping" style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#3b82f6;"></span>' +
                    '<span id="audit-loading-text">Loading logs...</span>' +
                '</div>').insertBefore('#activity_log_table');
            }
            $('#audit-loading-bar').show();
        }

        function updateLoadingIndicator(loaded, total) {
            $('#audit-loading-text').text('Loading... ' + loaded + ' / ' + total + ' logs');
        }

        function hideLoadingIndicator() {
            $('#audit-loading-bar').fadeOut(300, function () { $(this).remove(); });
        }

        /* ── 7. Filter triggers ──────────────────────────────────────── */
        $('#filter_tenant, #filter_severity, #filter_status').on('change', function () {
            fetchActivities(1); // always start from page 1 on filter change
        });

        /* ── 8. Reset ────────────────────────────────────────────────── */
        $('#reset-filters').on('click', function () {
            $('#filter_tenant, #filter_user, #filter_severity, #filter_status')
                .val(null).trigger('change.select2');
            $('#date_range_picker').val('');
            $('#log-search').val('');
            table.search('');
            fetchActivities(1);
        });
        /* ── 9. View tabs ────────────────────────────────────────────── */
        $('.view-tab').on('click', function () {
            var view = $(this).data('view');
            $('.view-tab').removeClass('bg-white text-primary shadow-sm').addClass('text-gray-600 hover:text-primary');
            $(this).removeClass('text-gray-600 hover:text-primary').addClass('bg-white text-primary shadow-sm');
            $('.view-panel').hide();
            $('#view-' + view).fadeIn(150);
            if (view === 'table')    table.columns.adjust().draw(false);
            if (view === 'timeline') renderTimeline(lastLogs);
        });

        /* ── 10. Timeline ────────────────────────────────────────────── */
        function renderTimeline(logs) {
            var items = (logs || []).slice(0, 20);
            var $body = $('#timeline-body');
            if (!items.length) {
                $body.html('<div class="text-center text-gray-500 py-10 relative z-10 pl-[3.5rem]">No activity logs found.</div>');
                return;
            }
            var html = '';
            $.each(items, function (i, log) {
                var sev = parseInt(log.severity), st = parseInt(log.status);
                var mod = (log.module||'').split('\\').pop() || 'Entity';
                var stCls = st===1 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700';
                var svCls = sev===1 ? 'bg-blue-100 text-blue-700' : sev===2 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700';
                var svTxt = sev===1 ? 'Info' : sev===2 ? 'Warning' : 'Error';
                var sectionInfo = log.section ? esc(log.section) + (log.sub_section ? ' › ' + esc(log.sub_section) : '') : '';
                html +=
                    '<div class="timeline-item relative mb-7 pl-[3.5rem]">' +
                        '<div class="timeline-icon absolute left-0 top-0 w-[44px] h-[44px] rounded-full bg-white border-[3px] border-primary text-primary flex items-center justify-center z-10">' +
                            '<i class="bi bi-activity text-lg"></i>' +
                        '</div>' +
                        '<div class="timeline-content p-4 bg-white rounded-lg shadow-sm border-l-4 border-primary hover:translate-x-1 hover:shadow-md transition-all">' +
                            '<span class="block text-xs text-gray-500 mb-1">' + esc(log.occurred_at) + '</span>' +
                            '<div class="text-sm text-gray-800">' +
                                '<span class="font-bold text-primary">' + esc(log.actor_display) + '</span>' +
                                ' performed <span class="font-medium">' + esc(log.description) + '</span>' +
                                (sectionInfo ? ' in <span class="font-mono text-xs bg-gray-100 px-1 py-0.5 rounded">' + sectionInfo + '</span>' : '') +
                                (log.page ? ' › <span class="text-xs text-gray-500">' + esc(log.page) + '</span>' : '') +
                            '</div>' +
                            '<div class="mt-2 flex gap-2 flex-wrap">' +
                                '<span class="px-2 py-0.5 rounded text-xs font-semibold ' + stCls + '">' + (st===1?'Success':'Failed') + '</span>' +
                                '<span class="px-2 py-0.5 rounded text-xs font-semibold ' + svCls + '">' + svTxt + '</span>' +
                                (log.event_type ? '<span class="px-2 py-0.5 rounded text-xs font-semibold badge-' + log.event_type + '">' + log.event_type + '</span>' : '') +
                            '</div>' +
                        '</div>' +
                    '</div>';
            });
            $body.html(html);
        }

        /* ── 11. Live Stream ─────────────────────────────────────────── */
        function seedLiveIds() {
            $.ajax({
                url: filterUrl, type: 'GET', dataType: 'json', data: { per_page: 100, page: 1 },
                success: function (res) {
                    var logs = res.data || [];
                    $.each(logs, function (i, log) { liveSeenIds[log.id] = true; });
                }
            });
        }

        function pollLive() {
            $.ajax({
                url: filterUrl, type: 'GET', dataType: 'json', data: { per_page: 20, page: 1 },
                success: function (res) {
                    if (!isLive) return;

                    var logs    = res.data || [];
                    var newLogs = [];

                    $.each(logs, function (i, log) {
                        if (!liveSeenIds[log.id]) {
                            liveSeenIds[log.id] = true;
                            newLogs.push(log);
                        }
                    });

                    if (!newLogs.length) return;

                    // ── THE FIX ───────────────────────────────────────────────────
                    // 1. Get all existing rows as raw data array
                    var existingRows = table.rows().data().toArray();

                    // 2. Build new rows (newest first)
                    var newRowsData = [];
                    $.each(newLogs, function (i, log) {
                        logsById[log.id] = log;
                        lastLogs.unshift(log); // prepend to our local cache too
                        newRowsData.push(buildRow(log, 'LIVE'));
                    });

                    // 3. Clear table and re-add: new rows first, then existing rows
                    table.clear();
                    $.each(newRowsData,   function (i, row) { table.row.add(row); });
                    $.each(existingRows,  function (i, row) { table.row.add(row); });

                    // 4. Draw and jump to page 1 so new rows are immediately visible
                    table.draw(false);
                    table.page(0).draw(false);

                    // 5. Flash only the new rows (they are now at the top = first N rows)
                    table.rows().every(function (rowIdx) {
                        if (rowIdx < newLogs.length) {
                            $(this.node()).addClass('live-flash');
                            setTimeout(function () {
                                var node = table.row(rowIdx).node();
                                if (node) $(node).removeClass('live-flash');
                            }, 2000);
                        }
                    });
                    // ── END FIX ───────────────────────────────────────────────────

                    // 6. Toast notification
                    var $t = $(
                        '<div style="position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;' +
                        'display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;' +
                        'background:#2563eb;color:#fff;border-radius:.5rem;font-size:.875rem;' +
                        'font-weight:500;box-shadow:0 10px 15px -3px rgba(0,0,0,.2);">' +
                        '<span style="width:8px;height:8px;border-radius:50%;background:#fff;' +
                        'animation:ping 1s cubic-bezier(0,0,.2,1) infinite;display:inline-block;"></span>' +
                        '● ' + newLogs.length + ' new log' + (newLogs.length > 1 ? 's' : '') + ' received</div>'
                    );
                    $('body').append($t);
                    setTimeout(function () { $t.fadeOut(400, function () { $(this).remove(); }); }, 3000);
                }
            });
        }

        $('#live-btn').on('click', function () {
            isLive = !isLive;
            if (isLive) {
                liveSeenIds = {};
                seedLiveIds();
                $(this).find('i').removeClass('bi-play-fill').addClass('bi-stop-fill');
                $(this).find('.live-text').text('Stop Live');
                $(this).addClass('!bg-red-500 !border-red-500');
                $('#live-notification').removeClass('hidden').css('display', 'flex');
                liveTimer = setInterval(pollLive, 5000);
            } else {
                $(this).find('i').removeClass('bi-stop-fill').addClass('bi-play-fill');
                $(this).find('.live-text').text('Live Stream');
                $(this).removeClass('!bg-red-500 !border-red-500');
                $('#live-notification').addClass('hidden').css('display', 'none');
                clearInterval(liveTimer);
                liveTimer = null;
            }
        });

        /* ── 12. Export CSV ──────────────────────────────────────────── */
        $('#export-btn').on('click', function () {
            var strip = function (s) {
                return String(s)
                    .replace(/<[^>]*>/g, '')
                    .replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
                    .replace(/\s+/g, ' ').trim();
            };
            var rows = table.rows({ search: 'applied' }).data().toArray();
            var csv  = ['"#","User","Time","Section","Page","Event/Action","Severity","Source","Status"']
                .concat(rows.map(function (r) {
                    return r.slice(0, 9).map(function (c) {
                        return '"' + strip(c).replace(/"/g, '""') + '"';
                    }).join(',');
                }))
                .join('\n');
            var a    = document.createElement('a');
            a.href   = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8;' }));
            a.download = 'audit_logs_' + moment().format('YYYY-MM-DD') + '.csv';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        });

        /* ── 13. Modal: View Details ─────────────────────────────────── */
        var $modal = $('#record-detail-modal');

        function renderFields(containerId, fields, compareFields) {
            var $c = $(containerId).empty();
            if (!fields || typeof fields !== 'object' || !Object.keys(fields).length) {
                $c.append('<div style="color:#9ca3af;font-size:.8rem;padding:.5rem 0;">No data available</div>');
                return;
            }
            var dateKeys = ['created_at','updated_at','deleted_at','last_login_at','email_verified_at'];
            function formatVal(key, val) {
                if (val === null || val === undefined) return '—';
                var s = String(val);
                var isDate = dateKeys.indexOf(key) > -1 || /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/.test(s);
                if (isDate) {
                    var d = new Date(s.replace(' ', 'T'));
                    if (!isNaN(d.getTime())) {
                        return d.toLocaleString('en-US', {
                            year: 'numeric', month: 'short', day: '2-digit',
                            hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true
                        });
                    }
                }
                return s;
            }
            $.each(fields, function (key, val) {
                var hasCompare = compareFields && typeof compareFields === 'object';
                var valStr  = formatVal(key, val);
                var changed = hasCompare && formatVal(key, val) !== formatVal(key, compareFields[key]);
                $c.append(
                    '<div style="display:flex;gap:.75rem;font-size:.8rem;padding:.35rem .5rem;border-radius:.25rem;' +
                    (changed ? 'background:#fef9c3;' : '') + '">' +
                        '<span style="color:#6b7280;min-width:110px;flex-shrink:0;font-weight:500;">' + esc(key) + '</span>' +
                        '<span style="font-weight:600;color:' + (changed ? '#b45309' : '#111827') + ';word-break:break-all;">' +
                            esc(valStr) +
                            (changed ? ' <span style="font-size:.65rem;background:#f59e0b;color:#fff;padding:.1rem .35rem;border-radius:.2rem;margin-left:.25rem;">changed</span>' : '') +
                        '</span>' +
                    '</div>'
                );
            });
        }

        // ← new: render meta key/value pairs
        function renderMeta(containerId, meta) {
            var $c = $(containerId).empty();
            if (!meta || typeof meta !== 'object' || !Object.keys(meta).length) {
                $c.append('<div style="color:#9ca3af;font-size:.8rem;padding:.5rem 0;">No meta data available</div>');
                return;
            }
            $.each(meta, function (key, val) {
                var display = (typeof val === 'object') ? JSON.stringify(val, null, 2) : String(val);
                $c.append(
                    '<div style="display:flex;gap:.75rem;font-size:.8rem;padding:.35rem .5rem;border-radius:.25rem;background:#f8fafc;">' +
                        '<span style="color:#6b7280;min-width:110px;flex-shrink:0;font-weight:500;">' + esc(key) + '</span>' +
                        '<span style="font-weight:600;color:#1e40af;word-break:break-all;">' + esc(display) + '</span>' +
                    '</div>'
                );
            });
        }

        function openDetailModal(logId) {
            var log = logsById[logId];
            if (!log) return;

            var init = (log.actor_display || 'S').charAt(0).toUpperCase();
            $('#modal-actor-avatar').text(init);
            $('#modal-actor-name').text(log.actor_display || 'System');
            $('#modal-actor-role').text(log.actor_role || 'User');

            var sev = parseInt(log.severity), st = parseInt(log.status);
            var mod = (log.module || '').split('\\').pop() || 'System';
            var sevStyle = sev===1 ? 'background:#dbeafe;color:#1e40af' : sev===2 ? 'background:#fef3c7;color:#92400e' : 'background:#fee2e2;color:#991b1b';
            var stStyle  = st===1  ? 'background:#dcfce7;color:#166534' : 'background:#fee2e2;color:#991b1b';

            // ← extended meta bar with section/page/event_type
            $('#modal-meta-bar').html(
                '<span style="' + stStyle  + ';padding:.2rem .6rem;border-radius:.25rem;font-weight:600;">' + (st===1?'Success':'Failed') + '</span>' +
                '<span style="' + sevStyle + ';padding:.2rem .6rem;border-radius:.25rem;font-weight:600;">' + (sev===1?'Info':sev===2?'Warning':'Error') + '</span>' +
                '<span style="background:#f3f4f6;padding:.2rem .6rem;border-radius:.25rem;color:#374151;">' + esc(mod) + '</span>' +
                (log.section ? '<span style="background:#ede9fe;color:#5b21b6;padding:.2rem .6rem;border-radius:.25rem;">📂 ' + esc(log.section) + (log.sub_section ? ' › ' + esc(log.sub_section) : '') + '</span>' : '') +
                (log.page    ? '<span style="background:#dbeafe;color:#1e40af;padding:.2rem .6rem;border-radius:.25rem;">📄 ' + esc(log.page) + '</span>' : '') +
                (log.event_type ? '<span style="background:#fef3c7;color:#92400e;padding:.2rem .6rem;border-radius:.25rem;">⚡ ' + esc(log.event_type) + '</span>' : '') +
                '<span style="color:#6b7280;">⏱ ' + esc(log.occurred_at) + '</span>' +
                '<span style="color:#6b7280;">🌐 ' + (parseInt(log.source)===0?'System':parseInt(log.source)===1?'Web':'API') + '</span>'
            );

            // Collect before/after/meta from details
            var details = log.details || [];
            var prev = null, next = null, allMeta = null;

            $.each(details, function (i, d) {
                if (d.old_values && typeof d.old_values === 'object') {
                    prev = prev || {};
                    $.extend(prev, d.old_values);
                }
                if (d.new_values && typeof d.new_values === 'object') {
                    next = next || {};
                    $.extend(next, d.new_values);
                }
                // ← collect meta from all detail rows
                if (d.meta && typeof d.meta === 'object') {
                    allMeta = allMeta || {};
                    $.extend(allMeta, d.meta);
                }
            });

            var hasDiff = prev || next;
            var hasMeta = allMeta && Object.keys(allMeta).length > 0;

            if (hasDiff) {
                // ── Show before/after diff ──
                $('#modal-no-details').hide();
                $('#modal-diff').show();
                $('#modal-meta-section').hide();
                renderFields('#modal-prev', prev, next);
                renderFields('#modal-next', next, prev);

            } else if (hasMeta) {
                // ── No before/after but meta exists — show meta ──
                $('#modal-diff').hide();
                $('#modal-no-details').hide();
                $('#modal-meta-section').show();
                renderMeta('#modal-meta-body', allMeta);

            } else {
                // ── Nothing — show message only ──
                $('#modal-diff').hide();
                $('#modal-meta-section').hide();
                $('#modal-no-details').show();
                var msgs = $.map(details, function(d){ return d.message || null; }).filter(Boolean);
                if (msgs.length) {
                    $('#modal-no-details').html(
                        '<div style="padding:1.5rem;text-align:center;">' +
                        '<div style="font-size:2rem;margin-bottom:.5rem;">📋</div>' +
                        '<div style="color:#374151;font-size:.875rem;font-weight:500;">' + esc(msgs.join(', ')) + '</div>' +
                        '<div style="color:#9ca3af;font-size:.75rem;margin-top:.5rem;">No field-level changes recorded for this action.</div>' +
                        '</div>'
                    );
                }
            }

            $modal.css('display', 'flex');
            $('body').css('overflow', 'hidden');
        }

        function closeDetailModal() {
            $modal.css('display', 'none');
            $('body').css('overflow', '');
        }

        $('#activity_log_table').on('click', '.view-detail-btn', function () {
            openDetailModal(parseInt($(this).data('id')));
        });
        $('#modal-close-btn, #modal-close-btn2').on('click', closeDetailModal);
        $modal.on('click', function (e) { if ($(e.target).is($modal)) closeDetailModal(); });
        $(document).on('keydown', function (e) { if (e.key === 'Escape') closeDetailModal(); });

        /* ── 14. Initial load ────────────────────────────────────────── */
        fetchActivities(1);
    });
</script>
@endsection