@extends('layouts.portal')

@section('title', 'KYC Documents')
@section('page_title', 'Step 3: KYC Documents')
@section('page_subtitle', 'Upload your identity and address proof documents')

@section('sidebar')
    @include('client.partials.onboarding-sidebar', ['step' => 3, 'onboardingStep' => $onboardingStep])
@endsection

@section('content')
    <!-- Edit Access Banner -->
    @if(!$hasEditAccess && $editRequest)
    <div class="max-w-6xl mx-auto p-6 mb-6">
        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-lock text-yellow-600"></i>
                </div>
                <div>
                    <p class="font-semibold text-yellow-800">Read-Only Mode</p>
                    <p class="text-sm text-yellow-600">Your KYC documents are in read-only mode. To edit, you need to request edit access.</p>
                </div>
            </div>
            <a href="{{ route('client.edit.section') }}" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors font-medium">
                <i class="fas fa-unlock mr-2"></i>Request Edit Access
            </a>
        </div>
    </div>
    @elseif($hasEditAccess && $editRequest)
    <div class="max-w-6xl mx-auto p-6 mb-6">
        <div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-unlock text-green-600"></i>
                </div>
                <div>
                    <p class="font-semibold text-green-800">Edit Access Active</p>
                    <p class="text-sm text-green-600">You can edit your KYC documents until {{ $editRequest->edit_access_expires_at->format('d M Y, g:i A') }}</p>
                </div>
            </div>
        </div>
    </div>
    @endif

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        }
        
        body {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            min-height: 100vh;
        }
        
        .form-label {
            font-weight: 600;
            color: #1f2937;
            font-size: 0.85rem;
            letter-spacing: -0.025em;
        }
        
        .form-input {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.85rem;
            font-weight: 400;
            letter-spacing: -0.01em;
            height: 52px !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        
        .form-input:focus {
            border-color: #991b1b !important;
            box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.1) !important;
        }
        
        .form-select {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.85rem;
            font-weight: 400;
            letter-spacing: -0.01em;
            height: 52px !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        
        .form-select:focus {
            border-color: #991b1b !important;
            box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.1) !important;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
            color: white !important;
            border-radius: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-weight: 600 !important;
            font-size: 15px !important;
            height: 48px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            letter-spacing: -0.025em;
        }
        
        .btn-secondary {
            border-radius: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-weight: 600 !important;
            font-size: 15px !important;
            height: 48px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            background: #ffffff !important;
            border: 2px solid #991b1b !important;
            color: #991b1b !important;
            letter-spacing: -0.025em;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 25px rgba(153, 27, 27, 0.35) !important;
            background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
        }
        
        .card-container {
            border-radius: 20px !important;
            box-shadow: 0 20px 80px rgba(0, 0, 0, 0.12) !important;
            background: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            backdrop-filter: blur(10px) !important;
        }
        
        .progress-step {
            border-radius: 16px !important;
            font-family: 'Inter', sans-serif !important;
            font-weight: 700 !important;
            font-size: 15px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            width: 56px !important;
            height: 56px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
        }
        
        .progress-step.current {
            background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
            color: white !important;
            border: 3px solid #991b1b !important;
            animation: pulse 2s infinite;
        }
        
        .progress-step.completed {
            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
            color: white !important;
            box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4) !important;
        }
        
        .document-entry {
            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
            border-radius: 20px !important;
            padding: 32px !important;
            margin-bottom: 2rem !important;
            position: relative !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
        }
        
        .document-entry:hover {
            box-shadow: 0 20px 60px rgba(153, 27, 27, 0.15) !important;
            transform: translateY(-5px) !important;
            border-color: rgba(153, 27, 27, 0.2) !important;
        }
        
        .add-document-btn {
            background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
            border: 2px solid #991b1b !important;
            border-radius: 8px !important;
            padding: 8px 28px !important;
            color: white !important;
            font-weight: 600 !important;
            font-family: 'Inter', sans-serif !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            font-size: 14px !important;
            box-shadow: 0 4px 15px rgba(153, 27, 27, 0.15) !important;
            position: relative !important;
            overflow: hidden !important;
            max-width: 450px !important;
            margin: 0 auto !important;
            display: flex !important;
            text-align: center !important;
            justify-content: center !important;
            align-items: center !important;
            line-height: 1 !important;
            height: 40px !important;
        }
        
        .add-document-btn::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: -100% !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
            transition: left 0.5s !important;
        }
        
        .add-document-btn:hover::before {
            left: 100% !important;
        }
        
        .add-document-btn:hover {
            background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
            border-color: #dc2626 !important;
            color: white !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 20px rgba(153, 27, 27, 0.25) !important;
        }
        
        .file-input {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.85rem;
            font-weight: 400;
            letter-spacing: -0.01em;
            border: 2px solid #e5e7eb !important;
            border-radius: 12px !important;
            padding: 1rem !important;
        }
        
        .file-input:focus {
            border-color: #991b1b !important;
            box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.1) !important;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(153, 27, 27, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(153, 27, 27, 0); }
            100% { box-shadow: 0 0 0 0 rgba(153, 27, 27, 0); }
        }
    </style>
    
    <div class="max-w-6xl mx-auto p-6">
        <!-- Session Status Indicator -->
        <div id="session-status" class="mb-6 bg-white/80 backdrop-blur-md border border-green-200/50 rounded-xl p-4 text-sm text-green-800 hidden shadow-lg">
            <div class="flex items-center">
                <svg class="w-5 h-5 mr-3 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                </svg>
                <span id="session-message">Session active</span>
            </div>
        </div>
        
        <!-- Modern Progress Steps -->
        <div class="mb-8 bg-white/90 backdrop-blur-xl rounded-2xl shadow-2xl p-8 border border-white/20">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center text-white font-bold shadow-xl progress-step completed">
                        <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-900 form-label">Personal</p>
                        <p class="text-xs text-emerald-600 font-medium">Completed</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gradient-to-r from-green-500 to-green-500 mx-6"></div>
                <div class="flex items-center">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center text-white font-bold shadow-xl progress-step completed">
                        <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-900 form-label">Family</p>
                        <p class="text-xs text-emerald-600 font-medium">Completed</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gradient-to-r from-green-500 to-red-600 mx-6"></div>
                <div class="flex items-center">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-red-600 to-red-800 flex items-center justify-center text-white font-bold shadow-xl progress-step current">
                        <span class="text-lg font-bold">3</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-900 form-label">KYC</p>
                        <p class="text-xs text-red-700 font-medium">Current step</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gradient-to-r from-red-600 to-gray-300 mx-6"></div>
                <div class="flex items-center opacity-60">
                    <div class="w-14 h-14 rounded-2xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold progress-step">
                        <span class="text-lg font-bold">4</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-700">Assets</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modern Form Card -->
        <div class="bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/30 overflow-hidden card-container">
            <div class="bg-gradient-to-r from-red-700 via-red-800 to-red-900 px-8 py-6 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
                <div class="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full blur-2xl -ml-12 -mb-12"></div>
                <div class="relative z-10">
                    <h3 class="text-2xl font-bold text-white flex items-center" style="font-family: 'Inter', sans-serif;">
                        <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                        KYC Documents
                    </h3>
                    <p class="text-red-100 text-sm mt-2" style="font-family: 'Inter', sans-serif;">Upload your identity and address proof documents</p>
                </div>
            </div>
            
            <form action="{{ route('client.kyc.store') }}" method="POST" enctype="multipart/form-data" class="p-8">
                @csrf
        
                <div class="mb-8">
                    <div class="bg-red-50/80 backdrop-blur-sm border border-red-200/50 rounded-xl p-6 shadow-lg">
                        <div class="flex items-start">
                            <svg class="w-6 h-6 text-red-600 mt-1 mr-4" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                            </svg>
                            <div>
                                <h4 class="font-semibold text-red-800 mb-2 form-label">KYC Requirements</h4>
                                <p class="text-sm text-red-700">Please upload clear scanned copies or photos of the following documents. All documents must be valid and not expired.</p>
                            </div>
                        </div>
                    </div>
                </div>
        
                <div id="documentsContainer">
                    @if($onboardingStep && $onboardingStep->kyc_documents && count($onboardingStep->kyc_documents) > 0)
                        @foreach($onboardingStep->kyc_documents as $index => $document)
                        <!-- Existing Document Entry -->
                        <div class="document-entry">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div class="group">
                                    <label class="form-label">
                                        Document Type <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <select name="kyc_documents[{{ $index }}][type]" required 
                                                class="form-select w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white appearance-none text-gray-900"
                                                style="padding-left: 1.25rem; padding-right: 2.5rem;">
                                            <option value="ic" {{ $document['document_type'] == 'ic' ? 'selected' : '' }}>🆔 Identity Card (IC)</option>
                                            <option value="passport" {{ $document['document_type'] == 'passport' ? 'selected' : '' }}>🛂 Passport</option>
                                            <option value="address_proof" {{ $document['document_type'] == 'address_proof' ? 'selected' : '' }}>🏠 Address Proof</option>
                                            <option value="source_of_funds" {{ $document['document_type'] == 'source_of_funds' ? 'selected' : '' }}>💰 Source of Funds Proof</option>
                                        </select>
                                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="group">
                                    <label class="form-label">
                                        Current File
                                    </label>
                                    <div class="flex items-center space-x-4 p-4 bg-green-50/80 backdrop-blur-sm border border-green-200/50 rounded-xl shadow-lg">
                                        <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                                        </svg>
                                        <div class="flex-1">
                                            <p class="text-sm font-semibold text-green-800">
                                                @if($document['document_type'] == 'ic')
                                                    Identity Card
                                                @elseif($document['document_type'] == 'passport')
                                                    Passport
                                                @elseif($document['document_type'] == 'address_proof')
                                                    Address Proof
                                                @elseif($document['document_type'] == 'source_of_funds')
                                                    Source of Funds Proof
                                                @else
                                                    Document
                                                @endif
                                            </p>
                                            <p class="text-xs text-green-600">Uploaded on {{ $document['uploaded_at'] }}</p>
                                        </div>
                                        <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                        </svg>
                                    </div>
                                    
                                    <label class="form-label mt-4">
                                        Replace File (Optional)
                                    </label>
                                    <div class="relative">
                                        <input type="file" name="kyc_documents[{{ $index }}][file]" accept=".pdf,.jpg,.jpeg,.png"
                                               class="file-input w-full bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                               style="padding-left: 1.25rem; padding-right: 1.25rem;">
                                    </div>
                                    <p class="text-xs text-gray-500 mt-2">Leave empty to keep current file, or upload new one (Max 10MB)</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    @else
                        <!-- Empty Document Entries for First Time -->
                        <div class="document-entry">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div class="group">
                                    <label class="form-label">
                                        Document Type <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <select name="kyc_documents[0][type]" required 
                                                class="form-select w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white appearance-none text-gray-900"
                                                style="padding-left: 1.25rem; padding-right: 2.5rem;">
                                            <option value="">Select document type</option>
                                            <option value="ic">🆔 Identity Card (IC)</option>
                                            <option value="passport">🛂 Passport</option>
                                            <option value="address_proof">🏠 Address Proof</option>
                                            <option value="source_of_funds">💰 Source of Funds Proof</option>
                                        </select>
                                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="group">
                                    <label class="form-label">
                                        Upload File <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="file" name="kyc_documents[0][file]" required accept=".pdf,.jpg,.jpeg,.png"
                                               class="file-input w-full bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                               style="padding-left: 1.25rem; padding-right: 1.25rem;">
                                    </div>
                                    <p class="text-xs text-gray-500 mt-2">Accepted: PDF, JPG, PNG (Max 10MB)</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="document-entry">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div class="group">
                                    <label class="form-label">
                                        Document Type <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <select name="kyc_documents[1][type]" required 
                                                class="form-select w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white appearance-none text-gray-900"
                                                style="padding-left: 1.25rem; padding-right: 2.5rem;">
                                            <option value="">Select document type</option>
                                            <option value="address_proof">🏠 Address Proof</option>
                                            <option value="ic">🆔 Identity Card (IC)</option>
                                            <option value="passport">🛂 Passport</option>
                                            <option value="source_of_funds">💰 Source of Funds Proof</option>
                                        </select>
                                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="group">
                                    <label class="form-label">
                                        Upload File <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="file" name="kyc_documents[1][file]" required accept=".pdf,.jpg,.jpeg,.png"
                                               class="file-input w-full bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                               style="padding-left: 1.25rem; padding-right: 1.25rem;">
                                    </div>
                                    <p class="text-xs text-gray-500 mt-2">Accepted: PDF, JPG, PNG (Max 10MB)</p>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
        
                <!-- Add More Button -->
                <button type="button" id="addDocument" class="add-document-btn">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 5v14M5 12h14"/>
                    </svg>
                    Add Another Document
                </button>
                
                <!-- Risk Assessment -->
                <div class="border-t border-gray-200 pt-8 mb-8">
                    <h4 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
                        <svg class="w-6 h-6 mr-3 text-red-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                        Risk Assessment
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="group">
                            <label class="form-label">
                                Risk Rating
                            </label>
                            <select name="risk_rating" class="form-select w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white appearance-none text-gray-900"
                                    style="padding-left: 1.25rem; padding-right: 2.5rem;">
                                <option value="low">🟢 Low Risk</option>
                                <option value="medium">🟡 Medium Risk</option>
                                <option value="high">🔴 High Risk</option>
                            </select>
                        </div>
                        <div class="group">
                            <label class="form-label">
                                PEP Verification
                            </label>
                            <select name="pep_verification" class="form-select w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white appearance-none text-gray-900"
                                    style="padding-left: 1.25rem; padding-right: 2.5rem;">
                                <option value="not_pep">✅ Not a PEP</option>
                                <option value="pep">⚠️ Politically Exposed Person</option>
                                <option value="pep_related">👥 Related to PEP</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Modern Action Buttons -->
                <div class="mt-8 pt-6 border-t border-gray-200">
                    <div class="flex justify-between items-center">
                        <div class="flex gap-3">
                            <a href="{{ route('client.family.create') }}" class="btn-secondary flex items-center">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M15 18l-6-6 6-6"/>
                                </svg>
                                Back
                            </a>
                        </div>
                        <div class="flex gap-3">
                            <button type="submit" class="btn-primary flex items-center">
                                Continue to Assets
                                <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M9 18l6-6-6-6"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    @push('scripts')
    <script>
        // Save form data to localStorage
        function saveFormData() {
            const formData = new FormData(document.querySelector('form'));
            const data = {};
            formData.forEach((value, key) => {
                data[key] = value;
            });
            localStorage.setItem('kycFormData', JSON.stringify(data));
        }

        // Restore form data from localStorage
        function restoreFormData() {
            const savedData = localStorage.getItem('kycFormData');
            if (savedData) {
                const data = JSON.parse(savedData);
                Object.keys(data).forEach(key => {
                    const input = document.querySelector(`[name="${key}"]`);
                    if (input) {
                        if (input.type === 'checkbox') {
                            input.checked = data[key] === 'on';
                        } else if (input.type === 'radio') {
                            const radio = document.querySelector(`[name="${key}"][value="${data[key]}"]`);
                            if (radio) radio.checked = true;
                        } else {
                            input.value = data[key];
                        }
                    }
                });
            }
        }

        // Clear form data from localStorage
        function clearFormData() {
            localStorage.removeItem('kycFormData');
        }

        // Auto-save form data on input change
        document.addEventListener('DOMContentLoaded', function() {
            // Restore form data on page load
            restoreFormData();

            // Save form data on any input change
            const form = document.querySelector('form');
            const inputs = form.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                input.addEventListener('input', saveFormData);
                input.addEventListener('change', saveFormData);
            });

            // Clear form data on successful submission
            form.addEventListener('submit', function(e) {
                clearFormData();
            });
        });

        let docCount = 2;
        
        document.getElementById('addDocument').addEventListener('click', function() {
            const container = document.getElementById('documentsContainer');
            const template = container.querySelector('.document-entry').cloneNode(true);
            
            // Clear the cloned values completely
            template.querySelectorAll('input, select').forEach(input => {
                if (input.type === 'file') {
                    input.value = '';
                    // Clear any file display if present
                    const fileDisplay = input.closest('.group').querySelector('.flex.items-center.space-x-4');
                    if (fileDisplay) {
                        fileDisplay.style.display = 'none';
                    }
                } else if (input.type === 'radio') {
                    input.checked = false;
                } else {
                    input.value = '';
                    // Reset select to first option
                    if (input.tagName === 'SELECT') {
                        input.selectedIndex = 0;
                    }
                }
            });
            
            // Update names and IDs
            const newDocIndex = docCount++;
            template.querySelectorAll('[name*="kyc_documents[0]"]').forEach(input => {
                input.name = input.name.replace('kyc_documents[0]', `kyc_documents[${newDocIndex}]`);
            });
            template.querySelectorAll('[for*="kyc_documents[0]"]').forEach(label => {
                label.setAttribute('for', label.getAttribute('for').replace('kyc_documents[0]', `kyc_documents[${newDocIndex}]`));
            });
            
            // Clear any existing file display
            const currentFileDiv = template.querySelector('.flex.items-center.space-x-4');
            if (currentFileDiv) {
                currentFileDiv.style.display = 'none';
            }
            
            // Show replace file label as upload file label
            const replaceLabel = template.querySelector('label.form-label.mt-4');
            if (replaceLabel) {
                replaceLabel.textContent = 'Upload File *';
                replaceLabel.classList.remove('mt-4');
            }
            
            // Update the help text
            const helpText = template.querySelector('p.text-xs.text-gray-500');
            if (helpText) {
                helpText.textContent = 'Accepted: PDF, JPG, PNG (Max 10MB)';
            }
            
            container.appendChild(template);
        });
    </script>
    @endpush
@endsection