@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-md-12">
            <a href="{{ route('logs.index') }}" class="btn btn-sm btn-outline-primary mb-2">
                <i class="bx bx-arrow-back"></i> Back to Logs
            </a>
            <h4 class="fw-bold">Log Entry Details</h4>
        </div>
    </div>

    <div class="row">
        <!-- Log Information -->
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Activity Information</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-muted">Date/Time</label>
                            <p>{{ $log->created_at->format('M d, Y H:i:s') }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted">Action</label>
                            <p>
                                <span class="badge bg-label-{{ $log->action === 'create' ? 'success' : ($log->action === 'delete' ? 'danger' : 'info') }}">
                                    {{ ucfirst($log->action) }}
                                </span>
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-muted">User</label>
                            <p>
                                <strong>{{ $log->user?->name ?? 'N/A' }}</strong><br>
                                <small>{{ $log->user?->email ?? '' }}</small>
                            </p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted">Company</label>
                            <p>{{ $log->company?->name ?? 'System' }}</p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-muted">Model Type</label>
                            <p>{{ $log->model_type }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted">Model ID</label>
                            <p><code>{{ $log->model_id ?? 'N/A' }}</code></p>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted">Description</label>
                        <p>{{ $log->description }}</p>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted">IP Address</label>
                        <p><code>{{ $log->ip_address }}</code></p>
                    </div>

                    <div class="mb-0">
                        <label class="form-label text-muted">User Agent</label>
                        <p><small>{{ $log->user_agent }}</small></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Changes Timeline -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Changes</h5>
                </div>
                <div class="card-body">
                    @if($log->changes)
                        @if(isset($log->changes['before']) && isset($log->changes['after']))
                            <div class="mb-3">
                                <h6 class="mb-2 text-success">After</h6>
                                <div class="bg-light p-3 rounded border border-success">
                                    @if(is_array($log->changes['after']))
                                        <pre class="mb-0"><code>{{ json_encode($log->changes['after'], JSON_PRETTY_PRINT) }}</code></pre>
                                    @else
                                        <p class="mb-0">{{ $log->changes['after'] }}</p>
                                    @endif
                                </div>
                            </div>

                            <div class="mb-0">
                                <h6 class="mb-2 text-danger">Before</h6>
                                <div class="bg-light p-3 rounded border border-danger">
                                    @if(is_array($log->changes['before']))
                                        <pre class="mb-0"><code>{{ json_encode($log->changes['before'], JSON_PRETTY_PRINT) }}</code></pre>
                                    @else
                                        <p class="mb-0">{{ $log->changes['before'] }}</p>
                                    @endif
                                </div>
                            </div>
                        @else
                            <div class="text-center text-muted py-4">
                                <p>No detailed changes recorded</p>
                            </div>
                        @endif
                    @else
                        <div class="text-center text-muted py-4">
                            <p>No changes data available</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection