@extends('layouts.app')

@section('title', 'KYC Verification')
@section('subtitle', 'Review and verify user KYC documents')

@section('content')
    <!-- Image Viewer Modal -->
    <div id="imageViewer" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg max-w-4xl max-h-full mx-4">
            <div class="flex justify-between items-center p-4 border-b">
                <h3 class="text-lg font-medium text-gray-900" id="modalTitle">Document Viewer</h3>
                <button onclick="closeImageViewer()" class="text-gray-400 hover:text-gray-600">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="p-4 max-h-96 overflow-auto">
                <img id="modalImage" src="" alt="Document" class="max-w-full mx-auto">
                <div id="pdfViewer" class="hidden">
                    <iframe id="pdfFrame" src="" class="w-full h-96 border-0"></iframe>
                </div>
            </div>
            <div class="flex justify-end p-4 border-t">
                <button onclick="closeImageViewer()" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                    Close
                </button>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            {{ session('error') }}
        </div>
    @endif

    <!-- User Information -->
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">User Information</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Name</label>
                    <p class="mt-1 text-sm text-gray-900">{{ $user->name }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Email</label>
                    <p class="mt-1 text-sm text-gray-900">{{ $user->email }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Role</label>
                    <p class="mt-1 text-sm text-gray-900">{{ ucfirst($user->role) }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Company</label>
                    <p class="mt-1 text-sm text-gray-900">{{ $user->company_name ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Country</label>
                    <p class="mt-1 text-sm text-gray-900">{{ $user->country }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">KYC Status</label>
                    <span class="mt-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $user->getKycStatusBadgeClass() }}">
                        {{ $user->getKycStatusText() }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- KYC Documents -->
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">KYC Documents</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                <!-- Personal Identification -->
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Personal Identification</h3>
                    @if($user->id_document_path)
                        <div class="space-y-3">
                            <p class="text-sm text-gray-600"><strong>Document Number:</strong> {{ $user->id_document_number }}</p>
                            <div class="flex flex-col space-y-2">
                                <button onclick="viewDocument('{{ Storage::url($user->id_document_path) }}', 'ID Document - {{ $user->name }}', '{{ pathinfo($user->id_document_path, PATHINFO_EXTENSION) }}')" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    View Document
                                </button>
                                <a href="{{ route('admin.users.document.download', ['user' => $user, 'documentType' => 'id_document']) }}" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                    </svg>
                                    Download Document
                                </a>
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-red-600">No document uploaded</p>
                    @endif
                </div>

                <!-- Business Registration -->
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Certificate of Incorporation</h3>
                    @if($user->certificate_of_incorporation_path)
                        <div class="space-y-3">
                            <p class="text-sm text-gray-600"><strong>Registration Number:</strong> {{ $user->business_registration_number }}</p>
                            <div class="flex flex-col space-y-2">
                                <button onclick="viewDocument('{{ Storage::url($user->certificate_of_incorporation_path) }}', 'Certificate of Incorporation - {{ $user->name }}', '{{ pathinfo($user->certificate_of_incorporation_path, PATHINFO_EXTENSION) }}')" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    View Document
                                </button>
                                <a href="{{ route('admin.users.document.download', ['user' => $user, 'documentType' => 'certificate_of_incorporation']) }}" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                    </svg>
                                    Download Document
                                </a>
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-red-600">No document uploaded</p>
                    @endif
                </div>

                <!-- KRA PIN Certificate -->
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">KRA PIN Certificate</h3>
                    @if($user->kra_pin_certificate_path)
                        <div class="space-y-3">
                            <p class="text-sm text-gray-600"><strong>KRA PIN Number:</strong> {{ $user->kra_pin_number }}</p>
                            <div class="flex flex-col space-y-2">
                                <button onclick="viewDocument('{{ Storage::url($user->kra_pin_certificate_path) }}', 'KRA PIN Certificate - {{ $user->name }}', '{{ pathinfo($user->kra_pin_certificate_path, PATHINFO_EXTENSION) }}')" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    View Document
                                </button>
                                <a href="{{ route('admin.users.document.download', ['user' => $user, 'documentType' => 'kra_pin_certificate']) }}" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                    </svg>
                                    Download Document
                                </a>
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-red-600">No document uploaded</p>
                    @endif
                </div>

                <!-- Export License -->
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Export License</h3>
                    @if($user->export_license_path)
                        <div class="space-y-3">
                            <p class="text-sm text-gray-600"><strong>License Number:</strong> {{ $user->export_license_number }}</p>
                            <div class="flex flex-col space-y-2">
                                <button onclick="viewDocument('{{ Storage::url($user->export_license_path) }}', 'Export License - {{ $user->name }}', '{{ pathinfo($user->export_license_path, PATHINFO_EXTENSION) }}')" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    View Document
                                </button>
                                <a href="{{ route('admin.users.document.download', ['user' => $user, 'documentType' => 'export_license']) }}" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                    </svg>
                                    Download Document
                                </a>
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-red-600">No document uploaded</p>
                    @endif
                </div>

                <!-- KEPHIS Registration -->
                @if($user->kephis_registration_path)
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">KEPHIS Registration</h3>
                    <div class="space-y-3">
                        <p class="text-sm text-gray-600"><strong>Registration Number:</strong> {{ $user->kephis_registration_number ?? 'N/A' }}</p>
                        <div class="flex flex-col space-y-2">
                            <button onclick="viewDocument('{{ Storage::url($user->kephis_registration_path) }}', 'KEPHIS Registration - {{ $user->name }}', '{{ pathinfo($user->kephis_registration_path, PATHINFO_EXTENSION) }}')" 
                               class="inline-flex items-center justify-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors duration-200">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                                View Document
                            </button>
                            <a href="{{ route('admin.users.document.download', ['user' => $user, 'documentType' => 'kephis_registration']) }}" 
                               class="inline-flex items-center justify-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 transition-colors duration-200">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                </svg>
                                Download Document
                            </a>
                        </div>
                    </div>
                </div>
                @endif

                <!-- County Business Permit -->
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">County Business Permit</h3>
                    @if($user->county_business_permit_path)
                        <div class="space-y-3">
                            <p class="text-sm text-gray-600"><strong>Permit Number:</strong> {{ $user->county_permit_number }}</p>
                            <div class="flex flex-col space-y-2">
                                <button onclick="viewDocument('{{ Storage::url($user->county_business_permit_path) }}', 'County Business Permit - {{ $user->name }}', '{{ pathinfo($user->county_business_permit_path, PATHINFO_EXTENSION) }}')" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    View Document
                                </button>
                                <a href="{{ route('admin.users.document.download', ['user' => $user, 'documentType' => 'county_business_permit']) }}" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                    </svg>
                                    Download Document
                                </a>
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-red-600">No document uploaded</p>
                    @endif
                </div>

                <!-- Tax Compliance Certificate -->
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Tax Compliance Certificate</h3>
                    @if($user->tax_compliance_certificate_path)
                        <div class="space-y-3">
                            <p class="text-sm text-gray-600"><strong>Tax ID:</strong> {{ $user->tax_id_number ?? 'N/A' }}</p>
                            <div class="flex flex-col space-y-2">
                                <button onclick="viewDocument('{{ Storage::url($user->tax_compliance_certificate_path) }}', 'Tax Compliance Certificate - {{ $user->name }}', '{{ pathinfo($user->tax_compliance_certificate_path, PATHINFO_EXTENSION) }}')" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    View Document
                                </button>
                                <a href="{{ route('admin.users.document.download', ['user' => $user, 'documentType' => 'tax_compliance_certificate']) }}" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                    </svg>
                                    Download Document
                                </a>
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-red-600">No document uploaded</p>
                    @endif
                </div>

                <!-- Bank Reference -->
                @if($user->bank_reference_path)
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Bank Reference</h3>
                    <div class="space-y-3">
                        <div class="flex flex-col space-y-2">
                            <button onclick="viewDocument('{{ Storage::url($user->bank_reference_path) }}', 'Bank Reference - {{ $user->name }}', '{{ pathinfo($user->bank_reference_path, PATHINFO_EXTENSION) }}')" 
                               class="inline-flex items-center justify-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors duration-200">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                                View Document
                            </button>
                            <a href="{{ route('admin.users.document.download', ['user' => $user, 'documentType' => 'bank_reference']) }}" 
                               class="inline-flex items-center justify-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 transition-colors duration-200">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                </svg>
                                Download Document
                            </a>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Utility Bill -->
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Address Verification</h3>
                    @if($user->utility_bill_path)
                        <div class="space-y-3">
                            <p class="text-sm text-gray-600">Utility Bill / Lease Agreement</p>
                            <div class="flex flex-col space-y-2">
                                <button onclick="viewDocument('{{ Storage::url($user->utility_bill_path) }}', 'Address Verification - {{ $user->name }}', '{{ pathinfo($user->utility_bill_path, PATHINFO_EXTENSION) }}')" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    View Document
                                </button>
                                <a href="{{ route('admin.users.document.download', ['user' => $user, 'documentType' => 'utility_bill']) }}" 
                                   class="inline-flex items-center justify-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                    </svg>
                                    Download Document
                                </a>
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-red-600">No document uploaded</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- KYC Verification Actions -->
    @if($user->isKycPending() || $user->isKycUnderReview())
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Verification Actions</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                <!-- Approve Form -->
                <div class="border border-green-200 rounded-lg p-4 bg-green-50">
                    <h3 class="text-lg font-medium text-green-900 mb-2">Approve KYC</h3>
                    <form action="{{ route('admin.users.kyc-approve', $user) }}" method="POST">
                        @csrf
                        <div class="mb-4">
                            <label for="notes" class="block text-sm font-medium text-green-700">Approval Notes (Optional)</label>
                            <textarea name="notes" id="notes" rows="3" 
                                      class="mt-1 block w-full border border-green-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
                                      placeholder="Add any notes for the user..."></textarea>
                        </div>
                        <button type="submit" 
                                class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                            Approve KYC Verification
                        </button>
                    </form>
                </div>

                <!-- Reject Form -->
                <div class="border border-red-200 rounded-lg p-4 bg-red-50">
                    <h3 class="text-lg font-medium text-red-900 mb-2">Reject KYC</h3>
                    <form action="{{ route('admin.users.kyc-reject', $user) }}" method="POST">
                        @csrf
                        <div class="mb-4">
                            <label for="rejection_reason" class="block text-sm font-medium text-red-700">Rejection Reason *</label>
                            <textarea name="rejection_reason" id="rejection_reason" rows="3" required
                                      class="mt-1 block w-full border border-red-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 transition-colors duration-200"
                                      placeholder="Explain why the KYC is being rejected..."></textarea>
                        </div>
                        <button type="submit" 
                                class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                            Reject KYC Verification
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- KYC History -->
    <div class="bg-white shadow rounded-lg mt-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">KYC History</h2>
        </div>
        <div class="p-6">
            <div class="space-y-4">
                <div class="flex justify-between items-center">
                    <span class="text-sm font-medium text-gray-700">KYC Submitted:</span>
                    <span class="text-sm text-gray-900">{{ $user->kyc_submitted_at ? $user->kyc_submitted_at->format('M d, Y H:i') : 'Not submitted' }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-sm font-medium text-gray-700">KYC Verified:</span>
                    <span class="text-sm text-gray-900">{{ $user->kyc_verified_at ? $user->kyc_verified_at->format('M d, Y H:i') : 'Not verified' }}</span>
                </div>
                @if($user->isKycRejected())
                <div class="flex justify-between items-start">
                    <span class="text-sm font-medium text-gray-700">Rejection Reason:</span>
                    <span class="text-sm text-red-600 text-right">{{ $user->kyc_rejection_reason }}</span>
                </div>
                @endif
            </div>
        </div>
    </div>

    <script>
        function viewDocument(documentUrl, documentTitle, fileExtension) {
            const modal = document.getElementById('imageViewer');
            const modalTitle = document.getElementById('modalTitle');
            const modalImage = document.getElementById('modalImage');
            const pdfViewer = document.getElementById('pdfViewer');
            const pdfFrame = document.getElementById('pdfFrame');
            
            modalTitle.textContent = documentTitle;
            
            // Check if it's a PDF
            if (fileExtension.toLowerCase() === 'pdf') {
                modalImage.classList.add('hidden');
                pdfViewer.classList.remove('hidden');
                pdfFrame.src = documentUrl;
            } else {
                // It's an image
                pdfViewer.classList.add('hidden');
                modalImage.classList.remove('hidden');
                modalImage.src = documentUrl;
                modalImage.alt = documentTitle;
            }
            
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function closeImageViewer() {
            const modal = document.getElementById('imageViewer');
            const pdfFrame = document.getElementById('pdfFrame');
            
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
            
            // Clear the PDF frame source to stop any ongoing loading
            pdfFrame.src = '';
        }

        // Close modal when clicking outside the content
        document.getElementById('imageViewer').addEventListener('click', function(e) {
            if (e.target === this) {
                closeImageViewer();
            }
        });

        // Close modal with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeImageViewer();
            }
        });
    </script>
@endsection