@extends('layouts.app')
@section('title', 'Permissions')

@push('stylesheets')
@include('partials.filter-card-styles')
@include('partials.index-datatable-styles')
<style>
    /* Fix dropdown position inside table - prevent opening at top of page */
    #permissionsTableCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    #permissionsTableCard .table-responsive table td:last-child { position: relative; white-space: nowrap; }
    #permissionsTableCard .dropdown .dropdown-menu { position: absolute !important; }
    @media (max-width: 768px) {
        #permissionsTableCard .table-responsive { overflow-x: auto; }
    }
    .timeline-item {
        transition: all 0.2s ease;
    }
    .timeline-item:hover {
        background-color: #f8f9fa !important;
    }
    .timeline-item.active {
        background-color: #e3f2fd !important;
        border-color: #2196F3 !important;
        border-width: 2px !important;
    }
    .border-left {
        border-left-width: 3px !important;
    }
    .version-details-content {
        font-size: 0.9rem;
    }
    .version-details-content pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .cursor-pointer {
        cursor: pointer;
    }
    /* Theme support for Modified Fields tables */
    .from-data-table,
    .to-data-table {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .from-data-table,
        .to-data-table {
            background: #2d2d2d !important;
            color: #e0e0e0 !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
        }
        .from-data-table table,
        .to-data-table table {
            color: #e0e0e0 !important;
        }
        .from-data-table td,
        .to-data-table td {
            color: #e0e0e0 !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }
    }
    /* Light mode explicit (default) */
    .from-data-table,
    .to-data-table {
        background: #fff;
        color: #212529;
    }
</style>
@endpush

@section('contents')
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12" id="permissionsTableCard">
                    <x-table-filter-card
                        action="{{ route('permissions.index') }}"
                        id="permissionFilterForm"
                        :resetUrl="route('permissions.index')"
                    >
                        <div class="pms-filter-field">
                            <label for="filter-search">Search</label>
                            <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                                   placeholder="Search permissions…" value="{{ $search ?? '' }}">
                        </div>
                    </x-table-filter-card>

                    <x-active-filter-chips :chips="$activeChips" />

                    <x-layouts.index-card :createRoute="can('permission', 'add') ? route('permissions.create') : null" tableHeading="Permissions" createLabel="Add Permissions" :headers="[
                        'ID',
                        'Name',
                        'Description',
                        'Created At',
                    ]"
                        :sortColumns="['permissions.id', 'permissions.name', 'permissions.description', 'permissions.created_at']"
                        :perPageSlot="view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => request()->url()])"
                        :pagination="$permissions->withQueryString()->links('vendor.pagination.bootstrap-4')">
                        @forelse ($permissions as $data)
                            <tr>
                                <td>{{ $data->id ?? '-' }}</td>
                                <td>
                                    <x-details-modal-with-actions
                                        as="trigger"
                                        modalId="permissionDetailsModal"
                                        :detailsUrl="route('permissions.show', $data->id)"
                                        :entityId="$data->id"
                                        :entityName="$data->name ?? 'Permission'"
                                        :editUrl="route('permissions.edit', $data->id)"
                                        :deleteUrl="route('permissions.destroy', $data->id)"
                                    >
                                        {{ $data->name ?? '-' }}
                                    </x-details-modal-with-actions>
                                </td>
                                <td>{{ $data->description ?? '-' }}</td>
                                <td>{{ $data->created_at->format('d M Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">No permissions found.</td>
                            </tr>
                        @endforelse
                    </x-layouts.index-card>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->

    <x-details-modal-with-actions
        modalId="permissionDetailsModal"
        entityLabel="Permission"
        historyTarget="#versionHistoryModal"
        form="permission"
        formKey="permission"
    />

    <!-- Version History Modal -->
    <div class="modal fade" id="versionHistoryModal" tabindex="-1" role="dialog" aria-labelledby="versionHistoryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="versionHistoryModalLabel">Version History - <span id="modal-permission-name"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="min-height: 500px;">
                    <div class="row">
                        <!-- Left Panel: Timeline -->
                        <div class="col-md-4 border-right" style="max-height: 600px; overflow-y: auto;">
                            <h6 class="mb-3">Version Timeline</h6>
                            <div id="version-timeline">
                                <div class="text-center py-5">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                    <p class="mt-2">Loading history...</p>
                                </div>
                            </div>
                        </div>
                        <!-- Right Panel: Details -->
                        <div class="col-md-8" style="max-height: 600px; overflow-y: auto;">
                            <div id="version-details">
                                <div class="text-center py-5 text-muted">
                                    <i class="fas fa-info-circle fa-2x mb-2"></i>
                                    <p>Select an event from the timeline to view details</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="mr-auto">
                        <span id="version-counter" class="text-muted"></span>
                    </div>
                    <button type="button" class="btn btn-secondary" id="btn-prev" disabled>
                        <i class="fas fa-chevron-left"></i> Previous
                    </button>
                    <button type="button" class="btn btn-secondary" id="btn-next" disabled>
                        Next <i class="fas fa-chevron-right"></i>
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
@include('partials.index-datatable-scripts')

<script>
    $(function () {
        PmsIndexDataTable.initLaravelPaginated('#example1', {
            initComplete: function () {
                if (typeof PmsIndexDataTable.attachServerSort === 'function') {
                    PmsIndexDataTable.attachServerSort('#example1');
                }
            }
        });
    });

    // Delete confirmation for permission row actions and details modal delete
    $(document).on('click', '.permission-delete-btn, .btn-details-modal-delete', function(e) {
        e.preventDefault();
        var form = $(this).closest('form');
        Swal.fire({
            title: 'Are you sure?',
            text: "You will not be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then(function(result) {
            if (result.isConfirmed) form.submit();
        });
    });

    $(document).on('click', '.details-modal-trigger', function(e) {
        e.preventDefault();
        var $t = $(this);
        var modalId = $t.data('modal-id');
        if (modalId !== 'permissionDetailsModal') return;
        var detailsUrl = $t.data('details-url');
        var id = $t.data('entity-id');
        var name = $t.data('entity-name') || 'Permission';
        var editUrl = $t.data('edit-url');
        var deleteUrl = $t.data('delete-url');

        $('#' + modalId + '-title-name').text(name);
        $('#' + modalId + '-body').html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Loading...</p></div>');
        var $editBtn = $('#' + modalId + '-edit-btn');
        var $deleteForm = $('#' + modalId + '-delete-form');
        var $historyBtn = $('#' + modalId + '-history-btn');
        if ($editBtn.length) { $editBtn.hide().attr('href', '#'); }
        if ($deleteForm.length) { $deleteForm.hide().attr('action', '#'); }
        if ($historyBtn.length) { $historyBtn.hide().removeData('id').removeData('name').attr('data-id', id).attr('data-name', name); }
        $('#' + modalId).modal('show');

        $.ajax({
            url: detailsUrl,
            method: 'GET',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(res) {
                if (res.status === 200 && res.data) {
                    var d = res.data;
                    var html = '<dl class="row mb-0">';
                    html += '<dt class="col-sm-3">ID</dt><dd class="col-sm-9">' + (d.id || '-') + '</dd>';
                    html += '<dt class="col-sm-3">Name</dt><dd class="col-sm-9"><strong>' + (d.name || '-') + '</strong></dd>';
                    html += '<dt class="col-sm-3">Description</dt><dd class="col-sm-9">' + (d.description || '-') + '</dd>';
                    html += '<dt class="col-sm-3">Created At</dt><dd class="col-sm-9">' + (d.created_at || '-') + '</dd>';
                    html += '<dt class="col-sm-3">Updated At</dt><dd class="col-sm-9">' + (d.updated_at || '-') + '</dd>';
                    if (d.permission) {
                        var permData = typeof d.permission === 'string'
                            ? (function(){ try { return JSON.parse(d.permission); } catch(e){ return {}; } })()
                            : d.permission;
                        var formatKey = function(k) {
                            return (k || '').replace(/_/g, ' ').replace(/\b\w/g, function(c){ return c.toUpperCase(); });
                        };
                        var permHtml = '<div style="max-height:350px; overflow-y:auto;">';
                        if (permData && typeof permData === 'object' && Object.keys(permData).length) {
                            Object.keys(permData).sort().forEach(function(moduleName){
                                var module = permData[moduleName];
                                permHtml += '<div class="card mb-3 shadow-sm"><div class="card-header bg-light font-weight-bold">' + formatKey(moduleName) + '</div><div class="card-body py-2"><div class="row">';
                                Object.keys(module).sort().forEach(function(key){
                                    var val = module[key];
                                    var allowed = (val === '1' || val === 1 || val === true);
                                    permHtml += '<div class="col-md-6 mb-2"><span class="font-weight-bold">' + formatKey(key) + '</span><span class="badge ' + (allowed ? 'badge-success' : 'badge-danger') + ' ml-2">' + (allowed ? 'Allowed' : 'Denied') + '</span></div>';
                                });
                                permHtml += '</div></div></div>';
                            });
                        } else {
                            permHtml += '<p class="text-muted">No permissions configured.</p>';
                        }
                        permHtml += '</div>';
                        html += '<dt class="col-sm-3">Permissions</dt><dd class="col-sm-9">' + permHtml + '</dd>';
                    }
                    html += '</dl>';
                    $('#' + modalId + '-body').html(html);
                    if ($editBtn.length && editUrl) { $editBtn.attr('href', editUrl).show(); }
                    if ($deleteForm.length && deleteUrl) { $deleteForm.attr('action', deleteUrl).show(); }
                    if ($historyBtn.length) { $historyBtn.show(); }
                } else {
                    $('#' + modalId + '-body').html('<div class="alert alert-warning">Unable to load permission details.</div>');
                }
            },
            error: function(xhr) {
                var msg = 'Failed to load permission details.';
                if (xhr.status === 403) msg = 'Permission denied.';
                if (xhr.status === 404) msg = 'Permission not found.';
                $('#' + modalId + '-body').html('<div class="alert alert-danger">' + msg + '</div>');
            }
        });
    });

    // Version History Modal Variables
    let versionHistoryData = [];
    let currentVersionIndex = 0;

    // Format version history data from AJAX response
    function formatVersionHistoryData(data) {
        if (!Array.isArray(data)) {
            return [];
        }
        
        return data.map(log => {
            // Parse old_values if it's a string
            let oldValues = log.old_values;
            if (typeof oldValues === 'string') {
                try {
                    oldValues = JSON.parse(oldValues);
                } catch (e) {
                    oldValues = {};
                }
            }
            
            // Parse nested JSON strings in old_values (e.g., permission field)
            if (oldValues && typeof oldValues === 'object') {
                Object.keys(oldValues).forEach(key => {
                    if (typeof oldValues[key] === 'string' && (oldValues[key].startsWith('{') || oldValues[key].startsWith('['))) {
                        try {
                            oldValues[key] = JSON.parse(oldValues[key]);
                        } catch (e) {
                            // Keep as string if parsing fails
                        }
                    }
                });
            }
            
            // Parse new_values if it's a string
            let newValues = log.new_values;
            if (typeof newValues === 'string') {
                try {
                    newValues = JSON.parse(newValues);
                } catch (e) {
                    newValues = {};
                }
            }
            
            // Normalize field names: handle both "permission" and "permissions"
            // If old_values has "permission" and new_values has "permissions", normalize to "permissions"
            if (oldValues && oldValues.permission && !oldValues.permissions) {
                oldValues.permissions = oldValues.permission;
                delete oldValues.permission;
            }
            if (newValues && newValues.permission && !newValues.permissions) {
                newValues.permissions = newValues.permission;
                delete newValues.permission;
            }
            
            // Parse changed_fields if it's a string
            let changedFields = log.changed_fields;
            if (typeof changedFields === 'string') {
                try {
                    changedFields = JSON.parse(changedFields);
                } catch (e) {
                    changedFields = {};
                }
            }
            
            // Normalize changed_fields field names
            if (changedFields && typeof changedFields === 'object' && !Array.isArray(changedFields)) {
                if (changedFields.permission && !changedFields.permissions) {
                    changedFields.permissions = changedFields.permission;
                    delete changedFields.permission;
                }
            } else if (Array.isArray(changedFields)) {
                // Replace "permission" with "permissions" in array
                changedFields = changedFields.map(field => field === 'permission' ? 'permissions' : field);
            }
            
            return {
                id: log.id,
                action: log.action,
                description: log.description,
                user_id: log.user_id,
                ip_address: log.ip_address,
                created_at: log.created_at,
                old_values: oldValues,
                new_values: newValues,
                changed_fields: changedFields
            };
        });
    }

    // Show permission denied message
    function showPermissionDeniedMessage(message) {
        $('#version-timeline').html(`
            <div class="text-center py-5">
                <i class="fas fa-ban fa-3x text-danger mb-3"></i>
                <h6 class="text-danger">Permission Denied</h6>
                <p class="text-muted">${message}</p>
            </div>
        `);
        $('#version-details').html(`
            <div class="text-center py-5 text-muted">
                <i class="fas fa-lock fa-2x mb-2"></i>
                <p>You do not have permission to view the version history.</p>
            </div>
        `);
        $('#btn-prev, #btn-next').prop('disabled', true);
        $('#version-counter').text('');
    }

    // Show empty state
    function showEmptyState() {
        $('#version-timeline').html(`
            <div class="text-center py-5">
                <i class="fas fa-history fa-3x text-muted mb-3"></i>
                <h6 class="text-muted">No History Available</h6>
                <p class="text-muted">No version history found for this permission.</p>
            </div>
        `);
        $('#version-details').html(`
            <div class="text-center py-5 text-muted">
                <i class="fas fa-info-circle fa-2x mb-2"></i>
                <p>No history data available to display.</p>
            </div>
        `);
        $('#btn-prev, #btn-next').prop('disabled', true);
        $('#version-counter').text('');
    }

    // Show error message
    function showErrorMessage(message) {
        $('#version-timeline').html(`
            <div class="text-center py-5">
                <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                <h6 class="text-warning">Error</h6>
                <p class="text-muted">${message}</p>
            </div>
        `);
        $('#version-details').html(`
            <div class="text-center py-5 text-muted">
                <i class="fas fa-info-circle fa-2x mb-2"></i>
                <p>Unable to load version history details.</p>
            </div>
        `);
        $('#btn-prev, #btn-next').prop('disabled', true);
        $('#version-counter').text('');
    }

    // Handle History button click
    $(document).on('click', '.btn-history', function() {
        const permissionId = $(this).data('id');
        const permissionName = $(this).data('name');
        
        $('#modal-permission-name').text(permissionName);
        versionHistoryData = [];
        currentVersionIndex = 0;
        
        // Reset UI
        $('#version-timeline').html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div><p class="mt-2">Loading history...</p></div>');
        $('#version-details').html('<div class="text-center py-5 text-muted"><i class="fas fa-info-circle fa-2x mb-2"></i><p>Select an event from the timeline to view details</p></div>');
        $('#btn-prev, #btn-next').prop('disabled', true);
        $('#version-counter').text('');
        
        // Fetch version history
        fetchVersionHistory(permissionId);
    });

    // Fetch version history via AJAX
    function fetchVersionHistory(permissionId) {
        const url = '{{ url("activity-logs/permission") }}/' + permissionId + '/version-history?type=view_history_modal';
        $.ajax({
            url: url,
            method: 'GET',
            dataType: 'json',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                // Check for permission denied (403 status)
                if (response && response.status === 403) {
                    const errorMessage = response.data || response.message || 'Permission Denied!';
                    showPermissionDeniedMessage(errorMessage);
                    return;
                }
                
                // Handle different response formats
                let data = null;
                if (response && response.status === 200 && response.data) {
                    data = response.data;
                } else if (Array.isArray(response)) {
                    data = response;
                } else if (response && Array.isArray(response.data)) {
                    data = response.data;
                }
                
                if (data && Array.isArray(data) && data.length > 0) {
                    // Format the response data
                    versionHistoryData = formatVersionHistoryData(data);
                    
                    // Sort by created_at descending (newest first)
                    versionHistoryData.sort((a, b) => {
                        return new Date(b.created_at) - new Date(a.created_at);
                    });
                    
                    populateTimeline();
                    currentVersionIndex = 0;
                    populateDetails(versionHistoryData[0]);
                    updateNavigationButtons();
                } else {
                    // Show empty state when response is empty or invalid
                    showEmptyState();
                }
            },
            error: function(xhr) {
                // Check for 403 Forbidden status
                if (xhr.status === 403) {
                    let errorMessage = 'Permission Denied!';
                    try {
                        const response = xhr.responseJSON;
                        if (response && (response.data || response.message)) {
                            errorMessage = response.data || response.message;
                        }
                    } catch (e) {
                        // Use default message
                    }
                    showPermissionDeniedMessage(errorMessage);
                } else {
                    // Show error message for other errors
                    showErrorMessage('Failed to load version history. Please try again.');
                }
            }
        });
    }


    // Format date to match screenshot: "Jan 14, 2026 19:10:16"
    function formatDate(dateString) {
        const date = new Date(dateString);
        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        const month = months[date.getMonth()];
        const day = date.getDate();
        const year = date.getFullYear();
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${month} ${day}, ${year} ${hours}:${minutes}:${seconds}`;
    }

    // Populate timeline in left panel
    function populateTimeline() {
        let timelineHtml = '';
        
        versionHistoryData.forEach((log, index) => {
            const actionClass = log.action === 'create' ? 'success' : (log.action === 'update' ? 'primary' : 'danger');
            const actionText = log.action ? log.action.toUpperCase() : 'UNKNOWN';
            const formattedDate = formatDate(log.created_at);
            
            const isActive = index === currentVersionIndex ? 'active bg-light border-primary' : '';
            
            timelineHtml += `
                <div class="timeline-item mb-3 p-2 border rounded cursor-pointer ${isActive}" 
                     data-index="${index}" 
                     style="cursor: pointer; transition: all 0.2s;"
                     onmouseover="$(this).addClass('shadow-sm')" 
                     onmouseout="$(this).removeClass('shadow-sm')">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-pencil-alt mr-2 text-${actionClass}"></i>
                        <span class="badge badge-${actionClass} mr-2">${actionText}</span>
                        <small class="text-muted">${formattedDate}</small>
                    </div>
                    <div class="mt-1 text-sm text-muted" style="font-size: 0.85rem;">
                        ${log.description || 'No description'}
                    </div>
                </div>
            `;
        });
        
        $('#version-timeline').html(timelineHtml);
        
        // Add click handlers
        $('.timeline-item').on('click', function() {
            const index = parseInt($(this).data('index'));
            currentVersionIndex = index;
            populateDetails(versionHistoryData[index]);
            updateNavigationButtons();
            updateTimelineSelection();
        });
    }

    // Update timeline selection highlight
    function updateTimelineSelection() {
        $('.timeline-item').removeClass('active bg-light border-primary');
        $(`.timeline-item[data-index="${currentVersionIndex}"]`).addClass('active bg-light border-primary');
    }

    // Populate details in right panel
    function populateDetails(log) {
        if (!log) return;
        
        const formattedDate = formatDate(log.created_at);
        
        // Parse changed_fields if it's a string
        let changedFields = log.changed_fields;
        if (typeof changedFields === 'string') {
            try {
                changedFields = JSON.parse(changedFields);
            } catch (e) {
                changedFields = {};
            }
        }
        
        // Parse old_values and new_values
        let oldValues = log.old_values;
        let newValues = log.new_values;
        if (typeof oldValues === 'string') {
            try {
                oldValues = JSON.parse(oldValues);
            } catch (e) {
                oldValues = {};
            }
        }
        if (typeof newValues === 'string') {
            try {
                newValues = JSON.parse(newValues);
            } catch (e) {
                newValues = {};
            }
        }
        
        // Parse nested JSON strings in old_values (e.g., permission field)
        if (oldValues && typeof oldValues === 'object') {
            Object.keys(oldValues).forEach(key => {
                if (typeof oldValues[key] === 'string' && (oldValues[key].startsWith('{') || oldValues[key].startsWith('['))) {
                    try {
                        oldValues[key] = JSON.parse(oldValues[key]);
                    } catch (e) {
                        // Keep as string if parsing fails
                    }
                }
            });
        }
        
        // Parse nested JSON strings in new_values (e.g., permission field)
        if (newValues && typeof newValues === 'object') {
            Object.keys(newValues).forEach(key => {
                if (typeof newValues[key] === 'string' && (newValues[key].startsWith('{') || newValues[key].startsWith('['))) {
                    try {
                        newValues[key] = JSON.parse(newValues[key]);
                    } catch (e) {
                        // Keep as string if parsing fails
                    }
                }
            });
        }
        
        // Normalize field names: handle both "permission" and "permissions"
        // If old_values has "permission" and new_values has "permissions", normalize to "permissions"
        if (oldValues && oldValues.permission && !oldValues.permissions) {
            oldValues.permissions = oldValues.permission;
            delete oldValues.permission;
        }
        if (newValues && newValues.permission && !newValues.permissions) {
            newValues.permissions = newValues.permission;
            delete newValues.permission;
        }
        
        // Normalize changed_fields field names
        if (changedFields && typeof changedFields === 'object' && !Array.isArray(changedFields)) {
            if (changedFields.permission && !changedFields.permissions) {
                changedFields.permissions = changedFields.permission;
                delete changedFields.permission;
            }
        } else if (Array.isArray(changedFields)) {
            // Replace "permission" with "permissions" in array
            changedFields = changedFields.map(field => field === 'permission' ? 'permissions' : field);
        }
        
        // Count changes
        const addedFields = [];
        const removedFields = [];
        const modifiedFields = [];
        
        // Helper function to normalize field name
        function normalizeFieldName(fieldName) {
            if (fieldName === 'permission' || fieldName === 'permissions') {
                // Check which one exists in the values (prefer "permissions" if it exists in either)
                if ((oldValues && oldValues.permissions !== undefined) || (newValues && newValues.permissions !== undefined)) {
                    return 'permissions';
                } else if ((oldValues && oldValues.permission !== undefined) || (newValues && newValues.permission !== undefined)) {
                    return 'permission';
                } else {
                    // Default to "permissions"
                    return 'permissions';
                }
            }
            return fieldName;
        }
        
        // Helper function to parse JSON string if needed
        function parseIfJSON(value) {
            if (typeof value === 'string' && (value.startsWith('{') || value.startsWith('['))) {
                try {
                    return JSON.parse(value);
                } catch (e) {
                    return value;
                }
            }
            return value;
        }
        
        if (changedFields) {
            if (Array.isArray(changedFields)) {
                // If changed_fields is an array of field names, determine change type by comparing old/new values
                changedFields.forEach(field => {
                    // Skip internal Laravel fields that shouldn't be shown in history
                    if (field === '_token' || field === '_method') {
                        return;
                    }
                    
                    const normalizedField = normalizeFieldName(field);
                    const hasOld = oldValues && (oldValues[normalizedField] !== undefined || oldValues[field] !== undefined);
                    const hasNew = newValues && (newValues[normalizedField] !== undefined || newValues[field] !== undefined);
                    
                    if (!hasOld && hasNew) {
                        // Store as object with field name only (values will be looked up from newValues)
                        addedFields.push({ field: normalizedField, from: undefined, to: undefined, changeType: 'added' });
                    } else if (hasOld && !hasNew) {
                        removedFields.push({ field: normalizedField, from: undefined, to: undefined, changeType: 'removed' });
                    } else if (hasOld && hasNew) {
                        modifiedFields.push({ field: normalizedField, from: undefined, to: undefined, changeType: 'value_changed' });
                    }
                });
            } else if (typeof changedFields === 'object') {
                // If changed_fields is an object with change types and from/to values
                Object.keys(changedFields).forEach(field => {
                    // Skip internal Laravel fields that shouldn't be shown in history
                    if (field === '_token' || field === '_method') {
                        return;
                    }
                    
                    const normalizedField = normalizeFieldName(field);
                    const change = changedFields[field];
                    
                    // Handle both string values and nested objects
                    let changeType = typeof change === 'string' ? change : (change?.change_type || change?.type || change?.status || 'value_changed');
                    let fromValue = change?.from;
                    let toValue = change?.to;
                    
                    // Parse JSON strings in from/to values if they exist
                    if (fromValue !== undefined) {
                        fromValue = parseIfJSON(fromValue);
                    }
                    if (toValue !== undefined) {
                        toValue = parseIfJSON(toValue);
                    }
                    
                    // Store as object with field name, from, to, and changeType
                    const fieldEntry = {
                        field: normalizedField,
                        from: fromValue,
                        to: toValue,
                        changeType: changeType
                    };
                    
                    if (changeType === 'value_added' || changeType === 'added' || changeType === 'add') {
                        addedFields.push(fieldEntry);
                    } else if (changeType === 'value_removed' || changeType === 'removed' || changeType === 'remove') {
                        removedFields.push(fieldEntry);
                    } else if (changeType === 'value_changed' || changeType === 'changed' || changeType === 'modify') {
                        modifiedFields.push(fieldEntry);
                    } else {
                        // Default to modified if type is unclear
                        modifiedFields.push(fieldEntry);
                    }
                });
            }
        }
        
        const totalChanges = addedFields.length + removedFields.length + modifiedFields.length;
        const actionText = log.action ? log.action.toUpperCase() : 'UNKNOWN';
        
        let detailsHtml = `
            <div class="version-details-content">
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-pencil-alt mr-2 text-primary"></i>
                            <h6 class="mb-0 mr-2">${actionText}</h6>
                            <small class="text-muted">${formattedDate}</small>
                        </div>
                        <span class="badge badge-primary">${actionText}</span>
                    </div>
                    <p class="mb-2">${log.description || 'No description'}</p>
                    <p class="mb-1">
                        <i class="fas fa-user mr-2"></i><strong>Performed By:</strong> ${log.user_id || 'Unknown'}
                        <span class="ml-3"><i class="fas fa-desktop mr-2"></i><strong>IP Address:</strong> ${log.ip_address || 'N/A'}</span>
                    </p>
                </div>
                
                <div class="mb-3">
                    <h6 class="d-flex align-items-center">
                        Change Summary
                        ${totalChanges > 0 ? `<span class="badge badge-warning ml-2" style="background-color: #ff9800; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0;">${totalChanges}</span>` : ''}
                    </h6>
                    <div class="d-flex mb-2">
                        ${addedFields.length > 0 ? `<span class="badge badge-success mr-2">+ ${addedFields.length} Added</span>` : ''}
                        ${removedFields.length > 0 ? `<span class="badge badge-danger mr-2">- ${removedFields.length} Removed</span>` : ''}
                        ${modifiedFields.length > 0 ? `<span class="badge badge-primary mr-2">${modifiedFields.length} Modified</span>` : ''}
                    </div>
                </div>
                
                <div class="changed-fields-section">
                    <h6>Changed Fields</h6>
        `;
        
        // Display added fields
        if (addedFields.length > 0) {
            detailsHtml += '<div class="mb-3"><h6 class="text-success"><i class="fas fa-plus-circle"></i> Added Fields (' + addedFields.length + ')</h6>';
            addedFields.forEach(fieldEntry => {
                const field = fieldEntry.field;
                let newValue;
                
                // Use stored 'to' value if available, otherwise look up in newValues
                if (fieldEntry.to !== undefined) {
                    newValue = fieldEntry.to;
                } else {
                    // Handle field name normalization: check both "permission" and "permissions"
                    let actualField = field;
                    if (field === 'permission' || field === 'permissions') {
                        if (newValues && newValues.permissions !== undefined) {
                            actualField = 'permissions';
                        } else if (newValues && newValues.permission !== undefined) {
                            actualField = 'permission';
                        }
                    }
                    newValue = newValues && newValues[actualField] !== undefined ? newValues[actualField] : 'N/A';
                }
                
                const isNewValueObject = typeof newValue === 'object' && newValue !== null && newValue !== 'N/A';
                
                // Check if it's a permission structure and show table + JSON
                if (isNewValueObject && isPermissionStructure(newValue)) {
                    const toTableHtml = formatDataAsTable(newValue);
                    const formattedValue = formatFieldValue(newValue);
                    detailsHtml += `
                        <div class="border-left border-success pl-3 mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <strong>${field}:</strong>
                                <span class="badge badge-primary">added</span>
                            </div>
                            
                            <!-- To Section -->
                            <div style="width: 100%;">
                                <strong style="color: #28a745;">To:</strong>
                                <div class="mt-2 to-data-table" style="background: #fff; padding: 12px; border-radius: 4px; max-height: 250px; overflow-y: auto; border: 1px solid rgba(222, 226, 230, 0.8); box-shadow: 0 1px 3px rgba(0,0,0,0.1); color: #212529;">
                                    ${toTableHtml}
                                </div>
                                <div class="mt-2">
                                    <strong style="color: #28a745; font-size: 0.9rem;">To (JSON):</strong>
                                    ${formattedValue}
                                </div>
                            </div>
                        </div>
                    `;
                } else {
                    const formattedValue = formatFieldValue(newValue);
                    detailsHtml += `
                        <div class="d-flex justify-content-between align-items-start border-left border-success pl-3 mb-2">
                            <div class="flex-grow-1">
                                <strong>${field}:</strong><br>
                                <span class="text-success">To: ${formattedValue}</span>
                            </div>
                            <span class="badge badge-primary ml-2">added</span>
                        </div>
                    `;
                }
            });
            detailsHtml += '</div>';
        }
        
        // Display removed fields
        if (removedFields.length > 0) {
            detailsHtml += '<div class="mb-3"><h6 class="text-danger"><i class="fas fa-minus-circle"></i> Removed Fields (' + removedFields.length + ')</h6>';
            removedFields.forEach(fieldEntry => {
                const field = fieldEntry.field;
                let oldValue;
                
                // Use stored 'from' value if available, otherwise look up in oldValues
                if (fieldEntry.from !== undefined) {
                    oldValue = fieldEntry.from;
                } else {
                    // Handle field name normalization: check both "permission" and "permissions"
                    let actualField = field;
                    if (field === 'permission' || field === 'permissions') {
                        if (oldValues && oldValues.permissions !== undefined) {
                            actualField = 'permissions';
                        } else if (oldValues && oldValues.permission !== undefined) {
                            actualField = 'permission';
                        }
                    }
                    oldValue = oldValues && oldValues[actualField] !== undefined ? oldValues[actualField] : 'N/A';
                }
                
                const formattedValue = formatFieldValue(oldValue);
                detailsHtml += `
                    <div class="d-flex justify-content-between align-items-start border-left border-danger pl-3 mb-2">
                        <div class="flex-grow-1">
                            <strong>${field}:</strong><br>
                            <span class="text-danger">From: ${formattedValue}</span>
                        </div>
                        <span class="badge badge-danger ml-2">removed</span>
                    </div>
                `;
            });
            detailsHtml += '</div>';
        }
        
        // Display modified fields
        if (modifiedFields.length > 0) {
            detailsHtml += '<div class="mb-3"><h6 class="text-primary"><i class="fas fa-edit"></i> Modified Fields (' + modifiedFields.length + ')</h6>';
            modifiedFields.forEach(fieldEntry => {
                const field = fieldEntry.field;
                let oldValue;
                let newValue;
                
                // Use stored 'from' and 'to' values if available, otherwise look up in oldValues/newValues
                if (fieldEntry.from !== undefined && fieldEntry.to !== undefined) {
                    oldValue = fieldEntry.from;
                    newValue = fieldEntry.to;
                } else {
                    // Handle field name normalization: check both "permission" and "permissions"
                    let actualField = field;
                    if (field === 'permission' || field === 'permissions') {
                        // Check which one exists in the values (prefer "permissions" if it exists in either)
                        if ((oldValues && oldValues.permissions !== undefined) || (newValues && newValues.permissions !== undefined)) {
                            actualField = 'permissions';
                        } else if ((oldValues && oldValues.permission !== undefined) || (newValues && newValues.permission !== undefined)) {
                            actualField = 'permission';
                        } else {
                            // Default to "permissions" if field name is "permission" or "permissions"
                            actualField = 'permissions';
                        }
                    }
                    
                    // Get values, checking both field names if needed
                    oldValue = undefined;
                    newValue = undefined;
                    
                    if (oldValues) {
                        // Try actualField first
                        if (oldValues[actualField] !== undefined) {
                            oldValue = oldValues[actualField];
                        } 
                        // Try the other field name (permission/permissions)
                        else if (actualField === 'permissions' && oldValues.permission !== undefined) {
                            oldValue = oldValues.permission;
                        } else if (actualField === 'permission' && oldValues.permissions !== undefined) {
                            oldValue = oldValues.permissions;
                        }
                        // If still undefined and field is permission/permissions, try the original field name from changed_fields
                        else if ((field === 'permission' || field === 'permissions') && oldValues[field] !== undefined) {
                            oldValue = oldValues[field];
                        }
                    }
                    
                    if (newValues) {
                        // Try actualField first
                        if (newValues[actualField] !== undefined) {
                            newValue = newValues[actualField];
                        } 
                        // Try the other field name (permission/permissions)
                        else if (actualField === 'permissions' && newValues.permission !== undefined) {
                            newValue = newValues.permission;
                        } else if (actualField === 'permission' && newValues.permissions !== undefined) {
                            newValue = newValues.permissions;
                        }
                        // If still undefined and field is permission/permissions, try the original field name from changed_fields
                        else if ((field === 'permission' || field === 'permissions') && newValues[field] !== undefined) {
                            newValue = newValues[field];
                        }
                    }
                    
                    // Set to 'N/A' if still undefined
                    if (oldValue === undefined) oldValue = 'N/A';
                    if (newValue === undefined) newValue = 'N/A';
                }
                const formattedOldValue = formatFieldValue(oldValue);
                const formattedNewValue = formatFieldValue(newValue);
                
                // Check if values are simple (non-object) or complex (object)
                const isOldValueObject = typeof oldValue === 'object' && oldValue !== null;
                const isNewValueObject = typeof newValue === 'object' && newValue !== null;
                const isComplexValue = isOldValueObject || isNewValueObject;
                
                // Format simple value for display
                function formatSimpleValue(value) {
                    if (value === null || value === undefined) {
                        return '<em>null</em>';
                    }
                    if (typeof value === 'boolean') {
                        return value ? 'true' : 'false';
                    }
                    return String(value);
                }
                
                if (isComplexValue) {
                    // Complex object: show table above JSON
                    let fromTableHtml = '';
                    let toTableHtml = '';
                    
                    if (isOldValueObject) {
                        fromTableHtml = formatDataAsTable(oldValue);
                    } else {
                        fromTableHtml = formatSimpleValue(oldValue);
                    }
                    
                    if (isNewValueObject) {
                        toTableHtml = formatDataAsTable(newValue);
                    } else {
                        toTableHtml = formatSimpleValue(newValue);
                    }
                    
                    detailsHtml += `
                        <div class="border-left border-primary pl-3 mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <strong>${field}:</strong>
                                <span class="badge badge-primary">value_changed</span>
                            </div>
                            
                            <!-- From Section -->
                            <div class="mb-3" style="width: 100%;">
                                <strong style="color: #dc3545;">From:</strong>
                                <div class="mt-2 from-data-table" style="background: #fff; padding: 12px; border-radius: 4px; max-height: 250px; overflow-y: auto; border: 1px solid rgba(222, 226, 230, 0.8); box-shadow: 0 1px 3px rgba(0,0,0,0.1); color: #212529;">
                                    ${fromTableHtml}
                                </div>
                                <div class="mt-2">
                                    <strong style="color: #dc3545; font-size: 0.9rem;">From (JSON):</strong>
                                    ${formattedOldValue}
                                </div>
                            </div>
                            
                            <!-- To Section -->
                            <div style="width: 100%;">
                                <strong style="color: #28a745;">To:</strong>
                                <div class="mt-2 to-data-table" style="background: #fff; padding: 12px; border-radius: 4px; max-height: 250px; overflow-y: auto; border: 1px solid rgba(222, 226, 230, 0.8); box-shadow: 0 1px 3px rgba(0,0,0,0.1); color: #212529;">
                                    ${toTableHtml}
                                </div>
                                <div class="mt-2">
                                    <strong style="color: #28a745; font-size: 0.9rem;">To (JSON):</strong>
                                    ${formattedNewValue}
                                </div>
                                
                                <!-- updated_by Section -->
                                ${(() => {
                                    const oldUpdatedBy = oldValues && oldValues.updated_by !== undefined ? oldValues.updated_by : null;
                                    const newUpdatedBy = newValues && newValues.updated_by !== undefined ? newValues.updated_by : null;
                                    
                                    const fromDisplay = oldUpdatedBy !== null ? oldUpdatedBy : '1';
                                    const toDisplay = newUpdatedBy !== null ? newUpdatedBy : '1';
                                    
                                    return `
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <strong>updated_by:</strong>
                                            <span class="badge badge-primary">value_changed</span>
                                        </div>
                                        <div class="mb-2">
                                            <strong style="color: #dc3545;">From:</strong>
                                            <span style="color: #6c757d; margin-left: 8px;">${fromDisplay}</span>
                                        </div>
                                        <div>
                                            <strong style="color: #28a745;">To:</strong>
                                            <span style="color: #17a2b8; margin-left: 8px;">${toDisplay}</span>
                                        </div>
                                    `;
                                })()}
                            </div>
                        </div>
                    `;
                } else {
                    // Simple value: show inline with From/To labels
                    const oldValueDisplay = formatSimpleValue(oldValue);
                    const newValueDisplay = formatSimpleValue(newValue);
                    
                    detailsHtml += `
                        <div class="border-left border-primary pl-3 mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <strong>${field}:</strong>
                                <span class="badge badge-primary">value_changed</span>
                            </div>
                            <div class="mb-2">
                                <strong style="color: #dc3545;">From:</strong>
                                <span style="color: #6c757d; margin-left: 8px;">${oldValueDisplay}</span>
                            </div>
                            <div>
                                <strong style="color: #28a745;">To:</strong>
                                <span style="color: #17a2b8; margin-left: 8px;">${newValueDisplay}</span>
                            </div>
                        </div>
                    `;
                }
            });
            detailsHtml += '</div>';
        }
        
        // If no changed fields, show all fields from new_values or old_values
        if (addedFields.length === 0 && removedFields.length === 0 && modifiedFields.length === 0) {
            const allFields = newValues && Object.keys(newValues).length > 0 ? newValues : (oldValues && Object.keys(oldValues).length > 0 ? oldValues : {});
            if (Object.keys(allFields).length > 0) {
                detailsHtml += '<div class="mb-3"><h6>All Fields</h6>';
                Object.keys(allFields).forEach(field => {
                    const value = allFields[field];
                    const formattedValue = formatFieldValue(value);
                    detailsHtml += `
                        <div class="border-left pl-3 mb-2">
                            <strong>${field}:</strong><br>
                            <span>${formattedValue}</span>
                        </div>
                    `;
                });
                detailsHtml += '</div>';
            }
        }
        
        detailsHtml += '</div></div>';
        
        $('#version-details').html(detailsHtml);
    }

    // Format field value for display
    function formatFieldValue(value) {
        if (value === null || value === undefined) {
            return '<em>null</em>';
        }
        if (typeof value === 'object') {
            try {
                return '<pre style="max-height: 250px; overflow-y: auto; font-size: 0.85rem; background: #f5f5f5; padding: 10px; border-radius: 4px;">' + 
                       JSON.stringify(value, null, 2) + '</pre>';
            } catch (e) {
                return String(value);
            }
        }
        if (typeof value === 'boolean') {
            return value ? 'true' : 'false';
        }
        return String(value);
    }

    // Helper function to check if object is a permission structure
    function isPermissionStructure(obj) {
        if (!obj || typeof obj !== 'object' || Array.isArray(obj)) {
            return false;
        }
        const keys = Object.keys(obj);
        if (keys.length === 0) {
            return false;
        }
        
        // Check if most top-level values are objects (modules) containing permission actions
        // A permission structure typically has: { moduleName: { action1: true/false, action2: true/false, ... }, ... }
        let objectCount = 0;
        let hasPermissionLikeValues = false;
        
        // Common module names in permission structures
        const commonModules = ['permission', 'user_permission', 'user', 'department', 'blk', 'chronic_scheme', 'work_type', 'sector', 'district', 'location', 'fund_source', 'announce_budget', 'budget_allocation', 'project', 'activity_logs', 'export_snapshots', 'reports'];
        
        for (const key of keys) {
            const value = obj[key];
            if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
                objectCount++;
                // Check if nested object contains permission-like values (booleans, "1"/"0", 1/0)
                const nestedKeys = Object.keys(value);
                if (nestedKeys.length > 0) {
                    const sampleValue = value[nestedKeys[0]];
                    if (typeof sampleValue === 'boolean' || 
                        (typeof sampleValue === 'string' && (sampleValue === '1' || sampleValue === '0')) ||
                        (typeof sampleValue === 'number' && (sampleValue === 1 || sampleValue === 0))) {
                        hasPermissionLikeValues = true;
                    }
                }
            }
        }
        
        // Consider it a permission structure if:
        // 1. Most values are objects (at least 50% or at least 2 modules)
        // 2. Those objects contain permission-like values
        // OR if keys match common module names
        const hasCommonModules = keys.some(key => commonModules.includes(key));
        return ((objectCount >= Math.max(2, keys.length * 0.5)) && hasPermissionLikeValues) || hasCommonModules;
    }

    // Format data as table (for From/To display above JSON) with theme support
    function formatDataAsTable(data) {
        if (!data || typeof data !== 'object') {
            return '<em>N/A</em>';
        }
        
        let tableHtml = '<table class="table table-sm mb-0" style="font-size: 0.85rem; border-collapse: collapse; width: 100%; background: transparent; color: inherit;"><tbody>';
        
        // Check if data itself is a permission structure
        if (isPermissionStructure(data)) {
            // Display permission structure: Module -> Actions with Yes/No
            Object.keys(data).forEach(moduleName => {
                const moduleData = data[moduleName];
                // Module header row
                tableHtml += `<tr><td colspan="2" style="padding: 8px; border-bottom: 2px solid rgba(222, 226, 230, 0.8); color: inherit; background-color: rgba(0,0,0,0.02);"><strong>${moduleName}</strong></td></tr>`;
                
                if (typeof moduleData === 'object' && moduleData !== null && !Array.isArray(moduleData)) {
                    // Display each permission action
                    Object.keys(moduleData).forEach(actionName => {
                        const actionValue = moduleData[actionName];
                        const displayValue = (actionValue === '1' || actionValue === 1 || actionValue === true) ? 'Yes' : 'No';
                        tableHtml += `<tr><td style="width: 40%; padding: 8px 8px 8px 20px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">${actionName}</td><td style="padding: 8px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">${displayValue}</td></tr>`;
                    });
                } else {
                    // If module data is not an object, show as regular value
                    let displayValue = moduleData;
                    if (moduleData === null || moduleData === undefined) {
                        displayValue = '<em>null</em>';
                    } else if (typeof moduleData === 'boolean') {
                        displayValue = moduleData ? 'true' : 'false';
                    } else {
                        displayValue = String(moduleData);
                    }
                    tableHtml += `<tr><td style="width: 40%; padding: 8px 8px 8px 20px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">${moduleName}</td><td style="padding: 8px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">${displayValue}</td></tr>`;
                }
            });
        }
        // Handle permission object wrapped in other data
        else if (data.permission && typeof data.permission === 'object') {
            // Show other fields first
            Object.keys(data).forEach(key => {
                if (key !== 'permission') {
                    const value = data[key];
                    let displayValue = value;
                    if (value === null || value === undefined) {
                        displayValue = '<em>null</em>';
                    } else if (typeof value === 'boolean') {
                        displayValue = value ? 'true' : 'false';
                    } else if (typeof value === 'object') {
                        displayValue = 'Object';
                    } else {
                        displayValue = String(value);
                    }
                    tableHtml += `<tr><td style="width: 40%; padding: 8px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;"><strong>${key}</strong></td><td style="padding: 8px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">${displayValue}</td></tr>`;
                }
            });
            
            // Then show permissions structure
            if (isPermissionStructure(data.permission)) {
                Object.keys(data.permission).forEach(moduleName => {
                    const moduleData = data.permission[moduleName];
                    // Module header row
                    tableHtml += `<tr><td colspan="2" style="padding: 8px; border-bottom: 2px solid rgba(222, 226, 230, 0.8); color: inherit; background-color: rgba(0,0,0,0.02);"><strong>${moduleName}</strong></td></tr>`;
                    
                    if (typeof moduleData === 'object' && moduleData !== null && !Array.isArray(moduleData)) {
                        // Display each permission action
                        Object.keys(moduleData).forEach(actionName => {
                            const actionValue = moduleData[actionName];
                            const displayValue = (actionValue === '1' || actionValue === 1 || actionValue === true) ? 'Yes' : 'No';
                            tableHtml += `<tr><td style="width: 40%; padding: 8px 8px 8px 20px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">${actionName}</td><td style="padding: 8px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">${displayValue}</td></tr>`;
                        });
                    } else {
                        // If module data is not an object, show as regular value
                        let displayValue = moduleData;
                        if (moduleData === null || moduleData === undefined) {
                            displayValue = '<em>null</em>';
                        } else if (typeof moduleData === 'boolean') {
                            displayValue = moduleData ? 'true' : 'false';
                        } else {
                            displayValue = String(moduleData);
                        }
                        tableHtml += `<tr><td style="width: 40%; padding: 8px 8px 8px 20px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">${moduleName}</td><td style="padding: 8px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">${displayValue}</td></tr>`;
                    }
                });
            } else {
                tableHtml += `<tr><td style="width: 40%; padding: 8px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;"><strong>permission</strong></td><td style="padding: 8px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">Object</td></tr>`;
            }
        } else {
            // Regular object display
            Object.keys(data).forEach(key => {
                const value = data[key];
                let displayValue = value;
                if (value === null || value === undefined) {
                    displayValue = '<em>null</em>';
                } else if (typeof value === 'boolean') {
                    displayValue = value ? 'true' : 'false';
                } else if (typeof value === 'object') {
                    displayValue = 'Object';
                } else {
                    displayValue = String(value);
                }
                tableHtml += `<tr><td style="width: 40%; padding: 8px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;"><strong>${key}</strong></td><td style="padding: 8px; border-bottom: 1px solid rgba(222, 226, 230, 0.5); color: inherit;">${displayValue}</td></tr>`;
            });
        }
        
        tableHtml += '</tbody></table>';
        return tableHtml;
    }

    // Update navigation buttons
    function updateNavigationButtons() {
        const total = versionHistoryData.length;
        const current = currentVersionIndex + 1;
        
        $('#version-counter').text(`${current} of ${total}`);
        $('#btn-prev').prop('disabled', currentVersionIndex === 0);
        $('#btn-next').prop('disabled', currentVersionIndex === total - 1);
    }

    // Previous button handler
    $('#btn-prev').on('click', function() {
        if (currentVersionIndex > 0) {
            currentVersionIndex--;
            populateDetails(versionHistoryData[currentVersionIndex]);
            updateNavigationButtons();
            updateTimelineSelection();
            
            // Scroll to selected item in timeline
            const selectedItem = $(`.timeline-item[data-index="${currentVersionIndex}"]`);
            if (selectedItem.length) {
                const timelineContainer = $('#version-timeline');
                const scrollTop = selectedItem.position().top + timelineContainer.scrollTop() - 20;
                timelineContainer.animate({ scrollTop: scrollTop }, 300);
            }
        }
    });

    // Next button handler
    $('#btn-next').on('click', function() {
        if (currentVersionIndex < versionHistoryData.length - 1) {
            currentVersionIndex++;
            populateDetails(versionHistoryData[currentVersionIndex]);
            updateNavigationButtons();
            updateTimelineSelection();
            
            // Scroll to selected item in timeline
            const selectedItem = $(`.timeline-item[data-index="${currentVersionIndex}"]`);
            if (selectedItem.length) {
                const timelineContainer = $('#version-timeline');
                const scrollTop = selectedItem.position().top + timelineContainer.scrollTop() - 20;
                timelineContainer.animate({ scrollTop: scrollTop }, 300);
            }
        }
    });
</script>
@endpush