@extends('layouts.portal')

@section('title', $isJoint ? 'Create Joint Will' : 'Create Dummy Will')

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

@section('content')
    <!-- Modern Progress Steps -->
    <div class="mb-8 bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-12 h-12 rounded-xl bg-red-600 flex items-center justify-center text-white font-bold shadow-lg">1</div>
                <div class="ml-4">
                    <p class="text-sm font-semibold text-gray-900">Testator Details</p>
                    <p class="text-xs text-red-600 font-medium">Current step</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gradient-to-r from-red-600 to-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-12 h-12 rounded-xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold">2</div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-800">Beneficiaries</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-12 h-12 rounded-xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold">3</div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-800">Assets</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-12 h-12 rounded-xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold">4</div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-800">Appointment of Trustees</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-12 h-12 rounded-xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold">5</div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-800">Allowances</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-12 h-12 rounded-xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold">6</div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-800">Gifts</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-12 h-12 rounded-xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold">7</div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-800">Donations</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-12 h-12 rounded-xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold">8</div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-800">Witnesses</p>
                </div>
            </div>
        </div>
    </div>

<div class="max-w-6xl mx-auto">
    <div class="bg-white rounded-xl shadow-md p-4">
        <div class="mb-4">
            <div class="bg-gradient-to-r from-red-600 to-red-700 rounded-xl p-4 mb-4 shadow-md">
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-{{ $isJoint ? 'users' : 'user' }} text-white text-sm"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-white">{{ $isJoint ? 'Joint' : '' }} Testator Details</h2>
                        <p class="text-red-100 text-xs">{{ $isJoint ? 'Two persons making the will together' : 'Person who is making the will' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Debug Info (remove in production) -->
        @if(app()->environment('local') || config('app.debug'))
        <div class="mb-4 p-3 bg-yellow-50 border border-yellow-300 rounded-lg text-xs">
            <p><strong>Debug:</strong> isJoint={{ $isJoint ? 'true' : 'false' }}, type={{ $type }}</p>
            <p>client.joint_client_id={{ $client->joint_client_id ?? 'null' }}</p>
            <p>jointClient={{ $jointClient ? 'found (ID: '.$jointClient->id.')' : 'null' }}</p>
            <p>jointType={{ $jointType ?? 'null' }}</p>
        </div>
        @endif

        <form action="{{ route('client.dummy.will.store') }}" method="POST">
            @csrf
            <input type="hidden" name="will_type" value="{{ $type }}">
            <input type="hidden" name="is_joint" value="{{ $isJoint ? '1' : '0' }}">
            @if($isJoint && $jointClient)
                <input type="hidden" name="joint_client_id" value="{{ $jointClient->id }}">
                <input type="hidden" name="joint_type" value="{{ $jointType }}">
            @endif
            
            <!-- 1️⃣ Primary Testator / Grantor -->
            <div class="mb-4">
                <div class="bg-white rounded-xl p-4 mb-4 border-2 border-gray-100 shadow-md">
                    <div class="flex items-center mb-2">
                        <div class="w-8 h-8 bg-white border-2 border-gray-300 rounded-full flex items-center justify-center text-gray-800 font-bold mr-2 shadow-md">
                            1
                        </div>
                        <h3 class="text-md font-semibold text-gray-800">🔹 Primary Testator / Grantor</h3>
                    </div>
                    <p class="text-xs text-gray-600 ml-10">Person who is making the will</p>
                </div>
                
                <!-- Family Member Selection -->
                <div class="mb-4 p-3 bg-gradient-to-r from-red-50 to-red-100 rounded-xl border-2 border-red-100 shadow-md">
                    <div class="flex items-center mb-3">
                        <div class="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center mr-2">
                            <i class="fas fa-users text-white text-sm"></i>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-gray-800">Quick Fill - Select Family Member</label>
                            <p class="text-xs text-gray-600">Choose a family member to automatically fill their details</p>
                        </div>
                    </div>
                    <div class="relative">
                        <select id="familyMemberSelect" class="w-full pl-10 pr-3 py-4 border-2 border-gray-100 rounded-lg focus:border-gray-500 focus:ring-2 focus:ring-gray-100 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-gray-300 text-sm font-medium shadow-sm h-12">
                            <option value="">👤 Choose Family Member (Optional)</option>
                            <!-- Family members will be populated here via JavaScript -->
                        </select>
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-red-500">
                            <i class="fas fa-users text-sm"></i>
                        </div>
                    </div>
                    <div class="mt-2 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-4">
                    <div class="space-y-2">
                        <label class="block text-xs font-semibold text-gray-700">
                            <i class="fas fa-user text-gray-800 mr-2"></i>Full Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="testator_primary_full_name" name="testator_primary_full_name" required 
                               class="w-full px-3 py-2 border-2 border-gray-100 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-gray-500 outline-none transition-all text-gray-900 placeholder-gray-500 bg-white"
                               placeholder="Enter full name">
                    </div>
                    
                    <div class="space-y-2">
                        <label class="block text-xs font-semibold text-gray-700">
                            <i class="fas fa-id-card text-gray-800 mr-2"></i>NRIC / Passport <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="testator_primary_ic" name="testator_primary_ic" required 
                               class="w-full px-3 py-2 border-2 border-gray-100 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-gray-500 outline-none transition-all text-gray-900 placeholder-gray-500 bg-white"
                               placeholder="Enter NRIC or Passport number">
                    </div>
                    
                    <div class="space-y-2">
                        <label class="block text-xs font-semibold text-gray-700">
                            <i class="fas fa-globe text-gray-800 mr-2"></i>Nationality
                        </label>
                        <input type="text" id="testator_primary_nationality" name="testator_primary_nationality" 
                               class="w-full px-3 py-2 border-2 border-gray-100 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-gray-500 outline-none transition-all text-gray-900 placeholder-gray-500 bg-white"
                               placeholder="Enter nationality">
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-heart text-blue-500 mr-2 text-xs"></i>
                            Relationship
                        </label>
                        <div class="relative">
                            <input type="text" id="testator_primary_relationship" name="testator_primary_relationship" 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter relationship">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-heart text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2 group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-home text-blue-500 mr-2 text-xs"></i>
                            Address <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <textarea id="testator_primary_address" name="testator_primary_address" rows="2" required 
                                      class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md resize-none"
                                      placeholder="Enter full address"></textarea>
                            <div class="absolute left-3 top-3 text-gray-400">
                                <i class="fas fa-home text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-calendar text-blue-500 mr-2 text-xs"></i>
                            DOB (Date of Birth) <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <x-date-picker
                    name="testator_primary_dob"
                    class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all duration-300 text-gray-900 bg-gray-50 hover:bg-white group-hover:shadow-md"
                    required
                />
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-calendar text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-envelope text-blue-500 mr-2 text-xs"></i>
                            e-Mail <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <input type="email" id="testator_primary_email" name="testator_primary_email" required 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter email address">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-envelope text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-phone text-blue-500 mr-2 text-xs"></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 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter phone number">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-phone text-sm"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 2️⃣ Secondary Testator -->
            <div class="mb-8">
                <div class="bg-white rounded-lg border border-gray-200 p-4 mb-6 shadow-sm">
                    <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                        <div class="w-8 h-8 bg-red-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">2</div>
                        Secondary Testator
                    </h4>
                    <p class="text-sm text-gray-600 mt-1 ml-11">For Joint / Mutual Will only</p>
                </div>
                
                <!-- Joint Partner Selection (if no partner linked) -->
                @if($isJoint && !$jointClient)
                <div class="mb-6 p-6 bg-gradient-to-r from-pink-50 to-purple-50 rounded-xl border-2 border-purple-200 shadow-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-user-friends text-white text-xl"></i>
                        </div>
                        <div>
                            <h5 class="text-lg font-bold text-purple-800">Select Joint Partner</h5>
                            <p class="text-sm text-purple-600">Choose who you're creating this joint will with</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Partner's Email</label>
                            <input type="email" id="partner_email_search" name="partner_email_search"
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all"
                                   placeholder="Enter partner's email address">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Relationship</label>
                            <select id="joint_type_select" name="joint_type_select"
                                    class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all">
                                <option value="spouse">Spouse</option>
                                <option value="partner">Domestic Partner</option>
                                <option value="family">Family Member</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex gap-3">
                        <button type="button" onclick="searchPartner()" class="flex-1 py-3 bg-purple-600 text-white rounded-xl hover:bg-purple-700 font-medium transition-all">
                            <i class="fas fa-search mr-2"></i> Search Partner
                        </button>
                        <button type="button" onclick="manualPartnerMode()" class="flex-1 py-3 bg-gray-600 text-white rounded-xl hover:bg-gray-700 font-medium transition-all">
                            <i class="fas fa-edit mr-2"></i> Enter Manually
                        </button>
                    </div>

                    <div id="partner_search_results" class="mt-4 hidden">
                        <!-- Search results will appear here -->
                    </div>
                </div>

                <!-- Manual Partner Entry Form (hidden by default) -->
                <div id="manual_partner_form" class="hidden mb-6 p-6 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-xl border-2 border-blue-200 shadow-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-user-plus text-white text-xl"></i>
                        </div>
                        <div>
                            <h5 class="text-lg font-bold text-blue-800">Enter Partner Details Manually</h5>
                            <p class="text-sm text-blue-600">Fill in your partner's information below</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Full Name *</label>
                            <input type="text" id="manual_partner_name" name="manual_partner_name"
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all"
                                   placeholder="Partner's full name">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">NRIC / Passport *</label>
                            <input type="text" id="manual_partner_ic" name="manual_partner_ic"
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all"
                                   placeholder="NRIC or Passport number">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Email *</label>
                            <input type="email" id="manual_partner_email" name="manual_partner_email"
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all"
                                   placeholder="Partner's email">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Phone *</label>
                            <input type="tel" id="manual_partner_phone" name="manual_partner_phone"
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all"
                                   placeholder="Partner's phone number">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Address *</label>
                            <input type="text" id="manual_partner_address" name="manual_partner_address"
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all"
                                   placeholder="Partner's complete address">
                        </div>
                    </div>

                    <div class="mt-4 flex gap-3">
                        <button type="button" onclick="saveManualPartner()" class="flex-1 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 font-medium transition-all">
                            <i class="fas fa-save mr-2"></i> Save & Use Partner
                        </button>
                        <button type="button" onclick="cancelManualPartner()" class="flex-1 py-3 bg-gray-500 text-white rounded-xl hover:bg-gray-600 font-medium transition-all">
                            Cancel
                        </button>
                    </div>
                </div>
                @endif

                <!-- Joint Partner Info Banner -->
                @if($isJoint && $jointClient)
                <div class="mb-6 p-4 bg-gradient-to-r from-purple-600 to-purple-800 rounded-xl shadow-lg text-white">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-heart text-white text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm text-purple-200">Joint Will With</p>
                                <h5 class="text-lg font-bold">{{ $jointClient->full_name ?: 'Pending Partner' }}</h5>
                                <p class="text-sm text-purple-200">{{ ucfirst($jointType) }} • {{ $jointClient->email }}</p>
                            </div>
                        </div>
                        <button type="button" onclick="changePartner()" class="text-purple-200 hover:text-white text-sm underline">
                            Change Partner
                        </button>
                    </div>
                </div>
                @endif
                
                <!-- Family Member Selection -->
                <div class="mb-6 p-6 bg-gradient-to-r from-red-50 to-red-100 rounded-xl border-2 border-red-200 shadow-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-red-600 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="secondaryFamilyMemberSelect" class="w-full pl-12 pr-4 py-4 border-2 border-red-300 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-red-400 text-base font-medium shadow-sm h-14">
                            <option value="">👤 Choose Family Member (Optional)</option>
                            <!-- Family members will be populated here via JavaScript -->
                        </select>
                        <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-red-500">
                            <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="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-users text-purple-500 mr-2 text-xs"></i>
                            Full Name
                        </label>
                        <div class="relative">
                            <input type="text" id="testator_secondary_full_name" name="testator_secondary_full_name" 
                                   value="{{ $isJoint && $jointClient ? $jointClient->full_name : '' }}"
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter full name">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-users text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-id-card text-purple-500 mr-2 text-xs"></i>
                            NRIC / Passport
                        </label>
                        <div class="relative">
                            <input type="text" id="testator_secondary_ic" name="testator_secondary_ic" 
                                   value="{{ $isJoint && $jointClient ? $jointClient->ic_number : '' }}"
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter NRIC or Passport number">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-id-card text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-globe text-purple-500 mr-2 text-xs"></i>
                            Nationality
                        </label>
                        <div class="relative">
                            <input type="text" id="testator_secondary_nationality" name="testator_secondary_nationality" 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter nationality">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-globe text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-heart text-purple-500 mr-2 text-xs"></i>
                            Relationship
                        </label>
                        <div class="relative">
                            <input type="text" id="testator_secondary_relationship" name="testator_secondary_relationship" 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter relationship">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-heart text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2 group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-home text-purple-500 mr-2 text-xs"></i>
                            Address
                        </label>
                        <div class="relative">
                            <textarea id="testator_secondary_address" name="testator_secondary_address" rows="2" 
                                      class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md resize-none"
                                      placeholder="Enter full address"></textarea>
                            <div class="absolute left-3 top-3 text-gray-400">
                                <i class="fas fa-home text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-calendar text-purple-500 mr-2 text-xs"></i>
                            DOB
                        </label>
                        <div class="relative">
                            <x-date-picker
                    name="testator_secondary_dob"
                    class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                />
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-calendar text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-envelope text-purple-500 mr-2 text-xs"></i>
                            Email
                        </label>
                        <div class="relative">
                            <input type="email" id="testator_secondary_email" name="testator_secondary_email" 
                                   value="{{ $isJoint && $jointClient ? $jointClient->email : '' }}"
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter email address">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-envelope text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-phone text-purple-500 mr-2 text-xs"></i>
                            Tel No.
                        </label>
                        <div class="relative">
                            <input type="tel" id="testator_secondary_phone" name="testator_secondary_phone" 
                                   value="{{ $isJoint && $jointClient ? $jointClient->phone : '' }}"
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter phone number">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-phone text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-home text-purple-500 mr-2 text-xs"></i>
                            Address
                        </label>
                        <div class="relative">
                            <input type="text" id="testator_secondary_address" name="testator_secondary_address" 
                                   value="{{ $isJoint && $jointClient ? $jointClient->address : '' }}"
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter complete address">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-home text-sm"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 3️⃣ Primary Executor -->
        <div class="mb-8">
            <div class="bg-white rounded-lg border border-gray-200 p-4 mb-6 shadow-sm">
                <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                    <span class="w-8 h-8 bg-red-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">3</span>
                    Primary Executor
                </h4>
                <p class="text-sm text-gray-600 mt-1 ml-11">Person who will execute/manage will after death</p>
            </div>
            
            <!-- Family Member Selection -->
            <div class="mb-6 p-6 bg-gradient-to-r from-red-50 to-red-100 rounded-xl border-2 border-red-200 shadow-lg">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-red-600 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="executorFamilyMemberSelect" class="w-full pl-12 pr-4 py-4 border-2 border-red-300 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-red-400 text-base font-medium shadow-sm h-14">
                        <option value="">👤 Choose Family Member (Optional)</option>
                        <!-- Family members will be populated here via JavaScript -->
                    </select>
                    <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-red-500">
                        <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="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-user-tie text-red-500 mr-2 text-xs"></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 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter executor's full name">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-user-tie text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-id-card text-red-500 mr-2 text-xs"></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 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter NRIC or Passport number">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-id-card text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-globe text-red-500 mr-2 text-xs"></i>
                            Nationality
                        </label>
                        <div class="relative">
                            <input type="text" id="executor_primary_nationality" name="executor_primary_nationality" 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter nationality">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-globe text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-heart text-red-500 mr-2 text-xs"></i>
                            Relationship
                        </label>
                        <div class="relative">
                            <input type="text" id="executor_primary_relationship" name="executor_primary_relationship" 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter relationship">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-heart text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2 group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-home text-red-500 mr-2 text-xs"></i>
                            Address <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <textarea id="executor_primary_address" name="executor_primary_address" rows="2" required 
                                      class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md resize-none"
                                      placeholder="Enter full address"></textarea>
                            <div class="absolute left-3 top-3 text-gray-400">
                                <i class="fas fa-home text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-calendar text-red-500 mr-2 text-xs"></i>
                            DOB
                        </label>
                        <div class="relative">
                            <x-date-picker
                    name="executor_primary_dob"
                    class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 bg-gray-50 hover:bg-white group-hover:shadow-md"
                />
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-calendar text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-envelope text-red-500 mr-2 text-xs"></i>
                            e-Mail
                        </label>
                        <div class="relative">
                            <input type="email" id="executor_primary_email" name="executor_primary_email" 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter email address">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-envelope text-sm"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group">
                        <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-phone text-red-500 mr-2 text-xs"></i>
                            Tel No.
                        </label>
                        <div class="relative">
                            <input type="tel" id="executor_primary_phone" name="executor_primary_phone" 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                                   placeholder="Enter phone number">
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fas fa-phone text-sm"></i>
                            </div>
                        </div>
                    </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>
        
        <!-- 4️⃣ Appointment of Guardian / Caretaker -->
        <div class="mb-8">
            <div class="bg-white rounded-lg border border-gray-200 p-4 mb-6 shadow-sm">
                <h4 class="text-lg font-semibold text-gray-800 flex items-center">
                    <span class="w-8 h-8 bg-red-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">4</span>
                    Appointment of Guardian / Caretaker
                </h4>
                <p class="text-sm text-gray-600 mt-1 ml-11">To care for young children or anyone needing medical/physical care</p>
            </div>
            
            <!-- Family Member Selection -->
            <div class="mb-6 p-6 bg-gradient-to-r from-red-50 to-red-100 rounded-xl border-2 border-red-200 shadow-lg">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-red-600 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" class="w-full pl-12 pr-4 py-4 border-2 border-red-300 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-red-400 text-base font-medium shadow-sm h-14">
                        <option value="">👤 Choose Family Member (Optional)</option>
                        <!-- Family members will be populated here via JavaScript -->
                    </select>
                    <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-red-500">
                        <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="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-shield-alt text-red-500 mr-2 text-xs"></i>
                        Full Name
                    </label>
                    <div class="relative">
                        <input type="text" id="guardian_full_name" name="guardian_full_name" 
                               class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                               placeholder="Enter guardian's full name">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            <i class="fas fa-shield-alt text-sm"></i>
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-id-card text-red-500 mr-2 text-xs"></i>
                        NRIC / Passport
                    </label>
                    <div class="relative">
                        <input type="text" id="guardian_ic" name="guardian_ic" 
                               class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                               placeholder="Enter NRIC or Passport number">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            <i class="fas fa-id-card text-sm"></i>
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-globe text-red-500 mr-2 text-xs"></i>
                        Nationality
                    </label>
                    <div class="relative">
                        <input type="text" id="guardian_nationality" name="guardian_nationality" 
                               class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                               placeholder="Enter nationality">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            <i class="fas fa-globe text-sm"></i>
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-heart text-red-500 mr-2 text-xs"></i>
                        Relationship
                    </label>
                    <div class="relative">
                        <input type="text" id="guardian_relationship" name="guardian_relationship" 
                               class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                               placeholder="Enter relationship">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            <i class="fas fa-heart text-sm"></i>
                        </div>
                    </div>
                </div>
                
                <div class="md:col-span-2 group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-home text-red-500 mr-2 text-xs"></i>
                        Address
                    </label>
                    <div class="relative">
                        <textarea id="guardian_address" name="guardian_address" rows="2" 
                                  class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md resize-none"
                                  placeholder="Enter full address"></textarea>
                        <div class="absolute left-3 top-3 text-gray-400">
                            <i class="fas fa-home text-sm"></i>
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-calendar text-red-500 mr-2 text-xs"></i>
                        DOB
                    </label>
                    <div class="relative">
                        <x-date-picker
                    name="guardian_dob"
                    class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 bg-gray-50 hover:bg-white group-hover:shadow-md"
                />
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            <i class="fas fa-calendar text-sm"></i>
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-envelope text-red-500 mr-2 text-xs"></i>
                        e-Mail
                    </label>
                    <div class="relative">
                        <input type="email" id="guardian_email" name="guardian_email" 
                               class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                               placeholder="Enter email address">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            <i class="fas fa-envelope text-sm"></i>
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-phone text-red-500 mr-2 text-xs"></i>
                        Tel No.
                    </label>
                    <div class="relative">
                        <input type="tel" id="guardian_phone" name="guardian_phone" 
                               class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none transition-all duration-300 text-gray-900 placeholder-gray-500 bg-gray-50 hover:bg-white group-hover:shadow-md"
                               placeholder="Enter phone number">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            <i class="fas fa-phone text-sm"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-8 flex justify-between">
            <a href="{{ route('client.dummy.will.type') }}" class="bg-gray-500 text-white px-6 py-2 rounded hover:bg-gray-600">
                Back
            </a>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded hover:bg-blue-700">
                Continue to Beneficiaries
            </button>
        </div>
    </form>
</div>
</div>

<script>
// Family member dropdown configuration
const dropdowns = [
    { id: 'familyMemberSelect', fields: ['testator_primary_full_name', 'testator_primary_ic', 'testator_primary_nationality', 'testator_primary_relationship', 'testator_primary_address', 'testator_primary_dob', 'testator_primary_email', 'testator_primary_phone'] },
    { id: 'secondaryFamilyMemberSelect', fields: ['testator_secondary_full_name', 'testator_secondary_ic', 'testator_secondary_nationality', 'testator_secondary_relationship', 'testator_secondary_address', 'testator_secondary_dob', 'testator_secondary_email', 'testator_secondary_phone'] },
    { id: 'executorFamilyMemberSelect', fields: ['executor_primary_full_name', 'executor_primary_ic', 'executor_primary_nationality', 'executor_primary_relationship', 'executor_primary_address', 'executor_primary_dob', 'executor_primary_email', 'executor_primary_phone'] },
    { id: 'guardianFamilyMemberSelect', fields: ['guardian_full_name', 'guardian_ic', 'guardian_nationality', 'guardian_relationship', 'guardian_address', 'guardian_dob', 'guardian_email', 'guardian_phone'] }
];

// Initialize all dropdowns
dropdowns.forEach(dropdown => {
    const select = document.getElementById(dropdown.id);
    if (select) {
        // Show loading state
        select.innerHTML = '<option value="">🔄 Loading family members...</option>';
    }
});

// Fetch family members from the database
async function fetchFamilyMembers() {
    try {
        const response = await fetch('/client/api/family-members', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            credentials: 'same-origin'
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const familyMembers = await response.json();
        
        // Populate all dropdowns
        dropdowns.forEach(dropdown => {
            const select = document.getElementById(dropdown.id);
            if (select) {
                // Clear existing options
                select.innerHTML = '<option value="">👤 Choose Family Member (Optional)</option>';
                
                if (familyMembers.length === 0) {
                    // Show no family members message
                    const option = document.createElement('option');
                    option.value = '';
                    option.textContent = '📭 No family members found in your profile';
                    option.disabled = true;
                    select.appendChild(option);
                } else {
                    // Add family members to dropdown
                    familyMembers.forEach(member => {
                        const option = document.createElement('option');
                        option.value = member.id;
                        option.textContent = `👨‍👩‍👧‍👦 ${member.name} (${member.relationship})`;
                        option.dataset.member = JSON.stringify(member);
                        select.appendChild(option);
                    });
                }
            }
        });
        
        console.log(`✅ Loaded ${familyMembers.length} family members for all dropdowns`);
        
    } catch (error) {
        console.error('❌ Error fetching family members:', error);
        
        // Show error in all dropdowns
        dropdowns.forEach(dropdown => {
            const select = document.getElementById(dropdown.id);
            if (select) {
                select.innerHTML = '<option value="">❌ Error loading family members</option>';
            }
        });
    }
}

// Add change event listeners to all dropdowns
dropdowns.forEach(dropdown => {
    const select = document.getElementById(dropdown.id);
    if (select) {
        select.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            
            if (selectedOption.value && selectedOption.dataset.member) {
                const member = JSON.parse(selectedOption.dataset.member);
                
                // Fill corresponding fields
                dropdown.fields.forEach((fieldId, index) => {
                    const field = document.getElementById(fieldId);
                    if (field) {
                        let value = '';
                        
                        // Map member data to field
                        if (fieldId.includes('full_name')) value = member.name || '';
                        else if (fieldId.includes('ic')) value = member.ic_number || '';
                        else if (fieldId.includes('nationality')) value = member.nationality || 'Malaysian';
                        else if (fieldId.includes('relationship')) value = member.relationship || '';
                        else if (fieldId.includes('address')) value = member.address || '';
                        else if (fieldId.includes('dob')) value = member.date_of_birth || '';
                        else if (fieldId.includes('email')) value = member.email || '';
                        else if (fieldId.includes('phone')) value = member.phone || '';
                        
                        field.value = value;
                        
                        // Add visual feedback with animation
                        setTimeout(() => {
                            field.classList.add('bg-green-100', 'border-green-400', 'shadow-md');
                            field.style.transform = 'scale(1.02)';
                            setTimeout(() => {
                                field.classList.remove('bg-green-100', 'border-green-400', 'shadow-md');
                                field.style.transform = 'scale(1)';
                            }, 1500);
                        }, index * 100);
                    }
                });
                
                // Show success notification
                showNotification('✅ Details filled successfully!', 'success');
                
            } else {
                // Clear all fields if no selection
                dropdown.fields.forEach(fieldId => {
                    const field = document.getElementById(fieldId);
                    if (field) {
                        field.value = '';
                    }
                });
            }
        });
    }
});

// Simple notification function
function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 ${
        type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'
    }`;
    notification.textContent = message;
    notification.style.transform = 'translateX(400px)';
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);
    
    setTimeout(() => {
        notification.style.transform = 'translateX(400px)';
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// Initialize family members on page load
document.addEventListener('DOMContentLoaded', function() {
    fetchFamilyMembers();
});

// Joint Partner Selection Functions
function searchPartner() {
    const email = document.getElementById('partner_email_search').value;
    const jointType = document.getElementById('joint_type_select').value;
    
    if (!email) {
        alert('Please enter partner email');
        return;
    }
    
    // Search for partner via AJAX
    fetch(`/api/search-partner?email=${email}`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.client) {
                // Show found partner
                const resultsDiv = document.getElementById('partner_search_results');
                resultsDiv.innerHTML = `
                    <div class="p-4 bg-green-50 border border-green-200 rounded-xl">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-check text-white"></i>
                                </div>
                                <div>
                                    <p class="font-semibold text-green-800">${data.client.full_name}</p>
                                    <p class="text-sm text-green-600">${data.client.email}</p>
                                </div>
                            </div>
                            <button type="button" onclick="selectPartner(${data.client.id}, '${jointType}')" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm">
                                Select
                            </button>
                        </div>
                    </div>
                `;
                resultsDiv.classList.remove('hidden');
            } else {
                // Partner not found - show manual entry option
                const resultsDiv = document.getElementById('partner_search_results');
                resultsDiv.innerHTML = `
                    <div class="p-4 bg-orange-50 border border-orange-200 rounded-xl">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-orange-600 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-user-plus text-white"></i>
                            </div>
                            <div>
                                <p class="font-semibold text-orange-800">Partner Not Found</p>
                                <p class="text-sm text-orange-600">No client found with this email. Enter details manually.</p>
                            </div>
                        </div>
                    </div>
                `;
                resultsDiv.classList.remove('hidden');
                manualPartnerMode();
            }
        })
        .catch(error => {
            console.error('Error searching partner:', error);
            alert('Error searching for partner. Please try again.');
        });
}

function manualPartnerMode() {
    document.getElementById('manual_partner_form').classList.remove('hidden');
    document.getElementById('manual_partner_form').scrollIntoView({ behavior: 'smooth' });
}

function cancelManualPartner() {
    document.getElementById('manual_partner_form').classList.add('hidden');
    document.getElementById('manual_partner_name').value = '';
    document.getElementById('manual_partner_ic').value = '';
    document.getElementById('manual_partner_email').value = '';
    document.getElementById('manual_partner_phone').value = '';
    document.getElementById('manual_partner_address').value = '';
}

function saveManualPartner() {
    const name = document.getElementById('manual_partner_name').value;
    const ic = document.getElementById('manual_partner_ic').value;
    const email = document.getElementById('manual_partner_email').value;
    const phone = document.getElementById('manual_partner_phone').value;
    const address = document.getElementById('manual_partner_address').value;
    const jointType = document.getElementById('joint_type_select').value;
    
    if (!name || !ic || !email || !phone || !address) {
        alert('Please fill all required fields');
        return;
    }
    
    // Save partner via AJAX
    fetch('/api/save-manual-partner', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            full_name: name,
            ic_number: ic,
            email: email,
            phone: phone,
            address: address,
            joint_type: jointType
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Fill secondary testator fields
            document.getElementById('testator_secondary_full_name').value = name;
            document.getElementById('testator_secondary_ic').value = ic;
            document.getElementById('testator_secondary_email').value = email;
            document.getElementById('testator_secondary_phone').value = phone;
            document.getElementById('testator_secondary_address').value = address;
            
            // Show success message and hide selection form
            document.getElementById('manual_partner_form').classList.add('hidden');
            document.querySelector('.mb-8 > div:nth-child(2)').classList.add('hidden'); // Hide partner selection
            
            // Show partner banner
            const bannerHtml = `
                <div class="mb-6 p-4 bg-gradient-to-r from-purple-600 to-purple-800 rounded-xl shadow-lg text-white">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-heart text-white text-xl"></i>
                        </div>
                        <div>
                            <p class="text-sm text-purple-200">Joint Will With</p>
                            <h5 class="text-lg font-bold">${name}</h5>
                            <p class="text-sm text-purple-200">${jointType} • ${email}</p>
                        </div>
                    </div>
                </div>
            `;
            document.querySelector('.mb-8').insertAdjacentHTML('afterbegin', bannerHtml);
            
            alert('Partner saved successfully!');
        } else {
            alert('Error saving partner: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error saving partner:', error);
        alert('Error saving partner. Please try again.');
    });
}

function selectPartner(partnerId, jointType) {
    // Fetch partner details and fill form
    fetch(`/api/get-partner/${partnerId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.client) {
                const partner = data.client;
                
                // Fill secondary testator fields
                document.getElementById('testator_secondary_full_name').value = partner.full_name || '';
                document.getElementById('testator_secondary_ic').value = partner.ic_number || '';
                document.getElementById('testator_secondary_email').value = partner.email || '';
                document.getElementById('testator_secondary_phone').value = partner.phone || '';
                document.getElementById('testator_secondary_address').value = partner.address || '';
                
                // Hide selection form
                document.querySelector('.mb-8 > div:nth-child(2)').classList.add('hidden');
                
                // Show partner banner
                const bannerHtml = `
                    <div class="mb-6 p-4 bg-gradient-to-r from-purple-600 to-purple-800 rounded-xl shadow-lg text-white">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-heart text-white text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm text-purple-200">Joint Will With</p>
                                <h5 class="text-lg font-bold">${partner.full_name || 'Partner'}</h5>
                                <p class="text-sm text-purple-200">${jointType} • ${partner.email}</p>
                            </div>
                        </div>
                    </div>
                `;
                document.querySelector('.mb-8').insertAdjacentHTML('afterbegin', bannerHtml);
            }
        })
        .catch(error => {
            console.error('Error fetching partner:', error);
        });
}

function changePartner() {
    // Reload page to reset partner selection
    location.reload();
}
</script>
@endsection