@extends('layouts.dashboard')

@section('page-content')
<div class="max-w-4xl mx-auto">
    <!-- Back Button -->
    <div class="mb-6">
        <a 
            href="{{ route('audit-logs.index') }}" 
            class="inline-flex items-center text-sm text-gray-600 hover:text-gray-900"
        >
            <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            Back to Audit Logs
        </a>
    </div>

    <!-- Audit Log Details -->
    <div class="bg-white rounded-lg shadow-sm">
        <!-- Header -->
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h2 class="text-2xl font-bold text-gray-900">Audit Log Details</h2>
                <span class="px-3 py-1 text-sm font-semibold rounded-full
                    {{ $auditLog->action === 'created' ? 'bg-green-100 text-green-800' : '' }}
                    {{ $auditLog->action === 'updated' ? 'bg-blue-100 text-blue-800' : '' }}
                    {{ $auditLog->action === 'deleted' ? 'bg-red-100 text-red-800' : '' }}
                    {{ $auditLog->action === 'viewed' ? 'bg-gray-100 text-gray-800' : '' }}
                ">
                    {{ ucfirst($auditLog->action) }}
                </span>
            </div>
        </div>

        <!-- Details -->
        <div class="px-6 py-6 space-y-6">
            <!-- Basic Information -->
            <div class="grid grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Timestamp</label>
                    <p class="text-base text-gray-900">{{ $auditLog->created_at->format('Y-m-d H:i:s') }}</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">User</label>
                    @if($auditLog->user)
                        <p class="text-base text-gray-900">{{ $auditLog->user->name }}</p>
                        <p class="text-sm text-gray-500">{{ $auditLog->user->email }}</p>
                    @else
                        <p class="text-base text-gray-400">System</p>
                    @endif
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Model Type</label>
                    <p class="text-base text-gray-900">{{ class_basename($auditLog->auditable_type) }}</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Model ID</label>
                    <p class="text-base text-gray-900">{{ $auditLog->auditable_id ?? 'N/A' }}</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">IP Address</label>
                    <p class="text-base text-gray-900">{{ $auditLog->ip_address ?? 'N/A' }}</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">User Agent</label>
                    <p class="text-base text-gray-900 truncate" title="{{ $auditLog->user_agent }}">
                        {{ $auditLog->user_agent ?? 'N/A' }}
                    </p>
                </div>
            </div>

            <!-- Description -->
            <div>
                <label class="block text-sm font-medium text-gray-500 mb-1">Description</label>
                <p class="text-base text-gray-900">{{ $auditLog->description }}</p>
            </div>

            <!-- Old Values -->
            @if($auditLog->old_values)
            <div>
                <label class="block text-sm font-medium text-gray-500 mb-2">Previous Values</label>
                <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                    <pre class="text-sm text-gray-800 overflow-x-auto">{{ json_encode($auditLog->old_values, JSON_PRETTY_PRINT) }}</pre>
                </div>
            </div>
            @endif

            <!-- New Values -->
            @if($auditLog->new_values)
            <div>
                <label class="block text-sm font-medium text-gray-500 mb-2">New Values</label>
                <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                    <pre class="text-sm text-gray-800 overflow-x-auto">{{ json_encode($auditLog->new_values, JSON_PRETTY_PRINT) }}</pre>
                </div>
            </div>
            @endif

            <!-- Properties -->
            @if($auditLog->properties)
            <div>
                <label class="block text-sm font-medium text-gray-500 mb-2">Additional Properties</label>
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <pre class="text-sm text-gray-800 overflow-x-auto">{{ json_encode($auditLog->properties, JSON_PRETTY_PRINT) }}</pre>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection