@props([
    'form' => 'item_category',
    'entityLabel' => 'record',
    'baseUrl' => null,
])

@push('stylesheets')
<style>
    .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;
    }
    .from-data-table,
    .to-data-table {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    @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;
        }
    }
    .from-data-table,
    .to-data-table {
        background: #fff;
        color: #212529;
    }
</style>
@endpush

<!-- Version History Modal -->
<div class="modal fade" id="versionHistoryModal" tabindex="-1" role="dialog" aria-labelledby="versionHistoryModalLabel" aria-hidden="true"
    data-version-history-base-url="{{ $baseUrl ?? url('activity-logs/' . $form) }}"
    data-version-history-entity-label="{{ e($entityLabel) }}">
    <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-version-history-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">
                    <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>
                    <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>

@push('scripts')
<script>
(function() {
    var $modal = $('#versionHistoryModal');
    var versionHistoryFormBaseUrl = ($modal.length && $modal.attr('data-version-history-base-url')) ? $modal.attr('data-version-history-base-url') : '';
    var versionHistoryEntityLabel = ($modal.length && $modal.attr('data-version-history-entity-label')) ? $modal.attr('data-version-history-entity-label') : 'record';

    var versionHistoryData = [];
    var currentVersionIndex = 0;

    function formatVersionHistoryData(data) {
        if (!Array.isArray(data)) return [];
        return data.map(function(log) {
            var oldValues = log.old_values;
            var newValues = log.new_values;
            var changedFields = log.changed_fields;
            if (typeof oldValues === 'string') { try { oldValues = JSON.parse(oldValues); } catch (e) { oldValues = {}; } }
            if (typeof newValues === 'string') { try { newValues = JSON.parse(newValues); } catch (e) { newValues = {}; } }
            if (typeof changedFields === 'string') { try { changedFields = JSON.parse(changedFields); } catch (e) { changedFields = {}; } }
            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; }
            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)) {
                changedFields = changedFields.map(function(f) { return f === 'permission' ? 'permissions' : f; });
            }
            if (oldValues && typeof oldValues === 'object') {
                Object.keys(oldValues).forEach(function(key) {
                    if (typeof oldValues[key] === 'string' && (oldValues[key].startsWith('{') || oldValues[key].startsWith('['))) {
                        try { oldValues[key] = JSON.parse(oldValues[key]); } catch (e) {}
                    }
                });
            }
            if (newValues && typeof newValues === 'object') {
                Object.keys(newValues).forEach(function(key) {
                    if (typeof newValues[key] === 'string' && (newValues[key].startsWith('{') || newValues[key].startsWith('['))) {
                        try { newValues[key] = JSON.parse(newValues[key]); } catch (e) {}
                    }
                });
            }
            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 };
        });
    }

    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('');
    }

    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 ' + versionHistoryEntityLabel + '.</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('');
    }

    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('');
    }

    function fetchVersionHistory(recordId) {
        var url = versionHistoryFormBaseUrl + '/' + recordId + '/version-history?type=view_history_modal';
        $.ajax({
            url: url,
            method: 'GET',
            dataType: 'json',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(response) {
                if (response && response.status === 403) {
                    showPermissionDeniedMessage(response.data || response.message || 'Permission Denied!');
                    return;
                }
                var data = (response && response.status === 200 && response.data) ? response.data : (Array.isArray(response) ? response : (response && response.data) || null);
                if (data && Array.isArray(data) && data.length > 0) {
                    versionHistoryData = formatVersionHistoryData(data);
                    versionHistoryData.sort(function(a, b) { return new Date(b.created_at) - new Date(a.created_at); });
                    populateTimeline();
                    currentVersionIndex = 0;
                    populateDetails(versionHistoryData[0]);
                    updateNavigationButtons();
                } else {
                    showEmptyState();
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    var msg = 'Permission Denied!';
                    try { var r = xhr.responseJSON; if (r && (r.data || r.message)) msg = r.data || r.message; } catch (e) {}
                    showPermissionDeniedMessage(msg);
                } else {
                    showErrorMessage('Failed to load version history. Please try again.');
                }
            }
        });
    }

    function formatDate(dateString) {
        var date = new Date(dateString);
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        return months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear() + ' ' + String(date.getHours()).padStart(2, '0') + ':' + String(date.getMinutes()).padStart(2, '0') + ':' + String(date.getSeconds()).padStart(2, '0');
    }

    function populateTimeline() {
        var html = '';
        versionHistoryData.forEach(function(log, index) {
            var action = (log.action || '').toLowerCase();
            var actionClass = action === 'create' ? 'success' : (action === 'update' ? 'primary' : (action === 'approve' ? 'success' : (action === 'reject' ? 'danger' : (action === 'reschedule' ? 'info' : (action === 'cancel' ? 'danger' : 'secondary')))));
            var actionText = action === 'reject' ? 'DEFER' : (log.action || '').toUpperCase();
            var icon = action === 'create' ? 'fa-plus' : (action === 'update' ? 'fa-pencil-alt' : (action === 'approve' ? 'fa-check' : (action === 'reject' ? 'fa-times' : (action === 'reschedule' ? 'fa-calendar-alt' : (action === 'cancel' ? 'fa-ban' : 'fa-circle')))));
            var isActive = index === currentVersionIndex ? 'active bg-light border-primary' : '';
            html += '<div class="timeline-item mb-3 p-2 border rounded cursor-pointer ' + isActive + '" data-index="' + index + '" style="cursor:pointer; transition: all 0.2s;"><div class="d-flex align-items-center"><i class="fas ' + icon + ' mr-2 text-' + actionClass + '"></i><span class="badge badge-' + actionClass + ' mr-2">' + actionText + '</span><small class="text-muted">' + formatDate(log.created_at) + '</small></div><div class="mt-1 text-muted" style="font-size:0.85rem">' + (log.description || 'No description') + '</div></div>';
        });
        $('#version-timeline').html(html);
        $('.timeline-item').on('click', function() {
            currentVersionIndex = parseInt($(this).data('index'), 10);
            populateDetails(versionHistoryData[currentVersionIndex]);
            updateNavigationButtons();
            $('.timeline-item').removeClass('active bg-light border-primary');
            $(this).addClass('active bg-light border-primary');
        });
    }

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

    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);
    }

    function isPermissionStructure(obj) {
        if (!obj || typeof obj !== 'object' || Array.isArray(obj)) return false;
        var keys = Object.keys(obj);
        if (keys.length === 0) return false;
        var objectCount = 0, hasPermissionLikeValues = false;
        var 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'];
        keys.forEach(function(key) {
            var val = obj[key];
            if (typeof val === 'object' && val !== null && !Array.isArray(val)) {
                objectCount++;
                var nested = Object.keys(val);
                if (nested.length && (typeof val[nested[0]] === 'boolean' || val[nested[0]] === '1' || val[nested[0]] === '0' || val[nested[0]] === 1 || val[nested[0]] === 0)) hasPermissionLikeValues = true;
            }
        });
        return ((objectCount >= Math.max(2, keys.length * 0.5)) && hasPermissionLikeValues) || keys.some(function(k) { return commonModules.indexOf(k) !== -1; });
    }

    function formatDataAsTable(data) {
        if (!data || typeof data !== 'object') return '<em>N/A</em>';
        var tableHtml = '<table class="table table-sm mb-0" style="font-size: 0.85rem; border-collapse: collapse; width: 100%; background: transparent; color: inherit;"><tbody>';
        if (isPermissionStructure(data)) {
            Object.keys(data).forEach(function(moduleName) {
                var moduleData = data[moduleName];
                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)) {
                    Object.keys(moduleData).forEach(function(actionName) {
                        var av = moduleData[actionName];
                        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;">' + ((av === '1' || av === 1 || av === true) ? 'Yes' : 'No') + '</td></tr>';
                    });
                } else {
                    var dv = moduleData === null || moduleData === undefined ? '<em>null</em>' : (typeof moduleData === 'boolean' ? (moduleData ? 'true' : 'false') : 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;">' + dv + '</td></tr>';
                }
            });
        } else if (data.permission && typeof data.permission === 'object') {
            Object.keys(data).forEach(function(key) {
                if (key !== 'permission') {
                    var v = data[key];
                    var d = v === null || v === undefined ? '<em>null</em>' : (typeof v === 'boolean' ? (v ? 'true' : 'false') : (typeof v === 'object' ? 'Object' : String(v)));
                    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;">' + d + '</td></tr>';
                }
            });
            if (isPermissionStructure(data.permission)) {
                Object.keys(data.permission).forEach(function(moduleName) {
                    var moduleData = data.permission[moduleName];
                    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)) {
                        Object.keys(moduleData).forEach(function(actionName) {
                            var av = moduleData[actionName];
                            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;">' + ((av === '1' || av === 1 || av === true) ? 'Yes' : 'No') + '</td></tr>';
                        });
                    } else {
                        var dv = moduleData === null || moduleData === undefined ? '<em>null</em>' : (typeof moduleData === 'boolean' ? (moduleData ? 'true' : 'false') : 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;">' + dv + '</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 {
            Object.keys(data).forEach(function(key) {
                var v = data[key];
                var d = v === null || v === undefined ? '<em>null</em>' : (typeof v === 'boolean' ? (v ? 'true' : 'false') : (typeof v === 'object' ? 'Object' : String(v)));
                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;">' + d + '</td></tr>';
            });
        }
        tableHtml += '</tbody></table>';
        return tableHtml;
    }

    function populateDetails(log) {
        if (!log) return;
        var formattedDate = formatDate(log.created_at);
        var changedFields = log.changed_fields;
        var oldValues = log.old_values;
        var newValues = log.new_values;
        if (typeof changedFields === 'string') { try { changedFields = JSON.parse(changedFields); } catch (e) { changedFields = {}; } }
        if (typeof oldValues === 'string') { try { oldValues = JSON.parse(oldValues); } catch (e) { oldValues = {}; } }
        if (typeof newValues === 'string') { try { newValues = JSON.parse(newValues); } catch (e) { newValues = {}; } }
        if (oldValues && typeof oldValues === 'object') {
            Object.keys(oldValues).forEach(function(k) {
                var v = oldValues[k];
                var looksJson = typeof v === 'string' && (v.startsWith('{') || v.startsWith('['));
                if (looksJson) {
                    try { oldValues[k] = JSON.parse(v); } catch (e) {}
                }
            });
        }
        if (newValues && typeof newValues === 'object') {
            Object.keys(newValues).forEach(function(k) {
                var v = newValues[k];
                var looksJson = typeof v === 'string' && (v.startsWith('{') || v.startsWith('['));
                if (looksJson) {
                    try { newValues[k] = JSON.parse(v); } catch (e) {}
                }
            });
        }
        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; }
        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)) { changedFields = changedFields.map(function(f) { return f === 'permission' ? 'permissions' : f; }); }
        var addedFields = [], removedFields = [], modifiedFields = [];
        function normalizeFieldName(fn) {
            if (fn === 'permission' || fn === 'permissions') return ((oldValues && oldValues.permissions !== undefined) || (newValues && newValues.permissions !== undefined)) ? 'permissions' : 'permission';
            return fn;
        }
        if (changedFields) {
            if (Array.isArray(changedFields)) {
                changedFields.forEach(function(field) {
                    if (field === '_token' || field === '_method') return;
                    var nf = normalizeFieldName(field);
                    var hasOld = oldValues && (oldValues[nf] !== undefined || oldValues[field] !== undefined);
                    var hasNew = newValues && (newValues[nf] !== undefined || newValues[field] !== undefined);
                    if (!hasOld && hasNew) addedFields.push({ field: nf, from: undefined, to: undefined });
                    else if (hasOld && !hasNew) removedFields.push({ field: nf, from: undefined, to: undefined });
                    else if (hasOld && hasNew) modifiedFields.push({ field: nf, from: undefined, to: undefined });
                });
            } else if (typeof changedFields === 'object') {
                Object.keys(changedFields).forEach(function(field) {
                    if (field === '_token' || field === '_method') return;
                    var nf = normalizeFieldName(field);
                    var ch = changedFields[field];
                    var ct = typeof ch === 'string' ? ch : (ch && (ch.change_type || ch.type || ch.status)) || 'value_changed';
                    var fv = undefined;
                    if (ch && ch.from !== undefined) {
                        if (typeof ch.from === 'string' && (ch.from.startsWith('{') || ch.from.startsWith('['))) {
                            try { fv = JSON.parse(ch.from); } catch (e) { fv = ch.from; }
                        } else { fv = ch.from; }
                    }
                    var tv = undefined;
                    if (ch && ch.to !== undefined) {
                        if (typeof ch.to === 'string' && (ch.to.startsWith('{') || ch.to.startsWith('['))) {
                            try { tv = JSON.parse(ch.to); } catch (e) { tv = ch.to; }
                        } else { tv = ch.to; }
                    }
                    if (ct === 'value_added' || ct === 'added' || ct === 'add') addedFields.push({ field: nf, from: fv, to: tv });
                    else if (ct === 'value_removed' || ct === 'removed' || ct === 'remove') removedFields.push({ field: nf, from: fv, to: tv });
                    else modifiedFields.push({ field: nf, from: fv, to: tv });
                });
            }
        }
        var totalChanges = addedFields.length + removedFields.length + modifiedFields.length;
        var actionText = (log.action || '').toUpperCase();
        var 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>';
        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>';
            var addedToShow = {};
            addedFields.forEach(function(fe) {
                var f = fe.field;
                var v = fe.to !== undefined ? fe.to : (newValues && newValues[f] !== undefined ? newValues[f] : 'N/A');
                addedToShow[f] = v;
            });
            detailsHtml += '<div class="border-left border-success pl-3 mb-3"><div class="d-flex justify-content-between align-items-center mb-3"><strong>Summary</strong><span class="badge badge-primary">added</span></div><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">' + formatDataAsTable(addedToShow) + '</div><div class="mt-2"><strong style="color:#28a745;font-size:0.9rem">To (JSON):</strong>' + formatFieldValue(addedToShow) + '</div></div></div>';
            detailsHtml += '</div>';
        }
        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>';
            var removedToShow = {};
            removedFields.forEach(function(fe) {
                var f = fe.field;
                var v = fe.from !== undefined ? fe.from : (oldValues && oldValues[f] !== undefined ? oldValues[f] : 'N/A');
                removedToShow[f] = v;
            });
            detailsHtml += '<div class="border-left border-danger pl-3 mb-3"><div class="d-flex justify-content-between align-items-center mb-3"><strong>Summary</strong><span class="badge badge-danger">removed</span></div><div 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">' + formatDataAsTable(removedToShow) + '</div><div class="mt-2"><strong style="color:#dc3545;font-size:0.9rem">From (JSON):</strong>' + formatFieldValue(removedToShow) + '</div></div></div>';
            detailsHtml += '</div>';
        }
        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(function(fieldEntry) {
                var field = fieldEntry.field;
                var oldVal = fieldEntry.from !== undefined ? fieldEntry.from : (oldValues && oldValues[field] !== undefined ? oldValues[field] : 'N/A');
                var newVal = fieldEntry.to !== undefined ? fieldEntry.to : (newValues && newValues[field] !== undefined ? newValues[field] : 'N/A');
                var isOldObj = typeof oldVal === 'object' && oldVal !== null;
                var isNewObj = typeof newVal === 'object' && newVal !== null;
                function fmtSimple(v) { if (v === null || v === undefined) return '<em>null</em>'; if (typeof v === 'boolean') return v ? 'true' : 'false'; return String(v); }
                if (isOldObj || isNewObj) {
                    var fromT = isOldObj ? formatDataAsTable(oldVal) : fmtSimple(oldVal);
                    var toT = isNewObj ? formatDataAsTable(newVal) : fmtSimple(newVal);
                    var ob = oldValues && oldValues.updated_by !== undefined ? oldValues.updated_by : null;
                    var nb = newValues && newValues.updated_by !== undefined ? newValues.updated_by : null;
                    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><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">' + fromT + '</div><div class="mt-2"><strong style="color:#dc3545;font-size:0.9rem">From (JSON):</strong>' + formatFieldValue(oldVal) + '</div></div><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">' + toT + '</div><div class="mt-2"><strong style="color:#28a745;font-size:0.9rem">To (JSON):</strong>' + formatFieldValue(newVal) + '</div><div class="mt-3"><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">' + (ob !== null ? ob : '1') + '</span></div><div><strong style="color:#28a745">To:</strong><span style="color:#17a2b8;margin-left:8px">' + (nb !== null ? nb : '1') + '</span></div></div></div></div>';
                } else {
                    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">' + fmtSimple(oldVal) + '</span></div><div><strong style="color:#28a745">To:</strong><span style="color:#17a2b8;margin-left:8px">' + fmtSimple(newVal) + '</span></div></div>';
                }
            });
            detailsHtml += '</div>';
        }
        if (addedFields.length === 0 && removedFields.length === 0 && modifiedFields.length === 0) {
            var allF = newValues && Object.keys(newValues).length > 0 ? newValues : (oldValues && Object.keys(oldValues).length > 0 ? oldValues : {});
            if (Object.keys(allF).length > 0) {
                detailsHtml += '<div class="mb-3"><h6>All Fields</h6>';
                Object.keys(allF).forEach(function(f) { detailsHtml += '<div class="border-left pl-3 mb-2"><strong>' + f + ':</strong><br><span>' + formatFieldValue(allF[f]) + '</span></div>'; });
                detailsHtml += '</div>';
            }
        }
        detailsHtml += '</div></div>';
        $('#version-details').html(detailsHtml);
    }

    function updateNavigationButtons() {
        $('#version-counter').text((currentVersionIndex + 1) + ' of ' + versionHistoryData.length);
        $('#btn-prev').prop('disabled', currentVersionIndex === 0);
        $('#btn-next').prop('disabled', currentVersionIndex === versionHistoryData.length - 1);
    }

    $(document).off('click.versionhistory', '.btn-history').on('click.versionhistory', '.btn-history', function() {
        var recordId = $(this).data('id');
        var recordName = $(this).data('name');
        $('#modal-version-history-name').text(recordName || versionHistoryEntityLabel);
        versionHistoryData = [];
        currentVersionIndex = 0;
        $('#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('');
        fetchVersionHistory(recordId);
    });

    $('#versionHistoryModal').off('click', '#btn-prev').on('click', '#btn-prev', function() {
        if (currentVersionIndex > 0) {
            currentVersionIndex--;
            populateDetails(versionHistoryData[currentVersionIndex]);
            updateNavigationButtons();
            updateTimelineSelection();
            var sel = $('.timeline-item[data-index="' + currentVersionIndex + '"]');
            if (sel.length) { var tc = $('#version-timeline'); tc.animate({ scrollTop: sel.position().top + tc.scrollTop() - 20 }, 300); }
        }
    });
    $('#versionHistoryModal').off('click', '#btn-next').on('click', '#btn-next', function() {
        if (currentVersionIndex < versionHistoryData.length - 1) {
            currentVersionIndex++;
            populateDetails(versionHistoryData[currentVersionIndex]);
            updateNavigationButtons();
            updateTimelineSelection();
            var sel = $('.timeline-item[data-index="' + currentVersionIndex + '"]');
            if (sel.length) { var tc = $('#version-timeline'); tc.animate({ scrollTop: sel.position().top + tc.scrollTop() - 20 }, 300); }
        }
    });
})();
</script>
@endpush