@extends('layouts.app')

@section('title', 'Content History')
@section('nav_website', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Content History')
@section('page_subtitle', 'Every text change to website content — with one-click restore')

@section('content')

@if(session('success'))
<div class="mb-4 px-4 py-3 bg-green-50 border-[0.5px] border-green-200 rounded-xl text-sm text-green-700">{{ session('success') }}</div>
@endif

<div class="max-w-4xl">
    <a href="{{ route('website.index') }}" class="inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-600 mb-4">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        Back to Website CMS
    </a>

    @if($revisions->isEmpty())
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-12 text-center text-gray-300 text-sm">
        No content changes recorded yet. Edits you make in the CMS will appear here.
    </div>
    @else
    <div class="space-y-3">
        @foreach($revisions as $rev)
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
            <div class="flex items-start justify-between gap-4">
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-teal-50 text-teal-700 border-teal-200">{{ ucfirst($rev->section) }}</span>
                        <span class="font-mono text-xs text-gray-600">{{ $rev->key }}</span>
                    </div>
                    <p class="text-[11px] text-gray-400 mt-1">{{ $rev->user_name ?? 'System' }} · {{ $rev->created_at->diffForHumans() }} · {{ $rev->created_at->format('M j, Y g:i A') }}</p>

                    <div class="mt-3 space-y-1.5 text-xs">
                        <div class="flex gap-2">
                            <span class="text-gray-400 font-medium w-14 flex-shrink-0">Before</span>
                            <span class="text-gray-600 bg-green-50/60 border-[0.5px] border-green-100 rounded px-2 py-1 flex-1 break-words whitespace-pre-line">{{ \Illuminate\Support\Str::limit($rev->old_value, 200) ?: '(empty)' }}</span>
                        </div>
                        <div class="flex gap-2">
                            <span class="text-gray-400 font-medium w-14 flex-shrink-0">After</span>
                            <span class="text-gray-500 bg-gray-50 border-[0.5px] border-gray-100 rounded px-2 py-1 flex-1 break-words whitespace-pre-line">{{ \Illuminate\Support\Str::limit($rev->new_value, 200) ?: '(empty)' }}</span>
                        </div>
                    </div>
                </div>

                <form method="POST" action="{{ route('website.history.restore', $rev->id) }}"
                      data-confirm="Restore &quot;{{ $rev->key }}&quot; to its earlier (Before) value? The current value is saved so you can undo this too.">
                    @csrf
                    <button type="submit"
                            class="flex-shrink-0 inline-flex items-center gap-1.5 text-xs font-medium text-blue-700 bg-blue-50 border-[0.5px] border-blue-200 hover:bg-blue-100 px-3 py-1.5 rounded-lg transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3v5h5M3.05 13A9 9 0 106 5.3L3 8"/></svg>
                        Restore
                    </button>
                </form>
            </div>
        </div>
        @endforeach
    </div>

    <div class="mt-4">{{ $revisions->links() }}</div>
    @endif
</div>

@endsection