@extends('admin.layouts.main')

@section('title', 'API Log #' . $apiLog->id)
@section('menu', 'Logs')

@section('content')
<div class="row">
    <div class="col-md-4">
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject theme-font bold uppercase">Log Details</span></div>
            </div>
            <div class="portlet-body">
                <table class="table table-bordered table-striped">
                    <tr><th style="width:40%">ID</th><td>{{ $apiLog->id }}</td></tr>
                    <tr><th>Service</th><td><span class="label label-sm label-info">{{ ucfirst($apiLog->service) }}</span></td></tr>
                    <tr><th>Method</th><td><span class="label label-sm label-default">{{ $apiLog->method }}</span></td></tr>
                    <tr><th>HTTP Status</th><td>@if($apiLog->http_status)<span class="label label-sm label-{{ $apiLog->http_status >= 200 && $apiLog->http_status < 300 ? 'success' : 'danger' }}">{{ $apiLog->http_status }}</span>@else - @endif</td></tr>
                    <tr><th>Response Time</th><td>{{ $apiLog->response_time ? number_format($apiLog->response_time, 2) . 'ms' : '-' }}</td></tr>
                    <tr><th>Status</th><td><span class="label label-sm label-{{ $apiLog->status === 'success' ? 'success' : 'danger' }}">{{ ucfirst($apiLog->status) }}</span></td></tr>
                    <tr><th>Date</th><td>{{ $apiLog->created_at->format('M d, Y H:i:s') }}</td></tr>
                </table>

                @if($apiLog->error_message)
                <div class="alert alert-danger" style="margin-top:15px;">
                    <strong>Error:</strong> {{ $apiLog->error_message }}
                </div>
                @endif

                <a href="{{ route($backRoute ?? 'admin.api-logs.index') }}" class="btn btn-default btn-block" style="margin-top:10px;">
                    <i class="fa fa-arrow-left"></i> Back to Logs
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <!-- URL -->
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject theme-font bold uppercase">URL</span></div>
            </div>
            <div class="portlet-body">
                <pre style="white-space:pre-wrap; word-break:break-all; background:#f5f5f5; padding:10px; border-radius:4px; max-height:100px; overflow-y:auto;">{{ $apiLog->url }}</pre>
            </div>
        </div>

        <!-- Request Data -->
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject theme-font bold uppercase">Request Data</span></div>
            </div>
            <div class="portlet-body">
                @if($apiLog->request_data)
                    <pre style="white-space:pre-wrap; word-break:break-all; background:#f5f5f5; padding:10px; border-radius:4px; max-height:300px; overflow-y:auto;">{{ json_encode($apiLog->request_data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
                @else
                    <p class="font-grey-mint">No request data</p>
                @endif
            </div>
        </div>

        <!-- Response Body -->
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption"><span class="caption-subject theme-font bold uppercase">Response Body</span></div>
            </div>
            <div class="portlet-body">
                @if($apiLog->response_body)
                    @php
                        $decoded = json_decode($apiLog->response_body);
                        $displayBody = $decoded ? json_encode($decoded, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) : $apiLog->response_body;
                    @endphp
                    <pre style="white-space:pre-wrap; word-break:break-all; background:#f5f5f5; padding:10px; border-radius:4px; max-height:400px; overflow-y:auto;">{{ $displayBody }}</pre>
                @else
                    <p class="font-grey-mint">No response body</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection