@extends('layouts.portal')

@section('title', 'Testator Details - Will')
@section('page_title', 'Testator Details')
@section('page_subtitle', 'for ' . $client->full_name)

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

@section('content')
    <!-- Modern Header with Agent Color Scheme -->
    <div class="bg-gradient-to-r from-[#772B10] via-[#8B3D15] to-[#9F4F1A] border-b border-[#772B10] p-8 relative overflow-hidden sticky top-0 z-50">
        <!-- Decorative Bubbles -->
        <div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full -mr-32 -mt-32 opacity-10"></div>

        <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-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-xl flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-semibold text-white tracking-wide" style="font-family: 'Inter', sans-serif;">Testator Details</h1>
                        <p class="text-white/80 mt-1" style="font-family: 'Inter', sans-serif;">{{ $will->will_type ? ucfirst($will->will_type) : 'Will' }} - Enter Testator Information</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="text-right">
                        <p class="text-sm text-white/70" style="font-family: 'Inter', sans-serif;">Progress</p>
                        <p class="text-lg font-bold text-white" style="font-family: 'Inter', sans-serif;">Step 2 of 8</p>
                    </div>
                    <div class="w-32 bg-[#772B10]/50 h-2 rounded-full overflow-hidden">
                        <div class="bg-white h-2" style="width: 25%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Breadcrumb with Top Space -->
    <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>
            <a href="{{ route('agent.wills.type', $client) }}" class="hover:text-gray-900">Select Will Type</a>
            <i class="fas fa-chevron-right mx-2 text-xs"></i>
            <span class="text-gray-900">Testator Details</span>
        </div>
    </div>

   

    <div class="max-w-6xl mx-auto">
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 relative overflow-hidden">
            <!-- Decorative Bubbles -->
            <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-[#772B10]/20 to-[#8B3D15]/20 rounded-full -mr-16 -mt-16 opacity-30"></div>
            <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-br from-[#772B10]/10 to-[#8B3D15]/10 rounded-full -ml-12 -mb-12 opacity-20"></div>

            <div class="relative z-10">
                <div class="mb-8">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-user text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold text-gray-700" style="font-family: 'Inter', sans-serif;">Testator Details</h3>
                            <p class="text-gray-600 text-lg" style="font-family: 'Inter', sans-serif;">Person who is writing the will (Primary Testator)</p>
                        </div>
                    </div>

                    <form action="{{ route('agent.wills.testator.store', $will->id) }}" method="POST" class="space-y-6">
                        @csrf
                        <input type="hidden" name="will_id" value="{{ $will->id }}">
                        
                        <!-- Primary Testator Information -->
                        <div class="bg-white rounded-xl p-6 border-2 border-gray-100 shadow-md">
                            <div class="flex items-center mb-6">
                                <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-[#772B10] font-bold mr-3 border-2 border-[#772B10]/30">
                                    1
                                </div>
                                <h3 class="text-md font-semibold text-gray-800">Primary Testator (Will Writer)</h3>
                            </div>

                            <!-- Primary Testator Selection -->
                            <div class="mb-6 p-6 bg-gradient-to-r from-[#772B10]/10 to-[#8B3D15]/10 rounded-xl border-2 border-[#772B10]/30 shadow-lg">
                                <div class="flex items-center mb-4">
                                    <div class="w-10 h-10 bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-users text-white"></i>
                                    </div>
                                    <div>
                                        <label class="block text-base font-bold text-gray-800">Select Primary Testator</label>
                                        <p class="text-sm text-gray-600">Choose agent from dropdown, then manually fill details below</p>
                                    </div>
                                </div>
                                <div class="relative">
                                    <select id="primaryTestatorSelect" class="w-full pl-12 pr-4 py-4 border-2 border-[#772B10]/30 rounded-xl focus:border-[#772B10] focus:ring-4 focus:ring-[#772B10]/10 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-[#772B10]/50 text-base font-medium shadow-sm h-14">
                                        <option value="">👤 Choose Primary Testator (Optional)</option>
                                        @if($primaryTestatorOptions && $primaryTestatorOptions->count() > 0)
                                            @foreach($primaryTestatorOptions as $agent)
                                                <option value="{{ $agent->id }}" 
                                                        data-name="{{ $agent->name }}"
                                                        data-email="{{ $agent->email }}"
                                                        data-phone="{{ $agent->phone ?? '' }}"
                                                        data-ic="{{ $agent->ic_number ?? '' }}"
                                                        data-dob="{{ $agent->date_of_birth ? (is_string($agent->date_of_birth) ? $agent->date_of_birth : $agent->date_of_birth->format('Y-m-d')) : '' }}"
                                                        data-address="{{ $agent->address ?? '' }}"
                                                        data-role="{{ $agent->role }}">
                                                    {{ $agent->name }} - {{ $agent->role === 'agent' ? 'Agent' : ucfirst($agent->role) }}
                                                    @if($agent->id === Auth::id())
                                                        (You - Logged In)
                                                    @endif
                                                </option>
                                            @endforeach
                                        @else
                                            <!-- Debug: Show logged-in user as fallback -->
                                            @if(Auth::user() && Auth::user()->role === 'agent')
                                                <option value="{{ Auth::id() }}" 
                                                        data-name="{{ Auth::user()->name }}"
                                                        data-email="{{ Auth::user()->email }}"
                                                        data-phone="{{ Auth::user()->phone ?? '' }}"
                                                        data-ic="{{ Auth::user()->ic_number ?? '' }}"
                                                        data-dob="{{ Auth::user()->date_of_birth ? (is_string(Auth::user()->date_of_birth) ? Auth::user()->date_of_birth : Auth::user()->date_of_birth->format('Y-m-d')) : '' }}"
                                                        data-address="{{ Auth::user()->address ?? '' }}"
                                                        data-role="{{ Auth::user()->role }}">
                                                    {{ Auth::user()->name }} - Agent (You - Logged In)
                                                </option>
                                            @else
                                                <option value="" disabled>No agents available</option>
                                            @endif
                                        @endif
                                    </select>
                                    <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#772B10]">
                                        <i class="fas fa-users text-lg"></i>
                                    </div>
                                </div>
                                <div class="mt-3 flex items-center text-xs text-gray-500">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    <span>Select agent from dropdown, then manually enter their details in the form fields.</span>
                                </div>
                            </div>
                        
                        @php
    $testatorDetails = [];
    $secondaryDetails = [];
    $executorDetails = [];
    $guardianDetails = [];
    
    // Debug: Check raw data
    $rawTestatorDetails = $will->testator_details;
    
    if ($will->testator_details !== null) {
        // Handle both array (from Laravel casts) and JSON string
        $decodedData = is_array($will->testator_details) 
            ? $will->testator_details 
            : (json_decode($will->testator_details, true) ?? []);
        $testatorDetails = $decodedData['primary'] ?? [];
        $secondaryDetails = $decodedData['secondary'] ?? [];
        $executorDetails = $decodedData['executor'] ?? [];
        $guardianDetails = $decodedData['guardian'] ?? [];
    }
@endphp

<!-- Debug Info - Remove after fixing -->
<!-- <div class="bg-yellow-100 border-2 border-yellow-400 rounded-lg p-4 mb-6">
    <h4 class="font-bold text-yellow-800 mb-2">DEBUG INFO (Will be removed after fix)</h4>
    <p class="text-sm text-yellow-800">Raw testator_details type: {{ gettype($rawTestatorDetails) }}</p>
    <p class="text-sm text-yellow-800">Is null: {{ $rawTestatorDetails === null ? 'YES' : 'NO' }}</p>
    <p class="text-sm text-yellow-800">Primary name: {{ $testatorDetails['full_name'] ?? 'NOT FOUND' }}</p>
    <pre class="text-xs bg-white p-2 mt-2 rounded overflow-auto max-h-40">{{ print_r($rawTestatorDetails, true) }}</pre>
</div> -->

                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-user text-blue-500 mr-2"></i>Full Name <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" id="testator_primary_full_name" name="testator_primary_full_name" required 
                                           value="{{ $testatorDetails['full_name'] ?? '' }}"
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter full name" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-user absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-id-card text-blue-500 mr-2"></i>NRIC / Passport <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" id="testator_primary_ic" name="testator_primary_ic" required 
                                           value="{{ $testatorDetails['ic'] ?? '' }}"
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter NRIC or Passport number" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-id-card absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    <!-- Debug: IC field value should be: {{ $testatorDetails['ic'] ?? 'NO_DB_DATA' }} -->
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-globe text-blue-500 mr-2"></i>Nationality
                                </label>
                                <div class="relative">
                                    <input type="text" id="testator_primary_nationality" name="testator_primary_nationality" 
                                           value="{{ $testatorDetails['nationality'] ?? '' }}"
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter nationality" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-globe absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-heart text-blue-500 mr-2"></i>Relationship
                                </label>
                                <div class="relative">
                                    <input type="text" id="testator_primary_relationship" name="testator_primary_relationship" 
                                           value="{{ $testatorDetails['relationship'] ?? '' }}"
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter relationship" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-heart absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-calendar text-blue-500 mr-2"></i>DOB (Date of Birth)
                                </label>
                                <div class="relative">
                                    <x-date-picker id="testator_primary_dob" name="testator_primary_dob" value="{{ $testatorDetails['dob'] ?? '' }}" />
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-envelope text-blue-500 mr-2"></i>Email <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="email" id="testator_primary_email" name="testator_primary_email" required 
                                           value="{{ $testatorDetails['email'] ?? '' }}"
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter email address" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-envelope absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-phone text-blue-500 mr-2"></i>Tel No. <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="tel" id="testator_primary_phone" name="testator_primary_phone" required 
                                           value="{{ $testatorDetails['phone'] ?? '' }}"
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter phone number" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-phone absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="space-y-4 md:col-span-2">
                            <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i>Address
                            </label>
                            <div class="bg-gray-50 p-4 rounded-xl border-2 border-gray-200">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <div class="md:col-span-2">
                                        <input type="text" name="testator_address_line_1" id="testator_address_line_1" value="{{ $testatorDetails['address_line_1'] ?? '' }}" placeholder="Address Line 1"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div class="md:col-span-2">
                                        <input type="text" name="testator_address_line_2" id="testator_address_line_2" value="{{ $testatorDetails['address_line_2'] ?? '' }}" placeholder="Address Line 2 (Optional)"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="testator_city" id="testator_city" value="{{ $testatorDetails['city'] ?? '' }}" placeholder="City"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="testator_state" id="testator_state" value="{{ $testatorDetails['state'] ?? '' }}" placeholder="State"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="testator_postal_code" id="testator_postal_code" value="{{ $testatorDetails['postal_code'] ?? '' }}" placeholder="Postal/Pin Code"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <!-- Country field hidden -->
                                        <input type="hidden" name="testator_country" id="testator_country" value="{{ $testatorDetails['country'] ?? 'Malaysia' }}">
                                    </div>
                                </div>
                                <textarea id="testator_primary_address" name="testator_primary_address" rows="2" readonly
                                          class="w-full mt-3 px-3 py-2 border-2 border-gray-200 rounded-lg bg-gray-100 text-gray-600 text-sm resize-none"
                                          placeholder="Complete address will appear here..." style="font-family: 'Inter', sans-serif;">{{ $testatorDetails['address'] ?? '' }}</textarea>
                            </div>
                        </div>
                        
                        <div class="space-y-4 md:col-span-2">
                            <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                <i class="fas fa-file-alt text-blue-500 mr-2"></i>Special Instructions / Notes
                            </label>
                            <div class="relative">
                                @php
                                    // Extract special instructions text from JSON if it exists
                                    $specialInstructions = '';
                                    if ($will->instructions) {
                                        $instrData = is_array($will->instructions) 
                                            ? $will->instructions 
                                            : json_decode($will->instructions, true);
                                        if (is_array($instrData) && isset($instrData['special_instructions'])) {
                                            $specialInstructions = $instrData['special_instructions'];
                                        }
                                    }
                                @endphp
                                <textarea id="instructions" name="instructions" rows="4"
                                          class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-blue-100 focus:border-blue-500 text-gray-900 bg-white resize-none text-base"
                                          placeholder="Enter any special instructions or wishes for your will" style="font-family: 'Inter', sans-serif;">{{ old('instructions', $specialInstructions) }}</textarea>
                                <i class="fas fa-file-alt absolute left-4 top-3 text-gray-400 text-lg"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 2️⃣ Secondary Testator -->
                    <div class="bg-white rounded-xl p-6 border-2 border-gray-100 shadow-md">
                        <div class="flex items-center mb-6">
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-[#772B10] font-bold mr-3 border-2 border-[#772B10]/30">2</div>
                            <h3 class="text-md font-semibold text-gray-800">Secondary Testator</h3>
                        </div>

                        <!-- Secondary Testator Selection -->
                        <div class="mb-6 p-6 bg-gradient-to-r from-[#772B10]/10 to-[#8B3D15]/10 rounded-xl border-2 border-[#772B10]/30 shadow-lg">
                            <div class="flex items-center mb-4">
                                <div class="w-10 h-10 bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-users text-white"></i>
                                </div>
                                <div>
                                    <label class="block text-base font-bold text-gray-800">Select Secondary Testator</label>
                                    <p class="text-sm text-gray-600">Choose agent from dropdown, then manually fill details below</p>
                                </div>
                            </div>
                            <div class="relative">
                                <select id="secondaryTestatorSelect" class="w-full pl-12 pr-4 py-4 border-2 border-[#772B10]/30 rounded-xl focus:border-[#772B10] focus:ring-4 focus:ring-[#772B10]/10 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-[#772B10]/50 text-base font-medium shadow-sm h-14">
                                    <option value="">👤 Choose Secondary Testator (Optional)</option>
                                    @if($secondaryTestatorOptions && $secondaryTestatorOptions->count() > 0)
                                        @foreach($secondaryTestatorOptions as $agent)
                                            <option value="{{ $agent->id }}" 
                                                    data-name="{{ $agent->name }}"
                                                    data-email="{{ $agent->email }}"
                                                    data-phone="{{ $agent->phone ?? '' }}"
                                                    data-ic="{{ $agent->ic_number ?? '' }}"
                                                    data-dob="{{ $agent->date_of_birth ? (is_string($agent->date_of_birth) ? $agent->date_of_birth : $agent->date_of_birth->format('Y-m-d')) : '' }}"
                                                    data-address="{{ $agent->address ?? '' }}"
                                                    data-role="{{ $agent->role }}">
                                                {{ $agent->name }} - {{ $agent->role === 'agent' ? 'Agent' : ucfirst($agent->role) }}
                                                @if($agent->id === Auth::id())
                                                    (You - Logged In)
                                                @endif
                                            </option>
                                        @endforeach
                                    @else
                                        <!-- Debug: Show logged-in user as fallback -->
                                        @if(Auth::user() && Auth::user()->role === 'agent')
                                            <option value="{{ Auth::id() }}" 
                                                    data-name="{{ Auth::user()->name }}"
                                                    data-email="{{ Auth::user()->email }}"
                                                    data-phone="{{ Auth::user()->phone ?? '' }}"
                                                    data-ic="{{ Auth::user()->ic_number ?? '' }}"
                                                    data-dob="{{ Auth::user()->date_of_birth ? (is_string(Auth::user()->date_of_birth) ? Auth::user()->date_of_birth : Auth::user()->date_of_birth->format('Y-m-d')) : '' }}"
                                                    data-address="{{ Auth::user()->address ?? '' }}"
                                                    data-role="{{ Auth::user()->role }}">
                                                {{ Auth::user()->name }} - Agent (You - Logged In)
                                            </option>
                                        @else
                                            <option value="" disabled>No agents available</option>
                                        @endif
                                    @endif
                                </select>
                                <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#772B10]">
                                    <i class="fas fa-users text-lg"></i>
                                </div>
                            </div>
                            <div class="mt-3 flex items-center text-xs text-gray-500">
                                <i class="fas fa-info-circle mr-1"></i>
                                <span>Select agent from dropdown, then manually enter their details in the form fields.</span>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-users text-purple-500 mr-2"></i>Full Name
                                </label>
                                <div class="relative">
                                    <input type="text" id="testator_secondary_full_name" name="testator_secondary_full_name" 
                                           value="{{ $secondaryDetails['full_name'] ?? '' }}"
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter full name" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-users absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-id-card text-purple-500 mr-2"></i>NRIC / Passport
                                </label>
                                <div class="relative">
                                    <input type="text" id="testator_secondary_ic" name="testator_secondary_ic" 
                                           value="{{ $secondaryDetails['ic'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter NRIC or Passport number" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-id-card absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-globe text-purple-500 mr-2"></i>Nationality
                                </label>
                                <div class="relative">
                                    <input type="text" id="testator_secondary_nationality" name="testator_secondary_nationality" 
                                           value="{{ $secondaryDetails['nationality'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter nationality" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-globe absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-heart text-purple-500 mr-2"></i>Relationship
                                </label>
                                <div class="relative">
                                    <input type="text" id="testator_secondary_relationship" name="testator_secondary_relationship" 
                                           value="{{ $secondaryDetails['relationship'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter relationship" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-heart absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-calendar text-purple-500 mr-2"></i>DOB (Date of Birth)
                                </label>
                                <div class="relative">
                                    <x-date-picker id="testator_secondary_dob" name="testator_secondary_dob" value="{{ $secondaryDetails['dob'] ?? '' }}" />
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-envelope text-purple-500 mr-2"></i>Email
                                </label>
                                <div class="relative">
                                    <input type="email" id="testator_secondary_email" name="testator_secondary_email" 
                                           value="{{ $secondaryDetails['email'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter email address" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-envelope absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-phone text-purple-500 mr-2"></i>Tel No.
                                </label>
                                <div class="relative">
                                    <input type="tel" id="testator_secondary_phone" name="testator_secondary_phone" 
                                           value="{{ $secondaryDetails['phone'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter phone number" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-phone absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="space-y-4 md:col-span-2">
                            <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                <i class="fas fa-map-marker-alt text-purple-500 mr-2"></i>Address
                            </label>
                            <div class="bg-gray-50 p-4 rounded-xl border-2 border-gray-200">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <div class="md:col-span-2">
                                        <input type="text" name="testator_secondary_address_line_1" id="testator_secondary_address_line_1" value="{{ $secondaryDetails['address_line_1'] ?? '' }}" placeholder="Address Line 1"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-100 focus:border-purple-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div class="md:col-span-2">
                                        <input type="text" name="testator_secondary_address_line_2" id="testator_secondary_address_line_2" value="{{ $secondaryDetails['address_line_2'] ?? '' }}" placeholder="Address Line 2 (Optional)"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-100 focus:border-purple-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="testator_secondary_city" id="testator_secondary_city" value="{{ $secondaryDetails['city'] ?? '' }}" placeholder="City"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-100 focus:border-purple-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="testator_secondary_state" id="testator_secondary_state" value="{{ $secondaryDetails['state'] ?? '' }}" placeholder="State"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-100 focus:border-purple-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="testator_secondary_postal_code" id="testator_secondary_postal_code" value="{{ $secondaryDetails['postal_code'] ?? '' }}" placeholder="Postal/Pin Code"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-100 focus:border-purple-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <!-- Country field hidden -->
                                        <input type="hidden" name="testator_secondary_country" id="testator_secondary_country" value="{{ $secondaryDetails['country'] ?? 'Malaysia' }}">
                                    </div>
                                </div>
                                <textarea id="testator_secondary_address" name="testator_secondary_address" rows="2" readonly
                                          class="w-full mt-3 px-3 py-2 border-2 border-gray-200 rounded-lg bg-gray-100 text-gray-600 text-sm resize-none"
                                          placeholder="Complete address will appear here..." style="font-family: 'Inter', sans-serif;">{{ $secondaryDetails['address'] ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Lawyer Assignment -->
                    <!-- <div class="bg-white rounded-xl p-6 border-2 border-gray-100 shadow-md">
                        <div class="flex items-center mb-6">
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-[#772B10] font-bold mr-3 border-2 border-[#772B10]/30">L</div>
                            <div>
                                <h3 class="text-md font-semibold text-gray-800">Assigned Lawyer</h3>
                                <p class="text-sm text-gray-600 mt-1">Lawyer handling this will (can be changed)</p>
                            </div>
                        </div>

                        <div class="mb-6 p-6 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border-2 border-green-200 shadow-lg">
                            <div class="flex items-center mb-4">
                                <div class="w-10 h-10 bg-gradient-to-br from-green-600 to-emerald-600 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-balance-scale text-white"></i>
                                </div>
                                <div>
                                    <label class="block text-base font-bold text-gray-800">Change Assigned Lawyer</label>
                                    <p class="text-sm text-gray-600">Only shows logged-in lawyer when accessing from lawyer account</p>
                                </div>
                            </div>
                            <div class="relative">
                                <select id="lawyerSelect" onchange="updateLawyerAssignment(this.value)" class="w-full pl-12 pr-4 py-4 border-2 border-green-300 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-green-400 text-base font-medium shadow-sm h-14">
                                    <option value="">⚖️ Choose Lawyer (Optional)</option>
                                    @if($client->assignedLawyer)
                                        <option value="{{ $client->assignedLawyer->id }}" selected>
                                            {{ $client->assignedLawyer->name }} - Current Lawyer
                                        </option>
                                    @endif
                                    @php
                                        // Only show logged-in lawyer if they are a lawyer
                                        if(auth()->user()->role === 'lawyer') {
                                            $lawyerOptions = \App\Models\User::getLawyerSelectionOptions(auth()->id());
                                        } else {
                                            $lawyerOptions = collect();
                                        }
                                    @endphp
                                    @if($lawyerOptions && $lawyerOptions->count() > 0)
                                        @foreach($lawyerOptions as $lawyer)
                                            <option value="{{ $lawyer->id }}" 
                                                    data-name="{{ $lawyer->name }}"
                                                    data-email="{{ $lawyer->email }}"
                                                    data-firm="{{ $lawyer->lawyer_firm_name ?? '' }}">
                                                {{ $lawyer->name }} - {{ $lawyer->lawyer_firm_name ?? 'Independent' }} (You - Logged In)
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                                <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-green-600">
                                    <i class="fas fa-balance-scale text-lg"></i>
                                </div>
                            </div>
                            <div class="mt-3 flex items-center text-xs text-gray-500">
                                <i class="fas fa-info-circle mr-1"></i>
                                <span>Only logged-in lawyer appears when accessing from lawyer account.</span>
                            </div>
                        </div>
                        
                        @if($client->assignedLawyer)
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <div class="flex items-center">
                                <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                                <div>
                                    <p class="text-sm text-blue-800">
                                        <strong>Current Lawyer:</strong> {{ $client->assignedLawyer->name }}
                                        @if($client->assignedLawyer->lawyer_firm_name)
                                            - {{ $client->assignedLawyer->lawyer_firm_name }}
                                        @endif
                                    </p>
                                    <p class="text-xs text-blue-600 mt-1">You can change the lawyer using the dropdown above</p>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div> -->

                    <!-- 3️⃣ Primary Executor -->
                    <div class="bg-white rounded-xl p-6 border-2 border-gray-100 shadow-md">
                        <div class="flex items-center mb-6">
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-[#772B10] font-bold mr-3 border-2 border-[#772B10]/30">3</div>
                            <div>
                                <h3 class="text-md font-semibold text-gray-800">Primary Executor</h3>
                                <p class="text-sm text-gray-600 mt-1">Person who will execute/manage will after death</p>
                            </div>
                        </div>

                        <!-- Family Member Selection -->
                        <div class="mb-6 p-6 bg-gradient-to-r from-[#772B10]/10 to-[#8B3D15]/10 rounded-xl border-2 border-[#772B10]/30 shadow-lg">
                            <div class="flex items-center mb-4">
                                <div class="w-10 h-10 bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-user-tie text-white"></i>
                                </div>
                                <div>
                                    <label class="block text-base font-bold text-gray-800">Quick Fill - Select Family Member</label>
                                    <p class="text-sm text-gray-600">Choose a family member to automatically fill their details below</p>
                                </div>
                            </div>
                            <div class="relative">
                                <select id="executorFamilyMemberSelect" onchange="fillExecutorFromFamily(this.value)" class="w-full pl-12 pr-4 py-4 border-2 border-[#772B10]/30 rounded-xl focus:border-[#772B10] focus:ring-4 focus:ring-[#772B10]/10 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-[#772B10]/50 text-base font-medium shadow-sm h-14">
                                    <option value="">👤 Choose Family Member (Optional)</option>
                                    <!-- <option value="self">{{ $client->full_name }} (Self)</option> -->
                                    @if($client->familyMembers && $client->familyMembers->count() > 0)
                                        @foreach($client->familyMembers as $member)
                                            <option value="{{ $member->id }}">{{ $member->full_name }} - {{ $member->relationship }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#772B10]">
                                    <i class="fas fa-users text-lg"></i>
                                </div>
                            </div>
                            <div class="mt-3 flex items-center text-xs text-gray-500">
                                <i class="fas fa-info-circle mr-1"></i>
                                <span>Family members from your profile will appear here. You can still enter details manually.</span>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-user-tie text-red-500 mr-2"></i>Full Name <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" id="executor_primary_full_name" name="executor_primary_full_name" required 
                                           value="{{ $executorDetails['full_name'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter executor's full name" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-user-tie absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-id-card text-red-500 mr-2"></i>NRIC / Passport <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" id="executor_primary_ic" name="executor_primary_ic" required 
                                           value="{{ $executorDetails['ic'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter NRIC or Passport number" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-id-card absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-globe text-red-500 mr-2"></i>Nationality
                                </label>
                                <div class="relative">
                                    <input type="text" id="executor_primary_nationality" name="executor_primary_nationality" 
                                           value="{{ $executorDetails['nationality'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter nationality" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-globe absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-heart text-red-500 mr-2"></i>Relationship
                                </label>
                                <div class="relative">
                                    <input type="text" id="executor_primary_relationship" name="executor_primary_relationship" 
                                           value="{{ $executorDetails['relationship'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter relationship" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-heart absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-calendar text-red-500 mr-2"></i>DOB
                                </label>
                                <div class="relative">
                                    <x-date-picker id="executor_primary_dob" name="executor_primary_dob" value="{{ $executorDetails['dob'] ?? '' }}" />
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-envelope text-red-500 mr-2"></i>Email
                                </label>
                                <div class="relative">
                                    <input type="email" id="executor_primary_email" name="executor_primary_email" 
                                           value="{{ $executorDetails['email'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter email address" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-envelope absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-phone text-red-500 mr-2"></i>Tel No.
                                </label>
                                <div class="relative">
                                    <input type="tel" id="executor_primary_phone" name="executor_primary_phone" 
                                           value="{{ $executorDetails['phone'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter phone number" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-phone absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="space-y-4 md:col-span-2">
                            <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                <i class="fas fa-map-marker-alt text-red-500 mr-2"></i>Address <span class="text-red-500">*</span>
                            </label>
                            <div class="bg-gray-50 p-4 rounded-xl border-2 border-gray-200">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <div class="md:col-span-2">
                                        <input type="text" name="executor_address_line_1" id="executor_address_line_1" value="{{ $executorDetails['address_line_1'] ?? '' }}" placeholder="Address Line 1"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-red-100 focus:border-red-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div class="md:col-span-2">
                                        <input type="text" name="executor_address_line_2" id="executor_address_line_2" value="{{ $executorDetails['address_line_2'] ?? '' }}" placeholder="Address Line 2 (Optional)"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-red-100 focus:border-red-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="executor_city" id="executor_city" value="{{ $executorDetails['city'] ?? '' }}" placeholder="City"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-red-100 focus:border-red-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="executor_state" id="executor_state" value="{{ $executorDetails['state'] ?? '' }}" placeholder="State"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-red-100 focus:border-red-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="executor_postal_code" id="executor_postal_code" value="{{ $executorDetails['postal_code'] ?? '' }}" placeholder="Postal/Pin Code"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-red-100 focus:border-red-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <!-- Country field hidden -->
                                        <input type="hidden" name="executor_country" id="executor_country" value="{{ $executorDetails['country'] ?? 'Malaysia' }}">
                                    </div>
                                </div>
                                <textarea id="executor_primary_address" name="executor_primary_address" rows="2" readonly
                                          class="w-full mt-3 px-3 py-2 border-2 border-gray-200 rounded-lg bg-gray-100 text-gray-600 text-sm resize-none"
                                          placeholder="Complete address will appear here..." style="font-family: 'Inter', sans-serif;">{{ $executorDetails['address'] ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- 4️⃣ Appointment of Guardian / Caretaker -->
                    <div class="bg-white rounded-xl p-6 border-2 border-gray-100 shadow-md">
                        <div class="flex items-center mb-6">
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-[#772B10] font-bold mr-3 border-2 border-[#772B10]/30">4</div>
                            <h3 class="text-md font-semibold text-gray-800">Appointment of Guardian / Caretaker</h3>
                        </div>

                        <!-- Family Member Selection -->
                        <div class="mb-6 p-6 bg-gradient-to-r from-[#772B10]/10 to-[#8B3D15]/10 rounded-xl border-2 border-[#772B10]/30 shadow-lg">
                            <div class="flex items-center mb-4">
                                <div class="w-10 h-10 bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-users text-white"></i>
                                </div>
                                <div>
                                    <label class="block text-base font-bold text-gray-800">Quick Fill - Select Family Member</label>
                                    <p class="text-sm text-gray-600">Choose a family member to automatically fill their details below</p>
                                </div>
                            </div>
                            <div class="relative">
                                <select id="guardianFamilyMemberSelect" onchange="fillGuardianFromFamily(this.value)" class="w-full pl-12 pr-4 py-4 border-2 border-[#772B10]/30 rounded-xl focus:border-[#772B10] focus:ring-4 focus:ring-[#772B10]/10 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-[#772B10]/50 text-base font-medium shadow-sm h-14">
                                    <option value="">👤 Choose Family Member (Optional)</option>
                                    <!-- <option value="self">{{ $client->full_name }} (Self)</option> -->
                                    @if($client->familyMembers && $client->familyMembers->count() > 0)
                                        @foreach($client->familyMembers as $member)
                                            <option value="{{ $member->id }}">{{ $member->full_name }} - {{ $member->relationship }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#772B10]">
                                    <i class="fas fa-users text-lg"></i>
                                </div>
                            </div>
                            <div class="mt-3 flex items-center text-xs text-gray-500">
                                <i class="fas fa-info-circle mr-1"></i>
                                <span>Family members from your profile will appear here. You can still enter details manually.</span>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-shield-alt text-orange-500 mr-2"></i>Full Name
                                </label>
                                <div class="relative">
                                    <input type="text" id="guardian_full_name" name="guardian_full_name" 
                                           value="{{ $guardianDetails['full_name'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-orange-100 focus:border-orange-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter guardian's full name" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-shield-alt absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-id-card text-orange-500 mr-2"></i>NRIC / Passport
                                </label>
                                <div class="relative">
                                    <input type="text" id="guardian_ic" name="guardian_ic" 
                                           value="{{ $guardianDetails['ic'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-orange-100 focus:border-orange-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter NRIC or Passport number" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-id-card absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-globe text-orange-500 mr-2"></i>Nationality
                                </label>
                                <div class="relative">
                                    <input type="text" id="guardian_nationality" name="guardian_nationality" 
                                           value="{{ $guardianDetails['nationality'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-orange-100 focus:border-orange-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter nationality" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-globe absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-heart text-orange-500 mr-2"></i>Relationship
                                </label>
                                <div class="relative">
                                    <input type="text" id="guardian_relationship" name="guardian_relationship" 
                                           value="{{ $guardianDetails['relationship'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-orange-100 focus:border-orange-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter relationship" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-heart absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-calendar text-orange-500 mr-2"></i>DOB
                                </label>
                                <div class="relative">
                                    <x-date-picker id="guardian_dob" name="guardian_dob" value="{{ $guardianDetails['dob'] ?? '' }}" />
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-envelope text-orange-500 mr-2"></i>Email
                                </label>
                                <div class="relative">
                                    <input type="email" id="guardian_email" name="guardian_email" 
                                           value="{{ $guardianDetails['email'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-orange-100 focus:border-orange-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter email address" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-envelope absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-phone text-orange-500 mr-2"></i>Tel No.
                                </label>
                                <div class="relative">
                                    <input type="tel" id="guardian_phone" name="guardian_phone" 
                                           value="{{ $guardianDetails['phone'] ?? '' }}" 
                                           class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-orange-100 focus:border-orange-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter phone number" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-phone absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="space-y-4 md:col-span-2">
                            <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                <i class="fas fa-map-marker-alt text-orange-500 mr-2"></i>Address
                            </label>
                            <div class="bg-gray-50 p-4 rounded-xl border-2 border-gray-200">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <div class="md:col-span-2">
                                        <input type="text" name="guardian_address_line_1" id="guardian_address_line_1" value="{{ $guardianDetails['address_line_1'] ?? '' }}" placeholder="Address Line 1"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-orange-100 focus:border-orange-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div class="md:col-span-2">
                                        <input type="text" name="guardian_address_line_2" id="guardian_address_line_2" value="{{ $guardianDetails['address_line_2'] ?? '' }}" placeholder="Address Line 2 (Optional)"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-orange-100 focus:border-orange-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="guardian_city" id="guardian_city" value="{{ $guardianDetails['city'] ?? '' }}" placeholder="City"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-orange-100 focus:border-orange-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="guardian_state" id="guardian_state" value="{{ $guardianDetails['state'] ?? '' }}" placeholder="State"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-orange-100 focus:border-orange-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <input type="text" name="guardian_postal_code" id="guardian_postal_code" value="{{ $guardianDetails['postal_code'] ?? '' }}" placeholder="Postal/Pin Code"
                                               class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-orange-100 focus:border-orange-500 outline-none transition-all bg-white text-base">
                                    </div>
                                    <div>
                                        <!-- Country field hidden -->
                                        <input type="hidden" name="guardian_country" id="guardian_country" value="{{ $guardianDetails['country'] ?? 'Malaysia' }}">
                                    </div>
                                </div>
                                <textarea id="guardian_address" name="guardian_address" rows="2" readonly
                                          class="w-full mt-3 px-3 py-2 border-2 border-gray-200 rounded-lg bg-gray-100 text-gray-600 text-sm resize-none"
                                          placeholder="Complete address will appear here..." style="font-family: 'Inter', sans-serif;">{{ $guardianDetails['address'] ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="flex justify-between">
                        <a href="{{ route('agent.wills.type', $client) }}" class="px-8 py-4 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 font-medium text-base">
                            <i class="fas fa-arrow-left mr-2"></i>Back
                        </a>
                        <button type="submit" class="bg-gradient-to-r from-[#772B10] to-[#8B3D15] hover:from-[#8B3D15] hover:to-[#9F4F1A] text-white px-8 py-4 rounded-xl font-medium text-base inline-flex items-center shadow-lg hover:shadow-xl transition-all">
                            <i class="fas fa-save mr-2"></i>Continue to Beneficiaries
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Simple family members data loading
        let familyMembers = [];
        
        @if(isset($client->familyMembers) && $client->familyMembers->count() > 0)
            @foreach($client->familyMembers as $member)
                familyMembers.push({
                    id: {{ $member->id }},
                    first_name: {!! json_encode($member->first_name ?? '') !!},
                    last_name: {!! json_encode($member->last_name ?? '') !!},
                    full_name: {!! json_encode($member->full_name ?? '') !!},
                    relationship: {!! json_encode($member->relationship ?? '') !!},
                    ic_number: {!! json_encode($member->ic_number ?? '') !!},
                    date_of_birth: {!! json_encode($member->date_of_birth ? $member->date_of_birth->format('Y-m-d') : '') !!},
                    email: {!! json_encode($member->email ?? '') !!},
                    phone: {!! json_encode($member->phone ?? '') !!},
                    address: {!! json_encode($member->address ?? '') !!}
                });
            @endforeach
        @endif
        
        console.log('Family members loaded:', familyMembers.length, 'members');
        
        // Client data for self option
        // const clientData = {
        //     full_name: {!! json_encode($client->full_name) !!},
        //     ic_number: {!! json_encode($client->ic_number) !!},
        //     country: {!! json_encode($client->country ?? 'Malaysian') !!},
        //     email: {!! json_encode($client->email) !!},
        //     phone: {!! json_encode($client->phone) !!},
        //     address: {!! json_encode($client->address ?? '') !!},
        //     date_of_birth: '{!! $client->date_of_birth ? $client->date_of_birth->format('Y-m-d') : '' !!}'
        // };
        
        // Helper function to parse comma-separated address
        function parseAddress(addressString) {
            if (!addressString || typeof addressString !== 'string') {
                return {
                    address_line_1: '',
                    address_line_2: '',
                    city: '',
                    state: '',
                    postal_code: '',
                    country: '',
                    full_address: addressString || ''
                };
            }
            
            // Split by comma and trim each part
            const parts = addressString.split(',').map(part => part.trim()).filter(part => part);
            
            // Standard format: Address Line 1, Address Line 2, City, State, Postal Code, Country
            return {
                address_line_1: parts[0] || '',
                address_line_2: parts[1] || '',
                city: parts[2] || '',
                state: parts[3] || '',
                postal_code: parts[4] || '',
                country: parts[5] || '',
                full_address: addressString
            };
        }
        
        // Helper function to fill address fields
        function fillAddressFields(prefix, addressData) {
            const parsed = parseAddress(addressData);
            
            const line1 = document.getElementById(prefix + '_address_line_1');
            const line2 = document.getElementById(prefix + '_address_line_2');
            const city = document.getElementById(prefix + '_city');
            const state = document.getElementById(prefix + '_state');
            const postal = document.getElementById(prefix + '_postal_code');
            const country = document.getElementById(prefix + '_country');
            // Try both naming patterns: prefix + '_primary_address' (for testator/executor) or prefix + '_address' (for guardian)
            let fullAddress = document.getElementById(prefix + '_primary_address');
            if (!fullAddress) {
                fullAddress = document.getElementById(prefix + '_address');
            }
            
            if (line1) line1.value = parsed.address_line_1;
            if (line2) line2.value = parsed.address_line_2;
            if (city) city.value = parsed.city;
            if (state) state.value = parsed.state;
            if (postal) postal.value = parsed.postal_code;
            if (fullAddress) fullAddress.value = parsed.full_address;
            
            // Handle country dropdown
            if (country && parsed.country) {
                const countryValue = parsed.country.trim();
                // Try exact match first
                let option = Array.from(country.options).find(opt => 
                    opt.value.toLowerCase() === countryValue.toLowerCase()
                );
                
                // If no exact match, try partial match
                if (!option) {
                    option = Array.from(country.options).find(opt => 
                        countryValue.toLowerCase().includes(opt.value.toLowerCase()) ||
                        opt.value.toLowerCase().includes(countryValue.toLowerCase())
                    );
                }
                
                if (option) {
                    country.value = option.value;
                }
            }
            
            console.log('Address parsed and filled:', parsed);
        }
        
        // Fill functions
        function fillTestatorFromFamily(memberId) {
            console.log('=== fillTestatorFromFamily called ===');
            console.log('memberId:', memberId);
            console.log('familyMembers array:', familyMembers);
            console.log('familyMembers length:', familyMembers.length);
            
            if (!memberId || memberId === '') {
                console.log('Returning - empty memberId');
                return;
            }
            
            if (memberId === 'self') {
                console.log('Filling with self data...');
                // Fill with client's own data
                document.getElementById('testator_primary_full_name').value = clientData.full_name;
                document.getElementById('testator_primary_ic').value = clientData.ic_number;
                document.getElementById('testator_primary_nationality').value = clientData.country;
                document.getElementById('testator_primary_relationship').value = 'Self';
                document.getElementById('testator_primary_dob').value = clientData.date_of_birth;
                document.getElementById('testator_primary_email').value = clientData.email;
                document.getElementById('testator_primary_phone').value = clientData.phone;
                // Parse and fill address fields
                fillAddressFields('testator', clientData.address);
                console.log('Self data filled successfully');
            } else {
                console.log('Looking for family member with ID:', memberId);
                // Fill with selected family member data
                const member = familyMembers.find(m => m.id == memberId);
                console.log('Found member:', member);
                
                if (member) {
                    console.log('Filling with family member data...');
                    const fullName = member.first_name && member.last_name ? member.first_name + ' ' + member.last_name : member.full_name;
                    document.getElementById('testator_primary_full_name').value = fullName;
                    document.getElementById('testator_primary_ic').value = member.ic_number || '';
                    document.getElementById('testator_primary_nationality').value = 'Malaysian';
                    document.getElementById('testator_primary_relationship').value = member.relationship || '';
                    document.getElementById('testator_primary_dob').value = member.date_of_birth || '';
                    document.getElementById('testator_primary_email').value = member.email || '';
                    document.getElementById('testator_primary_phone').value = member.phone || '';
                    // Parse and fill address fields
                    fillAddressFields('testator', member.address);
                    console.log('Family member data filled successfully');
                } else {
                    console.log('ERROR: Family member not found with ID:', memberId);
                }
            }
            
            console.log('=== fillTestatorFromFamily complete ===');
        }
        
        function fillExecutorFromFamily(memberId) {
            console.log('=== fillExecutorFromFamily called ===');
            console.log('memberId:', memberId);
            
            if (!memberId || memberId === '') {
                console.log('Returning - empty memberId');
                return;
            }
            
            if (memberId === 'self') {
                console.log('Filling executor with self data...');
                // Fill with client's own data
                document.getElementById('executor_primary_full_name').value = clientData.full_name;
                document.getElementById('executor_primary_ic').value = clientData.ic_number;
                document.getElementById('executor_primary_nationality').value = clientData.country;
                document.getElementById('executor_primary_relationship').value = 'Self';
                document.getElementById('executor_primary_dob').value = clientData.date_of_birth;
                document.getElementById('executor_primary_email').value = clientData.email;
                document.getElementById('executor_primary_phone').value = clientData.phone;
                // Parse and fill address fields
                fillAddressFields('executor', clientData.address);
                console.log('Executor self data filled successfully');
            } else {
                console.log('Looking for executor family member with ID:', memberId);
                const member = familyMembers.find(m => m.id == memberId);
                console.log('Found executor member:', member);
                
                if (member) {
                    console.log('Filling executor with family member data...');
                    const fullName = member.first_name && member.last_name ? member.first_name + ' ' + member.last_name : member.full_name;
                    document.getElementById('executor_primary_full_name').value = fullName;
                    document.getElementById('executor_primary_ic').value = member.ic_number || '';
                    document.getElementById('executor_primary_nationality').value = 'Malaysian';
                    document.getElementById('executor_primary_relationship').value = member.relationship || '';
                    document.getElementById('executor_primary_dob').value = member.date_of_birth || '';
                    document.getElementById('executor_primary_email').value = member.email || '';
                    document.getElementById('executor_primary_phone').value = member.phone || '';
                    // Parse and fill address fields
                    fillAddressFields('executor', member.address);
                    console.log('Executor family member data filled successfully');
                } else {
                    console.log('ERROR: Executor family member not found with ID:', memberId);
                }
            }
        }
        
        function fillGuardianFromFamily(memberId) {
            console.log('=== fillGuardianFromFamily called ===');
            console.log('memberId:', memberId);
            
            if (!memberId || memberId === '') {
                console.log('Returning - empty memberId');
                return;
            }
            
            if (memberId === 'self') {
                console.log('Filling guardian with self data...');
                // Fill with client's own data
                document.getElementById('guardian_full_name').value = clientData.full_name;
                document.getElementById('guardian_ic').value = clientData.ic_number;
                document.getElementById('guardian_nationality').value = clientData.country;
                document.getElementById('guardian_relationship').value = 'Self';
                document.getElementById('guardian_dob').value = clientData.date_of_birth;
                document.getElementById('guardian_email').value = clientData.email;
                document.getElementById('guardian_phone').value = clientData.phone;
                // Parse and fill address fields
                fillAddressFields('guardian', clientData.address);
                console.log('Guardian self data filled successfully');
            } else {
                console.log('Looking for guardian family member with ID:', memberId);
                const member = familyMembers.find(m => m.id == memberId);
                console.log('Found guardian member:', member);
                
                if (member) {
                    console.log('Filling guardian with family member data...');
                    const fullName = member.first_name && member.last_name ? member.first_name + ' ' + member.last_name : member.full_name;
                    document.getElementById('guardian_full_name').value = fullName;
                    document.getElementById('guardian_ic').value = member.ic_number || '';
                    document.getElementById('guardian_nationality').value = 'Malaysian';
                    document.getElementById('guardian_relationship').value = member.relationship || '';
                    document.getElementById('guardian_dob').value = member.date_of_birth || '';
                    document.getElementById('guardian_email').value = member.email || '';
                    document.getElementById('guardian_phone').value = member.phone || '';
                    // Parse and fill address fields
                    fillAddressFields('guardian', member.address);
                    console.log('Guardian family member data filled successfully');
                } else {
                    console.log('ERROR: Guardian family member not found with ID:', memberId);
                }
            }
        }
        
        function fillPrimaryTestator(testatorId) {
            console.log('=== fillPrimaryTestator called ===');
            console.log('testatorId:', testatorId);
            
            if (!testatorId || testatorId === '') {
                console.log('Returning - empty testatorId');
                return;
            }
            
            const select = document.getElementById('primaryTestatorSelect');
            const selectedOption = select.options[select.selectedIndex];
            
            if (selectedOption && selectedOption.value) {
                console.log('Filling primary testator with selected data...');
                document.getElementById('testator_primary_full_name').value = selectedOption.dataset.name || '';
                document.getElementById('testator_primary_email').value = selectedOption.dataset.email || '';
                document.getElementById('testator_primary_phone').value = selectedOption.dataset.phone || '';
                document.getElementById('testator_primary_ic').value = selectedOption.dataset.ic || '';
                document.getElementById('testator_primary_dob').value = selectedOption.dataset.dob || '';
                // Parse and fill address fields
                fillAddressFields('testator', selectedOption.dataset.address);
                document.getElementById('testator_primary_nationality').value = 'Malaysian';
                document.getElementById('testator_primary_relationship').value = selectedOption.dataset.role === 'agent' ? 'Agent' : 'Lawyer';
                console.log('Primary testator data filled successfully');
            } else {
                console.log('ERROR: Primary testator option not found');
            }
        }
        
        function fillSecondaryTestator(testatorId) {
            console.log('=== fillSecondaryTestator called ===');
            console.log('testatorId:', testatorId);
            
            if (!testatorId || testatorId === '') {
                console.log('Returning - empty testatorId');
                return;
            }
            
            const select = document.getElementById('secondaryTestatorSelect');
            const selectedOption = select.options[select.selectedIndex];
            
            if (selectedOption && selectedOption.value) {
                console.log('Filling secondary testator with selected data...');
                document.getElementById('testator_secondary_full_name').value = selectedOption.dataset.name || '';
                document.getElementById('testator_secondary_email').value = selectedOption.dataset.email || '';
                document.getElementById('testator_secondary_phone').value = selectedOption.dataset.phone || '';
                document.getElementById('testator_secondary_ic').value = selectedOption.dataset.ic || '';
                document.getElementById('testator_secondary_dob').value = selectedOption.dataset.dob || '';
                // Parse and fill address fields
                fillAddressFields('testator_secondary', selectedOption.dataset.address);
                document.getElementById('testator_secondary_nationality').value = 'Malaysian';
                document.getElementById('testator_secondary_relationship').value = 'Secondary Testator';
                console.log('Secondary testator data filled successfully');
            } else {
                console.log('ERROR: Secondary testator option not found');
            }
        }
        
        function updateLawyerAssignment(lawyerId) {
            console.log('=== updateLawyerAssignment called ===');
            console.log('lawyerId:', lawyerId);
            
            if (!lawyerId || lawyerId === '') {
                console.log('Returning - empty lawyerId');
                return;
            }
            
            const select = document.getElementById('lawyerSelect');
            const selectedOption = select.options[select.selectedIndex];
            
            if (selectedOption && selectedOption.value) {
                console.log('Updating lawyer assignment...');
                
                // Show confirmation dialog
                if (confirm(`Are you sure you want to change the assigned lawyer to ${selectedOption.dataset.name}? This change will be saved when you submit the form.`)) {
                    // Add hidden input to form for lawyer change
                    let lawyerInput = document.createElement('input');
                    lawyerInput.type = 'hidden';
                    lawyerInput.name = 'assigned_lawyer_id';
                    lawyerInput.value = lawyerId;
                    
                    // Add to form
                    const form = document.querySelector('form');
                    form.appendChild(lawyerInput);
                    
                    // Update current lawyer display
                    const currentLawyerDiv = document.querySelector('.bg-blue-50');
                    if (currentLawyerDiv) {
                        currentLawyerDiv.innerHTML = `
                            <div class="flex items-center">
                                <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                                <div>
                                    <p class="text-sm text-blue-800">
                                        <strong>New Lawyer (Pending):</strong> ${selectedOption.dataset.name} - ${selectedOption.dataset.firm || 'Independent'}
                                    </p>
                                    <p class="text-xs text-blue-600 mt-1">Change will be saved when form is submitted</p>
                                </div>
                            </div>
                        `;
                    }
                    
                    console.log('Lawyer assignment updated successfully');
                } else {
                    // Reset dropdown to current lawyer
                    select.value = '';
                    console.log('Lawyer change cancelled');
                }
            } else {
                console.log('ERROR: Lawyer option not found');
            }
        }
        
        // Populate dropdowns - now using PHP to generate options directly
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Page loaded - family member dropdowns populated via PHP');
            
            // Add event listener for primary testator dropdown
            const primaryTestatorSelect = document.getElementById('primaryTestatorSelect');
            if (primaryTestatorSelect) {
                primaryTestatorSelect.addEventListener('change', function() {
                    fillPrimaryTestator(this.value);
                });
            }
            
            // Add event listener for secondary testator dropdown
            const secondaryTestatorSelect = document.getElementById('secondaryTestatorSelect');
            if (secondaryTestatorSelect) {
                secondaryTestatorSelect.addEventListener('change', function() {
                    fillSecondaryTestator(this.value);
                });
            }
        });
    </script>
@endsection