@extends('layouts.portal')

@section('title', 'Create Client')
@section('page_title', 'Add New Client')
@section('page_subtitle', 'Create new client account')

@section('sidebar')
    <ul class="space-y-1">
        <li>
            <a href="{{ route('admin.dashboard') }}" class="sidebar-item flex items-center p-3 text-gray-300 hover:text-white">
                <i class="fas fa-tachometer-alt w-5 mr-3 text-center"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="pt-4 pb-2">
            <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Client Management</p>
        </li>
        <li>
            <a href="{{ route('admin.clients') }}" class="sidebar-item active flex items-center p-3 text-white">
                <i class="fas fa-users w-5 mr-3 text-center"></i>
                <span>All Clients</span>
            </a>
        </li>
    </ul>
@endsection

@section('content')
    <div class="min-h-screen bg-gray-50 py-4">
        <!-- Agent Referral Approval Banner -->
        @if(session('agent_client_data'))
        <div class="mb-6 p-4 bg-orange-50 border-l-4 border-orange-500 rounded-lg">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-semibold text-orange-800 mb-2">Agent Referral Approval</h2>
                    <p class="text-orange-600">Completing client profile for agent-referred client</p>
                    <div class="mt-3 flex items-center text-sm">
                        <i class="fas fa-user-tie text-orange-500 mr-2"></i>
                        <span class="font-medium">Agent: {{ session('agent_client_data.referred_by') ? App\Models\User::find(session('agent_client_data.referred_by'))->name : 'Unknown Agent' }}</span>
                        <span class="mx-2">•</span>
                        <span class="text-orange-600">Client: {{ session('agent_client_data.first_name') }}</span>
                    </div>
                </div>
                <div class="text-right">
                    <a href="{{ route('admin.clients') }}" class="text-orange-500 hover:text-orange-700 transition-colors">
                        <i class="fas fa-times mr-2"></i>Cancel
                    </a>
                </div>
            </div>
        </div>
        @else
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800">Create New Client</h1>
                    <p class="text-gray-500 mt-1">Add a new client to the system</p>
                </div>
                <a href="{{ route('admin.clients') }}" class="text-gray-500 hover:text-gray-700 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Clients
                </a>
            </div>
        </div>
        @endif

        <form action="{{ route('admin.clients.store') }}" method="POST" class="bg-white rounded-2xl shadow-xl overflow-hidden card-container" id="clientForm">
            @csrf
            @if(session('agent_client_data'))
                <input type="hidden" name="agent_client_id" value="{{ session('agent_client_data.agent_client_id') }}">
                <input type="hidden" name="referred_by" value="{{ session('agent_client_data.referred_by') }}">
            @endif
            
            <!-- Laravel Validation Errors -->
            @if(session('error'))
                <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded error-box">
                    <strong>Error:</strong> {{ session('error') }}
                </div>
            @endif
            
            <!-- Success Message -->
            @if(session('success'))
                <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded success-box">
                    <strong>Success:</strong> {{ session('success') }}
                </div>
            @endif
            
            <!-- Error Display Section -->
            <div id="error-container" class="hidden mb-6">
                <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-lg">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-red-500 text-xl"></i>
                        </div>
                        <div class="ml-3 flex-1">
                            <h3 class="text-sm font-medium text-red-800">Client Creation Failed</h3>
                            <div id="error-messages" class="mt-2 text-sm text-red-700">
                                <!-- Error messages will be displayed here -->
                            </div>
                        </div>
                        <div class="ml-4">
                            <button type="button" onclick="hideErrors()" class="text-red-500 hover:text-red-700">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Success Display Section -->
            <div id="success-container" class="hidden mb-6">
                <div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-lg">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-green-500 text-xl"></i>
                        </div>
                        <div class="ml-3 flex-1">
                            <h3 class="text-sm font-medium text-green-800">Success!</h3>
                            <div class="mt-2 text-sm text-green-700">
                                Client created successfully! Redirecting...
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Enhanced Tab Navigation -->
            <div class="bg-white/80 backdrop-blur-sm border-b border-gray-200/50">
                <div class="flex px-2">
                    <button type="button" onclick="showTab('personal')" id="personal-tab" class="flex-1 px-4 py-4 text-center transition-all duration-300 hover:bg-red-50 relative group">
                        <div class="flex flex-col items-center space-y-1">
                            <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center transition-all duration-300 group-hover:bg-red-200 group-hover:scale-110">
                                <i class="fas fa-user text-red-600 text-sm"></i>
                            </div>
                            <span class="text-xs font-medium text-red-600">Personal</span>
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-red-600 transition-all duration-300" id="personal-indicator"></div>
                        </div>
                    </button>
                    <button type="button" onclick="showTab('contact')" id="contact-tab" class="flex-1 px-4 py-4 text-center transition-all duration-300 hover:bg-green-50 relative group">
                        <div class="flex flex-col items-center space-y-1">
                            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center transition-all duration-300 group-hover:bg-green-200 group-hover:scale-110">
                                <i class="fas fa-phone text-green-600 text-sm"></i>
                            </div>
                            <span class="text-xs font-medium text-gray-500">Contact</span>
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-green-600 transition-all duration-300" id="contact-indicator"></div>
                        </div>
                    </button>
                    <button type="button" onclick="showTab('emergency')" id="emergency-tab" class="flex-1 px-4 py-4 text-center transition-all duration-300 hover:bg-orange-50 relative group">
                        <div class="flex flex-col items-center space-y-1">
                            <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center transition-all duration-300 group-hover:bg-orange-200 group-hover:scale-110">
                                <i class="fas fa-exclamation-triangle text-orange-600 text-sm"></i>
                            </div>
                            <span class="text-xs font-medium text-gray-500">Emergency</span>
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-orange-600 transition-all duration-300" id="emergency-indicator"></div>
                        </div>
                    </button>
                    <button type="button" onclick="showTab('account')" id="account-tab" class="flex-1 px-4 py-4 text-center transition-all duration-300 hover:bg-purple-50 relative group">
                        <div class="flex flex-col items-center space-y-1">
                            <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center transition-all duration-300 group-hover:bg-purple-200 group-hover:scale-110">
                                <i class="fas fa-cog text-purple-600 text-sm"></i>
                            </div>
                            <span class="text-xs font-medium text-gray-500">Account</span>
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-purple-600 transition-all duration-300" id="account-indicator"></div>
                        </div>
                    </button>
                    <button type="button" onclick="showTab('joint')" id="joint-tab" class="flex-1 px-4 py-4 text-center transition-all duration-300 hover:bg-teal-50 relative group">
                        <div class="flex flex-col items-center space-y-1">
                            <div class="w-8 h-8 bg-teal-100 rounded-full flex items-center justify-center transition-all duration-300 group-hover:bg-teal-200 group-hover:scale-110">
                                <i class="fas fa-users text-teal-600 text-sm"></i>
                            </div>
                            <span class="text-xs font-medium text-gray-500">Joint Will</span>
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-teal-600 transition-all duration-300" id="joint-indicator"></div>
                        </div>
                    </button>
                </div>
            </div>

            <!-- Progress Steps -->
            <div class="bg-gray-50 px-6 py-3 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                        <span class="text-sm font-medium text-gray-600">Step <span id="current-step-num">1</span> of 5:</span>
                        <span id="current-step-name" class="text-sm font-bold text-red-600">Personal Information</span>
                    </div>
                    <div class="text-xs text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i>
                        Complete all steps to create client
                    </div>
                </div>
                <div class="mt-2 w-full bg-gray-200 rounded-full h-2">
                    <div id="progress-bar" class="bg-red-600 h-2 rounded-full transition-all duration-300" style="width: 20%"></div>
                </div>
            </div>

            <!-- Tab Content -->
            <div class="p-6">
                <!-- Personal Information Tab -->
                <div id="personal-content" class="tab-content">
                    <div class="bg-white rounded-xl p-4 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-user text-red-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Personal Information</h3>
                                <p class="text-sm text-gray-600">Basic client details and identification</p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <!-- Full Name as per Legal ID (replaces First Name, Last Name, A/L, A/P) -->
                            <div class="group md:col-span-2">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-user text-red-500 mr-2"></i>
                                    Full Name as per Legal ID <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" name="legal_full_name" required 
                                           class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                           placeholder="Enter full name exactly as shown on your ID"
                                           value="{{ old('legal_full_name') ?? session('agent_client_data.legal_full_name') }}">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-user-edit"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">Include any titles, suffixes, or parent references (e.g., 'John Abdullah', 'Jane A/P Fatima')</p>
                            </div>
                            
                            <!-- Date of Birth -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-calendar text-red-500 mr-2"></i>
                                    Date of Birth
                                </label>
                                <div class="relative">
                                    <x-date-picker
                    name="date_of_birth"
                    max-date="{{ date("
                    class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 form-input"
                />
                                </div>
                            </div>
                            
                            <!-- Occupation -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-briefcase text-red-500 mr-2"></i>
                                    Occupation
                                </label>
                                <div class="relative">
                                    <input type="text" name="occupation" 
                                           class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                           placeholder="Client's occupation"
                                           value="{{ old('occupation') }}">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-building"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Country -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-globe text-red-500 mr-2"></i>
                                    Country <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" id="country-search" required 
                                           class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                           placeholder="Type to search country..."
                                           oninput="searchCountries()"
                                           onfocus="showCountryDropdown()"
                                           onclick="showCountryDropdown()">
                                    <input type="hidden" name="country" id="country" required>
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                        <i class="fas fa-search"></i>
                                    </div>
                                    
                                    <!-- Custom Dropdown -->
                                    <div id="country-dropdown" class="absolute top-full left-0 right-0 mt-1 bg-white border-2 border-gray-200 rounded-xl shadow-lg max-h-40 overflow-y-auto hidden z-50">
                                        <div id="country-options" class="py-1">
                                            <!-- Countries will be populated here -->
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Identification Type -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-id-badge text-red-500 mr-2"></i>
                                    Identification Type <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <select name="identification_type" id="identification_type" required 
                                            class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900 form-select"
                                            onchange="updateIdentificationPlaceholder()">
                                        <option value="">Select country first</option>
                                    </select>
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                        <i class="fas fa-chevron-down"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1 flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    <span id="identification-help">Select country and identification type first</span>
                                </p>
                            </div>

                            <!-- Identification Number -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-id-card text-red-500 mr-2"></i>
                                    <span id="identification-label">Identification Number</span> <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" name="identification_number" id="identification_number" required 
                                           class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md font-mono text-gray-900 placeholder-gray-500 form-input"
                                           placeholder="Select country and type first"
                                           value="{{ old('identification_number') ?? session('agent_client_data.ic_number') }}"
                                           oninput="validateIdentificationNumber(); autoFillPassword()">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-id-card-alt"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1 flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    <span id="identification-help">Select country and identification type first</span>
                                </p>
                            </div>

                            <!-- Account Status -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-toggle-on text-red-500 mr-2"></i>
                                    Account Status <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <select name="status" required 
                                            class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900 form-select">
                                        <option value="">Select status</option>
                                        <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>✅ Active</option>
                                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>⏸️ Inactive</option>
                                    </select>
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                        <i class="fas fa-chevron-down"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Address -->
                            <div class="md:col-span-2 group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-map-marker-alt text-red-500 mr-2"></i>
                                    Residential Address <span class="text-red-500">*</span>
                                </label>
                                <div class="bg-gray-50 p-4 rounded-xl border-2 border-gray-200 admin-client-create-address-container">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        <div class="md:col-span-2">
                                            <input type="text" name="address_line_1" placeholder="Address Line 1 *"
                                                   class="admin-client-create-addr-1 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-100 outline-none transition-all bg-white text-sm"
                                                   value="{{ old('address_line_1') }}">
                                        </div>
                                        <div class="md:col-span-2">
                                            <input type="text" name="address_line_2" placeholder="Address Line 2 (Optional)"
                                                   class="admin-client-create-addr-2 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-100 outline-none transition-all bg-white text-sm"
                                                   value="{{ old('address_line_2') }}">
                                        </div>
                                        <div>
                                            <input type="text" name="city" placeholder="City *"
                                                   class="admin-client-create-city w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-100 outline-none transition-all bg-white text-sm"
                                                   value="{{ old('city') }}">
                                        </div>
                                        <div>
                                            <input type="text" name="state" placeholder="State *"
                                                   class="admin-client-create-state w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-100 outline-none transition-all bg-white text-sm"
                                                   value="{{ old('state') }}">
                                        </div>
                                        <div>
                                            <input type="text" name="postal_code" placeholder="Postal Code *"
                                                   class="admin-client-create-postal w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-100 outline-none transition-all bg-white text-sm"
                                                   value="{{ old('postal_code') }}">
                                        </div>
                                        <div>
                                            <input type="text" name="country" placeholder="Country *" value="Malaysia"
                                                   class="admin-client-create-country w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-100 outline-none transition-all bg-white text-sm"
                                                   value="{{ old('country', 'Malaysia') }}">
                                        </div>
                                    </div>
                                    <textarea name="address" rows="2" readonly
                                              class="admin-client-create-merged w-full mt-3 px-3 py-2 border-2 border-gray-200 rounded-lg bg-gray-100 text-gray-600 text-sm resize-none"
                                              placeholder="Complete address will appear here...">{{ old('address') ?? session('agent_client_data.address') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Details Tab -->
                <div id="contact-content" class="tab-content hidden">
                    <div class="bg-white rounded-xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300">
                        <div class="flex items-center mb-6">
                            <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-phone text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Contact Information</h3>
                                <p class="text-sm text-gray-600">Communication details and preferences</p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <!-- Email -->
                            <div class="md:col-span-2 group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-envelope text-green-500 mr-2"></i>
                                    Email Address <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="email" name="email" required 
                                           class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                           placeholder="email@domain.com"
                                           value="{{ old('email') ?? session('agent_client_data.email') }}">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-at"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Phone -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-mobile-alt text-green-500 mr-2"></i>
                                    Phone Number <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="tel" name="phone" id="phone" required 
                                           class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md form-input"
                                           placeholder="Enter phone number"
                                           value="{{ old('phone') ?? session('agent_client_data.phone') }}"
                                           oninput="validatePhoneNumber()">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-phone"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1 flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    <span id="phone-help">Phone number format depends on selected country</span>
                                </p>
                            </div>
                            
                            <!-- Alternative Phone -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-phone-square text-green-500 mr-2"></i>
                                    Alternative Phone
                                </label>
                                <div class="relative">
                                    <input type="tel" name="alternative_phone" 
                                           class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md form-input"
                                           placeholder="+60XX-XXXX-XXXX"
                                           value="{{ old('alternative_phone') }}">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-phone-alt"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Preferred Contact Method -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-comments text-green-500 mr-2"></i>
                                    Preferred Contact Method
                                </label>
                                <div class="relative">
                                    <select name="preferred_contact" class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900 form-select">
                                        <option value="phone" {{ old('preferred_contact') == 'phone' ? 'selected' : '' }}>📱 Phone</option>
                                        <option value="email" {{ old('preferred_contact') == 'email' ? 'selected' : '' }}>📧 Email</option>
                                        <option value="both" {{ old('preferred_contact') == 'both' ? 'selected' : '' }}>💬 Both</option>
                                    </select>
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                        <i class="fas fa-chevron-down"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Emergency Contact Tab -->
                <div id="emergency-content" class="tab-content hidden">
                    <div class="bg-white rounded-xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300">
                        <div class="flex items-center mb-6">
                            <div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-exclamation-triangle text-orange-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Emergency Contact</h3>
                                <p class="text-sm text-gray-600">Emergency contact information</p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <!-- Emergency Contact Name -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-user-friends text-orange-500 mr-2"></i>
                                    Emergency Contact Name <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" name="emergency_contact_name" required 
                                           class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                           placeholder="Full name"
                                           value="{{ old('emergency_contact_name') }}">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-user"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Emergency Contact Phone -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-phone text-orange-500 mr-2"></i>
                                    Emergency Contact Phone <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="tel" name="emergency_contact_phone" required 
                                           class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md form-input"
                                           placeholder="+60XX-XXXX-XXXX"
                                           value="{{ old('emergency_contact_phone') }}">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-phone-alt"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Relationship -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-heart text-orange-500 mr-2"></i>
                                    Relationship
                                </label>
                                <div class="relative">
                                    <select name="emergency_relationship" class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900 form-select">
                                        <option value="">Select relationship</option>
                                        <option value="spouse" {{ old('emergency_relationship') == 'spouse' ? 'selected' : '' }}>💍 Spouse</option>
                                        <option value="parent" {{ old('emergency_relationship') == 'parent' ? 'selected' : '' }}>👨‍👩‍👧 Parent</option>
                                        <option value="sibling" {{ old('emergency_relationship') == 'sibling' ? 'selected' : '' }}>👫 Sibling</option>
                                        <option value="friend" {{ old('emergency_relationship') == 'friend' ? 'selected' : '' }}>🤝 Friend</option>
                                        <option value="other" {{ old('emergency_relationship') == 'other' ? 'selected' : '' }}>❓ Other</option>
                                    </select>
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                        <i class="fas fa-chevron-down"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Emergency Email -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-envelope-open text-orange-500 mr-2"></i>
                                    Emergency Email
                                </label>
                                <div class="relative">
                                    <input type="email" name="emergency_email" 
                                           class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                           placeholder="emergency@domain.com"
                                           value="{{ old('emergency_email') }}">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-at"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Account Settings Tab -->
                <div id="account-content" class="tab-content hidden">
                    <div class="bg-white rounded-xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300">
                        <div class="flex items-center mb-6">
                            <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-cog text-purple-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Account Settings</h3>
                                <p class="text-sm text-gray-600">Security and communication preferences</p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <!-- Password -->
                            <div class="md:col-span-2 group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-lock text-purple-500 mr-2"></i>
                                    Password <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" name="password" id="password" required 
                                           class="w-full pl-4 pr-16 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 font-mono form-input"
                                           placeholder="Auto-filled with ID number" readonly>
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex gap-2">
                                        <button type="button" onclick="togglePasswordEdit()" class="text-gray-400 hover:text-purple-600 transition-colors" title="Toggle edit mode">
                                            <i class="fas fa-edit" id="password-edit-icon"></i>
                                        </button>
                                        <button type="button" onclick="togglePasswordVisibility()" class="text-gray-400 hover:text-purple-600 transition-colors" title="Show/Hide password">
                                            <i class="fas fa-eye-slash" id="password-visibility-icon"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1 flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    <span id="password-help-text">Password automatically set to your ID number. Click edit icon to modify.</span>
                                </p>
                            </div>
                            
                            <!-- Account Type -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-crown text-purple-500 mr-2"></i>
                                    Account Type
                                </label>
                                <div class="relative">
                                    <select name="account_type" class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900 form-select">
                                        <option value="basic" {{ old('account_type') == 'basic' ? 'selected' : (session('agent_client_data.account_type') == 'basic' ? 'selected' : '') }}>⭐ Basic</option>
                                        <option value="premium" {{ old('account_type') == 'premium' ? 'selected' : (session('agent_client_data.account_type') == 'premium' ? 'selected' : '') }}>💎 Premium</option>
                                        <option value="vip" {{ old('account_type') == 'vip' ? 'selected' : (session('agent_client_data.account_type') == 'vip' ? 'selected' : '') }}>👑 VIP</option>
                                    </select>
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                        <i class="fas fa-chevron-down"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Assigned Staff -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-user-tie text-blue-500 mr-2"></i>
                                    Assigned Staff
                                </label>
                                <div class="relative">
                                    <select name="assigned_staff_id" class="w-full pl-4 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-sm bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900 form-select">
                                        <option value="">👥 Select Staff Member (Optional)</option>
                                        @foreach(App\Models\User::where('role', 'staff')->get() as $staff)
                                            <option value="{{ $staff->id }}" {{ old('assigned_staff_id') == $staff->id ? 'selected' : '' }}>{{ $staff->name }} ({{ $staff->email }})</option>
                                        @endforeach
                                    </select>
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                        <i class="fas fa-chevron-down"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">Select the staff member who will handle this client</p>
                            </div>
                            
                            <!-- Communication Preferences -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                    <i class="fas fa-bell text-purple-500 mr-2"></i>
                                    Communication Preferences
                                </label>
                                <div class="space-y-3 bg-gray-50 p-4 rounded-xl border-2 border-gray-200">
                                    <label class="flex items-center cursor-pointer group">
                                        <input type="checkbox" name="email_notifications" class="mr-3 rounded text-purple-600 focus:ring-purple-500 group-hover:scale-110 transition-transform" checked>
                                        <div class="flex items-center">
                                            <i class="fas fa-envelope mr-2 text-purple-500"></i>
                                            <span class="text-sm text-gray-700">Email notifications</span>
                                        </div>
                                    </label>
                                    <label class="flex items-center cursor-pointer group">
                                        <input type="checkbox" name="sms_notifications" class="mr-3 rounded text-purple-600 focus:ring-purple-500 group-hover:scale-110 transition-transform">
                                        <div class="flex items-center">
                                            <i class="fas fa-sms mr-2 text-purple-500"></i>
                                            <span class="text-sm text-gray-700">SMS notifications</span>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Joint Will Tab -->
                <div id="joint-content" class="tab-content hidden">
                    <div class="bg-white rounded-xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300">
                        <div class="flex items-center mb-6">
                            <div class="w-10 h-10 bg-teal-100 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-users text-teal-600"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Joint Will Information</h3>
                                <p class="text-sm text-gray-600">Add joint will partner details (optional)</p>
                            </div>
                        </div>

                        <!-- Joint Will Toggle -->
                        <div class="mb-6 p-4 bg-gray-50 rounded-xl border-2 border-gray-200">
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" name="is_joint_will" id="is_joint_will" class="mr-3 w-5 h-5 rounded text-teal-600 focus:ring-teal-500" onchange="toggleJointWillFields()">
                                <div class="flex items-center">
                                    <i class="fas fa-file-signature mr-2 text-teal-500"></i>
                                    <span class="text-sm font-semibold text-gray-700">This client wants to create a joint will</span>
                                </div>
                            </label>
                        </div>

                        <!-- Joint Will Fields (hidden by default) -->
                        <div id="joint-will-fields" class="hidden">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                <!-- Joint Person Name -->
                                <div class="group">
                                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                        <i class="fas fa-user text-teal-500 mr-2"></i>
                                        Joint Person Name
                                    </label>
                                    <div class="relative">
                                        <input type="text" name="joint_person_name"
                                               class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                               placeholder="Full name"
                                               value="{{ old('joint_person_name') }}">
                                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                            <i class="fas fa-user-edit"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Joint Person IC Number -->
                                <div class="group">
                                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                        <i class="fas fa-id-card text-teal-500 mr-2"></i>
                                        Joint Person IC Number
                                    </label>
                                    <div class="relative">
                                        <input type="text" name="joint_person_ic_number"
                                               class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md font-mono text-gray-900 placeholder-gray-500 form-input"
                                               placeholder="e.g., 123456-78-9012"
                                               value="{{ old('joint_person_ic_number') }}">
                                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                            <i class="fas fa-id-card-alt"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Joint Person Address -->
                                <div class="md:col-span-2 group">
                                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                        <i class="fas fa-map-marker-alt text-teal-500 mr-2"></i>
                                        Joint Person Address
                                    </label>
                                    <div class="relative">
                                        <textarea name="joint_person_address" rows="3"
                                                  class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md resize-none text-gray-900 placeholder-gray-500 form-textarea"
                                                  placeholder="Enter full address">{{ old('joint_person_address') }}</textarea>
                                        <div class="absolute right-3 top-3 text-gray-400">
                                            <i class="fas fa-home"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Joint Person Marital Status -->
                                <div class="group">
                                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                        <i class="fas fa-heart text-teal-500 mr-2"></i>
                                        Joint Person Marital Status
                                    </label>
                                    <div class="relative">
                                        <select name="joint_person_marital_status" onchange="toggleJointSpouseFields()"
                                                class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900 form-select">
                                            <option value="">Select status</option>
                                            <option value="single" {{ old('joint_person_marital_status') == 'single' ? 'selected' : '' }}>Single</option>
                                            <option value="married" {{ old('joint_person_marital_status') == 'married' ? 'selected' : '' }}>Married</option>
                                            <option value="divorced" {{ old('joint_person_marital_status') == 'divorced' ? 'selected' : '' }}>Divorced</option>
                                            <option value="widowed" {{ old('joint_person_marital_status') == 'widowed' ? 'selected' : '' }}>Widowed</option>
                                        </select>
                                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                            <i class="fas fa-chevron-down"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Joint Person Email -->
                                <div class="group">
                                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                        <i class="fas fa-envelope text-teal-500 mr-2"></i>
                                        Joint Person Email
                                    </label>
                                    <div class="relative">
                                        <input type="email" name="joint_person_email"
                                               class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                               placeholder="email@domain.com"
                                               value="{{ old('joint_person_email') }}">
                                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                            <i class="fas fa-at"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Joint Person Phone -->
                                <div class="group">
                                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                        <i class="fas fa-phone text-teal-500 mr-2"></i>
                                        Joint Person Phone
                                    </label>
                                    <div class="relative">
                                        <input type="tel" name="joint_person_phone"
                                               class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                               placeholder="+60XX-XXXX-XXXX"
                                               value="{{ old('joint_person_phone') }}">
                                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                            <i class="fas fa-phone-alt"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Spouse Details (shown only if married) -->
                            <div id="joint-spouse-fields" class="hidden mt-6 pt-6 border-t-2 border-gray-200">
                                <h4 class="text-md font-bold text-gray-800 mb-4 flex items-center">
                                    <i class="fas fa-user-friends text-teal-500 mr-2"></i>
                                    Spouse Details
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                    <!-- Spouse Name -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                            <i class="fas fa-user text-teal-500 mr-2"></i>
                                            Spouse Name
                                        </label>
                                        <div class="relative">
                                            <input type="text" name="joint_spouse_name"
                                                   class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                                   placeholder="Full name"
                                                   value="{{ old('joint_spouse_name') }}">
                                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                                <i class="fas fa-user-edit"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Spouse IC Number -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                            <i class="fas fa-id-card text-teal-500 mr-2"></i>
                                            Spouse IC Number
                                        </label>
                                        <div class="relative">
                                            <input type="text" name="joint_spouse_ic_number"
                                                   class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md font-mono text-gray-900 placeholder-gray-500 form-input"
                                                   placeholder="e.g., 123456-78-9012"
                                                   value="{{ old('joint_spouse_ic_number') }}">
                                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                                <i class="fas fa-id-card-alt"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Spouse Phone -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                            <i class="fas fa-phone text-teal-500 mr-2"></i>
                                            Spouse Phone
                                        </label>
                                        <div class="relative">
                                            <input type="tel" name="joint_spouse_phone" id="joint_spouse_phone"
                                                   class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                                   placeholder="Phone number"
                                                   value="{{ old('joint_spouse_phone') }}">
                                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                                <i class="fas fa-mobile-alt"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Spouse Email -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                            <i class="fas fa-envelope text-teal-500 mr-2"></i>
                                            Spouse Email
                                        </label>
                                        <div class="relative">
                                            <input type="email" name="joint_spouse_email" id="joint_spouse_email"
                                                   class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                                   placeholder="Email address"
                                                   value="{{ old('joint_spouse_email') }}">
                                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                                <i class="fas fa-envelope-open"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Spouse Salary -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                            <i class="fas fa-dollar-sign text-teal-500 mr-2"></i>
                                            Spouse Salary
                                        </label>
                                        <div class="relative">
                                            <input type="number" name="joint_spouse_salary" step="0.01"
                                                   class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-500 form-input"
                                                   placeholder="0.00"
                                                   value="{{ old('joint_spouse_salary') }}">
                                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                                <i class="fas fa-money-bill-wave"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Spouse Give (What to give) -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2 form-label">
                                            <i class="fas fa-gift text-teal-500 mr-2"></i>
                                            What to Give to Spouse
                                        </label>
                                        <div class="relative">
                                            <textarea name="joint_spouse_give" rows="3"
                                                      class="w-full pl-4 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:border-teal-500 focus:ring-4 focus:ring-teal-100 outline-none transition-all duration-300 text-sm bg-gray-50 hover:bg-white group-hover:shadow-md resize-none text-gray-900 placeholder-gray-500 form-textarea"
                                                      placeholder="Describe what to give to spouse">{{ old('joint_spouse_give') }}</textarea>
                                            <div class="absolute right-3 top-3 text-gray-400">
                                                <i class="fas fa-gift"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Enhanced Action Buttons -->
            <div class="border-t border-gray-200/50 px-6 py-4 bg-white rounded-b-2xl">
                <!-- Completion Message -->
                <div id="completion-message" class="hidden mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
                    <div class="flex items-center text-green-700">
                        <i class="fas fa-check-circle mr-2"></i>
                        <span class="text-sm font-medium">All steps completed! Click "Create Client" to save.</span>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <a href="{{ route('admin.clients') }}" class="flex items-center px-6 py-3 border-2 border-gray-300 rounded-xl text-gray-700 hover:bg-white hover:border-gray-400 font-semibold text-sm transition-all duration-300 hover:shadow-md">
                        <i class="fas fa-arrow-left mr-2"></i> Back
                    </a>
                    <div class="flex gap-3">
                        <button type="button" onclick="previousTab()" id="prevBtn" class="hidden flex items-center px-6 py-3 bg-gray-600 text-white rounded-xl hover:bg-gray-700 font-medium text-sm transition-colors">
                            <i class="fas fa-arrow-left mr-2"></i> Previous
                        </button>
                        <button type="button" onclick="nextTab()" id="nextBtn" class="flex items-center px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 font-medium text-sm transition-colors">
                            Next <i class="fas fa-chevron-right ml-2" style="color: white !important;"></i>
                        </button>
                        <button type="submit" id="submitBtn" class="flex items-center px-6 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 font-medium text-sm transition-colors btn-primary">
                            <i class="fas fa-save mr-2"></i> 
                            @if(session('agent_client_data')) Approve & Create Client @else Create Client @endif
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        .form-input {
            height: 52px !important;
            border-radius: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 15px !important;
            font-weight: 500 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .form-input:focus {
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        }
        
        .form-label {
            font-family: 'Inter', sans-serif !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            letter-spacing: -0.02em !important;
        }
        
        .form-textarea {
            border-radius: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 15px !important;
            font-weight: 500 !important;
            resize: none !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .form-textarea:focus {
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        }
        
        .form-select {
            height: 52px !important;
            border-radius: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 15px !important;
            font-weight: 500 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .form-select:focus {
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        }
        
        .btn-primary {
            border-radius: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-weight: 600 !important;
            font-size: 15px !important;
            height: 44px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 25px rgba(220, 38, 38, 0.25) !important;
        }
        
        .tab-button {
            border-radius: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .tab-button:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        }
        
        .card-container {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .card-container:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
        }
        
        .error-box, .success-box {
            border-radius: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-weight: 500 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
    </style>

    <script>
        // Toggle joint will fields visibility - defined early to ensure availability
        window.toggleJointWillFields = function() {
            console.log('toggleJointWillFields called');
            const isJointWill = document.getElementById('is_joint_will');
            const jointWillFields = document.getElementById('joint-will-fields');
            
            console.log('isJointWill element:', isJointWill);
            console.log('jointWillFields element:', jointWillFields);
            
            if (!isJointWill || !jointWillFields) {
                console.error('Joint will elements not found');
                return;
            }
            
            console.log('Checkbox checked:', isJointWill.checked);
            
            if (isJointWill.checked) {
                console.log('Showing joint will fields');
                jointWillFields.classList.remove('hidden');
            } else {
                console.log('Hiding joint will fields');
                jointWillFields.classList.add('hidden');
                // Also hide spouse fields when joint will is disabled
                const spouseFields = document.getElementById('joint-spouse-fields');
                if (spouseFields) {
                    spouseFields.classList.add('hidden');
                }
            }
        }

        // Toggle spouse fields based on marital status
        window.toggleJointSpouseFields = function() {
            const maritalStatus = document.querySelector('select[name="joint_person_marital_status"]');
            const spouseFields = document.getElementById('joint-spouse-fields');
            
            if (!maritalStatus || !spouseFields) {
                return;
            }
            
            if (maritalStatus.value === 'married') {
                spouseFields.classList.remove('hidden');
            } else {
                spouseFields.classList.add('hidden');
            }
        }
        
        // Auto-populate emergency contact from joint spouse details when fields change
        const jointSpouseNameField = document.querySelector('input[name="joint_spouse_name"]');
        const jointSpousePhoneField = document.querySelector('input[name="joint_spouse_phone"]');
        const jointSpouseEmailField = document.querySelector('input[name="joint_spouse_email"]');
        
        function autoPopulateEmergencyContactFromJointSpouse() {
            const spouseName = jointSpouseNameField?.value || '';
            const spousePhone = jointSpousePhoneField?.value || '';
            const spouseEmail = jointSpouseEmailField?.value || '';
            
            // Only populate if at least one spouse field has data
            if (spouseName || spousePhone || spouseEmail) {
                const emergencyContactNameField = document.querySelector('input[name="emergency_contact_name"]');
                const emergencyContactPhoneField = document.querySelector('input[name="emergency_contact_phone"]');
                const emergencyContactEmailField = document.querySelector('input[name="emergency_contact_email"]');
                const emergencyRelationshipField = document.querySelector('select[name="emergency_relationship"]');
                
                if (emergencyContactNameField && spouseName) {
                    emergencyContactNameField.value = spouseName;
                }
                if (emergencyContactPhoneField && spousePhone) {
                    emergencyContactPhoneField.value = spousePhone;
                }
                if (emergencyContactEmailField && spouseEmail) {
                    emergencyContactEmailField.value = spouseEmail;
                }
                if (emergencyRelationshipField) {
                    emergencyRelationshipField.value = 'spouse';
                }
            }
        }
        
        if (jointSpouseNameField) jointSpouseNameField.addEventListener('change', autoPopulateEmergencyContactFromJointSpouse);
        if (jointSpousePhoneField) jointSpousePhoneField.addEventListener('change', autoPopulateEmergencyContactFromJointSpouse);
        if (jointSpouseEmailField) jointSpouseEmailField.addEventListener('change', autoPopulateEmergencyContactFromJointSpouse);

        // Country data
        const countries = [
            {code: 'AF', name: 'Afghanistan'}, {code: 'AL', name: 'Albania'}, {code: 'DZ', name: 'Algeria'}, {code: 'AS', name: 'American Samoa'},
            {code: 'AD', name: 'Andorra'}, {code: 'AO', name: 'Angola'}, {code: 'AI', name: 'Anguilla'}, {code: 'AQ', name: 'Antarctica'},
            {code: 'AG', name: 'Antigua and Barbuda'}, {code: 'AR', name: 'Argentina'}, {code: 'AM', name: 'Armenia'}, {code: 'AW', name: 'Aruba'},
            {code: 'AU', name: 'Australia'}, {code: 'AT', name: 'Austria'}, {code: 'AZ', name: 'Azerbaijan'}, {code: 'BS', name: 'Bahamas'},
            {code: 'BH', name: 'Bahrain'}, {code: 'BD', name: 'Bangladesh'}, {code: 'BB', name: 'Barbados'}, {code: 'BY', name: 'Belarus'},
            {code: 'BE', name: 'Belgium'}, {code: 'BZ', name: 'Belize'}, {code: 'BJ', name: 'Benin'}, {code: 'BM', name: 'Bermuda'},
            {code: 'BT', name: 'Bhutan'}, {code: 'BO', name: 'Bolivia'}, {code: 'BA', name: 'Bosnia and Herzegovina'}, {code: 'BW', name: 'Botswana'},
            {code: 'BV', name: 'Bouvet Island'}, {code: 'BR', name: 'Brazil'}, {code: 'IO', name: 'British Indian Ocean Territory'}, {code: 'BN', name: 'Brunei Darussalam'},
            {code: 'BG', name: 'Bulgaria'}, {code: 'BF', name: 'Burkina Faso'}, {code: 'BI', name: 'Burundi'}, {code: 'KH', name: 'Cambodia'},
            {code: 'CM', name: 'Cameroon'}, {code: 'CA', name: 'Canada'}, {code: 'CV', name: 'Cape Verde'}, {code: 'KY', name: 'Cayman Islands'},
            {code: 'CF', name: 'Central African Republic'}, {code: 'TD', name: 'Chad'}, {code: 'CL', name: 'Chile'}, {code: 'CN', name: 'China'},
            {code: 'CX', name: 'Christmas Island'}, {code: 'CC', name: 'Cocos (Keeling) Islands'}, {code: 'CO', name: 'Colombia'}, {code: 'KM', name: 'Comoros'},
            {code: 'CG', name: 'Congo'}, {code: 'CD', name: 'Congo, Democratic Republic of the'}, {code: 'CK', name: 'Cook Islands'}, {code: 'CR', name: 'Costa Rica'},
            {code: 'CI', name: 'Cote D\'Ivoire'}, {code: 'HR', name: 'Croatia'}, {code: 'CU', name: 'Cuba'}, {code: 'CY', name: 'Cyprus'},
            {code: 'CZ', name: 'Czech Republic'}, {code: 'DK', name: 'Denmark'}, {code: 'DJ', name: 'Djibouti'}, {code: 'DM', name: 'Dominica'},
            {code: 'DO', name: 'Dominican Republic'}, {code: 'EC', name: 'Ecuador'}, {code: 'EG', name: 'Egypt'}, {code: 'SV', name: 'El Salvador'},
            {code: 'GQ', name: 'Equatorial Guinea'}, {code: 'ER', name: 'Eritrea'}, {code: 'EE', name: 'Estonia'}, {code: 'ET', name: 'Ethiopia'},
            {code: 'FK', name: 'Falkland Islands (Malvinas)'}, {code: 'FO', name: 'Faroe Islands'}, {code: 'FJ', name: 'Fiji'}, {code: 'FI', name: 'Finland'},
            {code: 'FR', name: 'France'}, {code: 'GF', name: 'French Guiana'}, {code: 'PF', name: 'French Polynesia'}, {code: 'TF', name: 'French Southern Territories'},
            {code: 'GA', name: 'Gabon'}, {code: 'GM', name: 'Gambia'}, {code: 'GE', name: 'Georgia'}, {code: 'DE', name: 'Germany'},
            {code: 'GH', name: 'Ghana'}, {code: 'GI', name: 'Gibraltar'}, {code: 'GR', name: 'Greece'}, {code: 'GL', name: 'Greenland'},
            {code: 'GD', name: 'Grenada'}, {code: 'GP', name: 'Guadeloupe'}, {code: 'GU', name: 'Guam'}, {code: 'GT', name: 'Guatemala'},
            {code: 'GN', name: 'Guinea'}, {code: 'GW', name: 'Guinea-Bissau'}, {code: 'GY', name: 'Guyana'}, {code: 'HT', name: 'Haiti'},
            {code: 'HM', name: 'Heard Island and Mcdonald Islands'}, {code: 'VA', name: 'Holy See (Vatican City State)'}, {code: 'HN', name: 'Honduras'},
            {code: 'HK', name: 'Hong Kong'}, {code: 'HU', name: 'Hungary'}, {code: 'IS', name: 'Iceland'}, {code: 'IN', name: 'India'},
            {code: 'ID', name: 'Indonesia'}, {code: 'IR', name: 'Iran, Islamic Republic of'}, {code: 'IQ', name: 'Iraq'}, {code: 'IE', name: 'Ireland'},
            {code: 'IL', name: 'Israel'}, {code: 'IT', name: 'Italy'}, {code: 'JM', name: 'Jamaica'}, {code: 'JP', name: 'Japan'},
            {code: 'JO', name: 'Jordan'}, {code: 'KZ', name: 'Kazakhstan'}, {code: 'KE', name: 'Kenya'}, {code: 'KI', name: 'Kiribati'},
            {code: 'KP', name: 'Korea, Democratic People\'s Republic of'}, {code: 'KR', name: 'Korea, Republic of'}, {code: 'KW', name: 'Kuwait'},
            {code: 'KG', name: 'Kyrgyzstan'}, {code: 'LA', name: 'Lao People\'s Democratic Republic'}, {code: 'LV', name: 'Latvia'}, {code: 'LB', name: 'Lebanon'},
            {code: 'LS', name: 'Lesotho'}, {code: 'LR', name: 'Liberia'}, {code: 'LY', name: 'Libyan Arab Jamahiriya'}, {code: 'LI', name: 'Liechtenstein'},
            {code: 'LT', name: 'Lithuania'}, {code: 'LU', name: 'Luxembourg'}, {code: 'MO', name: 'Macao'}, {code: 'MG', name: 'Madagascar'},
            {code: 'MW', name: 'Malawi'}, {code: 'MY', name: 'Malaysia'}, {code: 'MV', name: 'Maldives'}, {code: 'ML', name: 'Mali'},
            {code: 'MT', name: 'Malta'}, {code: 'MH', name: 'Marshall Islands'}, {code: 'MQ', name: 'Martinique'}, {code: 'MR', name: 'Mauritania'},
            {code: 'MU', name: 'Mauritius'}, {code: 'YT', name: 'Mayotte'}, {code: 'MX', name: 'Mexico'}, {code: 'FM', name: 'Micronesia, Federated States of'},
            {code: 'MD', name: 'Moldova, Republic of'}, {code: 'MC', name: 'Monaco'}, {code: 'MN', name: 'Mongolia'}, {code: 'MS', name: 'Montserrat'},
            {code: 'MA', name: 'Morocco'}, {code: 'MZ', name: 'Mozambique'}, {code: 'MM', name: 'Myanmar'}, {code: 'NA', name: 'Namibia'},
            {code: 'NR', name: 'Nauru'}, {code: 'NP', name: 'Nepal'}, {code: 'NL', name: 'Netherlands'}, {code: 'AN', name: 'Netherlands Antilles'},
            {code: 'NC', name: 'New Caledonia'}, {code: 'NZ', name: 'New Zealand'}, {code: 'NI', name: 'Nicaragua'}, {code: 'NE', name: 'Niger'},
            {code: 'NG', name: 'Nigeria'}, {code: 'NU', name: 'Niue'}, {code: 'NF', name: 'Norfolk Island'}, {code: 'MP', name: 'Northern Mariana Islands'},
            {code: 'NO', name: 'Norway'}, {code: 'OM', name: 'Oman'}, {code: 'PK', name: 'Pakistan'}, {code: 'PW', name: 'Palau'},
            {code: 'PA', name: 'Panama'}, {code: 'PG', name: 'Papua New Guinea'}, {code: 'PY', name: 'Paraguay'}, {code: 'PE', name: 'Peru'},
            {code: 'PH', name: 'Philippines'}, {code: 'PN', name: 'Pitcairn'}, {code: 'PL', name: 'Poland'}, {code: 'PT', name: 'Portugal'},
            {code: 'PR', name: 'Puerto Rico'}, {code: 'QA', name: 'Qatar'}, {code: 'RE', name: 'Reunion'}, {code: 'RO', name: 'Romania'},
            {code: 'RU', name: 'Russian Federation'}, {code: 'RW', name: 'Rwanda'}, {code: 'SH', name: 'Saint Helena'}, {code: 'KN', name: 'Saint Kitts and Nevis'},
            {code: 'LC', name: 'Saint Lucia'}, {code: 'PM', name: 'Saint Pierre and Miquelon'}, {code: 'VC', name: 'Saint Vincent and the Grenadines'}, {code: 'WS', name: 'Samoa'},
            {code: 'SM', name: 'San Marino'}, {code: 'ST', name: 'Sao Tome and Principe'}, {code: 'SA', name: 'Saudi Arabia'}, {code: 'SN', name: 'Senegal'},
            {code: 'SC', name: 'Seychelles'}, {code: 'SL', name: 'Sierra Leone'}, {code: 'SG', name: 'Singapore'}, {code: 'SK', name: 'Slovakia'},
            {code: 'SI', name: 'Slovenia'}, {code: 'SB', name: 'Solomon Islands'}, {code: 'SO', name: 'Somalia'}, {code: 'ZA', name: 'South Africa'},
            {code: 'GS', name: 'South Georgia and the South Sandwich Islands'}, {code: 'ES', name: 'Spain'}, {code: 'LK', name: 'Sri Lanka'}, {code: 'SD', name: 'Sudan'},
            {code: 'SR', name: 'Suriname'}, {code: 'SJ', name: 'Svalbard and Jan Mayen'}, {code: 'SZ', name: 'Swaziland'}, {code: 'SE', name: 'Sweden'},
            {code: 'CH', name: 'Switzerland'}, {code: 'SY', name: 'Syrian Arab Republic'}, {code: 'TW', name: 'Taiwan, Province of China'}, {code: 'TJ', name: 'Tajikistan'},
            {code: 'TZ', name: 'Tanzania, United Republic of'}, {code: 'TH', name: 'Thailand'}, {code: 'TL', name: 'Timor-Leste'}, {code: 'TG', name: 'Togo'},
            {code: 'TK', name: 'Tokelau'}, {code: 'TO', name: 'Tonga'}, {code: 'TT', name: 'Trinidad and Tobago'}, {code: 'TN', name: 'Tunisia'},
            {code: 'TR', name: 'Turkey'}, {code: 'TM', name: 'Turkmenistan'}, {code: 'TC', name: 'Turks and Caicos Islands'}, {code: 'TV', name: 'Tuvalu'},
            {code: 'UG', name: 'Uganda'}, {code: 'UA', name: 'Ukraine'}, {code: 'AE', name: 'United Arab Emirates'}, {code: 'GB', name: 'United Kingdom'},
            {code: 'US', name: 'United States'}, {code: 'UM', name: 'United States Minor Outlying Islands'}, {code: 'UY', name: 'Uruguay'}, {code: 'UZ', name: 'Uzbekistan'},
            {code: 'VU', name: 'Vanuatu'}, {code: 'VE', name: 'Venezuela'}, {code: 'VN', name: 'Viet Nam'}, {code: 'VG', name: 'Virgin Islands, British'},
            {code: 'VI', name: 'Virgin Islands, U.S.'}, {code: 'WF', name: 'Wallis and Futuna'}, {code: 'EH', name: 'Western Sahara'}, {code: 'YE', name: 'Yemen'},
            {code: 'ZM', name: 'Zambia'}, {code: 'ZW', name: 'Zimbabwe'}
        ];

        let currentCountries = countries;
        let selectedIndex = -1;

        // Show country dropdown
        window.showCountryDropdown = function() {
            const dropdown = document.getElementById('country-dropdown');
            dropdown.classList.remove('hidden');
            displayCountries();
        }

        // Hide country dropdown
        window.hideCountryDropdown = function() {
            setTimeout(() => {
                const dropdown = document.getElementById('country-dropdown');
                dropdown.classList.add('hidden');
            }, 200);
        }

        // Display countries in dropdown
        window.displayCountries = function() {
            const optionsDiv = document.getElementById('country-options');
            const searchTerm = document.getElementById('country-search').value.toLowerCase();
            
            // Filter countries based on search
            currentCountries = countries.filter(country => 
                country.name.toLowerCase().includes(searchTerm) ||
                country.code.toLowerCase().includes(searchTerm)
            );
            
            // Clear existing options
            optionsDiv.innerHTML = '';
            
            // Display first 4 countries
            const displayCount = Math.min(4, currentCountries.length);
            for (let i = 0; i < displayCount; i++) {
                const country = currentCountries[i];
                const optionDiv = document.createElement('div');
                optionDiv.className = 'px-4 py-2 hover:bg-red-50 cursor-pointer transition-colors text-sm text-gray-700 hover:text-red-600';
                optionDiv.textContent = country.name;
                optionDiv.onclick = function() { selectCountry(country); };
                optionsDiv.appendChild(optionDiv);
            }
            
            // Add "more" indicator if there are more countries
            if (currentCountries.length > 4) {
                const moreDiv = document.createElement('div');
                moreDiv.className = 'px-4 py-2 text-xs text-gray-500 text-center border-t';
                moreDiv.textContent = `Scroll to see ${currentCountries.length - 4} more countries...`;
                optionsDiv.appendChild(moreDiv);
            }
        }

        // Search countries
        window.searchCountries = function() {
            displayCountries();
            selectedIndex = -1;
        }

        // Select country
        window.selectCountry = function(country) {
            const countryField = document.getElementById('country');
            const searchField = document.getElementById('country-search');
            
            searchField.value = country.name;
            countryField.value = country.code;
            
            hideCountryDropdown();
            updateIdentificationOptions();
            validatePhoneNumber(); // Update phone validation when country changes
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', function(e) {
            const dropdown = document.getElementById('country-dropdown');
            const searchInput = document.getElementById('country-search');
            
            if (!dropdown.contains(e.target) && e.target !== searchInput) {
                hideCountryDropdown();
            }
        });

        // Handle keyboard navigation
        document.addEventListener('keydown', function(e) {
            const dropdown = document.getElementById('country-dropdown');
            if (dropdown.classList.contains('hidden')) return;
            
            const options = currentCountries;
            
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                selectedIndex = Math.min(selectedIndex + 1, options.length - 1);
                highlightOption();
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                selectedIndex = Math.max(selectedIndex - 1, 0);
                highlightOption();
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (selectedIndex >= 0 && selectedIndex < options.length) {
                    selectCountry(options[selectedIndex]);
                }
            } else if (e.key === 'Escape') {
                hideCountryDropdown();
            }
        });

        // Highlight selected option
        function highlightOption() {
            const optionsDiv = document.getElementById('country-options');
            const optionElements = optionsDiv.querySelectorAll('div');
            
            optionElements.forEach((el, index) => {
                if (index === selectedIndex && index < currentCountries.length) {
                    el.classList.add('bg-red-50', 'text-red-600');
                    el.classList.remove('text-gray-700');
                } else {
                    el.classList.remove('bg-red-50', 'text-red-600');
                    el.classList.add('text-gray-700');
                }
            });
        }

        // Auto-fill password with ID number
        function autoFillPassword() {
            const idNumber = document.getElementById('identification_number').value;
            const passwordField = document.getElementById('password');
            
            if (idNumber && passwordField.readOnly) {
                // Ensure password meets 8-character minimum
                let password = idNumber;
                if (password.length < 8) {
                    // Pad with numbers to meet minimum
                    const padding = '1234567890';
                    while (password.length < 8) {
                        password += padding[password.length % padding.length];
                    }
                }
                passwordField.value = password;
            }
        }

        // Toggle password edit mode
        function togglePasswordEdit() {
            const passwordField = document.getElementById('password');
            const editIcon = document.getElementById('password-edit-icon');
            const helpText = document.getElementById('password-help-text');
            
            if (passwordField.readOnly) {
                passwordField.readOnly = false;
                passwordField.type = 'password';
                passwordField.classList.remove('font-mono');
                passwordField.placeholder = 'Enter custom password (min 8 characters)';
                editIcon.classList.remove('fa-edit');
                editIcon.classList.add('fa-lock');
                helpText.textContent = 'Enter custom password or leave auto-generated';
            } else {
                passwordField.readOnly = true;
                passwordField.type = 'text';
                passwordField.classList.add('font-mono');
                passwordField.placeholder = 'Auto-filled with ID number';
                editIcon.classList.remove('fa-lock');
                editIcon.classList.add('fa-edit');
                helpText.textContent = 'Password automatically set to your ID number. Click edit icon to modify.';
                autoFillPassword(); // Re-auto-fill
            }
        }

        // Toggle password visibility
        function togglePasswordVisibility() {
            const passwordField = document.getElementById('password');
            const visibilityIcon = document.getElementById('password-visibility-icon');
            
            if (passwordField.type === 'text') {
                passwordField.type = 'password';
                visibilityIcon.classList.remove('fa-eye');
                visibilityIcon.classList.add('fa-eye-slash');
            } else {
                passwordField.type = 'text';
                visibilityIcon.classList.remove('fa-eye-slash');
                visibilityIcon.classList.add('fa-eye');
            }
        }

        // Phone number validation based on country
        function validatePhoneNumber() {
            const phoneField = document.getElementById('phone');
            const phoneHelp = document.getElementById('phone-help');
            const countryField = document.getElementById('country');
            const countryCode = countryField.value;
            
            const phoneNumber = phoneField.value.replace(/\D/g, ''); // Remove all non-digits
            
            if (!countryCode) {
                phoneHelp.textContent = 'Please select a country first';
                return;
            }
            
            let isValid = false;
            let message = '';
            
            // Country-specific phone validation
            switch(countryCode) {
                case 'IN': // India - 10 digits
                    isValid = phoneNumber.length === 10;
                    message = isValid ? 'Valid Indian phone number' : 'Indian phone must be exactly 10 digits';
                    break;
                case 'MY': // Malaysia - 10-11 digits
                    isValid = phoneNumber.length >= 10 && phoneNumber.length <= 11;
                    message = isValid ? 'Valid Malaysian phone number' : 'Malaysian phone must be 10-11 digits';
                    break;
                case 'US': // USA - 10 digits
                    isValid = phoneNumber.length === 10;
                    message = isValid ? 'Valid US phone number' : 'US phone must be exactly 10 digits';
                    break;
                case 'GB': // UK - 10-11 digits
                    isValid = phoneNumber.length >= 10 && phoneNumber.length <= 11;
                    message = isValid ? 'Valid UK phone number' : 'UK phone must be 10-11 digits';
                    break;
                case 'SG': // Singapore - 8 digits
                    isValid = phoneNumber.length === 8;
                    message = isValid ? 'Valid Singapore phone number' : 'Singapore phone must be exactly 8 digits';
                    break;
                case 'AU': // Australia - 9 digits
                    isValid = phoneNumber.length === 9;
                    message = isValid ? 'Valid Australian phone number' : 'Australian phone must be exactly 9 digits';
                    break;
                case 'CA': // Canada - 10 digits
                    isValid = phoneNumber.length === 10;
                    message = isValid ? 'Valid Canadian phone number' : 'Canadian phone must be exactly 10 digits';
                    break;
                default:
                    // Generic validation for other countries (7-15 digits)
                    isValid = phoneNumber.length >= 7 && phoneNumber.length <= 15;
                    message = isValid ? 'Valid phone number' : 'Phone number must be 7-15 digits';
            }
            
            // Update UI
            phoneHelp.textContent = message;
            if (isValid) {
                phoneHelp.className = 'text-xs text-green-600 mt-1 flex items-center';
                phoneField.classList.remove('border-red-300');
                phoneField.classList.add('border-green-300');
            } else {
                phoneHelp.className = 'text-xs text-red-500 mt-1 flex items-center';
                phoneField.classList.remove('border-green-300');
                phoneField.classList.add('border-red-300');
            }
        }

        // Update identification type options based on selected country
        window.updateIdentificationOptions = function() {
            const countrySelect = document.getElementById('country');
            const identificationTypeSelect = document.getElementById('identification_type');
            const selectedCountry = countrySelect.value;
            
            // Clear existing options
            identificationTypeSelect.innerHTML = '';
            
            // Add default option
            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.textContent = 'Select type';
            identificationTypeSelect.appendChild(defaultOption);
            
            // Add options based on country
            if (selectedCountry === 'MY') { // Malaysia
                const icOption = document.createElement('option');
                icOption.value = 'ic';
                icOption.textContent = 'IC (MyKad)';
                identificationTypeSelect.appendChild(icOption);
                
                const passportOption = document.createElement('option');
                passportOption.value = 'passport';
                passportOption.textContent = 'Passport';
                identificationTypeSelect.appendChild(passportOption);
            } else if (selectedCountry === 'IN') { // India
                const icOption = document.createElement('option');
                icOption.value = 'ic';
                icOption.textContent = 'IC (Aadhaar)';
                identificationTypeSelect.appendChild(icOption);
                
                const passportOption = document.createElement('option');
                passportOption.value = 'passport';
                passportOption.textContent = 'Passport';
                identificationTypeSelect.appendChild(passportOption);
            } else {
                // All other countries
                const passportOption = document.createElement('option');
                passportOption.value = 'passport';
                passportOption.textContent = 'Passport';
                identificationTypeSelect.appendChild(passportOption);
            }
            
            // Reset identification number field
            document.getElementById('identification_number').value = '';
            document.getElementById('identification_number').placeholder = 'Select country and type first';
            document.getElementById('identification-label').textContent = 'Identification Number';
            document.getElementById('identification-help').textContent = 'Select country and identification type first';
        }

        // Update identification number placeholder and label based on type
        function updateIdentificationPlaceholder() {
            const countrySelect = document.getElementById('country');
            const identificationTypeSelect = document.getElementById('identification_type');
            const identificationNumberInput = document.getElementById('identification_number');
            const identificationLabel = document.getElementById('identification-label');
            const identificationHelp = document.getElementById('identification-help');
            
            const selectedCountry = countrySelect.value;
            const selectedType = identificationTypeSelect.value;
            
            if (!selectedCountry || !selectedType) {
                identificationNumberInput.placeholder = 'Select country and type first';
                identificationLabel.textContent = 'Identification Number';
                identificationHelp.textContent = 'Select country and identification type first';
                return;
            }
            
            let placeholder = '';
            let label = '';
            let help = '';
            
            if (selectedType === 'ic') {
                if (selectedCountry === 'MY') {
                    label = 'MyKad Number';
                    placeholder = 'e.g., 123456-78-9012';
                    help = '12 digits (6 digits birth date + 2 digits state + 4 digits serial)';
                } else if (selectedCountry === 'IN') {
                    label = 'Aadhaar Number';
                    placeholder = 'e.g., 123456789012';
                    help = '12 digits Indian national identification number';
                }
            } else if (selectedType === 'passport') {
                label = 'Passport Number';
                if (selectedCountry === 'MY') {
                    placeholder = 'e.g., A1234567';
                    help = 'Letter followed by 7 digits';
                } else if (selectedCountry === 'IN') {
                    placeholder = 'e.g., A1234567';
                    help = 'Letter followed by 7 digits';
                } else {
                    placeholder = 'e.g., A1234567';
                    help = 'Alphanumeric passport number';
                }
            }
            
            identificationNumberInput.placeholder = placeholder;
            identificationLabel.textContent = label;
            identificationHelp.textContent = help;
        }

        // Validate identification number based on country and type
        function validateIdentificationNumber() {
            const countrySelect = document.getElementById('country');
            const identificationTypeSelect = document.getElementById('identification_type');
            const identificationNumberInput = document.getElementById('identification_number');
            
            const selectedCountry = countrySelect.value;
            const selectedType = identificationTypeSelect.value;
            const number = identificationNumberInput.value.trim();
            
            if (!selectedCountry || !selectedType || !number) {
                return true; // No validation if fields are incomplete
            }
            
            let isValid = false;
            let errorMessage = '';
            
            if (selectedType === 'ic') {
                if (selectedCountry === 'MY') {
                    // Malaysian IC: 12 digits with hyphens (XXXXXX-XX-XXXX)
                    const mykadRegex = /^\d{6}-\d{2}-\d{4}$/;
                    const mykadCleanRegex = /^\d{12}$/;
                    isValid = mykadRegex.test(number) || mykadCleanRegex.test(number.replace(/-/g, ''));
                    errorMessage = 'Invalid MyKad format. Use XXXXXX-XX-XXXX or 12 digits';
                } else if (selectedCountry === 'IN') {
                    // Indian Aadhaar: 12 digits
                    const aadhaarRegex = /^\d{12}$/;
                    isValid = aadhaarRegex.test(number);
                    errorMessage = 'Invalid Aadhaar format. Must be exactly 12 digits';
                }
            } else if (selectedType === 'passport') {
                if (selectedCountry === 'MY') {
                    // Malaysian Passport: Letter + 7 digits
                    const myPassportRegex = /^[A-Z]\d{7}$/;
                    isValid = myPassportRegex.test(number);
                    errorMessage = 'Invalid Malaysian passport format. Use 1 letter + 7 digits';
                } else if (selectedCountry === 'IN') {
                    // Indian Passport: Letter + 7 digits
                    const inPassportRegex = /^[A-Z]\d{7}$/;
                    isValid = inPassportRegex.test(number);
                    errorMessage = 'Invalid Indian passport format. Use 1 letter + 7 digits';
                } else {
                    // Generic passport: Alphanumeric, 6-9 characters
                    const genericPassportRegex = /^[A-Z0-9]{6,9}$/;
                    isValid = genericPassportRegex.test(number);
                    errorMessage = 'Invalid passport format. Use 6-9 alphanumeric characters';
                }
            }
            
            // Visual feedback
            if (isValid) {
                identificationNumberInput.classList.remove('border-red-500');
                identificationNumberInput.classList.add('border-green-500');
            } else {
                identificationNumberInput.classList.remove('border-green-500');
                identificationNumberInput.classList.add('border-red-500');
                if (number.length > 0) {
                    showValidationError(errorMessage);
                }
            }
            
            return isValid;
        }

        // Show validation error
        function showValidationError(message) {
            // Remove existing validation errors
            const existingErrors = document.querySelectorAll('.validation-error');
            existingErrors.forEach(error => error.remove());
            
            // Add new error message
            const input = document.getElementById('identification_number');
            const errorDiv = document.createElement('div');
            errorDiv.className = 'validation-error text-red-500 text-xs mt-1 flex items-center';
            errorDiv.innerHTML = `<i class="fas fa-exclamation-triangle mr-1"></i>${message}`;
            
            input.parentNode.appendChild(errorDiv);
            
            // Remove error after 3 seconds
            setTimeout(() => {
                if (errorDiv.parentNode) {
                    errorDiv.remove();
                }
            }, 3000);
        }

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

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

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

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

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

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

        let currentTab = 'personal';
        function showTab(tabName) {
            // Save current form data before switching tabs
            saveFormData();
            
            // Hide all tabs
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.add('hidden');
            });
            
            // Remove active state from all tabs
            document.querySelectorAll('[id$="-tab"]').forEach(tab => {
                tab.classList.remove('text-red-600', 'border-b-2', 'border-red-600');
                tab.querySelector('span').classList.remove('text-red-600');
                tab.querySelector('span').classList.add('text-gray-500');
            });
            
            // Hide all indicators
            document.querySelectorAll('[id$="-indicator"]').forEach(indicator => {
                indicator.style.width = '0';
            });
            
            // Show selected tab
            document.getElementById(tabName + '-content').classList.remove('hidden');
            
            // Update active tab
            const activeTab = document.getElementById(tabName + '-tab');
            activeTab.classList.add('text-red-600', 'border-b-2', 'border-red-600');
            activeTab.querySelector('span').classList.remove('text-gray-500');
            activeTab.querySelector('span').classList.add('text-red-600');
            
            // Update active indicator
            document.getElementById(tabName + '-indicator').style.width = '100%';
            
            // Update current tab
            currentTab = tabName;
            
            // Update progress bar
            const tabs = ['personal', 'contact', 'emergency', 'account', 'joint'];
            const currentIndex = tabs.indexOf(tabName);
            const progressPercent = ((currentIndex + 1) / tabs.length) * 100;
            document.getElementById('progress-bar').style.width = progressPercent + '%';
            document.getElementById('current-step-num').textContent = currentIndex + 1;
            
            // Update step name
            const stepNames = {
                'personal': 'Personal Information',
                'contact': 'Contact Details',
                'emergency': 'Emergency Contact',
                'account': 'Account Settings',
                'joint': 'Joint Will'
            };
            document.getElementById('current-step-name').textContent = stepNames[tabName];
            
            // Restore form data after switching tabs
            setTimeout(() => {
                restoreFormData();
            }, 100);
        }

        function nextTab() {
            saveFormData(); // Save before navigating
            const tabs = ['personal', 'contact', 'emergency', 'account', 'joint'];
            const currentTab = document.querySelector('.tab-content:not(.hidden)').id.replace('-content', '');
            const currentIndex = tabs.indexOf(currentTab);
            
            if (currentIndex < tabs.length - 1) {
                showTab(tabs[currentIndex + 1]);
                updateButtonStates(tabs[currentIndex + 1]);
            }
        }

        function previousTab() {
            saveFormData(); // Save before navigating
            const tabs = ['personal', 'contact', 'emergency', 'account', 'joint'];
            const currentTab = document.querySelector('.tab-content:not(.hidden)').id.replace('-content', '');
            const currentIndex = tabs.indexOf(currentTab);
            
            if (currentIndex > 0) {
                showTab(tabs[currentIndex - 1]);
                updateButtonStates(tabs[currentIndex - 1]);
            }
        }

        function updateButtonStates(activeTab) {
            const tabs = ['personal', 'contact', 'emergency', 'account', 'joint'];
            const currentIndex = tabs.indexOf(activeTab);
            
            // Show/hide Previous button
            const prevBtn = document.getElementById('prevBtn');
            if (currentIndex > 0) {
                prevBtn.classList.remove('hidden');
            } else {
                prevBtn.classList.add('hidden');
            }
            
            // Show Next or Submit button
            const nextBtn = document.getElementById('nextBtn');
            const submitBtn = document.getElementById('submitBtn');
            
            // Show/hide completion message
            const completionMsg = document.getElementById('completion-message');
            
            if (currentIndex === tabs.length - 1) {
                nextBtn.classList.add('hidden');
                submitBtn.classList.remove('hidden');
                completionMsg.classList.remove('hidden');
            } else {
                nextBtn.classList.remove('hidden');
                submitBtn.classList.add('hidden');
                completionMsg.classList.add('hidden');
            }
        }

        // Initialize first tab
        document.addEventListener('DOMContentLoaded', function() {
            showTab('personal');
            updateButtonStates('personal');
        });

        // Hide error messages
        function hideErrors() {
            document.getElementById('error-container').classList.add('hidden');
        }

        // Show error messages
        function showErrors(errors) {
            const errorContainer = document.getElementById('error-container');
            const errorMessages = document.getElementById('error-messages');
            
            // Clear previous errors
            errorMessages.innerHTML = '';
            
            // Handle string errors directly
            if (typeof errors === 'string') {
                errorMessages.innerHTML = `<p class="text-sm text-red-700">${errors}</p>`;
                errorContainer.classList.remove('hidden');
                window.scrollTo({ top: 0, behavior: 'smooth' });
                return;
            }
            
            // Handle array errors
            if (Array.isArray(errors)) {
                let errorHtml = '<ul class="list-disc list-inside space-y-1">';
                errors.forEach(error => {
                    errorHtml += `<li class="text-sm text-red-700">${error}</li>`;
                });
                errorHtml += '</ul>';
                errorMessages.innerHTML = errorHtml;
                errorContainer.classList.remove('hidden');
                window.scrollTo({ top: 0, behavior: 'smooth' });
                return;
            }
            
            // Group errors by tab
            const tabErrors = {};
            const otherErrors = {};
            
            Object.keys(errors).forEach(field => {
                const input = document.querySelector(`[name="${field}"]`);
                if (input) {
                    const tabContent = input.closest('.tab-content');
                    if (tabContent) {
                        const tabId = tabContent.id.replace('-content', '');
                        const tabName = tabId.charAt(0).toUpperCase() + tabId.slice(1);
                        if (!tabErrors[tabName]) {
                            tabErrors[tabName] = [];
                        }
                        tabErrors[tabName].push({ field, messages: errors[field] });
                    } else {
                        otherErrors[field] = errors[field];
                    }
                } else {
                    otherErrors[field] = errors[field];
                }
            });
            
            // Build error HTML
            let errorHtml = '';
            
            // Show tab-specific errors
            if (Object.keys(tabErrors).length > 0) {
                errorHtml += '<div class="mb-4"><strong class="text-red-800">Please fix the following errors:</strong></div>';
                
                Object.keys(tabErrors).forEach(tabName => {
                    errorHtml += `<div class="mb-3 p-3 bg-red-100 rounded-lg border-l-4 border-red-500">`;
                    errorHtml += `<strong class="text-red-800">${tabName} Tab:</strong>`;
                    errorHtml += '<ul class="mt-2 space-y-1">';
                    
                    tabErrors[tabName].forEach(error => {
                        if (Array.isArray(error.messages)) {
                            error.messages.forEach(message => {
                                errorHtml += `<li class="text-sm text-red-700">• ${error.field}: ${message}</li>`;
                            });
                        } else {
                            errorHtml += `<li class="text-sm text-red-700">• ${error.field}: ${error.messages}</li>`;
                        }
                    });
                    
                    errorHtml += '</ul></div>';
                });
            }
            
            // Show other errors
            if (Object.keys(otherErrors).length > 0) {
                errorHtml += '<div class="mb-3 p-3 bg-red-100 rounded-lg border-l-4 border-red-500">';
                errorHtml += '<strong class="text-red-800">Other Errors:</strong>';
                errorHtml += '<ul class="mt-2 space-y-1">';
                
                Object.keys(otherErrors).forEach(field => {
                    if (Array.isArray(otherErrors[field])) {
                        otherErrors[field].forEach(message => {
                            errorHtml += `<li class="text-sm text-red-700">• ${field}: ${message}</li>`;
                        });
                    } else {
                        errorHtml += `<li class="text-sm text-red-700">• ${field}: ${otherErrors[field]}</li>`;
                    }
                });
                
                errorHtml += '</ul></div>';
            }
            
            // If no tab grouping, show simple list
            if (errorHtml === '') {
                if (typeof errors === 'string') {
                    errorHtml = `<p class="text-sm text-red-700">${errors}</p>`;
                } else if (typeof errors === 'object') {
                    errorHtml = '<ul class="list-disc list-inside space-y-1">';
                    for (const [field, messages] of Object.entries(errors)) {
                        if (Array.isArray(messages)) {
                            messages.forEach(message => {
                                errorHtml += `<li class="text-sm text-red-700"><strong>${field}:</strong> ${message}</li>`;
                            });
                        } else {
                            errorHtml += `<li class="text-sm text-red-700"><strong>${field}:</strong> ${messages}</li>`;
                        }
                    }
                    errorHtml += '</ul>';
                }
            }
            
            errorMessages.innerHTML = errorHtml;
            errorContainer.classList.remove('hidden');
            
            // Scroll to top to show errors
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        // Show success message
        function showSuccess() {
            const successContainer = document.getElementById('success-container');
            successContainer.classList.remove('hidden');
            
            // Scroll to top to show success message
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        // Handle form submission with AJAX
        function handleFormSubmit(e) {
            e.preventDefault();
            
            const form = e.target;
            
            try {
                const submitBtn = document.getElementById('submitBtn');
                const originalBtnText = submitBtn.innerHTML;
                const formData = new FormData(form);
                
                // Hide previous messages
                hideErrors();
                document.getElementById('success-container').classList.add('hidden');
                
                // Show loading state
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Creating...';
                submitBtn.disabled = true;
                
                // Submit form via AJAX
                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => {
                    console.log('Response status:', response.status);
                    console.log('Response headers:', response.headers);
                    
                    if (response.ok) {
                        return response.json().then(data => {
                            console.log('Success data:', data);
                            return data;
                        }).catch(jsonError => {
                            console.log('JSON parse error, trying text:', jsonError);
                            return response.text().then(text => {
                                console.log('Response text:', text);
                                // If it's not JSON, it might be a redirect
                                if (text.includes('<!DOCTYPE html') || text.includes('<html')) {
                                    return { success: true, redirect: form.action.replace('/store', '') };
                                }
                                throw new Error('Invalid response format');
                            });
                        });
                    } else if (response.status === 422) {
                        // Validation errors
                        return response.json().then(data => {
                            console.log('Validation errors:', data);
                            throw { type: 'validation', errors: data.errors || data.message || data };
                        }).catch(jsonError => {
                            console.log('Validation error parse failed:', jsonError);
                            return response.text().then(text => {
                                throw { type: 'validation', errors: { general: [text] } };
                            });
                        });
                    } else {
                        // Other server errors
                        return response.text().then(text => {
                            console.log('Server error:', text);
                            throw { type: 'server', message: `Server error (${response.status}): ${text}` };
                        });
                    }
                })
                .then(data => {
                    // Success
                    console.log('Submission successful:', data);
                    showSuccess();
                    clearFormData();
                    
                    // Show success message briefly before redirect
                    submitBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Success!';
                    submitBtn.classList.add('bg-green-600', 'hover:bg-green-700');
                    submitBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
                    
                    // Redirect after delay
                    setTimeout(() => {
                        window.location.href = data.redirect || '{{ route("admin.clients") }}';
                    }, 1500);
                })
                .catch(error => {
                    console.error('Submission error:', error);
                    
                    // Restore button state
                    submitBtn.innerHTML = originalBtnText;
                    submitBtn.disabled = false;
                    submitBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
                    submitBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
                    
                    // Try to display error
                    let errorMessage = 'Unknown error occurred. Please try again.';
                    
                    if (error.type === 'validation') {
                        errorMessage = error.errors;
                        showErrors(error.errors);
                        highlightErrorFields(error.errors);
                    } else if (error.type === 'server') {
                        errorMessage = error.message;
                        showErrors(error.message);
                    } else if (error.errors) {
                        errorMessage = error.errors;
                        showErrors(error.errors);
                    } else if (error.message) {
                        errorMessage = error.message;
                        showErrors(error.message);
                    } else {
                        showErrors(errorMessage);
                    }
                    
                    // Scroll to top to show errors
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                });
                
            } catch (error) {
                console.error('Error in form submission:', error);
                
                // Restore button state
                const submitBtn = document.getElementById('submitBtn');
                const originalBtnText = session('agent_client_data') ? 
                    '<i class="fas fa-save mr-2"></i> Approve & Create Client' : 
                    '<i class="fas fa-save mr-2"></i> Create Client';
                
                submitBtn.innerHTML = originalBtnText;
                submitBtn.disabled = false;
                submitBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
                submitBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
                
                // Show generic error
                showErrors('An unexpected error occurred. Please try again.');
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        }
        
        // Highlight fields with validation errors
        function highlightErrorFields(errors) {
            // Remove previous error highlights
            document.querySelectorAll('.border-red-500').forEach(el => {
                el.classList.remove('border-red-500');
                el.classList.add('border-gray-200');
            });
            
            // Remove previous tab error indicators
            document.querySelectorAll('.tab-error-indicator').forEach(el => {
                el.remove();
            });
            
            // Track which tabs have errors
            const tabsWithErrors = new Set();
            
            // Add error highlights to invalid fields
            Object.keys(errors).forEach(fieldName => {
                const input = document.querySelector(`[name="${fieldName}"]`);
                if (input) {
                    input.classList.remove('border-gray-200');
                    input.classList.add('border-red-500');
                    
                    // Find which tab contains this field
                    const tabContent = input.closest('.tab-content');
                    if (tabContent) {
                        const tabId = tabContent.id.replace('-content', '');
                        tabsWithErrors.add(tabId);
                    }
                }
            });
            
            // Add error indicators to tabs with errors
            tabsWithErrors.forEach(tabId => {
                const tabButton = document.getElementById(tabId + '-tab');
                if (tabButton) {
                    const errorIndicator = document.createElement('span');
                    errorIndicator.className = 'tab-error-indicator absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full';
                    errorIndicator.title = 'This tab has errors';
                    tabButton.appendChild(errorIndicator);
                }
            });
            
            // Switch to first tab with errors
            if (tabsWithErrors.size > 0) {
                const firstTabWithError = Array.from(tabsWithErrors)[0];
                setTimeout(() => {
                    showTab(firstTabWithError);
                }, 200);
            }
        }

        // Add loading animation on form submit
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('clientForm');
            
            // Add date of birth validation
            const dateOfBirthField = document.getElementById('date_of_birth');
            if (dateOfBirthField) {
                // Set max date to today
                const today = new Date().toISOString().split('T')[0];
                dateOfBirthField.setAttribute('max', today);
                
                // Add validation on change
                dateOfBirthField.addEventListener('change', function() {
                    const selectedDate = new Date(this.value);
                    const today = new Date();
                    today.setHours(0, 0, 0, 0); // Set to start of day for fair comparison
                    
                    if (selectedDate > today) {
                        this.setCustomValidity('Date of birth cannot be in the future');
                        this.classList.add('border-red-500');
                        this.classList.remove('border-gray-200');
                        
                        // Show error message
                        let errorMsg = this.parentNode.querySelector('.date-error');
                        if (!errorMsg) {
                            errorMsg = document.createElement('p');
                            errorMsg.className = 'date-error text-xs text-red-500 mt-1';
                            this.parentNode.appendChild(errorMsg);
                        }
                        errorMsg.textContent = 'Date of birth cannot be in the future';
                    } else {
                        this.setCustomValidity('');
                        this.classList.remove('border-red-500');
                        this.classList.add('border-gray-200');
                        
                        // Remove error message
                        let errorMsg = this.parentNode.querySelector('.date-error');
                        if (errorMsg) {
                            errorMsg.remove();
                        }
                    }
                });
            }
            
            // Initialize form submission handler
            if (form) {
                // Remove any existing event listeners to prevent duplicates
                form.removeEventListener('submit', handleFormSubmit);
                // Add fresh event listener
                form.addEventListener('submit', handleFormSubmit);
                
                console.log('Form submission handler attached');
            }
            
            // Initialize first tab
            showTab('personal');
            updateButtonStates('personal');
        });
        
        // Re-initialize form handler if needed
        function reinitializeFormHandler() {
            const form = document.getElementById('clientForm');
            if (form) {
                form.removeEventListener('submit', handleFormSubmit);
                form.addEventListener('submit', handleFormSubmit);
                console.log('Form handler reinitialized');
            }
        }
        
        // Debug function to test form submission
        window.testFormSubmission = function() {
            const form = document.getElementById('clientForm');
            const submitBtn = document.getElementById('submitBtn');
            
            console.log('Form:', form);
            console.log('Submit button:', submitBtn);
            console.log('Form action:', form?.action);
            console.log('Button disabled:', submitBtn?.disabled);
            
            if (form && submitBtn && !submitBtn.disabled) {
                console.log('Triggering form submission...');
                submitBtn.click();
            } else {
                console.error('Form or button not ready');
            }
        }
        
        // Reset form to initial state
        window.resetForm = function() {
            const form = document.getElementById('clientForm');
            const submitBtn = document.getElementById('submitBtn');
            
            if (form) {
                form.reset();
                clearFormData();
                
                // Reset button state
                const originalBtnText = session('agent_client_data') ? 
                    '<i class="fas fa-save mr-2"></i> Approve & Create Client' : 
                    '<i class="fas fa-save mr-2"></i> Create Client';
                
                submitBtn.innerHTML = originalBtnText;
                submitBtn.disabled = false;
                submitBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
                submitBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
                
                // Hide messages
                hideErrors();
                document.getElementById('success-container').classList.add('hidden');
                
                // Reset to first tab
                showTab('personal');
                updateButtonStates('personal');
                
                console.log('Form reset complete');
            }
        }

    // Setup admin client create address merging
    document.addEventListener('DOMContentLoaded', function() {
        setupAdminClientCreateAddressMerging();
    });

    function setupAdminClientCreateAddressMerging() {
        const container = document.querySelector('.admin-client-create-address-container');
        if (!container) return;

        const fields = container.querySelectorAll('input');
        const mergedField = container.querySelector('.admin-client-create-merged');

        fields.forEach(field => {
            field.addEventListener('input', () => mergeAdminClientCreateAddress());
            field.addEventListener('change', () => mergeAdminClientCreateAddress());
            field.addEventListener('blur', () => mergeAdminClientCreateAddress());
        });

        mergeAdminClientCreateAddress();
    }

    function mergeAdminClientCreateAddress() {
        const line1 = document.querySelector('.admin-client-create-addr-1')?.value || '';
        const line2 = document.querySelector('.admin-client-create-addr-2')?.value || '';
        const city = document.querySelector('.admin-client-create-city')?.value || '';
        const state = document.querySelector('.admin-client-create-state')?.value || '';
        const postal = document.querySelector('.admin-client-create-postal')?.value || '';
        const country = document.querySelector('.admin-client-create-country')?.value || '';

        const parts = [];
        if (line1) parts.push(line1);
        if (line2) parts.push(line2);
        if (city) parts.push(city);
        if (state) parts.push(state);
        if (postal) parts.push(postal);
        if (country) parts.push(country);

        const mergedAddress = parts.join(', ');
        const mergedField = document.querySelector('.admin-client-create-merged');
        if (mergedField) {
            mergedField.value = mergedAddress;
        }
    }

    </script>
@endsection