@extends('layouts.master')

@section('content')
    <div class="main-content app-content mt-0">
        <div class="side-app">

            <!-- CONTAINER -->
            <div class="main-container container-fluid">

                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <h1 class="page-title">{{ __('locale.verification_details') }}</h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a
                                    href="javascript:void(0)">{{ __('locale.verification_details') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{__('common.home')}}</li>
                        </ol>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">

                            <div class="card-body">
                                <div class="row">
                                    <!-- Basic Information -->
                                    <div class="col-md-6">
                                        <div class="card mb-3">
                                            <div class="card-header bg-primary text-white">
                                                <h5 class="mb-0">{{ __('locale.basic_information') }}</h5>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-bordered">
                                                    <tr>
                                                        <th width="35%">{{ __('locale.verification_id') }}</th>
                                                        <td><code>{{ $apiLog->verification_id }}</code></td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.partner_id') }}</th>
                                                        <td>{{ $apiLog->partner_id }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.transaction_id') }}</th>
                                                        <td>{{ $apiLog->transaction_id ?? '-' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.uid') }}</th>
                                                        <td><code>{{ $apiLog->uid }}</code></td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.status') }}</th>
                                                        <td>
                                                            @if($apiLog->authentic)
                                                                <span
                                                                    class="badge bg-success">{{ __('locale.authentic') }}</span>
                                                                <span class="text-muted"> -
                                                                    {{ __('locale.genuine_tag') }}</span>
                                                            @else
                                                                <span
                                                                    class="badge bg-danger">{{ __('locale.counterfeit') }}</span>
                                                                <span class="text-muted"> -
                                                                    {{ __('locale.counterfeit_tag_warning') }}</span>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.response_time') }}</th>
                                                        <td>{{ $apiLog->response_ms }} ms</td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.location') }}</th>
                                                        <td>{{ $apiLog->location ?? '-' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.ip_address') }}</th>
                                                        <td><code>{{ $apiLog->ip_address }}</code></td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.timestamp') }}</th>
                                                        <td>{{ $apiLog->created_at->format('Y-m-d H:i:s') }}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Request Details -->
                                    <div class="col-md-6">
                                        <div class="card mb-3">
                                            <div class="card-header bg-info text-white">
                                                <h5 class="mb-0">{{ __('locale.request_details') }}</h5>
                                            </div>
                                            <div class="card-body">
                                                <strong>{{ __('locale.request_payload') }}:</strong>
                                                <pre
                                                    style="background: #f8f9fa; padding: 10px; border-radius: 5px; max-height: 300px; overflow: auto;"><code>{{ json_encode($apiLog->request_payload, JSON_PRETTY_PRINT) }}</code></pre>
                                            </div>
                                        </div>

                                        <!-- Additional Info -->
                                        <div class="card">
                                            <div class="card-header bg-warning text-dark">
                                                <h5 class="mb-0">{{ __('locale.additional_information') }}</h5>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-sm">
                                                    <tr>
                                                        <th>{{ __('locale.http_status') }}</th>
                                                        <td>
                                                            <span
                                                                class="badge bg-{{ $apiLog->http_status == 200 ? 'success' : 'danger' }}">
                                                                {{ $apiLog->http_status }}
                                                            </span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.log_id') }}</th>
                                                        <td>{{ $apiLog->id }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.created_at') }}</th>
                                                        <td>{{ $apiLog->created_at->format('F j, Y, g:i a') }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th>{{ __('locale.updated_at') }}</th>
                                                        <td>{{ $apiLog->updated_at->diffForHumans() }}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Actions -->
                                <div class="row mt-3">
                                    <div class="col-12">
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-success"
                                                onclick="copyToClipboard('{{ $apiLog->verification_id }}')">
                                                <i class="fe fe-copy"></i> {{ __('common.copy_id') }}
                                            </button>
                                            <button type="button" class="btn btn-info" onclick="printDetails()">
                                                <i class="fe fe-print"></i> {{ __('common.print') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('bottom_script')
    <script>
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function () {
                alert('{{ __("common.copied_to_clipboard") }}');
            });
        }

        function printDetails() {
            window.print();
        }
    </script>

    <style>
        @media print {

            .sidebar,
            .navbar,
            .card-header .btn,
            .btn-group,
            .alert {
                display: none !important;
            }

            .main-content {
                margin: 0 !important;
                padding: 0 !important;
            }

            .card {
                border: none !important;
            }

            .btn-group {
                display: none !important;
            }
        }
    </style>
@endsection