@extends('admin.layout')

@section('content')
    <div class="flex items-center gap-3.5 mb-8">
        <a href="{{ route('admin.verifications') }}" class="h-10 w-10 border border-slate-200 dark:border-slate-800 rounded-2xl bg-white dark:bg-slate-900 text-slate-500 hover:text-slate-700 dark:hover:text-slate-200 shadow-sm flex items-center justify-center hover:scale-105 active:scale-95 transition-all focus:outline-none" aria-label="Go back">
            <i class="bi bi-arrow-left text-base"></i>
        </a>
        <div>
            <h1 class="text-2xl font-black tracking-tight text-slate-800 dark:text-slate-100">Verification Details</h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Audit log parameters and response headers for request #{{ $log->id }}.</p>
        </div>
    </div>

    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl shadow-xl shadow-slate-100/50 dark:shadow-none p-6 md:p-8 transition duration-200 relative overflow-hidden">
        <!-- Gradient Top Decorator Line -->
        <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 mb-8 pt-2">
            <!-- Row 1 -->
            <div class="border-b border-slate-100 dark:border-slate-800/60 pb-4">
                <span class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-1.5">Log Reference ID</span>
                <span class="font-black text-slate-800 dark:text-slate-150 text-base">#{{ $log->id }}</span>
            </div>
            <div class="border-b border-slate-100 dark:border-slate-800/60 pb-4">
                <span class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-1.5">Requesting Customer</span>
                <span class="font-extrabold text-indigo-600 dark:text-indigo-400 text-base flex items-center gap-1.5">
                    <i class="bi bi-building"></i>
                    {{ $log->company_name ?? ($log->apiClient?->name ?? 'Direct API Client') }}
                </span>
            </div>
            
            <!-- Row 2 -->
            <div class="border-b border-slate-100 dark:border-slate-800/60 pb-4">
                <span class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-1.5">Verification API Type</span>
                <span class="font-extrabold text-purple-600 dark:text-purple-400 text-base capitalize flex items-center gap-1.5">
                    <i class="bi bi-shield-check"></i>
                    {{ str_replace('_', ' ', $log->verification_type) }}
                </span>
            </div>
            <div class="border-b border-slate-100 dark:border-slate-800/60 pb-4">
                <span class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-1.5">Integration Provider</span>
                <span class="font-mono font-bold text-slate-700 dark:text-slate-300 text-sm px-2.5 py-1 bg-slate-50 dark:bg-slate-950 border border-slate-200/50 dark:border-slate-800/50 rounded-xl inline-block capitalize">
                    {{ $log->provider }} API
                </span>
            </div>
            
            <!-- Row 3 -->
            <div class="border-b border-slate-100 dark:border-slate-800/60 pb-4">
                <span class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-1.5">Transaction Status</span>
                @if (strtolower($log->status) === 'success')
                    <span class="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 text-xs font-black tracking-wider uppercase px-3 py-1.5 rounded-xl inline-flex items-center gap-1.5">
                        <i class="bi bi-check-circle-fill"></i> SUCCESS
                    </span>
                @else
                    <span class="bg-rose-500/10 text-rose-600 dark:text-rose-455 border border-rose-500/20 text-xs font-black tracking-wider uppercase px-3 py-1.5 rounded-xl inline-flex items-center gap-1.5">
                        <i class="bi bi-exclamation-triangle-fill"></i> FAILED
                    </span>
                @endif
            </div>
            <div class="border-b border-slate-100 dark:border-slate-800/60 pb-4">
                <span class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-1.5">Response Time</span>
                <span class="font-extrabold text-slate-800 dark:text-slate-200 text-base flex items-center gap-1.5">
                    <i class="bi bi-clock-history text-slate-400"></i>
                    {{ $log->response_time_ms }} ms
                </span>
            </div>
            
            <!-- Row 4 -->
            <div class="border-b border-slate-100 dark:border-slate-800/60 pb-4 md:col-span-2">
                <span class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-1.5">Error Message</span>
                <span class="font-semibold text-sm {{ $log->error_message ? 'text-rose-500 dark:text-rose-400' : 'text-slate-400 dark:text-slate-500' }} flex items-center gap-1.5">
                    @if($log->error_message)
                        <i class="bi bi-x-circle"></i>
                    @else
                        <i class="bi bi-info-circle"></i>
                    @endif
                    {{ $log->error_message ?: 'No errors reported.' }}
                </span>
            </div>
        </div>

        @if ($log->aadhaarVerification && $log->aadhaarVerification->status === 'success' && $log->aadhaarVerification->full_name)
            <!-- Aadhaar eKYC Result Profile Card -->
            <div class="mb-8 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800/80 rounded-2xl p-6 relative overflow-hidden">
                <span class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-4">Aadhaar Cardholder eKYC Profile</span>
                
                <div class="flex flex-col md:flex-row gap-6 items-start">
                    <!-- Photo Column -->
                    @if ($log->aadhaarVerification->photo_base64)
                        <div class="relative group mx-auto md:mx-0 shrink-0">
                            <div class="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-2xl blur opacity-30 group-hover:opacity-50 transition duration-300"></div>
                            <img src="data:image/jpeg;base64,{{ $log->aadhaarVerification->photo_base64 }}" 
                                 class="relative h-36 w-28 bg-white border border-slate-200 dark:border-slate-800 rounded-2xl object-cover shadow-md"
                                 alt="Aadhaar Holder Photo">
                        </div>
                    @else
                        <div class="h-36 w-28 bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl flex flex-col items-center justify-center text-slate-400 mx-auto md:mx-0 shrink-0 shadow-inner">
                            <i class="bi bi-person text-3xl"></i>
                            <span class="text-[9px] uppercase font-bold tracking-wider mt-1">No Photo</span>
                        </div>
                    @endif

                    <!-- Details Column -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
                        <div>
                            <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-0.5">Full Name</span>
                            <span class="font-extrabold text-slate-800 dark:text-slate-150 text-sm">{{ $log->aadhaarVerification->full_name }}</span>
                        </div>
                        <div>
                            <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-0.5">Date of Birth (DOB)</span>
                            <span class="font-bold text-slate-700 dark:text-slate-300 text-sm">{{ $log->aadhaarVerification->dob ?? '-' }}</span>
                        </div>
                        <div>
                            <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-0.5">Gender</span>
                            <span class="font-bold text-slate-700 dark:text-slate-300 text-sm capitalize">{{ strtolower($log->aadhaarVerification->gender ?? '-') }}</span>
                        </div>
                        <div>
                            <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-0.5">Aadhaar Number</span>
                            <span class="font-mono font-bold text-indigo-600 dark:text-indigo-400 text-sm">XXXX XXXX {{ substr($log->input_parameters['aadhaar_number'] ?? ($log->aadhaarVerification->input_parameters['aadhaar_number'] ?? '000000000000'), -4) }}</span>
                        </div>
                        
                        <!-- Address row (Span both columns) -->
                        <div class="sm:col-span-2">
                            <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-0.5">Address</span>
                            <span class="font-semibold text-slate-700 dark:text-slate-350 text-sm leading-relaxed block">
                                @if (is_array($log->aadhaarVerification->address))
                                    @php
                                        $addr = $log->aadhaarVerification->address;
                                        $addressString = $addr['full_address'] ?? $addr['combined_address'] ?? '';
                                        if (!$addressString) {
                                            $parts = array_filter([
                                                $addr['house'] ?? $addr['house_number'] ?? $addr['lm'] ?? null,
                                                $addr['street'] ?? $addr['loc'] ?? null,
                                                $addr['vtc'] ?? $addr['city'] ?? $addr['subdist'] ?? null,
                                                $addr['dist'] ?? $addr['district'] ?? null,
                                                $addr['state'] ?? null,
                                                $addr['pc'] ?? $addr['pincode'] ?? null
                                            ]);
                                            $addressString = implode(', ', $parts);
                                        }
                                    @endphp
                                    {{ $addressString ?: 'Address details unavailable' }}
                                @else
                                    {{ $log->aadhaarVerification->address ?: 'Address details unavailable' }}
                                @endif
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Input Parameters JSON Code Block -->
        <div class="mb-8">
            <span class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider block mb-3 flex items-center justify-between">
                <span>Input Parameters (PII Plaintext/Masked)</span>
                <button onclick="navigator.clipboard.writeText(document.getElementById('raw_json_block').innerText).then(() => alert('Copied JSON parameters to clipboard!'))" class="text-indigo-500 hover:text-indigo-600 transition-colors bg-indigo-500/10 px-2 py-1 rounded-lg font-bold text-[10px] uppercase tracking-normal normal-case flex items-center gap-1 focus:outline-none"><i class="bi bi-copy"></i> Copy JSON</button>
            </span>
            <div class="relative bg-slate-950 text-slate-200 border border-slate-900 rounded-2xl p-5 font-mono text-xs overflow-auto max-h-96 select-all shadow-inner leading-relaxed">
                <!-- Glowing effect background -->
                <div class="absolute top-0 right-0 w-24 h-24 bg-indigo-500/5 rounded-full filter blur-xl pointer-events-none"></div>
                <pre id="raw_json_block" class="relative z-10">{{ json_encode($log->input_parameters, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
            </div>
        </div>

        <div class="flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 pt-6">
            <a href="{{ route('admin.verifications') }}" class="px-5 py-3 border border-slate-200 dark:border-slate-800 rounded-2xl bg-slate-50 dark:bg-slate-950 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-900 transition-all font-bold text-sm focus:outline-none flex items-center gap-2">
                <i class="bi bi-arrow-left"></i> Return to Logs List
            </a>
        </div>
    </div>
@endsection
