@extends('layouts.portal')

@section('title', 'View KYC Documents')
@section('page_title', 'My KYC Documents')
@section('page_subtitle', 'View your uploaded identity and address documents')

@section('sidebar')
    @include('client.partials.sidebar', ['active' => 'dashboard'])
@endsection

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-6xl mx-auto px-6">
        <!-- Header -->
        <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-800">My KYC Documents</h1>
                    <p class="text-gray-500 mt-1">These documents were uploaded by our staff.</p>
                </div>
                <a href="{{ route('client.dashboard') }}" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl transition-all">
                    Back to Dashboard
                </a>
            </div>
        </div>

        <!-- Documents List -->
        <div class="bg-white rounded-2xl shadow-lg p-6">
            @if($existingKycDocuments->isNotEmpty())
                <div class="space-y-6">
                    @foreach($existingKycDocuments as $document)
                        <div class="border-2 border-gray-200 rounded-xl p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-semibold text-lg text-gray-800">{{ ucfirst(str_replace('_', ' ', $document->document_type)) }}</h3>
                                <span class="text-sm text-gray-500">{{ $document->uploaded_at ? $document->uploaded_at->format('d M Y') : 'N/A' }}</span>
                            </div>
                            <p class="text-gray-600 text-sm mb-4">Source: {{ ucfirst($document->source ?? 'Client') }}</p>
                            
                            @if($document->file_path)
                                <!-- Document Preview -->
                                <div class="mb-4">
                                    @php
                                        $fileExtension = strtolower(pathinfo($document->file_path, PATHINFO_EXTENSION));
                                        $isImage = in_array($fileExtension, ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']);
                                        $isPdf = $fileExtension === 'pdf';
                                    @endphp
                                    
                                    @if($isImage)
                                        <!-- Image Preview -->
                                        <div class="relative group">
                                            <img src="{{ asset('storage/' . $document->file_path) }}" 
                                                 alt="{{ ucfirst(str_replace('_', ' ', $document->document_type)) }}"
                                                 class="w-full max-w-md mx-auto rounded-lg shadow-md cursor-pointer hover:shadow-xl transition-all duration-300"
                                                 onclick="openImageModal('{{ asset('storage/' . $document->file_path) }}', '{{ ucfirst(str_replace('_', ' ', $document->document_type)) }}')">
                                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-300 rounded-lg flex items-center justify-center">
                                                <i class="fas fa-search-plus text-white opacity-0 group-hover:opacity-100 transition-all duration-300 text-2xl"></i>
                                            </div>
                                        </div>
                                    @elseif($isPdf)
                                        <!-- PDF Preview -->
                                        <div class="border border-gray-300 rounded-lg overflow-hidden">
                                            <iframe src="{{ asset('storage/' . $document->file_path) }}" 
                                                    class="w-full h-96"
                                                    title="{{ ucfirst(str_replace('_', ' ', $document->document_type)) }}">
                                                <p class="p-4 text-center text-gray-500">
                                                    Your browser does not support PDF viewing. 
                                                    <a href="{{ route('client.kyc.download', $document) }}" class="text-indigo-600 hover:text-indigo-800">Download the PDF</a>
                                                </p>
                                            </iframe>
                                        </div>
                                    @else
                                        <!-- Other File Types -->
                                        <div class="bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                                            <i class="fas fa-file-alt text-4xl text-gray-400 mb-3"></i>
                                            <p class="text-gray-600 mb-2">Preview not available for this file type</p>
                                            <p class="text-sm text-gray-500 mb-4">File: {{ $fileExtension }}</p>
                                        </div>
                                    @endif
                                </div>
                                
                                <!-- Action Buttons -->
                                <div class="flex flex-wrap gap-3">
                                    <a href="{{ route('client.kyc.download', $document) }}" 
                                       class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-all">
                                        <i class="fas fa-download mr-2"></i>Download Document
                                    </a>
                                    @if($isImage)
                                        <button onclick="openImageModal('{{ asset('storage/' . $document->file_path) }}', '{{ ucfirst(str_replace('_', ' ', $document->document_type)) }}')" 
                                                class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-all">
                                            <i class="fas fa-expand mr-2"></i>View Full Size
                                        </button>
                                    @endif
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-12">
                    <i class="fas fa-file-upload text-5xl text-gray-300 mb-4"></i>
                    <p class="text-gray-500 text-lg">No KYC documents uploaded yet.</p>
                </div>
            @endif
        </div>
        
        <!-- Image Modal -->
        <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden flex items-center justify-center p-4" onclick="closeImageModal()">
            <div class="relative max-w-6xl max-h-full">
                <button onclick="closeImageModal()" class="absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors">
                    <i class="fas fa-times text-2xl"></i>
                </button>
                <img id="modalImage" src="" alt="" class="max-w-full max-h-full rounded-lg shadow-2xl">
                <p id="modalTitle" class="text-white text-center mt-4 text-lg font-semibold"></p>
            </div>
        </div>
        
        <script>
        function openImageModal(imageSrc, title) {
            const modal = document.getElementById('imageModal');
            const modalImage = document.getElementById('modalImage');
            const modalTitle = document.getElementById('modalTitle');
            
            modalImage.src = imageSrc;
            modalImage.alt = title;
            modalTitle.textContent = title;
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            document.body.style.overflow = 'hidden';
        }
        
        function closeImageModal() {
            const modal = document.getElementById('imageModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            document.body.style.overflow = 'auto';
        }
        
        // Close modal on Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeImageModal();
            }
        });
        </script>
    </div>
</div>
@endsection