@php
    $isReadOnly = in_array($kycProcess->status, ['completed', 'approved', 'rejected']);
@endphp

<div class="max-w-4xl mx-auto bg-white p-8">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">B - INDIVIDUALS</h1>
        <p class="text-sm text-gray-600 italic">
            @if($isReadOnly)
                (Form data displayed for review purposes - KYC Status: {{ ucfirst($kycProcess->status) }})
            @else
                (Please complete all fields, inserting N/A if not applicable. Documentation supporting all information must be provided)
            @endif
        </p>
    </div>

    <form wire:submit.prevent="submitForm" class="space-y-8">
        @if($isAdminAccess)
            <div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <svg class="h-5 w-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        <span class="text-sm font-medium text-blue-800">Admin Access - File Downloads Available</span>
                    </div>
                    <a href="{{ route('kyc.admin.download.all', ['kycProcess' => $kycProcess->uuid]) }}" 
                       class="px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        Download All Files
                    </a>
                </div>
            </div>
        @endif
        @if($isReadOnly)
            <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4 mb-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-yellow-800">Read-Only Mode</p>
                        <p class="text-sm text-yellow-700 mt-1">This form is displayed for review purposes only. No changes can be made.</p>
                    </div>
                </div>
            </div>
        @endif
        <!-- 1. General Information -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">1. General Information</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="full_name" class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
                    <input type="text" id="full_name" wire:model="formData.full_name" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.full_name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="tax_address" class="block text-sm font-medium text-gray-700 mb-2">Tax Address</label>
                    <input type="text" id="tax_address" wire:model="formData.tax_address" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.tax_address') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="main_address" class="block text-sm font-medium text-gray-700 mb-2">Main Address</label>
                    <textarea id="main_address" wire:model="formData.main_address" rows="3"
                              @if($isReadOnly) readonly @endif
                              class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"></textarea>
                    @error('formData.main_address') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="portuguese_resident_permit" class="block text-sm font-medium text-gray-700 mb-2">Portuguese Resident Permit No.</label>
                    <input type="text" id="portuguese_resident_permit" wire:model="formData.portuguese_resident_permit" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                           placeholder="If applicable">
                    @error('formData.portuguese_resident_permit') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="portuguese_resident_expiry" class="block text-sm font-medium text-gray-700 mb-2">Expiry Date (YYYY-MM-DD)</label>
                    <input type="date" id="portuguese_resident_expiry" wire:model="formData.portuguese_resident_expiry" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.portuguese_resident_expiry') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="tax_identification_number" class="block text-sm font-medium text-gray-700 mb-2">Tax Identification Number</label>
                    <input type="text" id="tax_identification_number" wire:model="formData.tax_identification_number" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.tax_identification_number') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="nationality" class="block text-sm font-medium text-gray-700 mb-2">Nationality/ies</label>
                    <input type="text" id="nationality" wire:model="formData.nationality" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.nationality') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="place_of_birth" class="block text-sm font-medium text-gray-700 mb-2">Place of Birth</label>
                    <input type="text" id="place_of_birth" wire:model="formData.place_of_birth" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.place_of_birth') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="birthdate" class="block text-sm font-medium text-gray-700 mb-2">Birthdate (YYYY-MM-DD)</label>
                    <input type="date" id="birthdate" wire:model="formData.birthdate" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.birthdate') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        <!-- 2. Ultimate Beneficiary -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">2. Ultimate Beneficiary</h2>
            <p class="text-sm text-gray-600 mb-4">Is the entity in 1. above the ultimate beneficiary of the services to be rendered by the Firm?</p>
            
            <div class="space-y-3">
                <label class="flex items-center">
                    <input type="radio" wire:model="formData.ultimate_beneficiary" value="yes" 
                           @if($isReadOnly) disabled @endif
                           class="mr-2">
                    <span>Yes</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" wire:model="formData.ultimate_beneficiary" value="no" 
                           @if($isReadOnly) disabled @endif
                           class="mr-2">
                    <span>No</span>
                </label>
            </div>
            
            @if($formData['ultimate_beneficiary'] === 'no')
            <div class="mt-4">
                <p class="text-sm text-gray-600 mb-2">If No, please complete (i) a similar copy of this form (Form B) for each individual, and/or (ii) Form A for each intermediary corporate entity.</p>
                <label for="ultimate_beneficiary_details" class="block text-sm font-medium text-gray-700 mb-2">Please specify:</label>
                <textarea id="ultimate_beneficiary_details" wire:model="formData.ultimate_beneficiary_details" rows="3"
                          @if($isReadOnly) readonly @endif
                          class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"></textarea>
                @error('formData.ultimate_beneficiary_details') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
            @endif
            @error('formData.ultimate_beneficiary') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
        </div>

        <!-- 3. Identification Document -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">3. Identification Document</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="id_document_type" class="block text-sm font-medium text-gray-700 mb-2">Type of Identification Document</label>
                    <select id="id_document_type" wire:model="formData.id_document_type" 
                            @if($isReadOnly) disabled @endif
                            class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                        <option value="">Select document type</option>
                        <option value="passport">Passport</option>
                        <option value="eu_citizen_card">EU Citizen Card</option>
                        <option value="national_id">National ID Card</option>
                        <option value="driving_license">Driving License</option>
                        <option value="other">Other</option>
                    </select>
                    @error('formData.id_document_type') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="id_document_number" class="block text-sm font-medium text-gray-700 mb-2">Identification Document Number</label>
                    <input type="text" id="id_document_number" wire:model="formData.id_document_number" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.id_document_number') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="id_document_issuance_date" class="block text-sm font-medium text-gray-700 mb-2">Issuance Date (YYYY-MM-DD)</label>
                    <input type="date" id="id_document_issuance_date" wire:model="formData.id_document_issuance_date" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.id_document_issuance_date') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="id_document_expiry_date" class="block text-sm font-medium text-gray-700 mb-2">Expiry Date (YYYY-MM-DD)</label>
                    <input type="date" id="id_document_expiry_date" wire:model="formData.id_document_expiry_date" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.id_document_expiry_date') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="id_document_file" class="block text-sm font-medium text-gray-700 mb-2">Identification Document</label>
                    <p class="text-xs text-gray-500 mb-2">Upload a copy of your ID document (PDF, DOC, or image)</p>
                    
                    <!-- Show existing file if available -->
                    @if(!empty($formData['id_document_file']) && !is_object($formData['id_document_file']) && is_string($formData['id_document_file']))
                        <div class="mb-3 p-3 bg-blue-50 border border-blue-200 rounded-md">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <svg class="h-5 w-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                    <span class="text-sm text-blue-700">Current file: {{ $formData['id_document_file'] }}</span>
                                </div>
                                @if($isAdminAccess)
                                    <a href="{{ route('kyc.admin.download.file', ['kycProcess' => $kycProcess->uuid, 'fileType' => 'id_document']) }}" 
                                       target="_blank"
                                       class="inline-flex items-center px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors duration-200">
                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                        </svg>
                                        Open
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endif
                    
                    <div class="file-upload-wrapper">
                        <input type="file" id="id_document_file" wire:model="idDocumentFile"
                               @if($isReadOnly) disabled @endif
                               accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                        <div class="file-upload-button @if($isReadOnly) opacity-50 cursor-not-allowed @endif">
                            <svg class="file-upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            <span>{{ (!empty($formData['id_document_file']) && !is_object($formData['id_document_file']) && is_string($formData['id_document_file'])) ? 'Change File' : 'Choose File' }}</span>
                        </div>
                    </div>
                    @error('idDocumentFile') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        <!-- 4. Profession/Occupation -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">4. Profession/Occupation</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="profession" class="block text-sm font-medium text-gray-700 mb-2">Profession</label>
                    <input type="text" id="profession" wire:model="formData.profession" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.profession') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="current_employer" class="block text-sm font-medium text-gray-700 mb-2">Current Employer</label>
                    <p class="text-xs text-gray-500 mb-2">If self-employed, identify trade name and place of business</p>
                    <input type="text" id="current_employer" wire:model="formData.current_employer" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.current_employer') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div class="md:col-span-2">
                    <label for="unemployed_details" class="block text-sm font-medium text-gray-700 mb-2">If Unemployed, Latest Occupation and Employer</label>
                    <textarea id="unemployed_details" wire:model="formData.unemployed_details" rows="3"
                              @if($isReadOnly) readonly @endif
                              class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                              placeholder="If applicable, provide details of your last occupation..."></textarea>
                    @error('formData.unemployed_details') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        <!-- 5. Politically Exposed Person -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">5. Politically Exposed Person</h2>
            <p class="text-sm text-gray-600 mb-4">A Politically Exposed Person is an individual who is or has over the past 12 months been entrusted with prominent public functions by a country, for example Head of State, member of sovereign bodies or executive bodies composing the central, regional or local administration, as well as member of management bodies of entities comprising the State indirect administration / judges, senior judicial members / members of international organizations and high-ranking military and security forces.</p>
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Are/were you a Politically Exposed Person?</label>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="radio" wire:model="formData.is_politically_exposed" value="yes" 
                                   @if($isReadOnly) disabled @endif
                                   class="mr-2">
                            <span>Yes</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" wire:model="formData.is_politically_exposed" value="no" 
                                   @if($isReadOnly) disabled @endif
                                   class="mr-2">
                            <span>No</span>
                        </label>
                    </div>
                    @error('formData.is_politically_exposed') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Are you a family member of a Politically Exposed Person?</label>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="radio" wire:model="formData.is_family_member_pep" value="yes" 
                                   @if($isReadOnly) disabled @endif
                                   class="mr-2">
                            <span>Yes</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" wire:model="formData.is_family_member_pep" value="no" 
                                   @if($isReadOnly) disabled @endif
                                   class="mr-2">
                            <span>No</span>
                        </label>
                    </div>
                    @error('formData.is_family_member_pep') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Are you a business partner/associate of a Politically Exposed Person?</label>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="radio" wire:model="formData.is_business_partner_pep" value="yes" 
                                   @if($isReadOnly) disabled @endif
                                   class="mr-2">
                            <span>Yes</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" wire:model="formData.is_business_partner_pep" value="no" 
                                   @if($isReadOnly) disabled @endif
                                   class="mr-2">
                            <span>No</span>
                        </label>
                    </div>
                    @error('formData.is_business_partner_pep') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="political_function_details" class="block text-sm font-medium text-gray-700 mb-2">Have you held a political or public function in the last 12 months that does not fall under the definition of a Politically Exposed Person?</label>
                    <textarea id="political_function_details" wire:model="formData.political_function_details" rows="3"
                              @if($isReadOnly) readonly @endif
                              class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                              placeholder="If so, please identify said function..."></textarea>
                    @error('formData.political_function_details') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        <!-- 5.1 Information on the Politically Exposed Person -->
        @if(($formData['is_politically_exposed'] ?? '') === 'yes' || ($formData['is_family_member_pep'] ?? '') === 'yes' || ($formData['is_business_partner_pep'] ?? '') === 'yes')
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">5.1 Information on the Politically Exposed Person (add additional page if needed)</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="pep_name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
                    <input type="text" id="pep_name" wire:model="formData.pep_name" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.pep_name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="pep_position" class="block text-sm font-medium text-gray-700 mb-2">Position/Office/Mandate</label>
                    <input type="text" id="pep_position" wire:model="formData.pep_position" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.pep_position') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="pep_country" class="block text-sm font-medium text-gray-700 mb-2">Country</label>
                    <input type="text" id="pep_country" wire:model="formData.pep_country" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.pep_country') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="pep_year" class="block text-sm font-medium text-gray-700 mb-2">Year</label>
                    <input type="text" id="pep_year" wire:model="formData.pep_year" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                           placeholder="YYYY">
                    @error('formData.pep_year') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                
                <div>
                    <label for="pep_relationship" class="block text-sm font-medium text-gray-700 mb-2">Relationship (when family member)</label>
                    <input type="text" id="pep_relationship" wire:model="formData.pep_relationship" 
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                           placeholder="If applicable">
                    @error('formData.pep_relationship') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>
        @endif

        <!-- 6. Nature of transaction(s) -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">6. Nature of transaction(s) in which you will require our services</h2>
            <p class="text-sm text-gray-600 mb-4">Select all that apply:</p>
            
            <div class="space-y-3">
                @php
                    $transactionOptions = [
                        'buying_selling_assets' => 'The buying and selling of immovable assets, commercial establishments or shareholdings',
                        'fund_management' => 'The management of funds, securities or other assets',
                        'bank_accounts' => 'The opening and management of bank accounts, savings accounts or share-dealing accounts',
                        'sports_professionals' => 'The acquisition and disposal of rights over sports professionals',
                        'financial_real_estate' => 'Other financial or real estate transactions',
                        'company_management' => 'The setting-up, incorporation, exploration or management of companies, corporations, other corporate entities or unincorporated legal arrangements',
                        'company_incorporation' => 'Incorporation or setting-up of companies, other corporate entities or unincorporated legal arrangements',
                        'registered_offices' => 'Supply of registered offices, commercial or postal addresses, or other services related to companies',
                        'director_functions' => 'Performance of director, secretary, partner or associate functions to a company or other corporate entity',
                        'trustee_functions' => 'Performance of trustee functions to an express trust or of similar functions in an unincorporated arrangement',
                        'nominee_shareholder' => 'Intervening as a nominee shareholder of a company not listed on a regulated market',
                        'representation_management' => 'Supply of other services relating to the representation, management and administration of companies',
                        'citizenship_residency' => 'Legal services connected to the application in Portugal for citizenship or residency rights',
                        'tax_assistance' => 'Tax assistance and consultancy services',
                        'other' => 'Other'
                    ];
                @endphp
                
                @foreach($transactionOptions as $value => $label)
                    <div class="flex items-center">
                        <input type="checkbox" wire:model="formData.transaction_nature" value="{{ $value }}" id="transaction_{{ $value }}"
                               @if($isReadOnly) disabled @endif
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="transaction_{{ $value }}" class="ml-2 text-sm text-gray-700">{{ $label }}</label>
                    </div>
                @endforeach
            </div>
            @error('formData.transaction_nature') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror

            <div class="mt-4">
                <label for="transaction_nature_other" class="block text-sm font-medium text-gray-700 mb-2">If Other, please specify:</label>
                <input type="text" id="transaction_nature_other" wire:model="formData.transaction_nature_other"
                       @if($isReadOnly) readonly @endif
                       class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                       placeholder="Please specify other transaction types...">
                @error('formData.transaction_nature_other') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>

        <!-- 7. Transaction Locations -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">7. State the countries / locations in which the above transaction(s) will be carried out</h2>
            <textarea id="transaction_locations" wire:model="formData.transaction_locations" rows="3"
                      @if($isReadOnly) readonly @endif
                      class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                      placeholder="Please specify the countries and locations..."></textarea>
            @error('formData.transaction_locations') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
        </div>

        <!-- 8. Source of Funds -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">8. Source of Funds</h2>
            <div class="space-y-4">
                <div>
                    <label for="source_of_funds" class="block text-sm font-medium text-gray-700 mb-2">State the source of the funds to be used in the transaction(s)</label>
                    <textarea id="source_of_funds" wire:model="formData.source_of_funds" rows="3"
                              @if($isReadOnly) readonly @endif
                              class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                              placeholder="Please describe the source of funds..."></textarea>
                    @error('formData.source_of_funds') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="source_of_funds_location" class="block text-sm font-medium text-gray-700 mb-2">Location of the relevant bank account from which such funds shall be paid</label>
                    <input type="text" id="source_of_funds_location" wire:model="formData.source_of_funds_location"
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                           placeholder="Bank name and location...">
                    @error('formData.source_of_funds_location') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="source_of_fees" class="block text-sm font-medium text-gray-700 mb-2">State the source of the funds used for payment of the Firm's fees</label>
                    <textarea id="source_of_fees" wire:model="formData.source_of_fees" rows="3"
                              @if($isReadOnly) readonly @endif
                              class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                              placeholder="Please describe the source of funds for fees..."></textarea>
                    @error('formData.source_of_fees') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="source_of_fees_location" class="block text-sm font-medium text-gray-700 mb-2">Location of the relevant bank account from which such funds shall be paid</label>
                    <input type="text" id="source_of_fees_location" wire:model="formData.source_of_fees_location"
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                           placeholder="Bank name and location...">
                    @error('formData.source_of_fees_location') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        <!-- 9. Declaration -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">9. Declaration</h2>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Declaration Type</label>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="radio" wire:model="formData.declaration_type" value="individual" 
                                   @if($isReadOnly) disabled @endif
                                   class="mr-2">
                            <span>Individual Declaration</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" wire:model="formData.declaration_type" value="representative" 
                                   @if($isReadOnly) disabled @endif
                                   class="mr-2">
                            <span>Client Representative Declaration</span>
                        </label>
                    </div>
                    @error('formData.declaration_type') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="declaration_name" class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
                    <input type="text" id="declaration_name" wire:model="formData.declaration_name"
                           @if($isReadOnly) readonly @endif
                           class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif">
                    @error('formData.declaration_name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                @if(($formData['declaration_type'] ?? '') === 'representative')
                    <div>
                        <label for="declaration_capacity" class="block text-sm font-medium text-gray-700 mb-2">Capacity</label>
                        <input type="text" id="declaration_capacity" wire:model="formData.declaration_capacity"
                               @if($isReadOnly) readonly @endif
                               class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                               placeholder="e.g., Power of Attorney, Director, etc.">
                        @error('formData.declaration_capacity') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                @endif

                <div>
                    <label for="declaration_signature" class="block text-sm font-medium text-gray-700 mb-2">Signature</label>
                    <textarea id="declaration_signature" wire:model="formData.declaration_signature" rows="3"
                              @if($isReadOnly) readonly @endif
                              class="w-full h-12 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none @if($isReadOnly) bg-gray-100 cursor-not-allowed @endif"
                              placeholder="Type your full name as a digital signature..."></textarea>
                    @error('formData.declaration_signature') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        <!-- 10. Required Documents -->
        <div class="bg-gray-50 p-6 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">10. Required Documents</h2>
            <div class="space-y-4">
                <div>
                    <label for="proof_of_address" class="block text-sm font-medium text-gray-700 mb-2">Proof of Address</label>
                    <p class="text-xs text-gray-500 mb-2">Utility bill, bank statement, or lease agreement (PDF, DOC, or image)</p>
                    
                    <!-- Show existing file if available -->
                    @if(!empty($formData['proof_of_address']) && !is_object($formData['proof_of_address']) && is_string($formData['proof_of_address']))
                        <div class="mb-3 p-3 bg-blue-50 border border-blue-200 rounded-md">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <svg class="h-5 w-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                    <span class="text-sm text-blue-700">Current file: {{ $formData['proof_of_address'] }}</span>
                                </div>
                                @if($isAdminAccess)
                                    <a href="{{ route('kyc.admin.download.file', ['kycProcess' => $kycProcess->uuid, 'fileType' => 'proof_of_address']) }}" 
                                       target="_blank"
                                       class="inline-flex items-center px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors duration-200">
                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                        </svg>
                                        Open
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endif
                    
                    <div class="file-upload-wrapper">
                        <input type="file" id="proof_of_address" wire:model="proofOfAddressFile"
                               @if($isReadOnly) disabled @endif
                               accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                        <div class="file-upload-button @if($isReadOnly) opacity-50 cursor-not-allowed @endif">
                            <svg class="file-upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            <span>{{ (!empty($formData['proof_of_address']) && !is_object($formData['proof_of_address']) && is_string($formData['proof_of_address'])) ? 'Change File' : 'Choose File' }}</span>
                        </div>
                    </div>
                    @error('proofOfAddressFile') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="profession_documents" class="block text-sm font-medium text-gray-700 mb-2">Profession/Occupation Documents</label>
                    <p class="text-xs text-gray-500 mb-2">Employment contract, business registration, or other relevant documents (PDF, DOC, or image)</p>
                    
                    <!-- Show existing files if available -->
                    @if(!empty($formData['profession_documents']) && is_array($formData['profession_documents']) && count($formData['profession_documents']) > 0)
                        <div class="mb-3 p-3 bg-blue-50 border border-blue-200 rounded-md">
                            <div class="text-sm text-blue-700 mb-2">Current files:</div>
                            @foreach($formData['profession_documents'] as $index => $file)
                                @if(is_string($file))
                                    <div class="flex items-center justify-between text-xs text-blue-600 mb-1">
                                        <div class="flex items-center">
                                            <svg class="h-4 w-4 text-blue-500 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                            </svg>
                                            <span>{{ $file }}</span>
                                        </div>
                                        @if($isAdminAccess)
                                            <a href="{{ route('kyc.admin.download.file', ['kycProcess' => $kycProcess->uuid, 'fileType' => 'profession_documents', 'index' => $index]) }}" 
                                               target="_blank"
                                               class="inline-flex items-center px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors duration-200">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                                </svg>
                                                Open
                                            </a>
                                        @endif
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @endif
                    
                    <div class="file-upload-wrapper">
                        <input type="file" id="profession_documents" wire:model="professionDocumentsFiles" multiple
                               @if($isReadOnly) disabled @endif
                               accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                        <div class="file-upload-button @if($isReadOnly) opacity-50 cursor-not-allowed @endif">
                            <svg class="file-upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            <span>{{ (!empty($formData['profession_documents']) && is_array($formData['profession_documents']) && count($formData['profession_documents']) > 0) ? 'Change Files' : 'Choose Files' }}</span>
                        </div>
                    </div>
                    @error('professionDocumentsFiles') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                @if(($formData['declaration_type'] ?? '') === 'representative')
                    <div>
                        <label for="power_of_attorney" class="block text-sm font-medium text-gray-700 mb-2">Power of Attorney or Equivalent Document</label>
                        <p class="text-xs text-gray-500 mb-2">Document granting sufficient powers to complete and sign this form on behalf of the Client (PDF, DOC, or image)</p>
                        
                        <!-- Show existing file if available -->
                        @if(!empty($formData['power_of_attorney']) && !is_object($formData['power_of_attorney']) && is_string($formData['power_of_attorney']))
                            <div class="mb-3 p-3 bg-blue-50 border border-blue-200 rounded-md">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <svg class="h-5 w-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                        </svg>
                                        <span class="text-sm text-blue-700">Current file: {{ $formData['power_of_attorney'] }}</span>
                                    </div>
                                    @if($isAdminAccess)
                                        <a href="{{ route('kyc.admin.download.file', ['kycProcess' => $kycProcess->uuid, 'fileType' => 'power_of_attorney']) }}" 
                                           target="_blank"
                                           class="inline-flex items-center px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors duration-200">
                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                            </svg>
                                            Open
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endif
                        
                        <div class="file-upload-wrapper">
                            <input type="file" id="power_of_attorney" wire:model="powerOfAttorneyFile"
                                   @if($isReadOnly) disabled @endif
                                   accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                            <div class="file-upload-button @if($isReadOnly) opacity-50 cursor-not-allowed @endif">
                                <svg class="file-upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                                </svg>
                                <span>{{ (!empty($formData['power_of_attorney']) && !is_object($formData['power_of_attorney']) && is_string($formData['power_of_attorney'])) ? 'Change File' : 'Choose File' }}</span>
                            </div>
                        </div>
                        @error('powerOfAttorneyFile') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                @endif
            </div>
        </div>

        <!-- Submit Button -->
        @if(!$isReadOnly)
            <div class="text-center">
                <button type="submit" 
                        class="bg-green-600 text-white px-12 py-4 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 text-lg font-semibold shadow-lg transform transition-all duration-200 hover:scale-105">
                    <svg class="inline-block h-6 w-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    Submit KYC Form
                </button>
                <p class="text-sm text-gray-500 mt-3">
                    By clicking submit, you confirm that all information provided is accurate and complete.
                </p>
            </div>
        @else
            <div class="text-center">
                <div class="bg-gray-100 text-gray-600 px-8 py-3 rounded-md text-lg font-medium">
                    📋 Form Data - Read Only
                </div>
            </div>
        @endif
    </form>

    <!-- Legal Information -->
    <div class="mt-8 p-6 bg-blue-50 rounded-lg">
        <h3 class="text-lg font-semibold text-blue-900 mb-4">Legal Information</h3>
        <p class="text-sm text-blue-800 mb-4">
            <strong>Note:</strong> The ultimate beneficiary is the entity, owner and/or controller of the entity who will benefit from the services rendered by the Firm, as defined by article 30 of Portuguese law No. 83/2017, of August 10.
        </p>
        <p class="text-sm text-blue-800">
            <strong>Documentation Required:</strong> Please provide copy of document(s) supporting all information stated in this form.
        </p>
    </div>
</div>