@extends('layouts.portal')

@section('title', 'Version #' . $version->version_number . ' - Will #' . $will->id)

@section('page_title', 'Version #' . $version->version_number . ' Details')

@section('page_subtitle', 'Will #' . $will->id . ' - ' . $will->client->full_name)

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'wills'])
@endsection

@section('content')
<div class="p-6 space-y-6">
    
    <!-- Header Card -->
    <div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold mb-2">Version #{{ $version->version_number }} Details</h1>
                <p class="text-blue-100">
                    <i class="fas fa-file mr-2"></i>Will ID: #{{ $will->id }} | 
                    <i class="fas fa-user mr-2"></i>{{ $will->client->full_name }} | 
                    <span class="px-2 py-1 {{ 
                        $version->updated_by_role === 'client' ? 'bg-purple-500' :
                        ($version->updated_by_role === 'agent' ? 'bg-green-500' :
                        ($version->updated_by_role === 'lawyer' ? 'bg-blue-500' :
                        ($version->updated_by_role === 'admin' ? 'bg-red-500' :
                        'bg-gray-500'))) 
                    }} rounded-full text-sm font-semibold">
                        {{ $version->getRoleLabel() }}
                    </span>
                </p>
            </div>
            <a href="{{ route('admin.wills.versions', $will) }}" class="px-4 py-2 bg-white text-blue-600 rounded-lg font-medium hover:bg-blue-50 transition">
                <i class="fas fa-arrow-left mr-2"></i>Back to Timeline
            </a>
        </div>
    </div>

    <!-- Version Info Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white rounded-lg shadow p-4 border-l-4 border-blue-600">
            <p class="text-sm text-gray-600 font-semibold">Version Number</p>
            <p class="text-3xl font-bold text-gray-900 mt-1">{{ $version->version_number }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-4 border-l-4 border-orange-600">
            <p class="text-sm text-gray-600 font-semibold">Status</p>
            <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full {{ 
                $version->status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' 
            }}">
                {{ ucfirst($version->status) }}
            </span>
        </div>
        <div class="bg-white rounded-lg shadow p-4 border-l-4 border-indigo-600">
            <p class="text-sm text-gray-600 font-semibold">Role</p>
            <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full {{ 
                $version->updated_by_role === 'client' ? 'bg-purple-100 text-purple-700' :
                ($version->updated_by_role === 'agent' ? 'bg-green-100 text-green-700' :
                ($version->updated_by_role === 'lawyer' ? 'bg-blue-100 text-blue-700' :
                ($version->updated_by_role === 'admin' ? 'bg-red-100 text-red-700' :
                'bg-gray-100 text-gray-700')))
            }}">
                {{ $version->getRoleLabel() }}
            </span>
        </div>
    </div>

    <!-- Payment Status Info -->
    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
        <h2 class="text-2xl font-bold text-gray-900 mb-4 flex items-center">
            <i class="fas fa-credit-card mr-3 text-indigo-600"></i>Payment Status at Change
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-gradient-to-br {{ 
                $will->payment_status === 'paid' ? 'from-green-50 to-emerald-50 border-green-300' :
                ($will->payment_status === 'pending' ? 'from-yellow-50 to-amber-50 border-yellow-300' :
                'from-red-50 to-rose-50 border-red-300')
            }} border rounded-lg p-4">
                <p class="text-sm font-semibold text-gray-700 mb-2">Client Payment Status</p>
                <div class="flex items-center gap-3">
                    <i class="fas {{ 
                        $will->payment_status === 'paid' ? 'fa-check-circle text-green-600' :
                        ($will->payment_status === 'pending' ? 'fa-clock text-yellow-600' :
                        'fa-times-circle text-red-600')
                    }} text-2xl"></i>
                    <span class="text-lg font-bold {{ 
                        $will->payment_status === 'paid' ? 'text-green-700' :
                        ($will->payment_status === 'pending' ? 'text-yellow-700' :
                        'text-red-700')
                    }}">
                        {{ ucfirst($will->payment_status) }}
                    </span>
                </div>
            </div>
            <div class="bg-blue-50 border border-blue-300 rounded-lg p-4">
                <p class="text-sm font-semibold text-gray-700 mb-2">Updated By</p>
                <p class="text-lg font-bold text-gray-900">
                    @if($version->updatedByUser)
                        {{ $version->updatedByUser->name }}
                    @else
                        System
                    @endif
                </p>
                <p class="text-xs text-gray-600 mt-1">{{ $version->getRoleLabel() }}</p>
            </div>
            <div class="bg-purple-50 border border-purple-300 rounded-lg p-4">
                <p class="text-sm font-semibold text-gray-700 mb-2">Date & Time of Change</p>
                <p class="text-lg font-bold text-gray-900">{{ $version->created_at->format('M d, Y') }}</p>
                <p class="text-xs text-gray-600 mt-1">{{ $version->created_at->format('g:i A') }}</p>
            </div>
        </div>
    </div>

    <!-- Sections Updated -->
    @if($version->sections_json && count($version->sections_json) > 0)
    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
        <h2 class="text-2xl font-bold text-gray-900 mb-4 flex items-center">
            <i class="fas fa-list-check mr-3 text-green-600"></i>Sections Updated
        </h2>
        <div class="flex flex-wrap gap-2">
            @foreach($version->sections_json as $section)
            <span class="px-4 py-2 text-sm font-semibold rounded-full bg-green-100 text-green-700 border border-green-300">
                <i class="fas fa-check-circle mr-2"></i>{{ ucfirst(str_replace('_', ' ', $section)) }}
            </span>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Changes Summary -->
    @if($version->changes_summary)
    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
        <h2 class="text-2xl font-bold text-gray-900 mb-4 flex items-center">
            <i class="fas fa-clipboard-list mr-3 text-blue-600"></i>Changes Summary
        </h2>
        <div class="bg-blue-50 border-l-4 border-blue-600 p-4 rounded">
            <p class="text-gray-800">{{ $version->changes_summary }}</p>
        </div>
    </div>
    @endif

    <!-- Clean Change Summary -->
    @php
        $allKeys = array_unique(array_merge(
            array_keys($version->previous_data ?? []),
            array_keys($version->new_data ?? [])
        ));
        $hasChanges = false;
        
        // Helper function to format display value
        function formatDisplayValue($value) {
            if (is_null($value)) {
                return '<span class="text-gray-400 italic">Empty</span>';
            }
            if (is_bool($value)) {
                return $value ? '<span class="px-2 py-1 bg-gray-200 rounded text-xs font-semibold">Yes</span>' : '<span class="px-2 py-1 bg-gray-200 rounded text-xs font-semibold">No</span>';
            }
            if (is_array($value)) {
                if (empty($value)) {
                    return '<span class="text-gray-400 italic">Empty</span>';
                }
                return '<pre class="bg-gray-100 p-3 rounded text-xs overflow-auto max-h-64">' . htmlspecialchars(json_encode($value, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES), ENT_QUOTES, 'UTF-8') . '</pre>';
            }
            if (is_object($value)) {
                return '<pre class="bg-gray-100 p-3 rounded text-xs overflow-auto max-h-64">' . htmlspecialchars(json_encode($value, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES), ENT_QUOTES, 'UTF-8') . '</pre>';
            }
            if (empty($value) && $value !== 0 && $value !== false) {
                return '<span class="text-gray-400 italic">Empty</span>';
            }
            return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
        }
    @endphp
    
    @if(count($allKeys) > 0)
    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-exchange-alt mr-3 text-purple-600"></i>What Changed
        </h2>
        <div class="space-y-6">
            @foreach($allKeys as $key)
            @php
                $prevValue = $version->previous_data[$key] ?? null;
                $newValue = $version->new_data[$key] ?? null;
                $hasChanged = $prevValue !== $newValue;
                if ($hasChanged) $hasChanges = true;
            @endphp
            <div class="bg-gradient-to-r from-gray-50 to-white border-l-4 {{ $hasChanged ? 'border-blue-500' : 'border-gray-300' }} p-5 rounded-lg">
                <p class="text-sm font-bold text-gray-700 mb-4">
                    <i class="fas {{ $hasChanged ? 'fa-arrow-right text-blue-600' : 'fa-check text-gray-400' }} mr-2"></i>
                    {{ ucfirst(str_replace(['_', 'liabilities'], [' ', 'Liabilities'], $key)) }}
                </p>
                
                @if($hasChanged)
                    @if(is_array($prevValue) && is_array($newValue))
                        <!-- Array Comparison with Item Details -->
                        <div class="space-y-3">
                            <!-- Previous State -->
                            <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                                <p class="text-xs font-semibold text-red-700 mb-3 flex items-center">
                                    <i class="fas fa-times mr-2"></i>Before: {{ count($prevValue) }} item(s)
                                </p>
                                @if(count($prevValue) > 0)
                                    <div class="space-y-2">
                                        @foreach($prevValue as $index => $item)
                                            <div class="bg-white p-3 rounded border border-red-200">
                                                @if(is_array($item))
                                                    <p class="font-semibold text-red-700 text-xs mb-2">Item {{ $index + 1 }}</p>
                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
                                                        @foreach($item as $fieldName => $fieldValue)
                                                            <div class="flex">
                                                                <span class="font-semibold text-gray-700 min-w-[140px]">{{ ucfirst(str_replace('_', ' ', $fieldName)) }}:</span>
                                                                <span class="text-gray-600">
                                                                    @if(is_array($fieldValue))
                                                                        Array ({{ count($fieldValue) }} items)
                                                                    @elseif(is_bool($fieldValue))
                                                                        {{ $fieldValue ? 'Yes' : 'No' }}
                                                                    @elseif(empty($fieldValue) && $fieldValue !== 0 && $fieldValue !== false)
                                                                        <span class="text-gray-400 italic">—</span>
                                                                    @else
                                                                        {{ $fieldValue }}
                                                                    @endif
                                                                </span>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <span class="text-gray-600">{{ $item }}</span>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <p class="text-gray-400 italic">No items</p>
                                @endif
                            </div>

                            <!-- New State -->
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                <p class="text-xs font-semibold text-green-700 mb-3 flex items-center">
                                    <i class="fas fa-check mr-2"></i>After: {{ count($newValue) }} item(s)
                                </p>
                                @if(count($newValue) > 0)
                                    <div class="space-y-2">
                                        @foreach($newValue as $index => $item)
                                            <div class="bg-white p-3 rounded border border-green-200">
                                                @if(is_array($item))
                                                    <p class="font-semibold text-green-700 text-xs mb-2">Item {{ $index + 1 }}</p>
                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
                                                        @foreach($item as $fieldName => $fieldValue)
                                                            <div class="flex">
                                                                <span class="font-semibold text-gray-700 min-w-[140px]">{{ ucfirst(str_replace('_', ' ', $fieldName)) }}:</span>
                                                                <span class="text-gray-600 font-semibold">
                                                                    @if(is_array($fieldValue))
                                                                        Array ({{ count($fieldValue) }} items)
                                                                    @elseif(is_bool($fieldValue))
                                                                        {{ $fieldValue ? 'Yes' : 'No' }}
                                                                    @elseif(empty($fieldValue) && $fieldValue !== 0 && $fieldValue !== false)
                                                                        <span class="text-gray-400 italic">—</span>
                                                                    @else
                                                                        {{ $fieldValue }}
                                                                    @endif
                                                                </span>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <span class="text-gray-600 font-semibold">{{ $item }}</span>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <p class="text-gray-400 italic">No items</p>
                                @endif
                            </div>
                        </div>
                    @else
                        <!-- Simple Value Comparison -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Old Value -->
                            <div class="bg-red-50 border border-red-200 rounded p-4">
                                <p class="text-xs font-semibold text-red-700 mb-2">
                                    <i class="fas fa-times mr-1"></i>Was
                                </p>
                                <div class="text-sm text-gray-800 break-words">
                                    {!! formatDisplayValue($prevValue) !!}
                                </div>
                            </div>
                            
                            <!-- New Value -->
                            <div class="bg-green-50 border border-green-200 rounded p-4">
                                <p class="text-xs font-semibold text-green-700 mb-2">
                                    <i class="fas fa-check mr-1"></i>Now
                                </p>
                                <div class="text-sm text-gray-800 break-words font-semibold">
                                    {!! formatDisplayValue($newValue) !!}
                                </div>
                            </div>
                        </div>
                    @endif
                @else
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-check-circle text-green-600 mr-2"></i>No change in this field
                    </p>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif


</div>

@endsection