@extends('layouts.master')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-1"><i class="ti ti-file-text"></i> Activity Log Details</h2>
                    <p class="text-muted">Log ID: #{{ $log->id }}</p>
                </div>
                <div>
                    <a href="{{ route('activity-logs.index') }}" class="btn btn-secondary">
                        <i class="ti ti-arrow-left"></i> Back to Logs
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Main Information -->
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-info-circle"></i> Activity Information</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <th width="200">Action:</th>
                            <td>
                                <i class="ti ti-{{ $log->action_icon }}"></i>
                                <strong>{{ $log->formatted_action }}</strong>
                            </td>
                        </tr>
                        <tr>
                            <th>Module:</th>
                            <td><span class="badge bg-light-info">{{ $log->module }}</span></td>
                        </tr>
                        <tr>
                            <th>Description:</th>
                            <td>{{ $log->description }}</td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td>
                                <span class="badge {{ $log->status_badge_class }}">
                                    {{ ucfirst($log->status) }}
                                </span>
                            </td>
                        </tr>
                        @if($log->error_message)
                        <tr>
                            <th>Error Message:</th>
                            <td><span class="text-danger">{{ $log->error_message }}</span></td>
                        </tr>
                        @endif
                        <tr>
                            <th>Date/Time:</th>
                            <td>{{ $log->created_at->format('Y-m-d H:i:s') }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Model Information -->
            @if($log->model_type || $log->model_id)
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-database"></i> Affected Model</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        @if($log->model_type)
                        <tr>
                            <th width="200">Model Type:</th>
                            <td><code>{{ $log->model_type }}</code></td>
                        </tr>
                        @endif
                        @if($log->model_id)
                        <tr>
                            <th>Model ID:</th>
                            <td><code>{{ $log->model_id }}</code></td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>
            @endif

            <!-- Data Changes -->
            @if($log->old_values || $log->new_values)
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-git-compare"></i> Data Changes</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        @if($log->old_values)
                        <div class="col-md-6">
                            <h6 class="text-danger"><i class="ti ti-minus-circle"></i> Old Values</h6>
                            <pre class="bg-light p-3 rounded">{{ json_encode($log->old_values, JSON_PRETTY_PRINT) }}</pre>
                        </div>
                        @endif
                        @if($log->new_values)
                        <div class="col-md-6">
                            <h6 class="text-success"><i class="ti ti-plus-circle"></i> New Values</h6>
                            <pre class="bg-light p-3 rounded">{{ json_encode($log->new_values, JSON_PRETTY_PRINT) }}</pre>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-md-4">
            <!-- User Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-user"></i> User Information</h5>
                </div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        <div class="avatar-lg mx-auto mb-2">
                            <div class="avatar-title bg-primary rounded-circle">
                                {{ substr($log->user_name, 0, 1) }}
                            </div>
                        </div>
                        <h5 class="mb-1">{{ $log->user_name }}</h5>
                        <p class="text-muted mb-2">{{ $log->user_email }}</p>
                        <span class="badge bg-light-primary">{{ $log->user_role }}</span>
                    </div>
                    @if($log->user_id)
                    <a href="{{ route('activity-logs.user-report', $log->user_id) }}" 
                       class="btn btn-sm btn-light-primary w-100">
                        <i class="ti ti-chart-bar"></i> View User Activity
                    </a>
                    @endif
                </div>
            </div>

            <!-- Request Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-world"></i> Request Details</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <th>IP Address:</th>
                            <td><code>{{ $log->ip_address }}</code></td>
                        </tr>
                        <tr>
                            <th>Method:</th>
                            <td><span class="badge bg-light-secondary">{{ $log->method }}</span></td>
                        </tr>
                        @if($log->url)
                        <tr>
                            <th>URL:</th>
                            <td><small class="text-break">{{ $log->url }}</small></td>
                        </tr>
                        @endif
                        @if($log->user_agent)
                        <tr>
                            <th>User Agent:</th>
                            <td><small class="text-muted text-break">{{ \Str::limit($log->user_agent, 50) }}</small></td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.avatar-lg {
    width: 80px;
    height: 80px;
}

.avatar-title {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    color: white;
}

pre {
    font-size: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.table-borderless th {
    font-weight: 600;
    padding: 0.5rem 0;
}

.table-borderless td {
    padding: 0.5rem 0;
}
</style>
@endsection