@extends('layouts.portal')

@section('title', 'Create Your Will')
@section('page_title', 'Will Creation Form')
@section('page_subtitle', 'Complete your will details step by step')

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

@section('content')
    <!-- Progress Steps -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full octowill-bg flex items-center justify-center text-white font-bold">1</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Testator Details</p>
                    <p class="text-xs text-gray-500">Current step</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-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">2</div>
                <div class="ml-3">
                    <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-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">3</div>
                <div class="ml-3">
                    <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-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">4</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Review</p>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ route('client.will.store') }}" method="POST" class="bg-white rounded-xl shadow-lg border border-gray-100 p-8">
        @csrf
        <input type="hidden" name="will_type" value="{{ $type }}">
        
        <!-- 1️⃣ Primary Testator / Grantor -->
        <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-blue-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">1</span>
                    Primary Testator / Grantor
                </h4>
                <p class="text-sm text-gray-600 mt-1 ml-11">Person who is making the will</p>
            </div>
            
            <!-- Family Member Selection -->
            <div class="mb-6 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border-2 border-blue-200 shadow-lg">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center mr-3">
                        1
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-800">Quick Fill - Select Family Member</p>
                    </div>
                </div>
                <div class="relative">
                    <select id="familyMemberSelect" class="w-full pl-12 pr-4 py-4 border-2 border-blue-300 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-blue-400 text-base font-medium shadow-sm">
                        <option value="">👤 Choose Family Member (Optional)</option>
                        <!-- Family members will be populated here via JavaScript -->
                    </select>
                </div>
                <div class="mt-3 flex items-center text-xs text-gray-500">
                    <span class="mr-1">Info</span>
                    <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">
                        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 
                               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 full name">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            User
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        NRIC / Passport <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="text" id="testator_primary_ic" name="testator_primary_ic" 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 NRIC or Passport number">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            ID
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        Nationality
                    </label>
                    <div class="relative">
                        <input type="text" id="testator_primary_nationality" name="testator_primary_nationality" 
                               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 nationality">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            Globe
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        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">
                            Heart
                        </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">
                        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">
                            Home
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        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">
                            Calendar
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        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">
                            Email
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        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">
                            Phone
                        </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">
                    <span class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">2</span>
                    Secondary Testator
                </h4>
                <p class="text-sm text-gray-600 mt-1 ml-11">For Joint / Mutual Will only</p>
            </div>
            
            <!-- Family Member Selection -->
            <div class="mb-6 p-6 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border-2 border-purple-200 shadow-lg">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-purple-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-purple-300 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-purple-400 text-base font-medium shadow-sm">
                        <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-purple-500">
                        <span class="text-lg">👤</span>
                    </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">
                        <span class="mr-2 text-purple-500">👤</span>
                        Full Name
                    </label>
                    <div class="relative">
                        <input type="text" id="testator_secondary_full_name" name="testator_secondary_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">
                        <span class="mr-2 text-purple-500">🆔</span>
                        NRIC / Passport
                    </label>
                    <div class="relative">
                        <input type="text" id="testator_secondary_ic" name="testator_secondary_ic" 
                               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">
                            🆔
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <span class="mr-2 text-purple-500">🌍</span>
                        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">
                            🌍
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <span class="mr-2 text-purple-500">❤️</span>
                        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">
                            ❤️
                        </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">
                        <span class="mr-2 text-purple-500">🏠</span>
                        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">
                            🏠
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <span class="mr-2 text-purple-500">📅</span>
                        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 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">
                            📅
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        <span class="mr-2 text-purple-500">✉</span>
                        e-Mail
                    </label>
                    <div class="relative">
                        <input type="email" id="testator_secondary_email" name="testator_secondary_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">
                        <span class="mr-2 text-purple-500">📞</span>
                        Tel No.
                    </label>
                    <div class="relative">
                        <input type="tel" id="testator_secondary_phone" name="testator_secondary_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>
        </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-green-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-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-green-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-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">
                        <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-green-500">
                        <span class="text-lg">👤</span>
                    </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">
                        <span class="mr-2 text-green-500">👤</span>
                        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-green-500 focus:ring-4 focus:ring-green-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">
                        🆔
                        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-green-500 focus:ring-4 focus:ring-green-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">
                            🆔
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        🌍
                        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-green-500 focus:ring-4 focus:ring-green-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">
                            🌍
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        ❤️
                        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-green-500 focus:ring-4 focus:ring-green-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">
                            ❤️
                        </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">
                        🏠
                        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-green-500 focus:ring-4 focus:ring-green-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">
                            🏠
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        📅
                        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-green-500 focus:ring-4 focus:ring-green-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">
                            📅
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        ✉
                        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-green-500 focus:ring-4 focus:ring-green-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">
                            ✉
                        </div>
                    </div>
                </div>
                
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                        📞
                        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-green-500 focus:ring-4 focus:ring-green-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">
                            📞
                        </div>
                    </div>
                </div>
            </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-orange-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-orange-50 to-amber-50 rounded-xl border-2 border-orange-200 shadow-lg">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-orange-600 rounded-full flex items-center justify-center mr-3">
                        👥
                    </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-orange-300 rounded-xl focus:border-orange-500 focus:ring-4 focus:ring-orange-100 outline-none transition-all duration-300 text-gray-900 bg-white hover:border-orange-400 text-base font-medium shadow-sm">
                        <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-orange-500">
                        👤
                    </div>
                </div>
                <div class="mt-3 flex items-center text-xs text-gray-500">
                    🤔
                    <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-orange-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-orange-500 focus:ring-4 focus:ring-orange-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-orange-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-orange-500 focus:ring-4 focus:ring-orange-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-orange-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-orange-500 focus:ring-4 focus:ring-orange-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-orange-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-orange-500 focus:ring-4 focus:ring-orange-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-orange-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-orange-500 focus:ring-4 focus:ring-orange-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-orange-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-orange-500 focus:ring-4 focus:ring-orange-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-orange-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-orange-500 focus:ring-4 focus:ring-orange-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-orange-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-orange-500 focus:ring-4 focus:ring-orange-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>
        
        <!-- Submit Button -->
        <div class="flex justify-between">
            <a href="{{ route('client.will.type') }}" class="px-8 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium">
                <i class="fas fa-arrow-left mr-2"></i> Back
            </a>
            <button type="submit" class="px-8 py-3 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-lg font-medium hover:from-red-700 hover:to-red-800 inline-flex items-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300">
                <i class="fas fa-arrow-right mr-2"></i> Continue to Beneficiaries
            </button>
        </div>
    </form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // All dropdown selectors
    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 the 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);
    }
    
    // Load family members on page load
    fetchFamilyMembers();
});
</script>
@endpush