@extends('admin.layout')

@section('title', 'Detail Activity Log')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Detail Activity Log #{{ $activityLog->id }}</h5>
                    <a href="{{ route('admin.activity-logs.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Kembali
                    </a>
                </div>
                
                <div class="card-body">
                    <div class="row">
                        <!-- Basic Information -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Informasi Dasar</h6>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless">
                                        <tr>
                                            <td class="font-weight-bold" style="width: 30%;">ID:</td>
                                            <td>{{ $activityLog->id }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Pelaksana:</td>
                                            <td>
                                                @if($activityLog->actor_name || $activityLog->user)
                                                    <span class="badge badge-primary">{{ $activityLog->actor_name ?? $activityLog->user->name }}</span>
                                                    <br>
                                                    <small class="text-muted">{{ $activityLog->actor_email ?? $activityLog->user?->email }} · {{ ucfirst($activityLog->actor_type ?? 'user') }}</small>
                                                @else
                                                    <span class="badge badge-secondary">System</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr><td class="font-weight-bold">Event:</td><td><code>{{ $activityLog->event ?? '-' }}</code></td></tr>
                                        <tr><td class="font-weight-bold">Module:</td><td>{{ $activityLog->module ?? '-' }}</td></tr>
                                        <tr>
                                            <td class="font-weight-bold">Activity Type:</td>
                                            <td>
                                                <span class="badge badge-{{ $activityLog->color_class }}">
                                                    {{ ucfirst(str_replace('_', ' ', $activityLog->activity_type)) }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr><td class="font-weight-bold">Request ID:</td><td><code>{{ $activityLog->request_id ?? '-' }}</code></td></tr>
                                        <tr><td class="font-weight-bold">Route/Source:</td><td>{{ $activityLog->route_name ?? '-' }} / {{ $activityLog->source ?? '-' }}</td></tr>
                                        <tr>
                                            <td class="font-weight-bold">Description:</td>
                                            <td>{{ $activityLog->description }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Date & Time:</td>
                                            <td>
                                                {{ $activityLog->created_at->format('d/m/Y H:i:s') }}
                                                <br>
                                                <small class="text-muted">{{ $activityLog->created_at->diffForHumans() }}</small>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Technical Information -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Informasi Teknis</h6>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless">
                                        <tr>
                                            <td class="font-weight-bold" style="width: 30%;">Subject Type:</td>
                                            <td>
                                                @if($activityLog->subject_type)
                                                    <code>{{ class_basename($activityLog->subject_type) }}</code>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Subject ID:</td>
                                            <td>
                                                @if($activityLog->subject_id)
                                                    <code>{{ $activityLog->subject_id }}</code>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">IP Address:</td>
                                            <td>
                                                <code>{{ $activityLog->ip_address ?? '-' }}</code>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">User Agent:</td>
                                            <td>
                                                <div class="text-break" style="max-width: 300px;">
                                                    <small>{{ $activityLog->user_agent ?? '-' }}</small>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">URL:</td>
                                            <td>
                                                <div class="text-break" style="max-width: 300px;">
                                                    <small>{{ $activityLog->url ?? '-' }}</small>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">Method:</td>
                                            <td>
                                                <span class="badge badge-info">{{ $activityLog->method ?? '-' }}</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Properties Data -->
                    @if($activityLog->properties && !empty($activityLog->properties))
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Data Properties</h6>
                                </div>
                                <div class="card-body">
                                    <div class="bg-light p-3 rounded">
                                        <pre class="mb-0"><code>{{ json_encode($activityLog->properties, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    @if(!empty($activityLog->old_values) || !empty($activityLog->new_values))
                    <div class="row mt-4">
                        <div class="col-md-6"><div class="card h-100"><div class="card-header"><h6 class="mb-0">Nilai Sebelum</h6></div><div class="card-body"><pre class="mb-0 bg-light p-3 rounded"><code>{{ json_encode($activityLog->old_values, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</code></pre></div></div></div>
                        <div class="col-md-6"><div class="card h-100"><div class="card-header"><h6 class="mb-0">Nilai Sesudah</h6></div><div class="card-body"><pre class="mb-0 bg-light p-3 rounded"><code>{{ json_encode($activityLog->new_values, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</code></pre></div></div></div>
                    </div>
                    @endif
                    
                    <!-- Related Logs -->
                    @if($activityLog->subject_type && $activityLog->subject_id)
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">Log Aktivitas Terkait</h6>
                                </div>
                                <div class="card-body">
                                    @php
                                        $relatedLogs = \App\Models\ActivityLog::where('subject_type', $activityLog->subject_type)
                                                                              ->where('subject_id', $activityLog->subject_id)
                                                                              ->where('id', '!=', $activityLog->id)
                                                                              ->with('user')
                                                                              ->latest()
                                                                              ->limit(10)
                                                                              ->get();
                                    @endphp
                                    
                                    @if($relatedLogs->count() > 0)
                                        <div class="table-responsive">
                                            <table class="table table-sm">
                                                <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>User</th>
                                                        <th>Activity Type</th>
                                                        <th>Description</th>
                                                        <th>Date</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($relatedLogs as $relatedLog)
                                                        <tr>
                                                            <td>{{ $relatedLog->id }}</td>
                                                            <td>
                                                                @if($relatedLog->user)
                                                                    <small class="badge badge-primary">{{ $relatedLog->user->name }}</small>
                                                                @else
                                                                    <small class="badge badge-secondary">System</small>
                                                                @endif
                                                            </td>
                                                            <td>
                                                                <small class="badge badge-{{ $relatedLog->color_class }}">
                                                                    {{ ucfirst(str_replace('_', ' ', $relatedLog->activity_type)) }}
                                                                </small>
                                                            </td>
                                                            <td>
                                                                <div class="text-truncate" style="max-width: 200px;" title="{{ $relatedLog->description }}">
                                                                    <small>{{ $relatedLog->description }}</small>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <small class="text-muted">
                                                                    {{ $relatedLog->created_at->format('d/m/Y H:i:s') }}
                                                                </small>
                                                            </td>
                                                            <td>
                                                                <a href="{{ route('admin.activity-logs.show', $relatedLog) }}" 
                                                                   class="btn btn-xs btn-outline-primary" title="View Details">
                                                                    <i class="fas fa-eye"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @else
                                        <div class="text-center text-muted py-3">
                                            <i class="fas fa-inbox fa-2x mb-2"></i>
                                            <p>Tidak ada log aktivitas terkait yang ditemukan.</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.btn-xs {
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

pre code {
    font-size: 0.875rem;
    color: #495057;
}

.text-break {
    word-break: break-all;
}
</style>
@endpush