@extends('layouts.portal')

@section('title', 'KYC Documents')
@section('page_title', 'KYC Documents')
@section('page_subtitle', 'for ' . $client->full_name)

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

@section('content')
    
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4 flex items-center">
            <i class="fas fa-check-circle mr-2"></i>
            {{ 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 flex items-center">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            {{ session('error') }}
        </div>
    @endif

    <!-- Header -->
    <div class="bg-gradient-to-r from-[#772B10] to-[#8B3D15] border-b border-[#772B10] p-8 relative overflow-hidden">
        <div class="w-full relative z-10">
            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                <div class="flex items-center gap-5">
                    <div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center shadow-lg border border-[#772B10]/20">
                        <i class="fas fa-file-alt text-[#772B10] text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-semibold text-white tracking-wide" style="font-family: 'Inter', sans-serif;">KYC Documents</h1>
                        <p class="text-white/80 mt-1" style="font-family: 'Inter', sans-serif;">Client: {{ $client->full_name }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <a href="{{ route('agent.clients.show', $client) }}" class="px-6 py-3 bg-white/20 text-white rounded-xl hover:bg-white/30 transition-colors font-medium">
                        <i class="fas fa-arrow-left mr-2"></i>Back to Client
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Breadcrumb -->
    <div class="w-full px-8 mb-6 pt-8">
        <div class="flex items-center text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">
            <a href="{{ route('agent.clients.index') }}" class="hover:text-gray-900">Clients</a>
            <i class="fas fa-chevron-right mx-2 text-xs"></i>
            <a href="{{ route('agent.clients.show', $client) }}" class="hover:text-gray-900">{{ $client->full_name }}</a>
            <i class="fas fa-chevron-right mx-2 text-xs"></i>
            <span class="text-gray-900">KYC Documents</span>
        </div>
    </div>

    <!-- KYC Documents Display -->
    <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-8">
        @if($client->kycDocuments->count() > 0)
            <div class="flex items-center gap-3 mb-6">
                <div class="w-12 h-12 bg-[#772B10]/10 rounded-xl flex items-center justify-center">
                    <i class="fas fa-file-alt text-[#772B10] text-xl"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Uploaded KYC Documents</h3>
                    <p class="text-gray-600 text-lg" style="font-family: 'Inter', sans-serif;">{{ $client->kycDocuments->count() }} document(s) uploaded</p>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($client->kycDocuments as $document)
                    <div class="bg-white border border-gray-200 rounded-2xl p-6 hover:shadow-xl transition-all duration-300 relative overflow-hidden group">
                        <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-[#772B10]/10 to-[#8B3D15]/10 rounded-full -mr-16 -mt-16 opacity-30 group-hover:opacity-40 transition-opacity duration-300"></div>
                        
                        <div class="relative z-10">
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center gap-4">
                                    <div class="w-12 h-12 bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-xl flex items-center justify-center text-white font-bold shadow-lg">
                                        {{ substr($document->document_type, 0, 1) }}{{ substr($document->document_type, 1, 1) }}
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-900 text-lg" style="font-family: 'Inter', sans-serif;">{{ ucfirst(str_replace('_', ' ', $document->document_type)) }}</h4>
                                        <p class="text-[#772B10] font-medium text-sm" style="font-family: 'Inter', sans-serif;">{{ ucfirst($document->status ?? 'pending') }}</p>
                                    </div>
                                </div>
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium {{ $document->status === 'verified' ? 'bg-green-100 text-green-800 border border-green-200' : ($document->status === 'rejected' ? 'bg-red-100 text-red-800 border border-red-200' : 'bg-yellow-100 text-yellow-800 border border-yellow-200') }}">
                                    <i class="fas fa-{{ $document->status === 'verified' ? 'check-circle' : ($document->status === 'rejected' ? 'times-circle' : 'clock') }} mr-1"></i>
                                    {{ ucfirst($document->status ?? 'pending') }}
                                </span>
                            </div>
                            
                            <div class="space-y-3">
                                @if($document->document_number)
                                    <div class="flex items-center gap-3 text-gray-600">
                                        <div class="w-6 h-6 bg-[#772B10]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-hashtag text-[#772B10] text-xs"></i>
                                        </div>
                                        <div class="min-w-0">
                                            <p class="text-xs text-gray-500" style="font-family: 'Inter', sans-serif;">Document Number</p>
                                            <p class="text-sm font-medium truncate" style="font-family: 'Inter', sans-serif;">{{ $document->document_number }}</p>
                                        </div>
                                    </div>
                                @endif
                                
                                @if($document->uploaded_at)
                                    <div class="flex items-center gap-3 text-gray-600">
                                        <div class="w-6 h-6 bg-[#772B10]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-calendar text-[#772B10] text-xs"></i>
                                        </div>
                                        <div class="min-w-0">
                                            <p class="text-xs text-gray-500" style="font-family: 'Inter', sans-serif;">Uploaded Date</p>
                                            <p class="text-sm font-medium" style="font-family: 'Inter', sans-serif;">{{ $document->uploaded_at->format('d M Y') }}</p>
                                        </div>
                                    </div>
                                @endif
                                
                                @if($document->source)
                                    <div class="flex items-center gap-3 text-gray-600">
                                        <div class="w-6 h-6 bg-[#772B10]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-user text-[#772B10] text-xs"></i>
                                        </div>
                                        <div class="min-w-0">
                                            <p class="text-xs text-gray-500" style="font-family: 'Inter', sans-serif;">Uploaded By</p>
                                            <p class="text-sm font-medium" style="font-family: 'Inter', sans-serif;">{{ ucfirst($document->source) }}</p>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-12">
                <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-file-alt text-gray-400 text-3xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">No KYC Documents Uploaded</h3>
                <p class="text-gray-600">This client has not uploaded any KYC documents yet.</p>
            </div>
        @endif
    </div>
@endsection