@extends('layouts/base_view')
@section('title')
<li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
<li class="breadcrumb-item"><a href="{{ route('activity-logs.index') }}">Activity Logs</a></li>
<li class="breadcrumb-item active">Detail</li>
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Activity Log Details</h3>
                        <div class="card-tools">
                            <a href="{{ route('activity-logs.index') }}" class="btn btn-sm btn-primary">
                                <i class="fas fa-arrow-left"></i> Back to List
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Activity Information -->
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td width="35%"><strong>Timestamp</strong></td>
                                        <td>: {{ $log->created_at ? $log->created_at->timezone('Asia/Jakarta')->format('d/m/Y H:i:s') : '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>User</strong></td>
                                        <td>: 
                                            @if($log->user)
                                                {{ $log->user->fullname ?? $log->user->email }}
                                                <br><small class="text-muted">{{ $log->user->email }}</small>
                                            @else
                                                <span class="text-muted">System / Guest</span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>Activity Type</strong></td>
                                        <td>: 
                                            @php
                                                $badgeClass = 'badge-secondary';
                                                switch($log->activity_type) {
                                                    case 'login': $badgeClass = 'badge-success'; break;
                                                    case 'logout': $badgeClass = 'badge-secondary'; break;
                                                    case 'page_view': $badgeClass = 'badge-info'; break;
                                                    case 'create': $badgeClass = 'badge-primary'; break;
                                                    case 'update': $badgeClass = 'badge-warning'; break;
                                                    case 'delete': $badgeClass = 'badge-danger'; break;
                                                }
                                            @endphp
                                            <span class="badge {{ $badgeClass }}">{{ strtoupper(str_replace('_', ' ', $log->activity_type)) }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>Module</strong></td>
                                        <td>: {{ $log->module ? ucfirst(str_replace('_', ' ', $log->module)) : '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Action</strong></td>
                                        <td>: {{ $log->action ?? '-' }}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td width="35%"><strong>HTTP Method</strong></td>
                                        <td>: 
                                            @php
                                                $methodColor = 'text-secondary';
                                                switch($log->method) {
                                                    case 'GET': $methodColor = 'text-info'; break;
                                                    case 'POST': $methodColor = 'text-success'; break;
                                                    case 'PUT':
                                                    case 'PATCH': $methodColor = 'text-warning'; break;
                                                    case 'DELETE': $methodColor = 'text-danger'; break;
                                                }
                                            @endphp
                                            <span class="{{ $methodColor }}"><strong>{{ $log->method }}</strong></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>Response Status</strong></td>
                                        <td>: 
                                            @php
                                                $statusBadge = 'badge-secondary';
                                                if ($log->response_status >= 200 && $log->response_status < 300) {
                                                    $statusBadge = 'badge-success';
                                                } elseif ($log->response_status >= 300 && $log->response_status < 400) {
                                                    $statusBadge = 'badge-info';
                                                } elseif ($log->response_status >= 400 && $log->response_status < 500) {
                                                    $statusBadge = 'badge-warning';
                                                } elseif ($log->response_status >= 500) {
                                                    $statusBadge = 'badge-danger';
                                                }
                                            @endphp
                                            <span class="badge {{ $statusBadge }}">{{ $log->response_status ?? '-' }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>Duration</strong></td>
                                        <td>: {{ $log->duration_ms ? number_format($log->duration_ms, 2) . ' ms' : '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>IP Address</strong></td>
                                        <td>: {{ $log->ip_address ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>User Agent</strong></td>
                                        <td>: <small>{{ $log->user_agent ?? '-' }}</small></td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <hr>

                        <!-- URL Information -->
                        <div class="row">
                            <div class="col-12">
                                <h5>Request URL</h5>
                                <div class="alert alert-light">
                                    <code>{{ $log->url }}</code>
                                </div>
                            </div>
                        </div>

                        <!-- Request Data -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <h5>Request Data</h5>
                                @if($log->request_data && count($log->request_data) > 0)
                                    <div class="card">
                                        <div class="card-body">
                                            <pre id="json-viewer" style="background-color: #f4f4f4; padding: 15px; border-radius: 5px; max-height: 500px; overflow-y: auto;">{{ json_encode($log->request_data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) }}</pre>
                                        </div>
                                    </div>
                                @else
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle"></i> No request data available
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    #json-viewer {
        font-family: 'Courier New', Courier, monospace;
        font-size: 13px;
        line-height: 1.5;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    .table-borderless td {
        padding: 8px 0;
    }
    
    .alert-light {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
    }
</style>

<script>
$(document).ready(function() {
    // Simple JSON syntax highlighting
    var jsonViewer = document.getElementById('json-viewer');
    if (jsonViewer) {
        var jsonText = jsonViewer.textContent;
        
        // Basic syntax highlighting
        jsonText = jsonText
            .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)/g, function(match) {
                var cls = 'text-primary';
                if (/:$/.test(match)) {
                    cls = 'text-success';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            })
            .replace(/\b(true|false|null)\b/g, '<span class="text-danger">$1</span>')
            .replace(/\b(-?\d+(?:\.\d+)?)\b/g, '<span class="text-info">$1</span>');
        
        jsonViewer.innerHTML = jsonText;
    }
});
</script>
@endsection