@extends('layout.app')

@push('styles')
<style>
.changes-cell { min-width: 180px; font-size: 0.8rem; line-height: 1.2; word-break: break-word; white-space: pre-wrap; padding: 4px 8px !important; }
.changes-cell .c-item { margin: 0; padding: 2px 0; border-bottom: 1px solid #eee; }
.changes-cell .c-item:last-child { border-bottom: none; }
.changes-cell .c-field { font-weight: 600; color: #333; margin: 0; padding: 0; line-height: 1.2; }
.changes-cell .c-line { margin: 0; padding: 0; line-height: 1.2; }
</style>
@endpush

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h5 class="card-title mb-1">Change History: <strong>{{ $user->name }}</strong> ({{ $user->email }})</h5>
                </div>
                <a href="{{ route('user.index') }}" class="btn btn-secondary btn-sm">Back to Users</a>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-hover table-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th>Date</th>
                            <th>Source</th>
                            <th>Entity</th>
                            <th>Changes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($changeHistory as $item)
                            <tr>
                                <td>{{ $item->created_at }}</td>
                                <td><span class="badge badge-{{ $item->source_type === 'client_edit_log' ? 'info' : 'secondary' }}">{{ $item->source }}</span></td>
                                <td>
                                    @if($item->source_type === 'client_edit_log')
                                        <a href="{{ route('get-all-edit-log-history', $item->entity_id) }}" target="_blank">{{ $item->entity }}</a>
                                    @else
                                        {{ $item->entity }}
                                    @endif
                                </td>
                                <td class="changes-cell">
                                    @if(!empty($item->changes))
                                        @foreach($item->changes as $key => $diff)
                                            @php $o = trim($diff['old'] ?? ''); $n = trim($diff['new'] ?? ''); @endphp
                                            @if($o !== $n && ($o !== '' || $n !== ''))
                                                <div class="c-item"><span class="c-field">{{ ucwords(str_replace('_',' ',$key)) }}</span><br><span class="c-line">Old: {{ $diff['old'] ?? '—' }}</span><br><span class="c-line">New: {{ $diff['new'] ?? '—' }}</span></div>
                                            @endif
                                        @endforeach
                                    @else
                                        —
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">No change history found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($changeHistory->hasPages())
                <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap gap-2">
                    <small class="text-muted">
                        Showing {{ $changeHistory->firstItem() }}–{{ $changeHistory->lastItem() }} of {{ $changeHistory->total() }}
                    </small>
                    <div>{{ $changeHistory->withQueryString()->links() }}</div>
                </div>
            @endif
        </div>
    </div>
@endsection

@section('ajax')
@endsection